From 910bd2d4dc1040835b343a1b582096c193a50a3e Mon Sep 17 00:00:00 2001 From: sealday Date: Sat, 6 Apr 2024 01:08:52 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/signout-button.tsx | 29 +++- app/layout.tsx | 258 +++++++++++++++++++++++++++++- app/lib/actions.ts | 71 -------- app/lib/actions/auth.ts | 70 ++++++++ app/music.svg | 1 + app/page.tsx | 158 +++++------------- app/signin/page.tsx | 94 ++++++++--- app/signup/page.tsx | 140 +++++++++++++--- package.json | 20 +-- pnpm-lock.yaml | 30 ++-- 10 files changed, 603 insertions(+), 268 deletions(-) delete mode 100644 app/lib/actions.ts create mode 100644 app/lib/actions/auth.ts create mode 100644 app/music.svg diff --git a/app/components/signout-button.tsx b/app/components/signout-button.tsx index 9bee84f..7c9f506 100644 --- a/app/components/signout-button.tsx +++ b/app/components/signout-button.tsx @@ -1,11 +1,24 @@ -'use client'; -import { signout } from '@/app/lib/actions'; - -export default function SignoutButton() { - return -}; \ No newline at end of file + ); +} diff --git a/app/layout.tsx b/app/layout.tsx index 0bcecca..985a4d6 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; +import SignoutButton from "./components/signout-button"; const inter = Inter({ subsets: ["latin"] }); @@ -16,7 +17,262 @@ export default function RootLayout({ }>) { return ( - {children} + +
+
+ + + + + 音乐弹幕 + + + +
+
+
{children}
+ + ); } diff --git a/app/lib/actions.ts b/app/lib/actions.ts deleted file mode 100644 index 052a8c9..0000000 --- a/app/lib/actions.ts +++ /dev/null @@ -1,71 +0,0 @@ -'use server'; -import { redirect } from 'next/navigation' -import { cookies } from 'next/headers' - -const SIGNUP_URL = 'https://tachy.daoyoucloud.com/api/auth:signUp'; -const SIGNIN_URL = 'https://tachy.daoyoucloud.com/api/auth:signIn'; -const SIGNOUT_URL = 'https://tachy.daoyoucloud.com/api/auth:signOut' - - -export async function signout() { - const token = cookies().get('token'); - const result = await fetch(SIGNOUT_URL, { - "headers": { - "authorization": "Bearer " + token?.value, - "cache-control": "no-cache", - "pragma": "no-cache", - "x-app": "danmu-sim", - "x-authenticator": "basic", - "x-locale": "zh-CN", - "x-timezone": "+08:00", - "x-with-acl-meta": "true", - }, - "body": '', - "method": "POST" - }); - cookies().delete('token'); - redirect('/signin'); -} - - -export async function signin(_currentState: unknown, formData: FormData) { - const result = await fetch(SIGNIN_URL, { - "headers": { - "cache-control": "no-cache", - "content-type": "application/json", - "pragma": "no-cache", - "x-app": "danmu-sim", - "x-authenticator": "basic", - "x-hostname": "tachy.daoyoucloud.com", - "x-locale": "zh-CN", - "x-timezone": "+08:00", - "x-with-acl-meta": "true", - }, - "body": JSON.stringify(Object.fromEntries(formData)), - "method": "POST" - }); - const res = await result.json(); - if (res.errors) { - return res.errors[0].message; - } - cookies().set('token', res.data.token); - redirect('/'); -} - -export async function signup(_currentState: unknown, formData: FormData) { - const result = await fetch(SIGNUP_URL, { - method: 'POST', - headers: { - 'X-App': 'danmu-sim', - "content-type": "application/json", - "x-authenticator": "basic", - "x-locale": "zh-CN", - "x-timezone": "+08:00", - }, - body: JSON.stringify(Object.fromEntries(formData)) - }) - const response = await result.json(); - if (response.errors) { - return response.errors[0].message; - } -} \ No newline at end of file diff --git a/app/lib/actions/auth.ts b/app/lib/actions/auth.ts new file mode 100644 index 0000000..ffbf2e8 --- /dev/null +++ b/app/lib/actions/auth.ts @@ -0,0 +1,70 @@ +"use server"; +import { redirect } from "next/navigation"; +import { cookies } from "next/headers"; + +const SIGNUP_URL = "https://tachy.daoyoucloud.com/api/auth:signUp"; +const SIGNIN_URL = "https://tachy.daoyoucloud.com/api/auth:signIn"; +const SIGNOUT_URL = "https://tachy.daoyoucloud.com/api/auth:signOut"; + +export async function signout() { + const token = cookies().get("token"); + const result = await fetch(SIGNOUT_URL, { + headers: { + authorization: "Bearer " + token?.value, + "cache-control": "no-cache", + pragma: "no-cache", + "x-app": "danmu-sim", + "x-authenticator": "basic", + "x-locale": "zh-CN", + "x-timezone": "+08:00", + "x-with-acl-meta": "true", + }, + body: "", + method: "POST", + }); + cookies().delete("token"); + redirect("/signin"); +} + +export async function signin(_currentState: unknown, formData: FormData) { + const result = await fetch(SIGNIN_URL, { + headers: { + "cache-control": "no-cache", + "content-type": "application/json", + pragma: "no-cache", + "x-app": "danmu-sim", + "x-authenticator": "basic", + "x-hostname": "tachy.daoyoucloud.com", + "x-locale": "zh-CN", + "x-timezone": "+08:00", + "x-with-acl-meta": "true", + }, + body: JSON.stringify(Object.fromEntries(formData)), + method: "POST", + }); + const res = await result.json(); + if (res.errors) { + return res.errors[0].message; + } + cookies().set("token", res.data.token); + redirect("/"); +} + +export async function signup(_currentState: unknown, formData: FormData) { + const result = await fetch(SIGNUP_URL, { + method: "POST", + headers: { + "X-App": "danmu-sim", + "content-type": "application/json", + "x-authenticator": "basic", + "x-locale": "zh-CN", + "x-timezone": "+08:00", + }, + body: JSON.stringify(Object.fromEntries(formData)), + }); + const response = await result.json(); + if (response.errors) { + return response.errors[0].message; + } + redirect("/signin"); +} diff --git a/app/music.svg b/app/music.svg new file mode 100644 index 0000000..9944fe2 --- /dev/null +++ b/app/music.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index 2c359a2..00e0328 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,124 +1,44 @@ import Image from "next/image"; -import SignoutButton from "@/app/components/signout-button"; import Link from "next/link"; +import musicSvg from "@/app/music.svg"; export default function Home() { - return
- - 弹幕测试 -
+ return ( +
+
+
+

+ Before they sold out +
+ readymade gluten +

+ +

+ Copper mug try-hard pitchfork pour-over freegan heirloom neutra air + plant cold-pressed tacos poke beard tote bag. Heirloom echo park + mlkshk tote bag selvage hot chicken authentic tumeric truffaut + hexagon try-hard chambray. +

+
+ + 弹幕测试 + + +
+
+
+ hero +
+
+
+ ); } - -// export default function Home() { -// return ( -//
-// -// 弹幕测试 -//
-//

