StepanovPlaton/torrent_frontend
1
0
Fork 0
mirror of https://github.com/StepanovPlaton/torrent_frontend.git synced 2026-04-04 04:40:50 +04:00
Code Issues Packages Projects Releases Wiki Activity

Add login

Browse Source
This commit is contained in:
Степанов Платон
2024-05-18 20:30:15 +04:00
parent d7f152c46a
commit 2572c43733
24 changed files with 536 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/app/@auth/(.)login/page.tsx
View File

@@ -1,3 +1,74 @@
"use client";
import {
LoginForm,
loginFormFieldNames,
loginFormSchema,
} from "@/entities/user";
import { UserService } from "@/entities/user/user";
import { Modal } from "@/shared/ui";
import { zodResolver } from "@hookform/resolvers/zod";
import { useRouter } from "next/navigation";
import { SubmitHandler, useForm } from "react-hook-form";
import { mutate } from "swr";
export default function Login() {
return <>123</>;
const {
register,
handleSubmit,
formState: { errors },
} = useForm<LoginForm>({ resolver: zodResolver(loginFormSchema) });
const router = useRouter();
const onSubmit: SubmitHandler<LoginForm> = async (data) => {
const userInfo = await UserService.Login(data);
mutate("user", userInfo);
router.back();
};
return (
<Modal>
<div className="">
<form
onSubmit={handleSubmit(onSubmit)}
className="flex flex-col items-center justify-evenly"
>
<h2 className="pb-4 text-4xl">.Torrent</h2>
{(["username", "password"] as ("username" | "password")[]).map(
(field) => (
<label
className="flex flex-col items-start relative w-64 py-1"
key={field}
>
<input
{...register(field)}
className="peer/search w-full rounded-lg bg-bg4 px-2 h-10"
placeholder=" "
autoComplete="off"
/>
<span
className="peer-focus/search:opacity-0
peer-[:not(:placeholder-shown)]/search:opacity-0
transition-opacity h-0 flex items-center relative bottom-5 left-4
text-lg"
>
{loginFormFieldNames[field]}
</span>
<p className="text-sm text-err w-full text-center">
{errors[field]?.message}
</p>
</label>
)
)}
<input
type="submit"
value="Войти"
className="bg-ac0 mt-2 p-1 px-4 rounded-lg"
/>
</form>
</div>
</Modal>
);
}

3
src/app/@auth/[...catchAll]/page.tsx
View File

@@ -1,3 +0,0 @@
export default function CatchAll() {
return null;
}

6
src/app/globals.css
View File

@@ -15,6 +15,8 @@
--color-ac1: #fabd2f;
--color-ac2: #8ec07c;
--color-err: #cc241d;
--app-width: 70%;
font-size: calc((100vw / 1920) * 20);
}
@@ -31,6 +33,8 @@
--color-ac0: #076678;
--color-ac1: #b57614;
--color-ac2: #427b58;
--color-err: #cc241d;
}
html,
@@ -45,7 +49,7 @@ body {
transition-property: color, background-color, border-color;
transition-duration: 0.3s;
/* overflow: hidden; */
overflow: hidden;
color: var(--color-fg1);
background-color: var(--color-bg0);
}

36
src/app/layout.tsx
View File

@@ -6,24 +6,24 @@ import { Header } from "@/widgets/header";
const inter = Inter({ subsets: ["latin"] });
export default function RootLayout({
auth,
children,
auth,
children,
}: Readonly<{
auth: React.ReactNode;
children: React.ReactNode;
auth: React.ReactNode;
children: React.ReactNode;
}>) {
return (
// suppressHydrationWarning for theme support
<html lang="ru" suppressHydrationWarning>
<body className={inter.className}>
<ThemeProvider enableSystem={false} defaultTheme="light">
{auth}
<Header />
<div className="w-full h-full max-w-[var(--app-width)] m-auto">
{children}
</div>
</ThemeProvider>
</body>
</html>
);
return (
// suppressHydrationWarning for theme support
<html lang="ru" suppressHydrationWarning>
<body className={inter.className}>
<ThemeProvider enableSystem={false} defaultTheme="light">
{auth}
<Header />
<div className="w-full h-full max-w-[var(--app-width)] m-auto overflow-y-auto">
{children}
</div>
</ThemeProvider>
</body>
</html>
);
}

4
src/app/login/page.tsx
View File

@@ -1,3 +1,5 @@
import { redirect } from "next/navigation";
export default function Login() {
return <>login page</>;
redirect("/");
}

2
src/entities/game/game.ts
View File

