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

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 { Inter } from "next/font/google";
import { useEffect } from "react";
const inter = Inter({ subsets: ["latin"] });
export const App = (props) => {
const userStore = useUserStore();
useEffect(() => {
userStore.checkAuth();
}, [])
return (
<body className={`${inter.className} overflow-x-hidden`}>
<Navbar />

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

@ -1,11 +1,13 @@
"use client"
"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useUserStore } from "@/app/store/auth";
export const Navbar = () => {
const pathname = usePathname();
const userStore = useUserStore();
const isNotAuthorizedStyle = "text-gray-700"
const isNotAuthorizedStyle = "text-gray-700";
const navLinks = [
{
id: 1,
@ -14,7 +16,7 @@ export const Navbar = () => {
title: "Домашняя",
href: "/",
withAuthOnly: false,
mobileMenu: false
mobileMenu: false,
},
{
id: 2,
@ -23,7 +25,7 @@ export const Navbar = () => {
title: "Поиск",
href: "/search",
withAuthOnly: false,
mobileMenu: false
mobileMenu: false,
},
{
id: 3,
@ -32,7 +34,7 @@ export const Navbar = () => {
title: "Закладки",
href: "/bookmarks",
withAuthOnly: true,
mobileMenu: true
mobileMenu: true,
},
{
id: 4,
@ -41,7 +43,7 @@ export const Navbar = () => {
title: "Избранное",
href: "/favorites",
withAuthOnly: true,
mobileMenu: true
mobileMenu: true,
},
{
id: 5,
@ -50,7 +52,7 @@ export const Navbar = () => {
title: "История",
href: "/history",
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">
<nav className="flex gap-4">
{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>
<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>
{userStore.user ? (
<div className="flex items-center justify-center gap-2">
<img src={userStore.user.avatar} alt="" className="w-8 h-8 rounded-full" />
<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>
</header>
);

4
app/store/auth.js
View file

@ -8,7 +8,7 @@ export const useUserStore = create((set, get) => ({
token: null,
login: (user, token) => {
set({ isAuth: true, user, token });
set({ isAuth: true, user: user, token: token });
},
logout: () => {
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}`
);
if (data && data.is_my_profile) {
get().login(data, jwt.user_id, jwt.jwt);
get().login(data.profile, jwt.jwt);
} else {
get().logout();
}