101 lines
2.4 KiB
TypeScript
101 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { signInWithEmail } from '@/utils/auth-helpers/server';
|
|
import { handleRequest } from '@/utils/auth-helpers/client';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useState } from 'react';
|
|
import {
|
|
Box,
|
|
Button,
|
|
Flex,
|
|
FormLabel,
|
|
Input,
|
|
useColorModeValue,
|
|
Link
|
|
} from '@chakra-ui/react';
|
|
|
|
// Define prop type with allowPassword boolean
|
|
interface EmailSignInProps {
|
|
allowPassword: boolean;
|
|
redirectMethod: string;
|
|
disableButton?: boolean;
|
|
}
|
|
|
|
export default function EmailSignIn({
|
|
allowPassword,
|
|
redirectMethod
|
|
}: EmailSignInProps) {
|
|
const router = redirectMethod === 'client' ? useRouter() : null;
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const textColor = useColorModeValue('navy.700', 'white');
|
|
|
|
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
setIsSubmitting(true); // Disable the button while the request is being handled
|
|
await handleRequest(e, signInWithEmail, router);
|
|
setIsSubmitting(false);
|
|
};
|
|
|
|
return (
|
|
<Box mb={8}>
|
|
<form onSubmit={(e) => handleSubmit(e)}>
|
|
<FormLabel
|
|
htmlFor="email"
|
|
display="flex"
|
|
ms="4px"
|
|
fontSize="sm"
|
|
fontWeight="500"
|
|
color={textColor}
|
|
mb="8px"
|
|
>
|
|
Email
|
|
</FormLabel>
|
|
<Input
|
|
isRequired={true}
|
|
variant="auth"
|
|
fontSize="sm"
|
|
ms={{ base: '0px', md: '0px' }}
|
|
id="email"
|
|
placeholder="name@example.com"
|
|
type="email"
|
|
name="email"
|
|
mb="24px"
|
|
fontWeight="500"
|
|
size="lg"
|
|
/>
|
|
<Button
|
|
fontSize="sm"
|
|
variant="brand"
|
|
fontWeight="500"
|
|
w="100%"
|
|
h="50"
|
|
mb="24px"
|
|
type="submit"
|
|
isLoading={isSubmitting}
|
|
>
|
|
Sign in
|
|
</Button>
|
|
</form>
|
|
|
|
{allowPassword && (
|
|
<Flex direction="column">
|
|
<Link
|
|
href="/dashboard/signin/password_signin"
|
|
color={textColor}
|
|
fontWeight="medium"
|
|
>
|
|
Sign in with email and password
|
|
</Link>
|
|
|
|
<Link
|
|
href="/dashboard/signin/signup"
|
|
color={textColor}
|
|
fontWeight="medium"
|
|
>
|
|
Don't have an account? Sign up
|
|
</Link>
|
|
</Flex>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|