fix(routes): mark login and sign up fields required

This does nothing to the form validation functionality (we still will use `@conform-to` client and server-side) but it ensures that the `aria-required` attributes are set correctly. When not using JS client-side, this results in a slightly better experience as the user's browser will do some client-side validation for us before our server performs validation.
nicholaschiang · Jul 23, 2023 · 557649f · 557649f
1 parent 1fd7d8d
commit 557649f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/app/routes/_layout.join.tsx b/app/routes/_layout.join.tsx
@@ -148,7 +148,7 @@ export default function Join() {
             {name.error && <FormMessage>{name.error}</FormMessage>}
           </FormLabelWrapper>
           <FormControl asChild>
-            <Input placeholder='Anna Wintour' />
+            <Input placeholder='Anna Wintour' required />
           </FormControl>
         </FormField>
         <FormField name={username.name}>
@@ -157,7 +157,7 @@ export default function Join() {
             {username.error && <FormMessage>{username.error}</FormMessage>}
           </FormLabelWrapper>
           <FormControl asChild>
-            <Input placeholder='anna.wintour' />
+            <Input placeholder='anna.wintour' required />
           </FormControl>
         </FormField>
         <FormField name={email.name}>
@@ -166,7 +166,7 @@ export default function Join() {
             {email.error && <FormMessage>{email.error}</FormMessage>}
           </FormLabelWrapper>
           <FormControl asChild>
-            <Input type='email' placeholder='anna@vogue.com' />
+            <Input type='email' placeholder='anna@vogue.com' required />
           </FormControl>
         </FormField>
         <FormField name={password.name}>
@@ -175,7 +175,7 @@ export default function Join() {
             {password.error && <FormMessage>{password.error}</FormMessage>}
           </FormLabelWrapper>
           <FormControl asChild>
-            <Input type='password' placeholder='••••••••' />
+            <Input type='password' placeholder='••••••••' required />
           </FormControl>
         </FormField>
         <FormSubmit asChild>

diff --git a/app/routes/_layout.login.tsx b/app/routes/_layout.login.tsx
@@ -111,7 +111,7 @@ export default function LoginPage() {
             {email.error && <FormMessage>{email.error}</FormMessage>}
           </FormLabelWrapper>
           <FormControl asChild>
-            <Input type='email' placeholder='anna@vogue.com' />
+            <Input type='email' placeholder='anna@vogue.com' required />
           </FormControl>
         </FormField>
         <FormField name={password.name}>
@@ -120,7 +120,7 @@ export default function LoginPage() {
             {password.error && <FormMessage>{password.error}</FormMessage>}
           </FormLabelWrapper>
           <FormControl asChild>
-            <Input type='password' placeholder='••••••••' />
+            <Input type='password' placeholder='••••••••' required />
           </FormControl>
         </FormField>
         <FormSubmit asChild>