Update inputes to be selected when label clicked (#142)

supabase-community · Mar 1, 2023 · e1fa4ee · e1fa4ee
1 parent 32d5d0e
commit e1fa4ee
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 3 deletions.
diff --git a/.changeset/polite-mirrors-guess.md b/.changeset/polite-mirrors-guess.md
@@ -0,0 +1,6 @@
+---
+'@supabase/auth-ui-react': patch
+'@supabase/auth-ui-svelte': patch
+---
+
+Update forms to select input when label is pressed
diff --git a/packages/react/src/components/Auth/interfaces/EmailAuth.tsx b/packages/react/src/components/Auth/interfaces/EmailAuth.tsx
@@ -152,6 +152,7 @@ function EmailAuth({
               {labels?.email_label}
             </Label>
             <Input
+              id="email"
               type="email"
               name="email"
               placeholder={labels?.email_input_placeholder}
@@ -168,6 +169,7 @@ function EmailAuth({
               {labels?.password_label}
             </Label>
             <Input
+              id="password"
               type="password"
               name="password"
               placeholder={labels?.password_input_placeholder}

diff --git a/packages/react/src/components/Auth/interfaces/ForgottenPassword.tsx b/packages/react/src/components/Auth/interfaces/ForgottenPassword.tsx
@@ -87,6 +87,7 @@ function ForgottenPassword({
               {labels?.email_label}
             </Label>
             <Input
+              id="email"
               name="email"
               type="email"
               placeholder={labels?.email_input_placeholder}

diff --git a/packages/react/src/components/Auth/interfaces/MagicLink.tsx b/packages/react/src/components/Auth/interfaces/MagicLink.tsx
@@ -84,8 +84,11 @@ function MagicLink({
       <Container gap="large" direction="vertical" appearance={appearance}>
         <Container gap="large" direction="vertical" appearance={appearance}>
           <div>
-            <Label appearance={appearance}>{labels?.email_input_label}</Label>
+            <Label htmlFor="email" appearance={appearance}>
+              {labels?.email_input_label}
+            </Label>
             <Input
+              id="email"
               name="email"
               type="email"
               placeholder={labels?.email_input_placeholder}

diff --git a/packages/react/src/components/Auth/interfaces/UpdatePassword.tsx b/packages/react/src/components/Auth/interfaces/UpdatePassword.tsx
@@ -74,6 +74,7 @@ function UpdatePassword({
               {labels?.password_label}
             </Label>
             <Input
+              id="password"
               name="password"
               placeholder={labels?.password_label}
               type="password"

diff --git a/packages/svelte/src/lib/Auth/interfaces/EmailAuth.svelte b/packages/svelte/src/lib/Auth/interfaces/EmailAuth.svelte
@@ -62,13 +62,23 @@
 		<Container direction="vertical" gap="large" {appearance}>
 			<div>
 				<Label for="email" {appearance}>{i18n?.[$authView]?.email_label}</Label>
-				<Input type="email" name="email" bind:value={email} autocomplete="email" {appearance} />
+				<Input
+					id="email"
+					type="email"
+					name="email"
+					placeholder={i18n?.[$authView]?.email_input_placeholder}
+					bind:value={email}
+					autocomplete="email"
+					{appearance}
+				/>
 			</div>
 			<div>
 				<Label for="password" {appearance}>{i18n?.[$authView]?.password_label}</Label>
 				<Input
+					id="password"
 					type="password"
 					name="password"
+					placeholder={i18n?.[$authView]?.password_input_placeholder}
 					bind:value={password}
 					autocomplete={$authView === VIEWS.SIGN_IN ? 'current-password' : 'new-password'}
 					{appearance}

diff --git a/packages/svelte/src/lib/Auth/interfaces/ForgottenPassword.svelte b/packages/svelte/src/lib/Auth/interfaces/ForgottenPassword.svelte
@@ -40,7 +40,15 @@
 		<Container direction="vertical" gap="large" {appearance}>
 			<div>
 				<Label for="email" {appearance}>{i18n?.forgotten_password?.email_label}</Label>
-				<Input type="email" name="email" bind:value={email} autocomplete="email" {appearance} />
+				<Input
+					id="email"
+					type="email"
+					name="email"
+					placeholder={i18n?.forgotten_password?.email_input_placeholder}
+					bind:value={email}
+					autocomplete="email"
+					{appearance}
+				/>
 			</div>
 			<Button type="submit" color="primary" {loading} {appearance}>
 				{i18n?.forgotten_password?.button_label}

diff --git a/packages/svelte/src/lib/Auth/interfaces/MagicLink.svelte b/packages/svelte/src/lib/Auth/interfaces/MagicLink.svelte
@@ -44,6 +44,7 @@
 			<div>
 				<Label for="email" {appearance}>{i18n?.magic_link?.email_input_label}</Label>
 				<Input
+					id="email"
 					type="email"
 					name="email"
 					placeholder={i18n?.magic_link?.email_input_placeholder}

diff --git a/packages/svelte/src/lib/Auth/interfaces/UpdatePassword.svelte b/packages/svelte/src/lib/Auth/interfaces/UpdatePassword.svelte
@@ -43,6 +43,7 @@
 					{i18n?.update_password?.password_label}
 				</Label>
 				<Input
+					id="email"
 					type="email"
 					placeholder={i18n?.update_password?.password_label}
 					name="email"