[UI Component] "Username cannot be empty" message when usernameAlias is set to "email"

Describe the bug In the UI Component, when the usernameAlias is set to “email”, and when the user doesn’t fill the email field, the message thrown is “Username cannot be empty”.

To Reproduce Steps to reproduce the behavior:

1. Set the username-alias property on amplify-authenticator to "email"
2. Switch to Signup tab on the rendered form
3. Do not fill in the email address
4. Click Create Account button
5. The error message will be “Username cannot be empty”

Expected behavior The error message should be “Email address cannot be empty”.

Code Snippet <amplify-authenticator username-alias="email"></amplify-authenticator>

Environment

  System:
    OS: macOS 10.15.4
    CPU: (4) x64 Intel(R) Core(TM) i5-8210Y CPU @ 1.60GHz
    Memory: 41.42 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.4.0 - ~/.nvm/versions/node/v12.4.0/bin/node
    npm: 6.14.2 - ~/.nvm/versions/node/v12.4.0/bin/npm
  Browsers:
    Chrome: 81.0.4044.129
    Safari: 13.1
  npmPackages:
    @aws-amplify/auth: ^3.2.6 => 3.2.6 
    @aws-amplify/core: ^3.2.6 => 3.2.6 
    @aws-amplify/pubsub: ^3.0.10 => 3.0.10 
    @aws-amplify/ui-vue: ^0.2.4 => 0.2.4 
    @aws-amplify/xr: ^2.1.9 => 2.1.9 
    @johmun/vue-tags-input: ^2.1.0 => 2.1.0 
    @vue/cli-plugin-babel: ^4.3.1 => 4.3.1 
    @vue/cli-plugin-eslint: ^4.3.1 => 4.3.1 
    @vue/cli-service: ^4.3.1 => 4.3.1 
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0 
    apexcharts: ^3.19.0 => 3.19.0 
    apollo-client: ^2.6.8 => 2.6.8 
    apollo-link: ^1.2.14 => 1.2.14 
    aws-amplify: ^3.0.10 => 3.0.10 
    babel-eslint: ^10.1.0 => 10.1.0 
    babel-polyfill: ^6.26.0 => 6.26.0 
    bootstrap: ^4.4.1 => 4.4.1 
    bootstrap-vue: ^2.13.0 => 2.13.0 
    chart.js: ^2.9.3 => 2.9.3 
    copy-webpack-plugin: ^5.1.1 => 5.1.1 
    core-js: ^3.6.4 => 3.6.5 
    echarts: ^4.7.0 => 4.7.0 
    es6-promise: ^4.2.8 => 4.2.8 
    eslint: ^6.8.0 => 6.8.0 
    eslint-plugin-prettier: ^3.1.3 => 3.1.3 
    eslint-plugin-vue: ^6.2.2 => 6.2.2 
    firebase: ^7.14.2 => 7.14.2 
    font-awesome: ^4.7.0 => 4.7.0 
    graphql: ^14.6.0 => 14.6.0 
    graphql-tag: ^2.10.3 => 2.10.3 
    jquery: ^3.5.0 => 3.5.0 
    mobile-device-detect: ^0.3.3 => 0.3.3 
    node-sass: ^4.14.0 => 4.14.0 
    nprogress: ^0.2.0 => 0.2.0 
    sass-loader: ^8.0.2 => 8.0.2 
    secure-ls: ^1.2.6 => 1.2.6 
    v-calendar: ^1.0.6 => 1.0.6 
    v2-datepicker: ^3.1.1 => 3.1.1 
    vue: ^2.6.11 => 2.6.11 
    vue-apexcharts: ^1.5.3 => 1.5.3 
    vue-apollo: ^3.0.3 => 3.0.3 
    vue-chartjs: ^3.5.0 => 3.5.0 
    vue-clickaway: ^2.2.2 => 2.2.2 
    vue-clipboard2: ^0.3.1 => 0.3.1 
    vue-cropperjs: ^4.0.1 => 4.1.0 
    vue-echarts: ^5.0.0-beta.0 => 5.0.0-beta.0 
    vue-flag-icon: ^1.0.6 => 1.0.6 
    vue-fontawesome-icon: ^1.3.0 => 1.3.0 
    vue-form-wizard: ^0.8.4 => 0.8.4 
    vue-good-table: ^2.19.1 => 2.19.1 
    vue-i18n: ^8.17.4 => 8.17.4 
    vue-jstree: ^2.1.6 => 2.1.6 
    vue-lazyload: ^1.3.3 => 1.3.3 
    vue-loader: ^15.9.1 => 15.9.1 
    vue-meta: ^2.3.3 => 2.3.3 
    vue-perfect-scrollbar: ^0.2.0 => 0.2.1 
    vue-router: ^3.1.6 => 3.1.6 
    vue-simple-calendar: ^4.3.2 => 4.3.2 
    vue-slider-component: ^3.1.1 => 3.1.2 
    vue-star-rating: ^1.6.1 => 1.6.1 
    vue-sweetalert2: ^3.0.3 => 3.0.3 
    vue-template-compiler: ^2.6.11 => 2.6.11 
    vue-the-mask: ^0.11.1 => 0.11.1 
    vue-tour: ^1.3.0 => 1.3.0 
    vue2-daterange-picker: ^0.4.6 => 0.4.6 
    vue2-editor: ^2.10.2 => 2.10.2 
    vuedraggable: ^2.23.2 => 2.23.2 
    vuejs-smart-table: 0.0.5 => 0.0.5 
    vuelidate: ^0.7.5 => 0.7.5 
    vuetable-2: ^1.7.5 => 1.7.5 
    vuex: ^3.3.0 => 3.3.0 
    vuex-persistedstate: ^3.0.1 => 3.0.1 
  npmGlobalPackages:
    npm: 6.14.2

[oliverschenk]

The only workaround that I’ve come up with is to use the Translator i18n module to override the string. Not ideal but best I got.

main.ts

import { I18n } from "aws-amplify";
import { Translations } from "@aws-amplify/ui-components";

...

I18n.setLanguage("en");
I18n.putVocabulariesForLanguage("en", {
  [Translations.EMPTY_USERNAME]: "A valid email address must be provided"
});

[eddiekeller]

Identified the issue in the sign in and sign up components and have a fix coming soon