-// Get started by editing  -// app/page.tsx -//

-//
-// -// By{" "} -// Vercel Logo -// -//
-//
- -//
-// Next.js Logo -//
- -//
-// -//

-// Docs{" "} -// -// -> -// -//

-//

-// Find in-depth information about Next.js features and API. -//

-// - -// -//

-// Learn{" "} -// -// -> -// -//

-//

-// Learn about Next.js in an interactive course with quizzes! -//

-// - -// -//

-// Templates{" "} -// -// -> -// -//

-//

-// Explore starter templates for Next.js. -//

-// - -// -//

-// Deploy{" "} -// -// -> -// -//

-//

-// Instantly deploy your Next.js site to a shareable URL with Vercel. -//

-// -//
-//
-// ); -// } diff --git a/app/signin/page.tsx b/app/signin/page.tsx index f6c839a..634ac70 100644 --- a/app/signin/page.tsx +++ b/app/signin/page.tsx @@ -1,33 +1,89 @@ -'use client' +"use client"; -import { signin } from '@/app/lib/actions' -import { useFormState, useFormStatus } from 'react-dom' +import { signin } from "@/app/lib/actions/auth"; +import Link from "next/link"; +import { useFormState, useFormStatus } from "react-dom"; export default function Page() { - const [errorMessage, dispatch] = useFormState(signin, undefined) + const [errorMessage, dispatch] = useFormState(signin, undefined); return ( -
- - -
{errorMessage &&

{errorMessage}

}
- - - ) +
+
+
+

