Authenticator test templates for each usernameAlias

app-email.js

<AmplifyAuthContainer>
  <AmplifyAuthenticator usernameAlias="email">
    <AmplifySignIn
      slot="sign-in"
      headerText="My Custom Sign In"
      usernameAlias="email"
      formFields={[
        {
          type: 'email',
          label: 'Custom Email Label',
          placeholder: 'custom email placeholder',
          inputProps: { required: true, autocomplete: 'username' },
        },
        {
          type: 'password',
          label: 'Custom Password Label',
          placeholder: 'custom password placeholder',
          inputProps: { required: true, autocomplete: 'current-password' },
        },
      ]}
    >
      <div slot="header-subtitle">Subtitle with nested slot</div>
    </AmplifySignIn>
    <AmplifySignUp
      slot="sign-up"
      headerText="My Custom Sign Up"
      usernameAlias="email" // this shouldn't be necessary...
      formFields={[
        {
          type: 'email',
          label: 'Custom Email Label',
          placeholder: 'custom email placeholder',
          inputProps: { required: true, autocomplete: 'username' },
        },
        {
          type: 'password',
          label: 'Custom Password Label',
          placeholder: 'Custom password placeholder',
          inputProps: { required: true, autocomplete: 'new-password' },
        },
        {
          type: 'phone_number',
          label: 'Custom Phone Label',
          placeholder: 'custom Phone placeholder',
          inputProps: { required: true },
        },
      ]}
    >
      <div slot="header-subtitle">Subtitle with nested slot</div>
    </AmplifySignUp>
    <AmplifyConfirmSignUp
      headerText="My Custom Confirm Sign Up"
      slot="confirm-sign-up"
      user={user}
      usernameAlias="email"
      formFields={[
        {
          type: 'email',
          label: 'Custom Email Label',
          placeholder: 'custom email placeholder',
          inputProps: { required: true },
          value: user?.username,
          disabled: user?.username,
        },
        {
          type: 'code',
          label: 'Custom Confirmation code',
          placeholder: 'Custom Confirmation Code',
          inputProps: { required: true },
        },
      ]}
    >
      <div slot="header-subtitle">Subtitle with nested slot</div>
    </AmplifyConfirmSignUp>
  </AmplifyAuthenticator>
</AmplifyAuthContainer>

app-phone-number.js

<AmplifyAuthContainer>
  <AmplifyAuthenticator usernameAlias="phone_number">
    <AmplifySignIn
      slot="sign-in"
      headerText="My Custom Sign In"
      usernameAlias="phone_number"
      formFields={[
        {
          type: 'phone_number',
          label: 'Custom Phone Label',
          placeholder: 'Custom Phone Number Placeholder',
          inputProps: { required: true, autocomplete: 'username' },
        },
        {
          type: 'password',
          label: 'Custom Password Label',
          placeholder: 'custom password placeholder',
          inputProps: { required: true, autocomplete: 'current-password' },
        },
      ]}
    >
      <div slot="header-subtitle">Subtitle with nested slot</div>
    </AmplifySignIn>

    <AmplifySignUp
      slot="sign-up"
      headerText="My Custom Sign Up"
      usernameAlias="phone_number" // this shouldn't be necessary...
      formFields={[
        {
          type: 'phone_number',
          label: 'Custom Phone Label',
          placeholder: 'Custom Phone Number Placeholder',
          inputProps: { required: true, autocomplete: 'username' },
        },
        {
          type: 'password',
          label: 'Custom Password Label',
          placeholder: 'Custom password placeholder',
          inputProps: { required: true, autocomplete: 'new-password' },
        },
        {
          type: 'email',
          label: 'Custom Email Label',
          placeholder: 'Custom Email Number Placeholder',
          inputProps: { required: true, autocomplete: 'email' },
        },
      ]}
    >
      <div slot="header-subtitle">Subtitle with nested slot</div>
    </AmplifySignUp>

    <AmplifyConfirmSignUp
      headerText="My Custom Confirm Sign Up"
      slot="confirm-sign-up"
      user={user}
      usernameAlias="phone_number"
      formFields={[
        {
          type: 'phone_number',
          label: 'Custom Phone Label',
          placeholder: 'Custom Phone Number Placeholder',
          inputProps: { required: true },
          value: user?.username,
          disabled: user?.username,
        },
        {
          type: 'code',
          label: 'Custom Confirmation code',
          placeholder: 'Custom Confirmation Code',
          inputProps: { required: true },
        },
      ]}
    >
      <div slot="header-subtitle">Subtitle with nested slot</div>
    </AmplifyConfirmSignUp>
  </AmplifyAuthenticator>
</AmplifyAuthContainer>

app-username.js

<AmplifyAuthContainer>
  <AmplifyAuthenticator>
    <AmplifySignIn
      slot="sign-in"
      headerText="My Custom Sign In"
      formFields={[
        {
          type: 'username',
          label: 'Custom Username',
          placeholder: 'Custom Username Placeholder',
          inputProps: { required: true, autocomplete: 'username' },
        },
        {
          type: 'password',
          label: 'Custom Password Label',
          placeholder: 'custom password placeholder',
          inputProps: { required: true, autocomplete: 'current-password' },
        },
      ]}
    >
      <div slot="header-subtitle">Subtitle with nested slot</div>
    </AmplifySignIn>

    <AmplifySignUp
      slot="sign-up"
      headerText="My Custom Sign Up"
      formFields={[
        {
          type: 'username',
          label: 'Custom Username',
          placeholder: 'Custom Username Placeholder',
          inputProps: { required: true, autocomplete: 'username' },
        },
        {
          type: 'password',
          label: 'Custom Password Label',
          placeholder: 'Custom password placeholder',
          inputProps: { required: true, autocomplete: 'new-password' },
        },
        {
          type: 'email',
          label: 'Custom Email Label',
          placeholder: 'Custom Email Number Placeholder',
          inputProps: { required: true, autocomplete: 'email' },
        },
      ]}
    >
      <div slot="header-subtitle">Subtitle with nested slot</div>
    </AmplifySignUp>

    <AmplifyConfirmSignUp
      headerText="My Custom Confirm Sign Up"
      slot="confirm-sign-up"
      user={user}
      formFields={[
        {
          type: 'username',
          label: 'Custom Username',
          placeholder: 'Custom Username Placeholder',
          inputProps: { required: true, autocomplete: 'username' },
          value: user?.username,
          disabled: user?.username,
        },
        {
          type: 'code',
          label: 'Custom Confirmation code',
          placeholder: 'Custom Confirmation Code',
          inputProps: { required: true },
        },
      ]}
    >
      <div slot="header-subtitle">Subtitle with nested slot</div>
    </AmplifyConfirmSignUp>
  </AmplifyAuthenticator>
</AmplifyAuthContainer>