diff --git a/dashboard/src/components/header/index.tsx b/dashboard/src/components/header/index.tsx
@@ -1,5 +1,6 @@
import { LanguageSwitch } from "@marzneshin/features/language-switch"
import { ThemeToggle } from "@marzneshin/features/theme-switch"
+import { Logout } from "@marzneshin/features/auth"
import { Link } from "@tanstack/react-router"
import { FC, PropsWithChildren } from "react"
@@ -14,7 +15,8 @@ export const Header: FC<PropsWithChildren> = ({ children }) => {
</Link>
{children}
</div>
- <div className="flex flex-row gap-2 justify-reverse">
+ <div className="flex flex-row gap-2 h-10 justify-reverse">
+ <Logout />
<LanguageSwitch />
<ThemeToggle />
</div>
diff --git a/dashboard/src/components/nav-dir/index.tsx b/dashboard/src/components/nav-dir/index.tsx
@@ -125,7 +125,7 @@ export const NavigationDirectory: FC<NavigationDirectoryProps> = ({ sidebar }) =
<>
<BreadcrumbLink
asChild
- className="md:max-w-none max-w-20 truncate text-accent hover:text-primary-foreground"
+ className="md:max-w-none max-w-20 truncate text-accent dark:text-accent-foreground hover:text-primary-foreground"
>
<Link to={item.href}>{item.label}</Link>
</BreadcrumbLink>
diff --git a/dashboard/src/features/auth/auth.store.ts b/dashboard/src/features/auth/auth.store.ts
@@ -1,27 +1,32 @@
+import { fetch } from '@marzneshin/utils';
import { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';
type AdminStateType = {
- isLoggedIn: boolean,
+ isLoggedIn: () => Promise<boolean>,
getAuthToken: () => string | null;
setAuthToken: (token: string) => void;
removeAuthToken: () => void;
}
export const useAuth = create(
- subscribeWithSelector<AdminStateType>((set,) => ({
- isLoggedIn: false,
+ subscribeWithSelector<AdminStateType>(() => ({
+ isLoggedIn: async () => {
+ try {
+ await fetch('/admins');
+ return true;
+ } catch (error) {
+ return false;
+ }
+ },
getAuthToken: () => {
return localStorage.getItem('token');
},
setAuthToken: (token: string) => {
localStorage.setItem('token', token);
- set({ isLoggedIn: true });
},
-
removeAuthToken: () => {
localStorage.removeItem('token');
- set({ isLoggedIn: false });
},
}))
)
diff --git a/dashboard/src/features/auth/index.ts b/dashboard/src/features/auth/index.ts
@@ -1,2 +1,3 @@
export * from './auth.store';
export * from './login';
+export * from './logout'
diff --git a/dashboard/src/features/auth/logout/index.tsx b/dashboard/src/features/auth/logout/index.tsx
@@ -0,0 +1,22 @@
+
+import { Button } from '@marzneshin/components';
+import { useNavigate } from '@tanstack/react-router';
+import { LogOut } from 'lucide-react';
+import { FC, useCallback } from 'react'
+
+interface LogoutProps { }
+
+export const Logout: FC<LogoutProps> = () => {
+ const navigate = useNavigate({ from: '/' })
+ const handleLogout = useCallback(
+ () => {
+ navigate({ to: '/login' })
+ },
+ [navigate],
+ )
+ return (
+ <Button className="h-full" size="icon" onClick={handleLogout}>
+ <LogOut className="h-[1rem] w-[1rem]" />
+ </Button>
+ );
+}
diff --git a/dashboard/src/features/language-switch/index.tsx b/dashboard/src/features/language-switch/index.tsx
@@ -13,8 +13,8 @@ export const LanguageSwitch: FC = () => {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
- <Button variant="outline" className="bg-secondary-foreground text-primary-foreground" size="icon">
- <Languages className="transition-all scale-100 rotate-0 dark:scale-0 dark:-rotate-90 h-[1rem] w-[1rem]" />
+ <Button variant="outline" className="bg-secondary-foreground text-primary-foreground " size="icon">
+ <Languages className="h-[1rem] w-[1rem]" />
<span className="sr-only">Toggle Language</span>
</Button>
</DropdownMenuTrigger>
diff --git a/dashboard/src/routes/_auth/login.tsx b/dashboard/src/routes/_auth/login.tsx
@@ -1,11 +1,13 @@
import { Card, CardContent, CardHeader, CardTitle } from '@marzneshin/components';
-import { LoginForm } from '@marzneshin/features/auth';
+import { LoginForm, useAuth } from '@marzneshin/features/auth';
import { createFileRoute } from '@tanstack/react-router'
import { FC } from 'react'
import { useTranslation } from 'react-i18next';
const LoginPage: FC = () => {
const { t } = useTranslation();
+ const { removeAuthToken } = useAuth()
+ removeAuthToken()
return (
<div className='flex flex-row justify-center items-center p-4 w-full h-full'>
<Card className="p-1 w-full md:w-2/3">
diff --git a/dashboard/src/routes/_dashboard.tsx b/dashboard/src/routes/_dashboard.tsx
@@ -78,7 +78,8 @@ export const Route = createFileRoute('/_dashboard')({
component: () => <DashboardLayout />,
beforeLoad: async () => {
- if (!useAuth.getState().isLoggedIn) {
+ const loggedIn = await useAuth.getState().isLoggedIn()
+ if (!loggedIn) {
throw redirect({
to: '/login',
})
diff --git a/dashboard/src/utils/fetch.ts b/dashboard/src/utils/fetch.ts
@@ -21,11 +21,3 @@ export const fetcher = <T = any>(
};
export const fetch = fetcher;
-
-export const fetchAdminLoader = () => {
- return fetch('/admins', {
- headers: {
- Authorization: `Bearer ${useAuth.getState().getAuthToken()}`,
- },
- });
-};