supabase-community / auth-ui

Pre-built Auth UI for React
https://supabase.com/docs/guides/auth/auth-helpers/auth-ui
MIT License
478 stars 120 forks source link

Input placeholder variants for Sign In and Sign Up #164

Closed babyPrince closed 9 months ago

babyPrince commented 1 year ago

Bug report

Input placeholder variants for Sign In and Sign Up.

Describe the bug

Recently launched a website using the AuthUi component. Getting a lot of feedback from users regarding the language of input fields. Currently both Sign In and Sign Up look identical and users get lost, unable to distinguish the two.

Expected behavior

Maybe a prop based custom message for each version can be added? Something similar:

<Auth
  ...
  placeholderSignInPassword="Your Password"
  placeholderSignUpPassword="Create Password"
/>

or any other way to access the inputs

edit: this should be an enhancement suggestion but can't figure out how to mark as one

silentworks commented 1 year ago

I need to document these features out a bit more but you can do this already by overriding the existing i18n text.

<Auth
  ...
  localization={{
    variables: {
      sign_up: {
        password_input_placeholder: "Create password",
      },
    },
  }}
/>

I didn't add the one for the sign in placeholder in the example as what you have in your example above is that's just the default.

babyPrince commented 1 year ago

@silentworks this is great! Thanks a lot!