Skip to content

Commit b5f146c

Browse files
dawsontothdawsontoth
committed
feat: Consistent auth placeholders and focus
https://harperdb.atlassian.net/browse/STUDIO-437
1 parent f02102d commit b5f146c

File tree

9 files changed

+112
-61
lines changed

9 files changed

+112
-61
lines changed

‎src/features/auth/ClusterInstanceSignIn.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { queryKeys } from '@/react-query/constants';
2121
import { zodResolver } from '@hookform/resolvers/zod';
2222
import { useQuery, useQueryClient } from '@tanstack/react-query';
2323
import { Navigate, useNavigate, useParams, useRouter, useSearch } from '@tanstack/react-router';
24-
import { useCallback, useMemo } from 'react';
24+
import { useCallback, useEffect, useMemo } from 'react';
2525
import { useForm } from 'react-hook-form';
2626
import { toast } from 'sonner';
2727
import { z } from 'zod';
@@ -57,13 +57,18 @@ export function ClusterInstanceSignIn() {
5757
[operationsUrl],
5858
);
5959

60-
const form = useForm({
60+
const methods = useForm({
6161
resolver: zodResolver(SignInSchema),
6262
defaultValues: {
6363
username: '',
6464
password: '',
6565
},
6666
});
67+
const { setFocus, control, handleSubmit } = methods;
68+
69+
useEffect(() => {
70+
setFocus('username');
71+
}, [setFocus]);
6772

6873
const { mutate: submitInstanceLogin, isPending } = useInstanceLoginMutation();
6974

@@ -115,10 +120,10 @@ export function ClusterInstanceSignIn() {
115120
<div className="text-white w-xs">
116121
<h2 className="text-2xl font-light">
117122
Sign in to Harper {noun}</h2>
118-
<Form {...form}>
119-
<form onSubmit={form.handleSubmit(submitForm)} className="my-4">
123+
<Form {...methods}>
124+
<form onSubmit={handleSubmit(submitForm)} className="my-4">
120125
<FormField
121-
control={form.control}
126+
control={control}
122127
name="username"
123128
render={({ field }) => (
124129
<FormItem className="my-4">
@@ -127,7 +132,6 @@ export function ClusterInstanceSignIn() {
127132
<Input
128133
autoComplete="username"
129134
type="text"
130-
placeholder="harpersys"
131135
{...field}
132136
/>
133137
</FormControl>
@@ -136,15 +140,14 @@ export function ClusterInstanceSignIn() {
136140
)}
137141
/>
138142
<FormField
139-
control={form.control}
143+
control={control}
140144
name="password"
141145
render={({ field }) => (
142146
<FormItem className="my-4">
143147
<FormLabel>Password</FormLabel>
144148
<FormControl>
145149
<Input
146150
type="password"
147-
placeholder="password"
148151
{...field}
149152
/>
150153
</FormControl>

‎src/features/auth/ForgotPassword.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { FormMessage } from '@/components/ui/form/FormMessage';
77
import { zodRequireEmail } from '@/lib/zod/email';
88
import { Link, useNavigate } from '@tanstack/react-router';
99
import { useForgotPasswordMutation } from '@/features/auth/hooks/useForgotPassword';
10+
import { useEffect } from 'react';
1011
import { useForm } from 'react-hook-form';
1112
import { zodResolver } from '@hookform/resolvers/zod';
1213
import { z } from 'zod';
@@ -20,12 +21,17 @@ const ForgotPasswordSchema = z.object({
2021

2122
export function ForgotPassword() {
2223
const navigate = useNavigate();
23-
const form = useForm({
24+
const methods = useForm({
2425
resolver: zodResolver(ForgotPasswordSchema),
2526
defaultValues: {
2627
email: '',
2728
},
2829
});
30+
const { setFocus, control, handleSubmit } = methods;
31+
32+
useEffect(() => {
33+
setFocus('email');
34+
}, [setFocus]);
2935

3036
const { mutate: submitForgotPasswordData, isPending } = useForgotPasswordMutation();
3137

@@ -48,10 +54,10 @@ export function ForgotPassword() {
4854
<div className="text-white w-xs">
4955
<h2 className="text-2xl font-light">Enter your account email</h2>
5056
<p className="text-sm pt-1">If a matching account exists, we'll send you a password reset link.</p>
51-
<Form {...form}>
52-
<form onSubmit={form.handleSubmit(submitForm)} className="my-4">
57+
<Form {...methods}>
58+
<form onSubmit={handleSubmit(submitForm)} className="my-4">
5359
<FormField
54-
control={form.control}
60+
control={control}
5561
name="email"
5662
render={({ field }) => (
5763
<FormItem className="my-2">
@@ -60,7 +66,6 @@ export function ForgotPassword() {
6066
<Input
6167
disabled={isPending}
6268
type="email"
63-
placeholder="[email protected]"
6469
className="bg-purple-400 border-purple-400 dark:bg-black dark:border-black"
6570
{...field}
6671
/>

‎src/features/auth/ResetPassword.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { Input } from '@/components/ui/input';
99
import { zodRequirePassword } from '@/lib/zod/password';
1010
import { zodResolver } from '@hookform/resolvers/zod';
1111
import { useNavigate, useSearch } from '@tanstack/react-router';
12-
import { useEffect } from 'react';
12+
import { useCallback, useEffect } from 'react';
1313
import { useForm } from 'react-hook-form';
1414
import { toast } from 'sonner';
1515
import { z } from 'zod';
@@ -37,17 +37,22 @@ export function RestPassword() {
3737
}
3838
}, [token, navigate]);
3939

40-
const form = useForm({
40+
const methods = useForm({
4141
resolver: zodResolver(ResetPasswordSchema),
4242
defaultValues: {
4343
password: '',
4444
confirmPassword: '',
4545
},
4646
});
47+
const { setFocus, control, handleSubmit } = methods;
48+
49+
useEffect(() => {
50+
setFocus('password');
51+
}, [setFocus]);
4752

4853
const { mutate: submitResetPasswordData, isPending } = useResetPasswordMutation();
4954

50-
const submitForm = async (formData: { password: string; confirmPassword: string }) => {
55+
const submitForm = useCallback(async (formData: { password: string; confirmPassword: string }) => {
5156
submitResetPasswordData(
5257
{ token: token as string, password: formData.password },
5358
{
@@ -63,15 +68,15 @@ export function RestPassword() {
6368
},
6469
}
6570
);
66-
};
71+
}, [navigate, submitResetPasswordData, token]);
6772

6873
return (
6974
<div className="text-white w-xs">
7075
<h2 className="text-2xl font-light">Reset Password</h2>
71-
<Form {...form}>
72-
<form className="my-4" onSubmit={form.handleSubmit(submitForm)}>
76+
<Form {...methods}>
77+
<form className="my-4" onSubmit={handleSubmit(submitForm)}>
7378
<FormField
74-
control={form.control}
79+
control={control}
7580
name="password"
7681
render={({ field }) => (
7782
<FormItem className="my-2">
@@ -80,7 +85,6 @@ export function RestPassword() {
8085
<Input
8186
disabled={isPending}
8287
type="password"
83-
placeholder="enter new password"
8488
className="bg-purple-400 border-purple-400 dark:bg-black dark:border-black"
8589
{...field}
8690
/>
@@ -90,7 +94,7 @@ export function RestPassword() {
9094
)}
9195
/>
9296
<FormField
93-
control={form.control}
97+
control={control}
9498
name="confirmPassword"
9599
render={({ field }) => (
96100
<FormItem className="my-2">
@@ -99,7 +103,6 @@ export function RestPassword() {
99103
<Input
100104
disabled={isPending}
101105
type="password"
102-
placeholder="confirm new password"
103106
className="bg-purple-400 border-purple-400 dark:bg-black dark:border-black"
104107
{...field}
105108
/>

‎src/features/auth/SignIn.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { queryKeys } from '@/react-query/constants';
1717
import { zodResolver } from '@hookform/resolvers/zod';
1818
import { useQueryClient } from '@tanstack/react-query';
1919
import { Link, useNavigate, useRouter, useSearch } from '@tanstack/react-router';
20+
import { useEffect } from 'react';
2021
import { useForm } from 'react-hook-form';
2122
import { z } from 'zod';
2223

@@ -31,13 +32,18 @@ export function SignIn() {
3132
const queryClient = useQueryClient();
3233
const { redirect } = useSearch({ strict: false });
3334

34-
const form = useForm({
35+
const methods = useForm({
3536
resolver: zodResolver(SignInSchema),
3637
defaultValues: {
3738
email: '',
3839
password: '',
3940
},
4041
});
42+
const { handleSubmit, control, setFocus } = methods;
43+
44+
useEffect(() => {
45+
setFocus('email');
46+
}, [setFocus]);
4147

4248
const { mutate: submitLoginData, isPending } = useLoginMutation();
4349

@@ -56,7 +62,7 @@ export function SignIn() {
5662
});
5763
}
5864
await queryClient.invalidateQueries({ queryKey: [queryKeys.user], refetchType: 'none' });
59-
router.invalidate();
65+
void router.invalidate();
6066
await navigate({ to: redirect?.startsWith('/') ? redirect : defaultCloudRoute });
6167
},
6268
});
@@ -65,18 +71,17 @@ export function SignIn() {
6571
return (
6672
<div className="text-white w-xs">
6773
<h2 className="text-2xl font-light">Sign in to Harper Fabric</h2>
68-
<Form {...form}>
69-
<form onSubmit={form.handleSubmit(submitForm)} className="my-4">
74+
<Form {...methods}>
75+
<form onSubmit={handleSubmit(submitForm)} className="my-4">
7076
<FormField
71-
control={form.control}
77+
control={control}
7278
name="email"
7379
render={({ field }) => (
7480
<FormItem className="my-4">
7581
<FormLabel>Email</FormLabel>
7682
<FormControl>
7783
<Input
7884
type="email"
79-
placeholder="[email protected]"
8085
className="bg-purple-400 border-purple-400 dark:bg-black dark:border-black"
8186
{...field}
8287
/>
@@ -86,15 +91,14 @@ export function SignIn() {
8691
)}
8792
/>
8893
<FormField
89-
control={form.control}
94+
control={control}
9095
name="password"
9196
render={({ field }) => (
9297
<FormItem className="my-4">
9398
<FormLabel>Password</FormLabel>
9499
<FormControl>
95100
<Input
96101
type="password"
97-
placeholder="password"
98102
className="bg-purple-400 border-purple-400 dark:bg-black dark:border-black"
99103
{...field}
100104
/>

0 commit comments

Comments
 (0)