Elgato_dark/console
1
0
Fork 0
mirror of https://github.com/graphql-hive/console synced 2026-05-23 17:18:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: auto-focus form input when visiting login and sign up page (#5647)

Browse source
This commit is contained in:
Laurin Quast 2024-10-08 13:01:47 +02:00 committed by GitHub
parent 19d002173f
commit d3499554a0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 37 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
packages/web/app/src/pages/auth-sign-in.tsx
View file

@ -1,4 +1,4 @@
import { useCallback } from 'react';
import { useCallback, useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { FaRegUserCircle } from 'react-icons/fa';
import { SiGithub, SiGoogle, SiOkta } from 'react-icons/si';
@ -81,6 +81,7 @@ export function AuthSignInPage(props: { redirectToPath: string }) {
const [lastAuthMethod, setLastAuthMethod] = useLastAuthMethod();
const router = useRouter();
const { toast } = useToast();
const emailPasswordSignIn = useMutation({
mutationFn: superEmailPasswordSignIn,
onSuccess(data) {
@ -133,6 +134,7 @@ export function AuthSignInPage(props: { redirectToPath: string }) {
});
},
});
const thirdPartySignIn = useMutation({
async mutationFn(provider: 'github' | 'google' | 'okta') {
await startAuthFlowForProvider(provider, props.redirectToPath);
@ -146,7 +148,9 @@ export function AuthSignInPage(props: { redirectToPath: string }) {
});
},
});
const isPending = emailPasswordSignIn.isPending || thirdPartySignIn.isPending;
const form = useForm({
mode: 'onSubmit',
resolver: zodResolver(SignInFormSchema),
@ -157,6 +161,12 @@ export function AuthSignInPage(props: { redirectToPath: string }) {
disabled: isPending,
});
useEffect(() => {
if (emailPasswordSignIn.isPending === false) {
form.setFocus('email', { shouldSelect: true });
}
}, [emailPasswordSignIn.isPending]);
const onSubmit = useCallback(
(data: SignInFormValues) => {
emailPasswordSignIn.reset();
@ -199,11 +209,15 @@ export function AuthSignInPage(props: { redirectToPath: string }) {
<FormField
control={form.control}
name="email"
render={({ field }) => (
render={() => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input placeholder="m@example.com" type="email" {...field} />
<Input
placeholder="m@example.com"
type="email"
{...form.register('email')}
/>
</FormControl>
<FormMessage />
</FormItem>
@ -212,7 +226,7 @@ export function AuthSignInPage(props: { redirectToPath: string }) {
<FormField
control={form.control}
name="password"
render={({ field }) => (
render={() => (
<FormItem>
<div className="flex items-center">
<FormLabel>Password</FormLabel>
@ -229,7 +243,7 @@ export function AuthSignInPage(props: { redirectToPath: string }) {
</Link>
</div>
<FormControl>
<Input type="password" {...field} />
<Input type="password" {...form.register('password')} />
</FormControl>
<FormMessage />
</FormItem>

27
packages/web/app/src/pages/auth-sign-up.tsx
View file

@ -1,4 +1,4 @@
import { useCallback } from 'react';
import { useCallback, useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { FaRegUserCircle } from 'react-icons/fa';
import { SiGithub, SiGoogle, SiOkta } from 'react-icons/si';
@ -150,6 +150,11 @@ export function AuthSignUpPage(props: { redirectToPath: string }) {
},
disabled: isPending,
});
useEffect(() => {
form.setFocus('firstName', { shouldSelect: true });
}, [signUp.isPending]);
const { toast } = useToast();
const onSubmit = useCallback(
@ -210,11 +215,11 @@ export function AuthSignUpPage(props: { redirectToPath: string }) {
<FormField
control={form.control}
name="firstName"
render={({ field }) => (
render={() => (
<FormItem>
<FormLabel>First name</FormLabel>
<FormControl>
<Input placeholder="Max" {...field} />
<Input placeholder="Max" {...form.register('firstName')} />
</FormControl>
<FormMessage />
</FormItem>
@ -223,11 +228,11 @@ export function AuthSignUpPage(props: { redirectToPath: string }) {
<FormField
control={form.control}
name="lastName"
render={({ field }) => (
render={() => (
<FormItem>
<FormLabel>Last name</FormLabel>
<FormControl>
<Input placeholder="Robinson" {...field} />
<Input placeholder="Robinson" {...form.register('lastName')} />
</FormControl>
<FormMessage />
</FormItem>
@ -237,11 +242,15 @@ export function AuthSignUpPage(props: { redirectToPath: string }) {
<FormField
control={form.control}
name="email"
render={({ field }) => (
render={() => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input placeholder="m@example.com" type="email" {...field} />
<Input
placeholder="m@example.com"
type="email"
{...form.register('email')}
/>
</FormControl>
<FormMessage />
</FormItem>
@ -250,11 +259,11 @@ export function AuthSignUpPage(props: { redirectToPath: string }) {
<FormField
control={form.control}
name="password"
render={({ field }) => (
render={() => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input type="password" {...field} />
<Input type="password" {...form.register('password')} />
</FormControl>
<FormMessage />
</FormItem>