feat: use password input component

This commit is contained in:
nafees nazik
2023-12-02 17:54:19 +05:30
parent 4733f1e84b
commit a906833657
3 changed files with 40 additions and 36 deletions

View File

@ -23,6 +23,7 @@ import {
FormMessage, FormMessage,
} from '@documenso/ui/primitives/form/form'; } from '@documenso/ui/primitives/form/form';
import { Input } from '@documenso/ui/primitives/input'; import { Input } from '@documenso/ui/primitives/input';
import { PasswordInput } from '@documenso/ui/primitives/password-input';
import { useToast } from '@documenso/ui/primitives/use-toast'; import { useToast } from '@documenso/ui/primitives/use-toast';
export const ZDisableTwoFactorAuthenticationForm = z.object({ export const ZDisableTwoFactorAuthenticationForm = z.object({
@ -107,38 +108,42 @@ export const DisableAuthenticatorAppDialog = ({
)} )}
className="flex flex-col gap-y-4" className="flex flex-col gap-y-4"
> >
<FormField <fieldset
name="password" className="flex flex-col gap-y-4"
control={disableTwoFactorAuthenticationForm.control} disabled={isDisableTwoFactorAuthenticationSubmitting}
render={({ field }) => ( >
<FormItem> <FormField
<FormLabel className="text-muted-foreground">Password</FormLabel> name="password"
<FormControl> control={disableTwoFactorAuthenticationForm.control}
<Input render={({ field }) => (
{...field} <FormItem>
type="password" <FormLabel className="text-muted-foreground">Password</FormLabel>
autoComplete="current-password" <FormControl>
value={field.value ?? ''} <PasswordInput
/> {...field}
</FormControl> autoComplete="current-password"
<FormMessage /> value={field.value ?? ''}
</FormItem> />
)} </FormControl>
/> <FormMessage />
</FormItem>
)}
/>
<FormField <FormField
name="backupCode" name="backupCode"
control={disableTwoFactorAuthenticationForm.control} control={disableTwoFactorAuthenticationForm.control}
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel className="text-muted-foreground">Backup Code</FormLabel> <FormLabel className="text-muted-foreground">Backup Code</FormLabel>
<FormControl> <FormControl>
<Input {...field} type="text" value={field.value ?? ''} /> <Input {...field} type="text" value={field.value ?? ''} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
</fieldset>
<div className="flex w-full items-center justify-between"> <div className="flex w-full items-center justify-between">
<Button type="button" variant="ghost" onClick={() => onOpenChange(false)}> <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>

View File

@ -27,6 +27,7 @@ import {
FormMessage, FormMessage,
} from '@documenso/ui/primitives/form/form'; } from '@documenso/ui/primitives/form/form';
import { Input } from '@documenso/ui/primitives/input'; import { Input } from '@documenso/ui/primitives/input';
import { PasswordInput } from '@documenso/ui/primitives/password-input';
import { useToast } from '@documenso/ui/primitives/use-toast'; import { useToast } from '@documenso/ui/primitives/use-toast';
import { RecoveryCodeList } from './recovery-code-list'; import { RecoveryCodeList } from './recovery-code-list';
@ -178,9 +179,8 @@ export const EnableAuthenticatorAppDialog = ({
<FormItem> <FormItem>
<FormLabel className="text-muted-foreground">Password</FormLabel> <FormLabel className="text-muted-foreground">Password</FormLabel>
<FormControl> <FormControl>
<Input <PasswordInput
{...field} {...field}
type="password"
autoComplete="current-password" autoComplete="current-password"
value={field.value ?? ''} value={field.value ?? ''}
/> />

View File

@ -22,7 +22,7 @@ import {
FormLabel, FormLabel,
FormMessage, FormMessage,
} from '@documenso/ui/primitives/form/form'; } from '@documenso/ui/primitives/form/form';
import { Input } from '@documenso/ui/primitives/input'; import { PasswordInput } from '@documenso/ui/primitives/password-input';
import { useToast } from '@documenso/ui/primitives/use-toast'; import { useToast } from '@documenso/ui/primitives/use-toast';
import { RecoveryCodeList } from './recovery-code-list'; import { RecoveryCodeList } from './recovery-code-list';
@ -108,9 +108,8 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
<FormItem> <FormItem>
<FormLabel className="text-muted-foreground">Password</FormLabel> <FormLabel className="text-muted-foreground">Password</FormLabel>
<FormControl> <FormControl>
<Input <PasswordInput
{...field} {...field}
type="password"
autoComplete="current-password" autoComplete="current-password"
value={field.value ?? ''} value={field.value ?? ''}
/> />