101 lines
2.4 KiB
TypeScript
101 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { updatePassword } 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,
|
|
FormLabel,
|
|
Input,
|
|
useColorModeValue
|
|
} from '@chakra-ui/react';
|
|
|
|
interface UpdatePasswordProps {
|
|
redirectMethod: string;
|
|
}
|
|
|
|
export default function UpdatePassword({
|
|
redirectMethod
|
|
}: UpdatePasswordProps) {
|
|
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, updatePassword, router);
|
|
setIsSubmitting(false);
|
|
};
|
|
|
|
return (
|
|
<Box mb={8}>
|
|
<form onSubmit={(e) => handleSubmit(e)}>
|
|
<FormLabel
|
|
htmlFor="password"
|
|
display="flex"
|
|
ms="4px"
|
|
fontSize="sm"
|
|
fontWeight="500"
|
|
color={textColor}
|
|
mb="8px"
|
|
>
|
|
New Password
|
|
</FormLabel>
|
|
<Input
|
|
isRequired={true}
|
|
variant="auth"
|
|
fontSize="sm"
|
|
ms={{ base: '0px', md: '0px' }}
|
|
mb="24px"
|
|
fontWeight="500"
|
|
size="lg"
|
|
id="password"
|
|
placeholder="Password"
|
|
type="password"
|
|
name="password"
|
|
autoComplete="current-password"
|
|
/>
|
|
<FormLabel
|
|
htmlFor="password"
|
|
display="flex"
|
|
ms="4px"
|
|
fontSize="sm"
|
|
fontWeight="500"
|
|
color={textColor}
|
|
mb="8px"
|
|
>
|
|
Confirm New Password
|
|
</FormLabel>
|
|
<Input
|
|
isRequired={true}
|
|
variant="auth"
|
|
fontSize="sm"
|
|
ms={{ base: '0px', md: '0px' }}
|
|
mb="24px"
|
|
fontWeight="500"
|
|
size="lg"
|
|
id="passwordConfirm"
|
|
placeholder="Password"
|
|
type="password"
|
|
name="passwordConfirm"
|
|
autoComplete="current-password"
|
|
/>
|
|
<Button
|
|
fontSize="sm"
|
|
variant="brand"
|
|
fontWeight="500"
|
|
w="100%"
|
|
h="50"
|
|
mb="24px"
|
|
type="submit"
|
|
isLoading={isSubmitting}
|
|
>
|
|
Sign in
|
|
</Button>
|
|
</form>
|
|
</Box>
|
|
);
|
|
}
|