ConceptProd/ConceptPortal-public
1
0
Fork 0
mirror of https://github.com/IRBorisov/ConceptPortal.git synced 2025-06-26 04:50:36 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

B: Fix change-password implementation

Browse Source
This commit is contained in:
Ivan 2025-01-30 11:38:49 +03:00
parent 092421b0c3
commit ea6750d521
2 changed files with 27 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
rsconcept/frontend/src/backend/auth/useResetPassword.tsx
View File

@ -1,18 +1,15 @@
import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useMutation } from '@tanstack/react-query';
import { authApi, IPasswordTokenDTO, IResetPasswordDTO } from './api'; import { authApi, IPasswordTokenDTO, IResetPasswordDTO } from './api';
export const useResetPassword = () => { export const useResetPassword = () => {
const client = useQueryClient();
const validateMutation = useMutation({ const validateMutation = useMutation({
mutationKey: ['reset-password'], mutationKey: ['validate-token'],
mutationFn: authApi.validatePasswordToken, mutationFn: authApi.validatePasswordToken
onSuccess: () => client.invalidateQueries({ queryKey: [authApi.baseKey] })
}); });
const resetMutation = useMutation({ const resetMutation = useMutation({
mutationKey: ['reset-password'], mutationKey: ['reset-password'],
mutationFn: authApi.resetPassword, mutationFn: authApi.resetPassword
onSuccess: () => client.invalidateQueries({ queryKey: [authApi.baseKey] })
}); });
return { return {
validateToken: ( validateToken: (
@ -24,7 +21,6 @@ export const useResetPassword = () => {
onSuccess?: () => void onSuccess?: () => void
) => resetMutation.mutate(data, { onSuccess }), ) => resetMutation.mutate(data, { onSuccess }),
isPending: resetMutation.isPending || validateMutation.isPending, isPending: resetMutation.isPending || validateMutation.isPending,
error: resetMutation.error, error: resetMutation.error ?? validateMutation.error
reset: resetMutation.reset
}; };
}; };

39
rsconcept/frontend/src/pages/PasswordChangePage.tsx
View File

@ -6,9 +6,8 @@ import { useEffect, useState } from 'react';
import { useConceptNavigation } from '@/app/Navigation/NavigationContext'; import { useConceptNavigation } from '@/app/Navigation/NavigationContext';
import { urls } from '@/app/urls'; import { urls } from '@/app/urls';
import { IResetPasswordDTO } from '@/backend/auth/api';
import { useResetPassword } from '@/backend/auth/useResetPassword'; import { useResetPassword } from '@/backend/auth/useResetPassword';
import { ErrorData } from '@/components/info/InfoError'; import InfoError, { ErrorData } from '@/components/info/InfoError';
import Loader from '@/components/ui/Loader'; import Loader from '@/components/ui/Loader';
import SubmitButton from '@/components/ui/SubmitButton'; import SubmitButton from '@/components/ui/SubmitButton';
import TextInput from '@/components/ui/TextInput'; import TextInput from '@/components/ui/TextInput';
@ -16,11 +15,11 @@ import useQueryStrings from '@/hooks/useQueryStrings';
export function Component() { export function Component() {
const router = useConceptNavigation(); const router = useConceptNavigation();
const token = useQueryStrings().get('token'); const token = useQueryStrings().get('token') ?? '';
const { validateToken, resetPassword, isPending, error, reset } = useResetPassword(); const { validateToken, resetPassword, isPending, error } = useResetPassword();
const [isTokenValid, setIsTokenValid] = useState(false); const [isValidated, setIsValidated] = useState(false);
const [newPassword, setNewPassword] = useState(''); const [newPassword, setNewPassword] = useState('');
const [newPasswordRepeat, setNewPasswordRepeat] = useState(''); const [newPasswordRepeat, setNewPasswordRepeat] = useState('');
@ -32,30 +31,27 @@ export function Component() {
function handleSubmit(event: React.FormEvent<HTMLFormElement>) { function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
event.preventDefault(); event.preventDefault();
if (!isPending) { if (!isPending) {
const data: IResetPasswordDTO = { resetPassword(
{
password: newPassword, password: newPassword,
token: token! token: token
}; },
resetPassword(data, () => { () => {
router.replace(urls.home); router.replace(urls.home);
router.push(urls.login); router.push(urls.login);
}); }
);
} }
} }
useEffect(() => { useEffect(() => {
reset(); if (!isValidated && !isPending) {
}, [newPassword, newPasswordRepeat, reset]); validateToken({ token: token });
setIsValidated(true);
useEffect(() => {
validateToken({ token: token ?? '' }, () => setIsTokenValid(true));
}, [token, validateToken]);
if (error) {
return <ProcessError error={error} />;
} }
}, [token, validateToken, isValidated, isPending]);
if (isPending || !isTokenValid) { if (isPending) {
return <Loader />; return <Loader />;
} }
@ -92,6 +88,7 @@ export function Component() {
loading={isPending} loading={isPending}
disabled={!canSubmit} disabled={!canSubmit}
/> />
{error ? <ProcessError error={error} /> : null}
</form> </form>
); );
} }
@ -101,5 +98,5 @@ function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
if (axios.isAxiosError(error) && error.response && error.response.status === 404) { if (axios.isAxiosError(error) && error.response && error.response.status === 404) {
return <div className='mx-auto mt-6 text-sm select-text text-warn-600'>Данная ссылка не действительна</div>; return <div className='mx-auto mt-6 text-sm select-text text-warn-600'>Данная ссылка не действительна</div>;
} }
throw error as Error; return <InfoError error={error} />;
} }