82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import PasswordSignIn from '@/components/auth-ui/PasswordSignIn';
|
|
import EmailSignIn from '@/components/auth-ui/EmailSignIn';
|
|
import OauthSignIn from '@/components/auth-ui/OauthSignIn';
|
|
import ForgotPassword from '@/components/auth-ui/ForgotPassword';
|
|
import UpdatePassword from '@/components/auth-ui/UpdatePassword';
|
|
import SignUp from '@/components/auth-ui/Signup';
|
|
import { Flex, Text } from '@chakra-ui/react';
|
|
import { HSeparator } from '../separator/Separator';
|
|
|
|
export default function AuthUI(props: any) {
|
|
return (
|
|
<Flex
|
|
direction={'column'}
|
|
my="auto"
|
|
mt={{ base: '30px', md: '70px', lg: 'auto' }}
|
|
maxW={{ md: 'full', lg: '420px' }}
|
|
>
|
|
<Text fontSize="32px" fontWeight={'bold'} color="gray.900">
|
|
{props.viewProp === 'signup'
|
|
? 'Sign Up'
|
|
: props.viewProp === 'forgot_password'
|
|
? 'Forgot Password'
|
|
: props.viewProp === 'update_password'
|
|
? 'Update Password'
|
|
: props.viewProp === 'email_signin'
|
|
? 'Email Sign In'
|
|
: 'Sign In'}
|
|
</Text>
|
|
<Text fontSize="16px" color="gray.t00">
|
|
{props.viewProp === 'signup'
|
|
? 'Enter your email and password to sign up!'
|
|
: props.viewProp === 'forgot_password'
|
|
? 'Enter your email to get a passoword reset link!'
|
|
: props.viewProp === 'update_password'
|
|
? 'Choose a new password for your account!'
|
|
: props.viewProp === 'email_signin'
|
|
? 'Enter your email to get a magic link!'
|
|
: 'Enter your email and password to sign in!'}
|
|
</Text>
|
|
{props.viewProp !== 'update_password' &&
|
|
props.viewProp !== 'signup' &&
|
|
props.allowOauth && (
|
|
<>
|
|
<OauthSignIn />
|
|
<HSeparator my="20px" />
|
|
</>
|
|
)}
|
|
{props.viewProp === 'password_signin' && (
|
|
<PasswordSignIn
|
|
allowEmail={props.allowEmail}
|
|
redirectMethod={props.redirectMethod}
|
|
/>
|
|
)}
|
|
{props.viewProp === 'email_signin' && (
|
|
<EmailSignIn
|
|
allowPassword={props.allowPassword}
|
|
redirectMethod={props.redirectMethod}
|
|
disableButton={props.disableButton}
|
|
/>
|
|
)}
|
|
{props.viewProp === 'forgot_password' && (
|
|
<ForgotPassword
|
|
allowEmail={props.allowEmail}
|
|
redirectMethod={props.redirectMethod}
|
|
disableButton={props.disableButton}
|
|
/>
|
|
)}
|
|
{props.viewProp === 'update_password' && (
|
|
<UpdatePassword redirectMethod={props.redirectMethod} />
|
|
)}
|
|
{props.viewProp === 'signup' && (
|
|
<SignUp
|
|
allowEmail={props.allowEmail}
|
|
redirectMethod={props.redirectMethod}
|
|
/>
|
|
)}
|
|
</Flex>
|
|
);
|
|
}
|