+ Slow-carb next level shoindcgoitch ethical authentic, poko scenester +

+

+ Poke slow-carb mixtape knausgaard, typewriter street art gentrify + hammock starladder roathse. Craies vegan tousled etsy austin. +

+
+
+

+ 登录 +

+
+ + +
+
+ + +
+ + 还没有账号？可以注册一个。 + {errorMessage ? ( +

{errorMessage}

+ ) : null} + +
+
+ ); } -function LoginButton() { - const { pending } = useFormStatus() +function LoginButton({ className }: { className: string | undefined }) { + const { pending } = useFormStatus(); const handleClick = (event: React.MouseEvent) => { if (pending) { - event.preventDefault() + event.preventDefault(); } - } + }; return ( - - ) -} \ No newline at end of file + ); +} diff --git a/app/signup/page.tsx b/app/signup/page.tsx index 07e30fe..b8238c9 100644 --- a/app/signup/page.tsx +++ b/app/signup/page.tsx @@ -1,35 +1,125 @@ -'use client' +"use client"; -import { signup } from '@/app/lib/actions' -import { useFormState, useFormStatus } from 'react-dom' +import { signup } from "@/app/lib/actions/auth"; +import Link from "next/link"; +import { useFormState, useFormStatus } from "react-dom"; export default function Page() { - const [errorMessage, dispatch] = useFormState(signup, undefined) + const [errorMessage, dispatch] = useFormState(signup, undefined); - console.log(errorMessage, '=== in client'); - return ( -
- - - -
{errorMessage &&

{errorMessage}

}
- + return ( +
+
+
+

+ Slow-carb next level shoindcgoitch ethical authentic, poko scenester +

+

+ Poke slow-carb mixtape knausgaard, typewriter street art gentrify + hammock starladder roathse. Craies vegan tousled etsy austin. +

+
+ +

+ 注册 +

+
+ + +
+
+ + +
+
+ + +
+ + 已经有账号？点此直接登录。 + {errorMessage ? ( +

{errorMessage}

+ ) : null} - ) +
+
+ ); } -function LoginButton() { - const { pending } = useFormStatus() - const handleClick = (event: React.MouseEvent) => { - if (pending) { - event.preventDefault() - } +// export default function Page() { +// const [errorMessage, dispatch] = useFormState(signup, undefined); + +// return ( +//
+// +// +// +//
{errorMessage &&

{errorMessage}

}
+// +// +// ); +// } + +function SignupButton({ className }: { className: string | undefined }) { + const { pending } = useFormStatus(); + + const handleClick = (event: React.MouseEvent) => { + if (pending) { + event.preventDefault(); } + }; + + return ( + + ); +} - return ( - - ) -} \ No newline at end of file diff --git a/package.json b/package.json index 244b6a5..b277724 100644 --- a/package.json +++ b/package.json @@ -11,21 +11,21 @@ "dependencies": { "axios": "^1.6.8", "next": "14.1.4", - "react": "^18", - "react-dom": "^18", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-use-websocket": "^4.8.1" }, "devDependencies": { - "@types/node": "^20", - "@types/react": "^18", - "@types/react-dom": "^18", - "autoprefixer": "^10.0.1", + "@types/node": "^20.12.4", + "@types/react": "^18.2.74", + "@types/react-dom": "^18.2.24", + "autoprefixer": "^10.4.19", "daisyui": "^4.10.1", - "eslint": "^8", + "eslint": "^8.57.0", "eslint-config-next": "14.1.4", - "postcss": "^8", - "tailwindcss": "^3.3.0", - "typescript": "^5" + "postcss": "^8.4.38", + "tailwindcss": "^3.4.3", + "typescript": "^5.4.4" }, "packageManager": "pnpm@8.15.5+sha256.4b4efa12490e5055d59b9b9fc9438b7d581a6b7af3b5675eb5c5f447cee1a589" } \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1e9fbd3..69e5b51 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -12,10 +12,10 @@ dependencies: specifier: 14.1.4 version: 14.1.4(react-dom@18.2.0)(react@18.2.0) react: - specifier: ^18 + specifier: ^18.2.0 version: 18.2.0 react-dom: - specifier: ^18 + specifier: ^18.2.0 version: 18.2.0(react@18.2.0) react-use-websocket: specifier: ^4.8.1 @@ -23,34 +23,34 @@ dependencies: devDependencies: '@types/node': - specifier: ^20 + specifier: ^20.12.4 version: 20.12.4 '@types/react': - specifier: ^18 + specifier: ^18.2.74 version: 18.2.74 '@types/react-dom': - specifier: ^18 + specifier: ^18.2.24 version: 18.2.24 autoprefixer: - specifier: ^10.0.1 + specifier: ^10.4.19 version: 10.4.19(postcss@8.4.38) daisyui: specifier: ^4.10.1 version: 4.10.1(postcss@8.4.38) eslint: - specifier: ^8 + specifier: ^8.57.0 version: 8.57.0 eslint-config-next: specifier: 14.1.4 version: 14.1.4(eslint@8.57.0)(typescript@5.4.4) postcss: - specifier: ^8 + specifier: ^8.4.38 version: 8.4.38 tailwindcss: - specifier: ^3.3.0 + specifier: ^3.4.3 version: 3.4.3 typescript: - specifier: ^5 + specifier: ^5.4.4 version: 5.4.4 packages: @@ -588,7 +588,7 @@ packages: postcss: ^8.1.0 dependencies: browserslist: 4.23.0 - caniuse-lite: 1.0.30001605 + caniuse-lite: 1.0.30001606 fraction.js: 4.3.7 normalize-range: 0.1.2 picocolors: 1.0.0 @@ -658,7 +658,7 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: - caniuse-lite: 1.0.30001605 + caniuse-lite: 1.0.30001606 electron-to-chromium: 1.4.728 node-releases: 2.0.14 update-browserslist-db: 1.0.13(browserslist@4.23.0) @@ -692,8 +692,8 @@ packages: engines: {node: '>= 6'} dev: true - /caniuse-lite@1.0.30001605: - resolution: {integrity: sha512-nXwGlFWo34uliI9z3n6Qc0wZaf7zaZWA1CPZ169La5mV3I/gem7bst0vr5XQH5TJXZIMfDeZyOrZnSlVzKxxHQ==} + /caniuse-lite@1.0.30001606: + resolution: {integrity: sha512-LPbwnW4vfpJId225pwjZJOgX1m9sGfbw/RKJvw/t0QhYOOaTXHvkjVGFGPpvwEzufrjvTlsULnVTxdy4/6cqkg==} /chalk@4.1.2: resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==} @@ -2073,7 +2073,7 @@ packages: '@next/env': 14.1.4 '@swc/helpers': 0.5.2 busboy: 1.6.0 - caniuse-lite: 1.0.30001605 + caniuse-lite: 1.0.30001606 graceful-fs: 4.2.11 postcss: 8.4.31 react: 18.2.0