feat: auth 模块

besscroft · Apr 5, 2024 · 0e16de0 · 0e16de0
1 parent ec7504e
commit 0e16de0
Show file tree

Hide file tree

Showing 24 changed files with 779 additions and 72 deletions.
diff --git a/.env b/.env
@@ -8,3 +8,5 @@ POSTGRE_DATABASE="postgres"
 POSTGRE_USERNAME="postgres"
 # Postgre 密码
 POSTGRE_PASSWORD="postgres"
+# AUTH_SECRET npx auth secret
+AUTH_SECRET="T7tQXKqqKjZrJhN62Z05AHY8qKGQKaG/4iqv0tKmEvw="
diff --git a/.env.production b/.env.production
@@ -8,3 +8,5 @@ POSTGRE_DATABASE="postgres"
 POSTGRE_USERNAME="postgres"
 # Postgre 密码
 POSTGRE_PASSWORD="postgres"
+# AUTH_SECRET npx auth secret
+AUTH_SECRET="T7tQXKqqKjZrJhN62Z05AHY8qKGQKaG/4iqv0tKmEvw="
diff --git a/app/(admin)/admin/page.tsx b/app/(admin)/admin/page.tsx
@@ -1,7 +1,11 @@
-export default function Admin() {
+import { auth } from '~/utils/lib/auth'
+
+export default async function Admin() {
+  const session = await auth()
+
   return (
     <>
-      控制台
+      控制台 {session?.user}
     </>
   )
 }
diff --git a/app/(admin)/layout.tsx b/app/(admin)/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from 'next'
 import '~/style/globals.css'
 import { Providers } from '~/app/providers/providers'
-import Header from '~/components/Header'
+import DashHeader from '~/components/DashHeader'
 import { UserStoreProvider } from '~/app/providers/userStoreProvider'
 import { Toaster } from 'sonner'
 
@@ -21,13 +21,20 @@ export default function RootLayout({
   return (
     <html lang="en">
     <body>
-    <UserStoreProvider>
-      <Providers>
-        <Toaster position="top-right" />
-        <Header />
-        {children}
-      </Providers>
-    </UserStoreProvider>
+      <UserStoreProvider>
+        <Providers>
+          <Toaster position="top-right"/>
+          <DashHeader/>
+          <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr]">
+            <aside className="hidden w-[200px] flex-col md:flex">
+              侧边栏
+            </aside>
+            <main className="flex w-full flex-1 flex-col overflow-hidden">
+              {children}
+            </main>
+          </div>
+        </Providers>
+      </UserStoreProvider>
     </body>
     </html>
   );

diff --git a/app/(none)/login/page.tsx b/app/(none)/login/page.tsx
@@ -1,16 +1,8 @@
-'use client'
-
 import Image from "next/image"
-import Link from "next/link"
-import { Input } from '@nextui-org/input'
-import { Button } from '@nextui-org/react'
 import fufu from '~/public/112962239_p0.jpg'
-import { useRouter } from 'next/navigation'
-import { toast } from 'sonner'
+import { UserFrom } from '~/components/UserFrom'
 
 export default function Login() {
-  const router = useRouter()
-
   return (
     <div className="w-full h-screen lg:grid lg:grid-cols-2">
       <div className="hidden bg-muted lg:block">
@@ -25,43 +17,7 @@ export default function Login() {
         />
       </div>
       <div className="flex items-center justify-center py-12">
-        <div className="mx-auto grid w-[350px] gap-6">
-          <div className="grid gap-2 text-center">
-            <h1 className="text-3xl font-bold">登录</h1>
-            <p className="text-balance text-muted-foreground">
-              输入您的用户名和密码
-            </p>
-          </div>
-          <div className="grid gap-4">
-            <div className="grid gap-2">
-              <div>用户名</div>
-              <Input
-                id="username"
-                type="username"
-                placeholder="admin"
-                required
-              />
-            </div>
-            <div className="grid gap-2">
-              <div className="flex items-center">
-                <div>密码</div>
-                <Link
-                  href={"/forgot-password"}
-                  className="ml-auto inline-block text-sm underline"
-                >
-                  忘记密码?
-                </Link>
-              </div>
-              <Input id="password" type="password" required/>
-            </div>
-            <Button type="submit" className="w-full" onClick={() => toast('还没写！')}>
-              登录
-            </Button>
-            <Button type="submit" className="w-full" onClick={() => router.push('/')}>
-              返回首页
-            </Button>
-          </div>
-        </div>
+        <UserFrom />
       </div>
     </div>
   )

diff --git a/app/actions.ts b/app/actions.ts
@@ -0,0 +1,27 @@
+'use server'
+
+import { AuthError } from 'next-auth'
+import { signIn } from '~/utils/lib/auth'
+
+export async function authenticate(
+  email:string, password: string
+) {
+  try {
+    await signIn('credentials', {
+      email: email,
+      password: password,
+      redirect: true,
+      redirectTo: '/admin'
+    });
+  } catch (error) {
+    if (error instanceof AuthError) {
+      switch (error.type) {
+        case 'CredentialsSignin':
+          return 'Invalid credentials.';
+        default:
+          return 'Something went wrong.';
+      }
+    }
+    throw error;
+  }
+}
diff --git a/app/api/auth/[...nextauth]/route.ts b/app/api/auth/[...nextauth]/route.ts
@@ -0,0 +1 @@
+export { GET, POST } from '~/utils/lib/auth'
diff --git a/app/api/login/route.ts b/app/api/login/route.ts
diff --git a/components/DashDropMenu.tsx b/components/DashDropMenu.tsx
@@ -0,0 +1,36 @@
+'use client'
+
+import React from 'react'
+import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button } from '@nextui-org/react'
+import { useRouter } from 'next/navigation'
+import { getSession } from '~/utils/lib/session'
+
+export const DashDropMenu = async () => {
+  const router = useRouter()
+  const session = await getSession()
+
+  return (
+    <>
+      {
+        session ?
+          <Dropdown>
+            <DropdownTrigger>
+              <span className="cursor-pointer select-none px-2">
+                菜单
+              </span>
+            </DropdownTrigger>
+            <DropdownMenu aria-label="Static Actions">
+              <DropdownItem key="new" onClick={() => router.push('/admin')}>后台</DropdownItem>
+              <DropdownItem key="copy" onClick={() => {
+                router.push('/')
+              }}>退出登录</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
+          :
+          <div className="cursor-pointer select-none" onClick={() => router.push('/login')}>
+            登录
+          </div>
+      }
+    </>
+  )
+}
diff --git a/components/DashHeader.tsx b/components/DashHeader.tsx
@@ -0,0 +1,33 @@
+import { Link, Navbar, NavbarBrand, NavbarContent, NavbarItem } from '@nextui-org/react'
+import Logo from '~/components/Logo'
+import {GithubIcon} from '~/style/icons/GitHub'
+import DashNavbar from '~/components/DashNavbar'
+import React from 'react'
+
+export default function DashHeader() {
+  return (
+    <Navbar>
+      <NavbarBrand>
+        <Logo/>
+      </NavbarBrand>
+      <NavbarContent className="hidden sm:flex gap-4 select-none" justify="center">
+        6
+      </NavbarContent>
+      <NavbarContent justify="end">
+        <NavbarItem className="flex h-full items-center">
+          <Link
+            isExternal
+            aria-label="Github"
+            className="p-1"
+            href="https://github.com/besscroft/PicImpact"
+          >
+            <GithubIcon className="text-default-600 dark:text-default-500 dark:text-white" />
+          </Link>
+        </NavbarItem>
+        <NavbarItem className="flex h-full items-center space-x-2">
+          <DashNavbar />
+        </NavbarItem>
+      </NavbarContent>
+    </Navbar>
+  );
+}
diff --git a/components/DashNavbar.tsx b/components/DashNavbar.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import { useBreakpoints } from '~/utils/useBreakpoints'
+import { ThemeSwitch } from '~/components/DarkToggle'
+import DashVaulDrawer from '~/components/DashVaulDrawer'
+import { useHydrated } from '~/composables/react'
+import { DashDropMenu } from '~/components/DashDropMenu'
+import React from "react";
+
+export default function DashNavbar() {
+  const hydrated = useHydrated()
+  const { smAndLarger } = useBreakpoints()
+
+  return (
+    <>
+      <button
+        className="flex items-center space-x-2 md:hidden"
+      >
+        <DashDropMenu/>
+      </button>
+      {/*{ hydrated ? smAndLarger ? <ThemeSwitch/> : <DashVaulDrawer/> : null }*/}
+      {/*{ hydrated && smAndLarger && <DashDropMenu/> }*/}
+    </>
+  )
+}
diff --git a/components/DashVaulDrawer.tsx b/components/DashVaulDrawer.tsx
@@ -0,0 +1,65 @@
+'use client'
+
+import { Drawer } from 'vaul'
+import { useRouter } from 'next/navigation'
+import React from 'react';
+import { Listbox, ListboxItem } from '@nextui-org/react'
+
+export default function DashVaulDrawer() {
+  const router = useRouter()
+
+  return (
+    <Drawer.Root>
+      <Drawer.Trigger>菜单</Drawer.Trigger>
+      <Drawer.Portal>
+        <Drawer.Overlay className="fixed inset-0 bg-black/40 dark:bg-slate-800" />
+        <Drawer.Content className="bg-zinc-100 dark:bg-slate-900 flex flex-col rounded-t-[10px] h-[88%] mt-24 fixed bottom-0 left-0 right-0">
+          <div className="p-4 bg-white dark:bg-slate-900 rounded-t-[10px] flex-1">
+            <div className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-zinc-300 mb-8" />
+            <div className="flex flex-col gap-4">
+              <div className="w-full px-1 py-2 rounded-small">
+                <Listbox
+                  aria-label="Actions"
+                >
+                  <ListboxItem key="new">菜单1</ListboxItem>
+                  <ListboxItem key="copy">菜单2</ListboxItem>
+                  <ListboxItem key="edit">菜单3</ListboxItem>
+                  <ListboxItem key="delete" className="text-danger" color="danger">
+                    菜单4
+                  </ListboxItem>
+                </Listbox>
+              </div>
+            </div>
+          </div>
+          <div className="p-4 bg-zinc-100 dark:bg-slate-800 border-t border-zinc-200 mt-auto">
+            <div className="flex gap-6 justify-end max-w-md mx-auto">
+              <a
+                className="text-xs text-zinc-600 flex items-center gap-0.25"
+                href="https://github.com/besscroft"
+                target="_blank"
+              >
+                GitHub
+                <svg
+                  fill="none"
+                  height="16"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="16"
+                  aria-hidden="true"
+                  className="w-3 h-3 ml-1"
+                >
+                  <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
+                  <path d="M15 3h6v6"></path>
+                  <path d="M10 14L21 3"></path>
+                </svg>
+              </a>
+            </div>
+          </div>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}
diff --git a/components/DropMenu.tsx b/components/DropMenu.tsx
@@ -20,19 +20,19 @@ export const DropMenu = () => {
         token ?
           <Dropdown>
             <DropdownTrigger>
-              <Button variant="light">
+              <span className="cursor-pointer select-none px-2">
                 菜单
-              </Button>
+              </span>
             </DropdownTrigger>
             <DropdownMenu aria-label="Static Actions">
               <DropdownItem key="new" onClick={() => router.push('/admin')}>后台</DropdownItem>
               <DropdownItem key="copy" onClick={() => { removeToken(); router.push('/') }}>退出登录</DropdownItem>
             </DropdownMenu>
           </Dropdown>
           :
-          <Button variant="light" onClick={() => router.push('/login')}>
+          <div className="cursor-pointer select-none" onClick={() => router.push('/login')}>
             登录
-          </Button>
+          </div>
       }
     </>
   )

diff --git a/components/DynamicNavbar.tsx b/components/DynamicNavbar.tsx
@@ -13,7 +13,7 @@ export default function DynamicNavbar() {
   return (
     <>
       { hydrated ? smAndLarger ? <ThemeSwitch/> : <VaulDrawer/> : null }
-      <DropMenu/>
+      { hydrated && smAndLarger && <DropMenu/> }
     </>
   )
 }