@@ -1,4 +1,4 @@
import { HTTPService } from "@/shared/http/httpService";
import { HTTPService } from "@/shared/utils/http";
import { gameCardsSchema, GameCardType } from "./schemas/gameCard";
import { gameSchema, GameType } from "./schemas/game";

50
src/entities/game/schemas/gameCard.ts
View File

@@ -1,35 +1,35 @@
import { z } from "zod";
export const gameCardSchema = z
.object({
id: z.number(),
title: z.string().min(3),
cover: z.string().optional(),
description: z.string().optional(),
version: z.string().optional(),
})
.transform((card) => {
return {
...card,
cover: card.cover
? process.env.NEXT_PUBLIC_COVER_FULL_URL + "/" + card.cover
: undefined,
cover_preview: card.cover
? process.env.NEXT_PUBLIC_COVER_PREVIEW_URL + "/" + card.cover
: undefined,
};
});
.object({
id: z.number().positive(),
title: z.string().min(3),
cover: z.string().optional(),
description: z.string().optional(),
version: z.string().optional(),
})
.transform((card) => {
return {
...card,
cover: card.cover
? process.env.NEXT_PUBLIC_COVER_FULL_URL + "/" + card.cover
: undefined,
cover_preview: card.cover
? process.env.NEXT_PUBLIC_COVER_PREVIEW_URL + "/" + card.cover
: undefined,
};
});
export type GameCardType = z.infer<typeof gameCardSchema>;
export const isGameCard = (a: any): a is GameCardType => {
return gameCardSchema.safeParse(a).success;
return gameCardSchema.safeParse(a).success;
};
export const gameCardsSchema = z.array(z.any()).transform((a) => {
const cards: GameCardType[] = [];
a.forEach((e) => {
if (isGameCard(e)) cards.push(gameCardSchema.parse(e));
else console.error("GameCard parse error - ", e);
});
return cards;
const cards: GameCardType[] = [];
a.forEach((e) => {
if (isGameCard(e)) cards.push(gameCardSchema.parse(e));
else console.error("GameCard parse error - ", e);
});
return cards;
});

16
src/entities/user/index.ts Normal file
View File

@@ -0,0 +1,16 @@
import {
loginFormSchema,
loginFormFieldNames,
LoginForm,
} from "./schemas/auth";
import { userSchema, User } from "./schemas/user";
import { UserService } from "./user";
export {
loginFormSchema,
loginFormFieldNames,
UserService,
userSchema,
type User,
type LoginForm,
};

30
src/entities/user/schemas/auth.ts Normal file
View File

@@ -0,0 +1,30 @@
import { z } from "zod";
import { userSchema } from "./user";
export const loginFormSchema = z.object({
username: z.string().min(3, "Логин слишком короткий"),
password: z.string().min(3, "Пароль слишком короткий"),
});
export const loginFormFieldNames = {
username: "Логин",
password: "Пароль",
};
export type LoginForm = z.infer<typeof loginFormSchema>;
export const tokenResponseSchema = z
.object({
access_token: z.string(),
token_type: z.string(),
})
.transform((tokenResponse) => tokenResponse.access_token);
export type TokenResponse = z.infer<typeof tokenResponseSchema>;
export const tokenDataSchema = userSchema.merge(
z.object({
expire: z
.string()
.min(1)
.transform((d) => new Date(d)),
})
);
export type TokenData = z.infer<typeof tokenDataSchema>;

8
src/entities/user/schemas/user.ts Normal file
View File

@@ -0,0 +1,8 @@
import { z } from "zod";
export const userSchema = z.object({
id: z.number().positive(),
name: z.string().min(3),
email: z.string().min(3),
});
export type User = z.infer<typeof userSchema>;

48
src/entities/user/user.ts Normal file
View File

@@ -0,0 +1,48 @@
import { HTTPService } from "@/shared/utils/http";
import {
LoginForm,
TokenData,
tokenDataSchema,
TokenResponse,
tokenResponseSchema,
} from "./schemas/auth";
import { jwtDecode } from "jwt-decode";
import Cookies from "js-cookie";
export abstract class UserService {
public static async Login(loginForm: LoginForm) {
const accessToken = await HTTPService.post<TokenResponse>(
"/auth",
new URLSearchParams(Object.entries(loginForm)),
tokenResponseSchema,
{
"Content-Type": "application/x-www-form-urlencoded",
}
);
if (accessToken) {
const tokenData = this.DecodeToken(accessToken);
if (tokenData) {
Cookies.set("access-token", accessToken, {
secure: true,
expires: tokenData.expire,
});
return tokenData;
}
}
}
public static IdentifyYourself(): TokenData | undefined {
const token = Cookies.get("access-token");
if (token) {
return this.DecodeToken(token);
}
}
public static DecodeToken(token: string): TokenData | undefined {
const tokenPayload = jwtDecode(token);
const parseResult = tokenDataSchema.safeParse(tokenPayload);
if (parseResult.success) {
return parseResult.data;
} else console.error("JWT payload broken - " + parseResult.error);
}
}

