Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-07 00:34:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

feat: saving auth

Browse source
This commit is contained in:
Kentai Radiquum 2024-07-14 12:56:50 +05:00
parent 5aa8b1103e
commit c4a9b4f91a
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
3 changed files with 67 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/App.jsx
View file

@ -1,8 +1,16 @@
"use client";
import { useUserStore } from "./store/auth";
import { Navbar } from "./components/Navbar/Navbar"; import { Navbar } from "./components/Navbar/Navbar";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import { useEffect } from "react";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
export const App = (props) => { export const App = (props) => {
const userStore = useUserStore();
useEffect(() => {
userStore.checkAuth();
}, [])
return ( return (
<body className={`${inter.className} overflow-x-hidden`}> <body className={`${inter.className} overflow-x-hidden`}>
<Navbar /> <Navbar />

69
app/components/Navbar/Navbar.jsx
View file

@ -1,11 +1,13 @@
"use client" "use client";
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { useUserStore } from "@/app/store/auth";
export const Navbar = () => { export const Navbar = () => {
const pathname = usePathname(); const pathname = usePathname();
const userStore = useUserStore();
const isNotAuthorizedStyle = "text-gray-700" const isNotAuthorizedStyle = "text-gray-700";
const navLinks = [ const navLinks = [
{ {
id: 1, id: 1,
@ -14,7 +16,7 @@ export const Navbar = () => {
title: "Домашняя", title: "Домашняя",
href: "/", href: "/",
withAuthOnly: false, withAuthOnly: false,
mobileMenu: false mobileMenu: false,
}, },
{ {
id: 2, id: 2,
@ -23,7 +25,7 @@ export const Navbar = () => {
title: "Поиск", title: "Поиск",
href: "/search", href: "/search",
withAuthOnly: false, withAuthOnly: false,
mobileMenu: false mobileMenu: false,
}, },
{ {
id: 3, id: 3,
@ -32,7 +34,7 @@ export const Navbar = () => {
title: "Закладки", title: "Закладки",
href: "/bookmarks", href: "/bookmarks",
withAuthOnly: true, withAuthOnly: true,
mobileMenu: true mobileMenu: true,
}, },
{ {
id: 4, id: 4,
@ -41,7 +43,7 @@ export const Navbar = () => {
title: "Избранное", title: "Избранное",
href: "/favorites", href: "/favorites",
withAuthOnly: true, withAuthOnly: true,
mobileMenu: true mobileMenu: true,
}, },
{ {
id: 5, id: 5,
@ -50,7 +52,7 @@ export const Navbar = () => {
title: "История", title: "История",
href: "/history", href: "/history",
withAuthOnly: true, withAuthOnly: true,
mobileMenu: true mobileMenu: true,
}, },
]; ];
@ -59,13 +61,56 @@ export const Navbar = () => {
<div className="container flex items-center justify-between px-4 py-4 mx-auto"> <div className="container flex items-center justify-between px-4 py-4 mx-auto">
<nav className="flex gap-4"> <nav className="flex gap-4">
{navLinks.map((link) => { {navLinks.map((link) => {
return <Link key={link.id} href={link.href} className={`flex-col items-center sm:flex-row ${link.mobileMenu ? "hidden sm:flex" : "flex"}`}><span className={`iconify ${pathname == link.href ? link.iconActive : link.icon} w-6 h-6`}></span><span className={`${pathname == link.href ? "font-bold" : ""} text-xs sm:text-base`}>{link.title}</span></Link>; return (
<Link
key={link.id}
href={link.href}
className={`flex-col items-center sm:flex-row ${
link.mobileMenu ? "hidden sm:flex" : "flex"
}`}
>
<span
className={`iconify ${
pathname == link.href ? link.iconActive : link.icon
} w-6 h-6`}
></span>
<span
className={`${
pathname == link.href ? "font-bold" : ""
} text-xs sm:text-base`}
>
{link.title}
</span>
</Link>
);
})} })}
</nav> </nav>
<Link href="/login" className="flex flex-col items-center gap-1 justify-cen ter sm:flex-row"> {userStore.user ? (
<span className={`w-6 h-6 iconify ${pathname == "/login" ? "mdi--user-circle" : "mdi--user-circle-outline"}`}></span> <div className="flex items-center justify-center gap-2">
<span className={`${pathname == "/login" ? "font-bold" : ""} text-xs sm:text-base`}>Войти</span> <img src={userStore.user.avatar} alt="" className="w-8 h-8 rounded-full" />
</Link> <p>{userStore.user.login}</p>
</div>
) : (
<Link
href="/login"
className="flex flex-col items-center gap-1 justify-cen ter sm:flex-row"
>
<span
className={`w-6 h-6 iconify ${
pathname == "/login"
? "mdi--user-circle"
: "mdi--user-circle-outline"
}`}
></span>
<span
className={`${
pathname == "/login" ? "font-bold" : ""
} text-xs sm:text-base`}
>
Войти
</span>
</Link>
)}
</div> </div>
</header> </header>
); );

4
app/store/auth.js
View file

@ -8,7 +8,7 @@ export const useUserStore = create((set, get) => ({
token: null, token: null,
login: (user, token) => { login: (user, token) => {
set({ isAuth: true, user, token }); set({ isAuth: true, user: user, token: token });
}, },
logout: () => { logout: () => {
set({ isAuth: false, user: null, token: null }); set({ isAuth: false, user: null, token: null });
@ -21,7 +21,7 @@ export const useUserStore = create((set, get) => ({
`/api/profile/${jwt.user_id}?token=${jwt.jwt}` `/api/profile/${jwt.user_id}?token=${jwt.jwt}`
); );
if (data && data.is_my_profile) { if (data && data.is_my_profile) {
get().login(data, jwt.user_id, jwt.jwt); get().login(data.profile, jwt.jwt);
} else { } else {
get().logout(); get().logout();
} }