import React from 'react'; import { motion } from 'motion/react'; import { Field } from 'reablocks'; import { Button } from 'reablocks'; import { Card } from 'reablocks'; import { Divider } from 'reablocks'; import { Input } from 'reablocks'; import { useForm, Controller } from 'react-hook-form'; export default { title: 'Blocks/Authentication/MFA' }; const LogoIcon = ({ className }: { className?: string }) => ( ); const QRLightIcon = ({ className }: { className?: string }) => ( ); const QRDarkIcon = ({ className }: { className?: string }) => ( ); export const Mfa = () => { const { control, handleSubmit, formState: { isSubmitting } } = useForm(); return (

One Time Password

Please verify your identity using your registered email or phone number and follow the prompts to complete the password reset process.
console.log('values', values))}> (
{['1', '6', '', ''].map((value, idx) => ( ))}
)} />
Are you facing any problems with receiving the code?
Resend Code
Remember your password? {' '} Go Back
); }; export const MfaLogin = () => { const { control, handleSubmit, formState: { isSubmitting } } = useForm(); return (
New to Reablocks?

Enter your code

We sent a code to{' '} austin@goodcode.us
console.log('values', values))}> (
{['1', '6', '', ''].map((value, idx) => ( ))}
)} />
Didn't receive a email?
Click to resend
); }; export const MfaAuthenticator = () => { const { control, handleSubmit, formState: { isSubmitting } } = useForm(); return (

Set up your two-factor authentication.

Scan this code with your Google authenticator app to continue this process.
console.log('values', values))}> (
{['', '', '', '', '', ''].map((value, idx) => ( {idx === 3 && } ))}
)} />
); };