3
src/features/userActivities/index.ts Normal file
View File

@@ -0,0 +1,3 @@
import { UserActivities } from "./userActivities";
export { UserActivities };

29
src/features/userActivities/userActivities.tsx Normal file
View File

@@ -0,0 +1,29 @@
"use client";
import { UserService } from "@/entities/user";
import { PersonIcon } from "@/shared/assets/icons";
import Link from "next/link";
import useSWR from "swr";
export const UserActivities = () => {
const { data: me } = useSWR("user", () => UserService.IdentifyYourself());
return (
<>
<PersonIcon className="mr-1 h-4 w-4" />
{me && (
<span className="group/login cursor-pointer flex items-center">
<span className="group-hover/login:underline">{me.name}</span>
</span>
)}
{!me && (
<Link
href="/login"
className="group/login cursor-pointer flex items-center"
>
<span className="group-hover/login:underline">Войти</span>
</Link>
)}
</>
);
};

34
src/shared/http/httpService.ts
View File

@@ -1,34 +0,0 @@
import { z } from "zod";
export abstract class HTTPService {
public static async get<Z>(
url: string,
schema: z.ZodTypeAny
): Promise<Z | null> {
return await fetch(process.env.NEXT_PUBLIC_BASE_URL + url, {
method: "GET",
headers: {
accept: "application/json",
},
cache: "no-cache",
})
.then((r) => {
if (r && r.ok) return r;
else throw Error("Response ok = false");
})
.then((r) => r.json())
.then((d) => {
const parseResult = schema.safeParse(d);
if (parseResult.success) {
return parseResult.data as Z;
} else {
console.error(parseResult.error);
return null;
}
})
.catch((e) => {
console.error(e);
return null;
});
}
}

3
src/shared/ui/index.ts Normal file
View File

@@ -0,0 +1,3 @@
import { Modal } from "./modal";
export { Modal };

33
src/shared/ui/modal.tsx Normal file
View File

@@ -0,0 +1,33 @@
"use client";
import clsx from "clsx";
import { useState } from "react";
import { useRouter } from "next/navigation";
export const Modal = ({ children }: { children: React.ReactNode }) => {
const [closing, setClosing] = useState(false);
const router = useRouter();
return (
<div
className={clsx(
!closing && "animate-fadeIn",
closing && "animate-fadeOut opacity-0",
"flex items-center justify-around",
"absolute z-20 left-0 w-full h-full bg-[#000000c5]"
)}
onClick={() => {
setClosing(true);
setTimeout(() => router.back(), 500);
}}
>
<div
className="rounded-lg bg-bg1 w-fit h-fit p-6"
onClick={(e) => {
e.stopPropagation();
}}
>
{children}
</div>
</div>
);
};

0
src/shared/utils/get_youtube_id.ts → src/shared/utils/getYoutubeId.ts
View File

53
src/shared/utils/http.ts Normal file
View File

@@ -0,0 +1,53 @@
import { z } from "zod";
export abstract class HTTPService {
public static async get<Z>(
url: string,
schema: z.ZodTypeAny
): Promise<Z | null> {
return await fetch(process.env.NEXT_PUBLIC_BASE_URL + url, {
method: "GET",
headers: {
accept: "application/json",
},
cache: "no-cache",
})
.then((r) => {
if (r && r.ok) return r;
else throw Error("Response ok = false");
})
.then((r) => r.json())
.then((d) => schema.parse(d))
.catch((e) => {
console.error(e);
return null;
});
}
public static async post<Z>(
url: string,
body: BodyInit,
schema: z.ZodTypeAny,
headers?: HeadersInit
): Promise<Z | null> {
return await fetch(process.env.NEXT_PUBLIC_BASE_URL + url, {
method: "POST",
headers: {
accept: "application/json",
...headers,
},
body: body,
cache: "no-cache",
})
.then((r) => {
if (r && r.ok) return r;
else throw Error("Response ok = false");
})
.then((r) => r.json())
.then((d) => schema.parse(d))
.catch((e) => {
console.error(e);
return null;
});
}
}

2
src/shared/utils/index.ts
View File

@@ -1,3 +1,3 @@
import { getYouTubeID } from "./get_youtube_id";
import { getYouTubeID } from "./getYoutubeId";
export { getYouTubeID };

