feat: add search parameter keys for redirect and message handling in login flow
This commit is contained in:
@@ -1,12 +1,14 @@
|
||||
import { Box, Container, Flex, Heading } from '@radix-ui/themes';
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import { useNavigate } from 'react-router';
|
||||
import { useLocation, useNavigate } from 'react-router';
|
||||
import { Slide, toast, ToastContainer } from 'react-toastify';
|
||||
import * as v from 'valibot';
|
||||
import { useResponseErrorHandler } from '../../hooks/ResponseHelper';
|
||||
import { useApi } from '../../providers/ApiProvider';
|
||||
import { formHook } from '../../providers/FormProvider';
|
||||
import type { Route } from './+types/login';
|
||||
import { SearchParamKeys } from '../../lib/constants';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
const loginFormSchema = v.object({
|
||||
username: v.pipe(v.string(), v.trim(), v.minLength(1, 'Username is required')),
|
||||
@@ -18,14 +20,23 @@ export function meta({}: Route.MetaArgs): Route.MetaDescriptors {
|
||||
return [{ title: 'Login | YANPM' }];
|
||||
}
|
||||
|
||||
// TODO: remember me
|
||||
export default function LoginRoute() {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { tanstackApiClient } = useApi();
|
||||
const { defaultResponseErrorHandler } = useResponseErrorHandler();
|
||||
const [previousSearchParamMessage, setPreviousSearchParamMessage] = useState<string>('');
|
||||
|
||||
const { mutateAsync: login, isPending } = useMutation({
|
||||
...tanstackApiClient.mutation('post', '/api/auth/login').mutationOptions,
|
||||
onSuccess: async () => {
|
||||
const searchParams = new URLSearchParams(location.search);
|
||||
const redirectTo = searchParams.get(SearchParamKeys.Redirect);
|
||||
if (redirectTo) {
|
||||
navigate(redirectTo);
|
||||
return;
|
||||
}
|
||||
navigate('/');
|
||||
},
|
||||
onError: (error) => {
|
||||
@@ -50,6 +61,25 @@ export default function LoginRoute() {
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const searchParams = new URLSearchParams(location.search);
|
||||
const message = searchParams.get(SearchParamKeys.Message);
|
||||
if (message && message !== previousSearchParamMessage) {
|
||||
setPreviousSearchParamMessage(message);
|
||||
toast.info(message, {
|
||||
position: 'top-center',
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: false,
|
||||
progress: undefined,
|
||||
theme: 'colored',
|
||||
toastId: 'login-route-info-message',
|
||||
});
|
||||
}
|
||||
}, [location.search]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex align="center" justify="center" style={{ minHeight: 'calc(100vh - 64px)' }}>
|
||||
@@ -110,7 +140,7 @@ export default function LoginRoute() {
|
||||
)}
|
||||
/>
|
||||
|
||||
<div style={{ marginTop: 18, display: 'flex', gap: 8 }}>
|
||||
<div style={{ marginTop: 18, display: 'flex', gap: 8, justifySelf: 'center' }}>
|
||||
<form.SubmitButton
|
||||
loading={isPending}
|
||||
label={{
|
||||
|
||||
Reference in New Issue
Block a user