Amplify-js: required field attribute is not properly implemented in Vue SignUp component

[lucasmike]

Describe the bug
When the user object is created with new values to sign up a new user, values for all default attributes are assigned to the object even if some of the attributes have a required property set to false and no input was provided in the form.

This means that it is impossible to sign up new users unless all default fields are filled in. This is causing an issue when you don't want to collect mobile phone numbers. If you set a mobile phone number required to false, and the user leaves this field blank in the registration form, the code will still try to submit an invalid phone number to Cognito.

To Reproduce
Steps to reproduce the behavior:

1. Set required for phone number to false
2. Try to register a new user without providing a phone number

Expected behavior
When required: false for a phone number, this field should not be submitted to Cognito when creating a new user

Screenshots
The issue is with the following code:

      this.options.signUpFields.forEach((e) => {
        if (e.key === 'username') {
          user.username = e.value
        } else if (e.key === 'password') {
          user.password = e.value
        } else if (e.key === 'phone_number') {
          user.attributes.phone_number = `+${this.countryCode}${e.value}`
        } else {
          user.attributes[e.key] = e.value;
        };
      })

The code above assign user.attributes.phone_number =+${this.countryCode}${e.value}`regardless of therequired flag` so when no phone number is provided, an invalid value for this field is submitted to Cognito

[lucasmike]

thanks for looking into this @haverchuck
The whole Amplify and Vue components in particular are great! I wish I knew about this library earlier! You guys have done fantastic job.

I was trying to use B2C from Azure in an SPA and can't work this out. Amplify is very clear and simple compared to Azure libraries. Well done!

[jbouse]

The PR on this looks like a clean and elegant solution to the problem. Hopefully it can get merged and released so I can actually make use of the components in my project.

[haverchuck]

@jbouse @lucasmike - Thanks for your comments. The PR is currently merged into our unstable branch. It can be installed via npm install aws-amplify-vue@unstable. Look for it to make it's way into the main release branch soon.