105 lines
3.1 KiB
TypeScript
105 lines
3.1 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
|
||
import { urls, useConceptNavigation } from '@/app';
|
||
|
||
import { isAxiosError } from '@/backend/api-transport';
|
||
import { SubmitButton } from '@/components/control';
|
||
import { type ErrorData, InfoError } from '@/components/info-error';
|
||
import { TextInput } from '@/components/input';
|
||
import { Loader } from '@/components/loader';
|
||
import { useQueryStrings } from '@/hooks/use-query-strings';
|
||
|
||
import { useResetPassword } from '../backend/use-reset-password';
|
||
|
||
function useTokenValidation(token: string, isPending: boolean) {
|
||
const { validateToken } = useResetPassword();
|
||
const [isTokenValidating, setIsTokenValidating] = useState(false);
|
||
|
||
const validate = async () => {
|
||
if (!isTokenValidating && !isPending) {
|
||
await validateToken({ token });
|
||
setIsTokenValidating(true);
|
||
}
|
||
};
|
||
return { isTokenValidating, validate };
|
||
}
|
||
|
||
export function Component() {
|
||
const router = useConceptNavigation();
|
||
const token = useQueryStrings().get('token') ?? '';
|
||
|
||
const { resetPassword, isPending, error: serverError } = useResetPassword();
|
||
const { isTokenValidating, validate } = useTokenValidation(token, isPending);
|
||
|
||
const [newPassword, setNewPassword] = useState('');
|
||
const [newPasswordRepeat, setNewPasswordRepeat] = useState('');
|
||
|
||
const canSubmit = !!newPassword && !!newPasswordRepeat && newPassword === newPasswordRepeat;
|
||
|
||
function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
|
||
event.preventDefault();
|
||
if (!isPending) {
|
||
void resetPassword({
|
||
password: newPassword,
|
||
token: token
|
||
}).then(() => {
|
||
router.replace({ path: urls.home });
|
||
router.push({ path: urls.login });
|
||
});
|
||
}
|
||
}
|
||
|
||
if (!isTokenValidating && !isPending) {
|
||
void validate();
|
||
}
|
||
|
||
if (isPending) {
|
||
return <Loader />;
|
||
}
|
||
|
||
return (
|
||
<form className='cc-fade-in cc-column w-96 mx-auto px-6 mt-3' onSubmit={handleSubmit}>
|
||
<TextInput
|
||
id='new_password'
|
||
type='password'
|
||
label='Новый пароль'
|
||
autoComplete='new-password'
|
||
allowEnter
|
||
value={newPassword}
|
||
onChange={event => {
|
||
setNewPassword(event.target.value);
|
||
}}
|
||
/>
|
||
<TextInput
|
||
id='new_password_repeat'
|
||
type='password'
|
||
label='Повторите новый'
|
||
autoComplete='new-password'
|
||
allowEnter
|
||
value={newPasswordRepeat}
|
||
onChange={event => {
|
||
setNewPasswordRepeat(event.target.value);
|
||
}}
|
||
/>
|
||
|
||
<SubmitButton
|
||
text='Установить пароль'
|
||
className='self-center w-48 mt-3'
|
||
loading={isPending}
|
||
disabled={!canSubmit}
|
||
/>
|
||
{serverError ? <ServerError error={serverError} /> : null}
|
||
</form>
|
||
);
|
||
}
|
||
|
||
// ====== Internals =========
|
||
function ServerError({ error }: { error: ErrorData }): React.ReactElement {
|
||
if (isAxiosError(error) && error.response && error.response.status === 404) {
|
||
return <div className='mx-auto mt-6 text-sm select-text text-destructive'>Данная ссылка не действительна</div>;
|
||
}
|
||
return <InfoError error={error} />;
|
||
}
|