mirror of
https://github.com/documenso/documenso.git
synced 2025-11-15 09:12:02 +10:00
fix: use shadcn pin input and revert changes
This commit is contained in:
Lucas Smith
@ -25,6 +25,7 @@
|
||||
"@tanstack/react-query": "^4.29.5",
|
||||
"formidable": "^2.1.1",
|
||||
"framer-motion": "^10.12.8",
|
||||
"input-otp": "^1.2.4",
|
||||
"lucide-react": "^0.279.0",
|
||||
"luxon": "^3.4.0",
|
||||
"micro": "^10.0.1",
|
||||
@ -35,7 +36,6 @@
|
||||
"perfect-freehand": "^1.2.0",
|
||||
"posthog-js": "^1.75.3",
|
||||
"posthog-node": "^3.1.1",
|
||||
"rci": "^0.1.0",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-dropzone": "^14.2.3",
|
||||
@ -48,7 +48,6 @@
|
||||
"typescript": "5.2.2",
|
||||
"ua-parser-js": "^1.0.37",
|
||||
"uqr": "^0.1.2",
|
||||
"use-is-focused": "^0.0.1",
|
||||
"zod": "^3.22.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
@ -27,8 +27,8 @@ import {
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@documenso/ui/primitives/form/form';
|
||||
import { Input } from '@documenso/ui/primitives/input';
|
||||
import { PasswordInput } from '@documenso/ui/primitives/password-input';
|
||||
import { PinInput, type PinInputState } from '@documenso/ui/primitives/pin-input';
|
||||
import { useToast } from '@documenso/ui/primitives/use-toast';
|
||||
|
||||
import { RecoveryCodeList } from './recovery-code-list';
|
||||
@ -54,7 +54,6 @@ export const EnableAuthenticatorAppDialog = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
}: EnableAuthenticatorAppDialogProps) => {
|
||||
const [state, setState] = useState<PinInputState>('input');
|
||||
const router = useRouter();
|
||||
const { toast } = useToast();
|
||||
|
||||
@ -120,20 +119,14 @@ export const EnableAuthenticatorAppDialog = ({
|
||||
token,
|
||||
}: TEnableTwoFactorAuthenticationForm) => {
|
||||
try {
|
||||
const enabled2fa = await enableTwoFactorAuthentication({ code: token });
|
||||
await enableTwoFactorAuthentication({ code: token });
|
||||
|
||||
toast({
|
||||
title: 'Two-factor authentication enabled',
|
||||
description:
|
||||
'Two-factor authentication has been enabled for your account. You will now be required to enter a code from your authenticator app when signing in.',
|
||||
});
|
||||
|
||||
return enabled2fa;
|
||||
} catch (_err) {
|
||||
enableTwoFactorAuthenticationForm.setError('token', {
|
||||
message: 'Unable to setup two-factor authentication',
|
||||
});
|
||||
|
||||
toast({
|
||||
title: 'Unable to setup two-factor authentication',
|
||||
description:
|
||||
@ -153,7 +146,7 @@ export const EnableAuthenticatorAppDialog = ({
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="w-full max-w-md md:max-w-md lg:max-w-md">
|
||||
<DialogContent className="w-full max-w-xl md:max-w-xl lg:max-w-xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Enable Authenticator App</DialogTitle>
|
||||
|
||||
@ -248,43 +241,13 @@ export const EnableAuthenticatorAppDialog = ({
|
||||
<FormField
|
||||
name="token"
|
||||
control={enableTwoFactorAuthenticationForm.control}
|
||||
render={({ field: _field }) => (
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-muted-foreground">Token</FormLabel>
|
||||
<FormControl>
|
||||
<PinInput
|
||||
id="enable-2fa-pin-input"
|
||||
state={state}
|
||||
onSubmit={async ({ code, input }) => {
|
||||
if (code.length === 6) {
|
||||
setState('loading');
|
||||
enableTwoFactorAuthenticationForm.setValue('token', code);
|
||||
|
||||
await enableTwoFactorAuthenticationForm.handleSubmit(
|
||||
onEnableTwoFactorAuthenticationFormSubmit,
|
||||
)();
|
||||
|
||||
if (
|
||||
enableTwoFactorAuthenticationForm.formState.isSubmitted &&
|
||||
!enableTwoFactorAuthenticationForm.formState.errors.totpCode
|
||||
) {
|
||||
setState('success');
|
||||
return;
|
||||
}
|
||||
|
||||
setState('error');
|
||||
|
||||
setTimeout(() => {
|
||||
setState('input');
|
||||
input.value = '';
|
||||
input.dispatchEvent(new Event('input'));
|
||||
input.focus();
|
||||
}, 500);
|
||||
}
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
<Input {...field} type="text" value={field.value ?? ''} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
@ -31,7 +31,6 @@ import {
|
||||
} from '@documenso/ui/primitives/form/form';
|
||||
import { Input } from '@documenso/ui/primitives/input';
|
||||
import { PasswordInput } from '@documenso/ui/primitives/password-input';
|
||||
import { PinInput, type PinInputState } from '@documenso/ui/primitives/pin-input';
|
||||
import { useToast } from '@documenso/ui/primitives/use-toast';
|
||||
|
||||
const ERROR_MESSAGES: Partial<Record<keyof typeof ErrorCode, string>> = {
|
||||
@ -73,7 +72,6 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
|
||||
const [twoFactorAuthenticationMethod, setTwoFactorAuthenticationMethod] = useState<
|
||||
'totp' | 'backup'
|
||||
>('totp');
|
||||
const [state, setState] = useState<PinInputState>('input');
|
||||
|
||||
const form = useForm<TSignInFormSchema>({
|
||||
values: {
|
||||
@ -153,10 +151,9 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
|
||||
title: 'Unable to sign in',
|
||||
description: errorMessage ?? 'An unknown error occurred',
|
||||
});
|
||||
}
|
||||
|
||||
setState('success');
|
||||
console.log(result);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!result?.url) {
|
||||
throw new Error('An unknown error occurred');
|
||||
@ -164,13 +161,8 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
|
||||
|
||||
window.location.href = result.url;
|
||||
} catch (err) {
|
||||
form.setError('totpCode', {
|
||||
message: 'invalid totp',
|
||||
});
|
||||
|
||||
toast({
|
||||
title: 'An unknown error occurred',
|
||||
variant: 'destructive',
|
||||
description:
|
||||
'We encountered an unknown error while attempting to sign you In. Please try again later.',
|
||||
});
|
||||
@ -262,7 +254,7 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
|
||||
open={isTwoFactorAuthenticationDialogOpen}
|
||||
onOpenChange={onCloseTwoFactorAuthenticationDialog}
|
||||
>
|
||||
<DialogContent className="w-full max-w-md md:max-w-md lg:max-w-md">
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Two-Factor Authentication</DialogTitle>
|
||||
</DialogHeader>
|
||||
@ -273,38 +265,13 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="totpCode"
|
||||
render={({ field: _field }) => (
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Authentication Token</FormLabel>
|
||||
<FormControl>
|
||||
<PinInput
|
||||
id="verify-2fa-signin-pin-input"
|
||||
state={state}
|
||||
onSubmit={async ({ code, input }) => {
|
||||
if (code.length === 6) {
|
||||
setState('loading');
|
||||
form.setValue('totpCode', code);
|
||||
|
||||
await form.handleSubmit(onFormSubmit)();
|
||||
|
||||
if (form.formState.isSubmitted && !form.formState.errors.totpCode) {
|
||||
setState('success');
|
||||
return;
|
||||
}
|
||||
|
||||
setState('error');
|
||||
|
||||
setTimeout(() => {
|
||||
setState('input');
|
||||
input.value = '';
|
||||
input.dispatchEvent(new Event('input'));
|
||||
input.focus();
|
||||
}, 500);
|
||||
}
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
<Input type="text" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user