133 lines
3.3 KiB
TypeScript
133 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import { signInWithPassword } from '@/utils/auth-helpers/server';
|
|
import { handleRequest } from '@/utils/auth-helpers/client';
|
|
import { useRouter } from 'next/navigation';
|
|
import React, { useState } from 'react';
|
|
import {
|
|
Box,
|
|
Button,
|
|
Flex,
|
|
FormLabel,
|
|
Input,
|
|
Link,
|
|
useColorModeValue
|
|
} from '@chakra-ui/react';
|
|
|
|
// Define prop type with allowEmail boolean
|
|
interface PasswordSignInProps {
|
|
allowEmail: boolean;
|
|
redirectMethod: string;
|
|
}
|
|
|
|
export default function PasswordSignIn({
|
|
allowEmail,
|
|
redirectMethod
|
|
}: PasswordSignInProps) {
|
|
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, signInWithPassword, router);
|
|
setIsSubmitting(false);
|
|
};
|
|
|
|
return (
|
|
<Box mb="auto">
|
|
<Box mb="8px">
|
|
<form noValidate={true} onSubmit={(e) => handleSubmit(e)}>
|
|
<FormLabel
|
|
htmlFor="email"
|
|
display="flex"
|
|
ms="4px"
|
|
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"
|
|
autoCapitalize="none"
|
|
autoComplete="email"
|
|
autoCorrect="off"
|
|
mb="24px"
|
|
fontWeight="500"
|
|
size="lg"
|
|
/>
|
|
<FormLabel
|
|
htmlFor="password"
|
|
display="flex"
|
|
ms="4px"
|
|
fontWeight="500"
|
|
color={textColor}
|
|
mb="8px"
|
|
>
|
|
Password
|
|
</FormLabel>
|
|
<Input
|
|
isRequired={true}
|
|
variant="auth"
|
|
fontSize="sm"
|
|
ms={{ base: '0px', md: '0px' }}
|
|
id="password"
|
|
placeholder="Password"
|
|
type="password"
|
|
name="password"
|
|
autoComplete="current-password"
|
|
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>
|
|
</Box>
|
|
<Flex direction="column">
|
|
<Link
|
|
href="/dashboard/signin/forgot_password"
|
|
color={textColor}
|
|
fontWeight="medium"
|
|
>
|
|
Forgot your password?
|
|
</Link>
|
|
{allowEmail && (
|
|
<Link
|
|
href="/dashboard/signin/email_signin"
|
|
color={textColor}
|
|
fontWeight="medium"
|
|
>
|
|
Sign in via magic link
|
|
</Link>
|
|
)}
|
|
<Link
|
|
href="/dashboard/signin/signup"
|
|
color={textColor}
|
|
fontWeight="medium"
|
|
>
|
|
Don't have an account? Sign up
|
|
</Link>
|
|
</Flex>
|
|
</Box>
|
|
);
|
|
}
|