109
src/widgets/header/header.tsx
View File

@@ -1,74 +1,69 @@
"use client";
import { SchemeSwitch } from "@/features/colorSchemeSwitch";
import { PersonIcon, SearchIcon } from "@/shared/assets/icons";
import { SearchIcon } from "@/shared/assets/icons";
import { MobileMenu } from "./mobileMenu/mobileMenu";
import Link from "next/link";
import { useSelectedLayoutSegment } from "next/navigation";
import clsx from "clsx";
import { UserActivities } from "@/features/userActivities";
const sections = [
{ title: "Игры", href: "games" },
{ title: "Фильмы", href: "films" },
{ title: "Аудиокниги", href: "audiobooks" },
{ title: "Игры", href: "games" },
{ title: "Фильмы", href: "films" },
{ title: "Аудиокниги", href: "audiobooks" },
];
export const Header = () => {
const currentPageName = useSelectedLayoutSegment();
const currentPageName = useSelectedLayoutSegment();
return (
<header className="w-full h-20 bg-bg1 sticky top-0 shadow-xl">
<div
className="w-full h-full max-w-[var(--app-width)] m-auto px-5
return (
<header className="w-full h-20 z-10 bg-bg1 sticky top-0 shadow-xl">
<div
className="w-full h-full max-w-[var(--app-width)] m-auto px-5
flex items-center justify-between"
>
<h1 className="text-4xl font-bold flex items-center">
<div className="lp:hidden">
<MobileMenu sections={sections} />
</div>
<Link href="/">.Torrent</Link>
</h1>
<div className="hidden text-2xl dsk:block">
{sections.map((section) => (
<Link
key={section.title}
className={clsx(
"px-5 cursor-pointer hover:underline underline-offset-2",
currentPageName === section.href && "underline"
)}
href={section.href}
>
{section.title}
</Link>
))}
</div>
<div className="flex flex-col items-end">
<span className="flex items-center mb-1 ">
<SchemeSwitch />
<Link
href="/login"
className="group/login cursor-pointer flex items-center"
>
<PersonIcon className="mr-1 h-4 w-4" />
<span className="group-hover/login:underline">Войти</span>
</Link>
</span>
<label className="flex flex-col items-start relative w-36">
<input
className="peer/search w-full rounded-lg bg-bg4 px-2"
placeholder=" "
/>
<span
className="peer-focus/search:opacity-0
>
<h1 className="text-4xl font-bold flex items-center">
<div className="lp:hidden">
<MobileMenu sections={sections} />
</div>
<Link href="/">.Torrent</Link>
</h1>
<div className="hidden text-2xl lp:block">
{sections.map((section) => (
<Link
key={section.title}
className={clsx(
"px-5 cursor-pointer hover:underline underline-offset-2",
currentPageName === section.href && "underline"
)}
href={section.href}
>
{section.title}
</Link>
))}
</div>
<div className="flex flex-col items-end">
<span className="flex items-center mb-1 ">
<SchemeSwitch />
<UserActivities />
</span>
<label className="flex flex-col items-start relative w-36">
<input
className="peer/search w-full rounded-lg bg-bg4 px-2"
placeholder=" "
/>
<span
className="peer-focus/search:opacity-0
peer-[:not(:placeholder-shown)]/search:opacity-0
transition-opacity h-0 flex items-center relative bottom-3"
>
<SearchIcon className="w-4 h-4 mx-2" />
Поиск
</span>
</label>
</div>
</div>
</header>
);
>
<SearchIcon className="w-4 h-4 mx-2" />
Поиск
</span>
</label>
</div>
</div>
</header>
);
};

14
src/widgets/section/section.tsx
View File

@@ -1,8 +1,11 @@
"use client";
import clsx from "clsx";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
import { boolean } from "zod";
export const Section = ({
name,
@@ -16,6 +19,9 @@ export const Section = ({
children: React.ReactNode;
}) => {
const router = useRouter();
const [loaded, setLoaded] = useState<boolean>(false);
useEffect(() => setLoaded(true), []);
return (
<section className="w-full h-fit p-2 mb-20 pt-8">
@@ -27,7 +33,13 @@ export const Section = ({
{name}
</h2>
)}
<ResponsiveMasonry columnsCountBreakPoints={{ 0: 1, 640: 2, 1024: 3 }}>
<ResponsiveMasonry
className={clsx(
"transition-opacity duration-300 opacity-0",
loaded && "opacity-100"
)}
columnsCountBreakPoints={{ 0: 1, 640: 2, 1024: 3 }}
>
<Masonry gutter="1rem">{children}</Masonry>
</ResponsiveMasonry>
{link && invite_text && (