[frontend]: add zustand
This commit is contained in:
parent
57cc2c4584
commit
8bd66ffe46
@ -31,7 +31,8 @@
|
|||||||
"react-hook-form": "7.61.1",
|
"react-hook-form": "7.61.1",
|
||||||
"sonner": "2.0.6",
|
"sonner": "2.0.6",
|
||||||
"tailwind-merge": "3.3.1",
|
"tailwind-merge": "3.3.1",
|
||||||
"zod": "4.0.14"
|
"zod": "4.0.14",
|
||||||
|
"zustand": "5.0.7"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/eslintrc": "3.3.1",
|
"@eslint/eslintrc": "3.3.1",
|
||||||
|
|||||||
@ -15,6 +15,7 @@ import {
|
|||||||
import { Input } from '@/components/ui/common/Input';
|
import { Input } from '@/components/ui/common/Input';
|
||||||
import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/common/InputOTP';
|
import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/common/InputOTP';
|
||||||
import { useLoginUserMutation } from '@/graphql/generated/output';
|
import { useLoginUserMutation } from '@/graphql/generated/output';
|
||||||
|
import { useAuth } from '@/hooks/useAuth';
|
||||||
import { loginSchema } from '@/schemas/auth/login.schema';
|
import { loginSchema } from '@/schemas/auth/login.schema';
|
||||||
|
|
||||||
import AuthWrapper from '../AuthWrapper';
|
import AuthWrapper from '../AuthWrapper';
|
||||||
@ -25,6 +26,7 @@ const LoginAccountForm = () => {
|
|||||||
const t = useTranslations('auth.login');
|
const t = useTranslations('auth.login');
|
||||||
const [isShowTwoFactor, setIsShowTwoFactor] = useState(false);
|
const [isShowTwoFactor, setIsShowTwoFactor] = useState(false);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const { auth } = useAuth();
|
||||||
|
|
||||||
const form = useForm<TypeLoginSchema>({
|
const form = useForm<TypeLoginSchema>({
|
||||||
resolver: zodResolver(loginSchema),
|
resolver: zodResolver(loginSchema),
|
||||||
@ -40,6 +42,7 @@ const LoginAccountForm = () => {
|
|||||||
if (data.loginUser.message) {
|
if (data.loginUser.message) {
|
||||||
setIsShowTwoFactor(true);
|
setIsShowTwoFactor(true);
|
||||||
} else {
|
} else {
|
||||||
|
auth();
|
||||||
toast.success(t('successMessage'));
|
toast.success(t('successMessage'));
|
||||||
router.push('/dashboard/settings');
|
router.push('/dashboard/settings');
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,6 +7,7 @@ import { useEffect } from 'react';
|
|||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
import { useVerifyAccountMutation } from '@/graphql/generated/output';
|
import { useVerifyAccountMutation } from '@/graphql/generated/output';
|
||||||
|
import { useAuth } from '@/hooks/useAuth';
|
||||||
|
|
||||||
import AuthWrapper from '../AuthWrapper';
|
import AuthWrapper from '../AuthWrapper';
|
||||||
|
|
||||||
@ -16,11 +17,12 @@ type VerifyAccountFormProps = {
|
|||||||
export const VerifyAccountForm = (props: VerifyAccountFormProps) => {
|
export const VerifyAccountForm = (props: VerifyAccountFormProps) => {
|
||||||
const { token } = props;
|
const { token } = props;
|
||||||
const t = useTranslations('auth.verify');
|
const t = useTranslations('auth.verify');
|
||||||
|
const { auth } = useAuth();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const [verify] = useVerifyAccountMutation({
|
const [verify] = useVerifyAccountMutation({
|
||||||
onCompleted() {
|
onCompleted() {
|
||||||
|
auth();
|
||||||
toast.success(t('successMessage'));
|
toast.success(t('successMessage'));
|
||||||
router.push('/dashboard/settings');
|
router.push('/dashboard/settings');
|
||||||
},
|
},
|
||||||
|
|||||||
19
frontend/src/hooks/useAuth.ts
Normal file
19
frontend/src/hooks/useAuth.ts
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import { authStore } from '@/store/auth/auth.store';
|
||||||
|
|
||||||
|
export function useAuth() {
|
||||||
|
const isAuthenticated = authStore((state) => state.isAuthenticated);
|
||||||
|
const setIsAuthenticated = authStore((state) => state.setIsAuthenticated);
|
||||||
|
|
||||||
|
const auth = () => {
|
||||||
|
setIsAuthenticated(true);
|
||||||
|
};
|
||||||
|
const exit = () => {
|
||||||
|
setIsAuthenticated(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
isAuthenticated,
|
||||||
|
auth,
|
||||||
|
exit,
|
||||||
|
};
|
||||||
|
}
|
||||||
17
frontend/src/store/auth/auth.store.ts
Normal file
17
frontend/src/store/auth/auth.store.ts
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import { create } from 'zustand';
|
||||||
|
import { createJSONStorage, persist } from 'zustand/middleware';
|
||||||
|
|
||||||
|
import type { AuthStore } from './auth.types';
|
||||||
|
|
||||||
|
export const authStore = create(
|
||||||
|
persist<AuthStore>(
|
||||||
|
(set) => ({
|
||||||
|
isAuthenticated: false,
|
||||||
|
setIsAuthenticated: (value: boolean) => { set({ isAuthenticated: value }); },
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
name: 'auth',
|
||||||
|
storage: createJSONStorage(() => localStorage),
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
4
frontend/src/store/auth/auth.types.ts
Normal file
4
frontend/src/store/auth/auth.types.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export type AuthStore = {
|
||||||
|
isAuthenticated: boolean;
|
||||||
|
setIsAuthenticated: (value: boolean) => void;
|
||||||
|
};
|
||||||
@ -6003,3 +6003,8 @@ zod@4.0.14:
|
|||||||
version "4.0.14"
|
version "4.0.14"
|
||||||
resolved "https://registry.yarnpkg.com/zod/-/zod-4.0.14.tgz#cc3a0a21981e63e0f99c0f4f1decd92ec3be7e9f"
|
resolved "https://registry.yarnpkg.com/zod/-/zod-4.0.14.tgz#cc3a0a21981e63e0f99c0f4f1decd92ec3be7e9f"
|
||||||
integrity sha512-nGFJTnJN6cM2v9kXL+SOBq3AtjQby3Mv5ySGFof5UGRHrRioSJ5iG680cYNjE/yWk671nROcpPj4hAS8nyLhSw==
|
integrity sha512-nGFJTnJN6cM2v9kXL+SOBq3AtjQby3Mv5ySGFof5UGRHrRioSJ5iG680cYNjE/yWk671nROcpPj4hAS8nyLhSw==
|
||||||
|
|
||||||
|
zustand@5.0.7:
|
||||||
|
version "5.0.7"
|
||||||
|
resolved "https://registry.yarnpkg.com/zustand/-/zustand-5.0.7.tgz#e325364e82c992a84bf386d8445aa7f180c450dc"
|
||||||
|
integrity sha512-Ot6uqHDW/O2VdYsKLLU8GQu8sCOM1LcoE8RwvLv9uuRT9s6SOHCKs0ZEOhxg+I1Ld+A1Q5lwx+UlKXXUoCZITg==
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user