mirror of
https://github.com/Dvorinka/MyClubServer.git
synced 2026-06-04 18:52:56 +00:00
upload
This commit is contained in:
Tomáš Dvořák
@@ -0,0 +1,273 @@
|
||||
import { useState } from 'react';
|
||||
import { Box, Button, FormControl, FormLabel, Input, VStack, Heading, useToast, Text, HStack, PinInput, PinInputField } from '@chakra-ui/react';
|
||||
import api from '../services/api';
|
||||
|
||||
type ResetStep = 'email' | 'code' | 'new_password' | 'success';
|
||||
|
||||
const ForgotPasswordPage: React.FC = () => {
|
||||
const [email, setEmail] = useState('');
|
||||
const [code, setCode] = useState('');
|
||||
const [newPassword, setNewPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [step, setStep] = useState<ResetStep>('email');
|
||||
const toast = useToast();
|
||||
|
||||
const handleInitiateReset = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!email) return;
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await api.post('/auth/initiate-password-reset', { email });
|
||||
setStep('code');
|
||||
toast({
|
||||
title: 'Kód odeslán',
|
||||
description: 'Ověřovací kód byl odeslán na váš e-mail.',
|
||||
status: 'success',
|
||||
duration: 5000,
|
||||
isClosable: true,
|
||||
});
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: 'Chyba',
|
||||
description: error.response?.data?.message || 'Nepodařilo se odeslat ověřovací kód',
|
||||
status: 'error',
|
||||
duration: 5000,
|
||||
isClosable: true,
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleVerifyCode = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (code.length !== 6) return;
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await api.post('/auth/verify-reset-code', { email, code });
|
||||
setStep('new_password');
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: 'Chyba',
|
||||
description: error.response?.data?.message || 'Neplatný ověřovací kód',
|
||||
status: 'error',
|
||||
duration: 5000,
|
||||
isClosable: true,
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCompleteReset = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (newPassword !== confirmPassword) {
|
||||
toast({
|
||||
title: 'Chyba',
|
||||
description: 'Hesla se neshodují',
|
||||
status: 'error',
|
||||
duration: 5000,
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (newPassword.length < 8) {
|
||||
toast({
|
||||
title: 'Chyba',
|
||||
description: 'Heslo musí mít alespoň 8 znaků',
|
||||
status: 'error',
|
||||
duration: 5000,
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await api.post('/auth/complete-password-reset', {
|
||||
email,
|
||||
code,
|
||||
new_password: newPassword,
|
||||
});
|
||||
|
||||
setStep('success');
|
||||
toast({
|
||||
title: 'Úspěch',
|
||||
description: 'Vaše heslo bylo úspěšně změněno. Nyní se můžete přihlásit.',
|
||||
status: 'success',
|
||||
duration: 5000,
|
||||
isClosable: true,
|
||||
});
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: 'Chyba',
|
||||
description: error.response?.data?.message || 'Nepodařilo se změnit heslo',
|
||||
status: 'error',
|
||||
duration: 5000,
|
||||
isClosable: true,
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const renderStep = () => {
|
||||
switch (step) {
|
||||
case 'email':
|
||||
return (
|
||||
<VStack as="form" onSubmit={handleInitiateReset} spacing={4} align="stretch">
|
||||
<Heading as="h2" size="lg" textAlign="center" mb={4}>Obnova hesla</Heading>
|
||||
<Text textAlign="center" mb={4}>
|
||||
Zadejte e-mailovou adresu vašeho účtu. Pošleme vám ověřovací kód pro obnovu hesla.
|
||||
</Text>
|
||||
<FormControl id="email" isRequired>
|
||||
<FormLabel>E-mail</FormLabel>
|
||||
<Input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="vas@email.cz"
|
||||
size="lg"
|
||||
/>
|
||||
</FormControl>
|
||||
<Button
|
||||
type="submit"
|
||||
colorScheme="blue"
|
||||
size="lg"
|
||||
isLoading={isLoading}
|
||||
loadingText="Odesílání..."
|
||||
>
|
||||
Odeslat ověřovací kód
|
||||
</Button>
|
||||
</VStack>
|
||||
);
|
||||
|
||||
case 'code':
|
||||
return (
|
||||
<VStack as="form" onSubmit={handleVerifyCode} spacing={6} align="center">
|
||||
<Heading as="h2" size="lg" textAlign="center">Ověřte svou identitu</Heading>
|
||||
<Text textAlign="center">
|
||||
Zadejte 6místný ověřovací kód, který jsme zaslali na adresu {email}
|
||||
</Text>
|
||||
|
||||
<HStack spacing={3} justify="center">
|
||||
<PinInput
|
||||
value={code}
|
||||
onChange={(value) => setCode(value)}
|
||||
isDisabled={isLoading}
|
||||
autoFocus
|
||||
otp
|
||||
>
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<PinInputField key={i} />
|
||||
))}
|
||||
</PinInput>
|
||||
</HStack>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
colorScheme="blue"
|
||||
size="lg"
|
||||
isDisabled={code.length !== 6}
|
||||
isLoading={isLoading}
|
||||
loadingText="Ověřování..."
|
||||
width="100%"
|
||||
>
|
||||
Ověřit kód
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="link"
|
||||
onClick={() => setStep('email')}
|
||||
isDisabled={isLoading}
|
||||
>
|
||||
Změnit e-mail
|
||||
</Button>
|
||||
</VStack>
|
||||
);
|
||||
|
||||
case 'new_password':
|
||||
return (
|
||||
<VStack as="form" onSubmit={handleCompleteReset} spacing={4} align="stretch">
|
||||
<Heading as="h2" size="lg" textAlign="center">Nastavení nového hesla</Heading>
|
||||
<Text textAlign="center" mb={4}>
|
||||
Zadejte nové heslo pro váš účet {email}
|
||||
</Text>
|
||||
|
||||
<FormControl id="newPassword" isRequired>
|
||||
<FormLabel>Nové heslo</FormLabel>
|
||||
<Input
|
||||
type="password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
placeholder="Zadejte nové heslo"
|
||||
size="lg"
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormControl id="confirmPassword" isRequired>
|
||||
<FormLabel>Potvrzení hesla</FormLabel>
|
||||
<Input
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
placeholder="Zadejte heslo znovu"
|
||||
size="lg"
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
colorScheme="blue"
|
||||
size="lg"
|
||||
isLoading={isLoading}
|
||||
loadingText="Ukládání..."
|
||||
isDisabled={!newPassword || newPassword !== confirmPassword}
|
||||
>
|
||||
Nastavit nové heslo
|
||||
</Button>
|
||||
</VStack>
|
||||
);
|
||||
|
||||
case 'success':
|
||||
return (
|
||||
<VStack spacing={6} textAlign="center">
|
||||
<Box p={4} bg="green.50" borderRadius="md" width="100%">
|
||||
<Text color="green.800" fontWeight="medium">
|
||||
Vaše heslo bylo úspěšně změněno!
|
||||
</Text>
|
||||
</Box>
|
||||
<Text>
|
||||
Nyní se můžete přihlásit pomocí svého nového hesla.
|
||||
</Text>
|
||||
<Button
|
||||
as="a"
|
||||
href="/login"
|
||||
colorScheme="blue"
|
||||
size="lg"
|
||||
width="100%"
|
||||
>
|
||||
Přejít na přihlášení
|
||||
</Button>
|
||||
</VStack>
|
||||
);
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box minH="100vh" display="flex" alignItems="center" justifyContent="center" bg="gray.50" p={4}>
|
||||
<Box w="100%" maxW="md" p={8} bg="white" borderWidth={1} borderRadius={8} boxShadow="lg">
|
||||
{renderStep()}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ForgotPasswordPage;
|
||||
Reference in New Issue
Block a user