feat: password new rules (#82)

* fix: 追加丢失的依赖

* feat: new password robustness rules

app/(dashboard)/components/side-bar.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { ThemeSwitch } from "@/components/theme-switch";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { IconType } from "react-icons";
+import { FaImage, FaFolder } from "react-icons/fa";
+
+export interface SideBarItem {
+    href: string;
+    icon: IconType;
+    label: string;
+}
+
+
+const sideBar:SideBarItem[] = [
+    {
+        label: '图片',
+        icon: FaImage,
+        href: '/dashboard'
+    },
+    {
+        label: '项目',
+        icon: FaFolder,
+        href: '/dashboard/project'
+    }
+]
+
+
+export function SideBar(){
+    const items = sideBar?.map((item, idx) => {
+        return (
+            <Link key={idx} href={item.href} className={`rounded-md ${usePathname() === item.href && 'bg-default-50'}`}>
+                <div className="flex gap-2 mx-auto w-fit py-2">
+                    {item.icon({size:24, className: 'w-6 h-6 text-default-900 flex-shrink-0'})}
+                    <span className="text-base">{item.label}</span>
+                </div>
+            </Link>
+        )
+    })
+    return (
+        <aside className="flex flex-col justify-between w-[120px] h-full bg-default-100 px-2 py-5 shrink-0">
+            <div className="flex flex-col gap-5">
+                {items}
+            </div>
+            <div className="flex w-full justify-center">
+                <ThemeSwitch />
+            </div>
+        </aside>
+    )
+}

app/(dashboard)/dashboard/components/fold.tsx

@@ -0,0 +1,4 @@
+
+function Fold(){
+
+}

app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import cookie from 'react-cookies'
+import Picture from "@/components/picture";
+import { SERVER_URL } from "@/interface/api";
+import { Picture as IPicture } from "@/interface/model/picture";
+import IOC from "@/providers";
+import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
+import { useMemo, useState } from "react";
+// import Fold, { FoldProps } from "./components/Fold";
+// import { Masonry } from "./components/Masonry";
+
+export default function Dashboard(){
+    const [pictures, setPictures] = useState<IPicture[]>([]);
+    useMemo(()=>{
+        IOC.picture.getList()
+        .then(({data})=>{
+            setPictures(data.records)
+            console.log(data)
+        })
+    },[])
+    return (
+        <div className="w-full h-full flex flex-col">
+            <div className="w-full py-7 h-fit basis-auto grow-0 shrink-0 flex items-center">
+                <Breadcrumbs className="w-full h-full px-4">
+                    <BreadcrumbItem>
+                        Images
+                    </BreadcrumbItem>
+                </Breadcrumbs>
+            </div>
+            <div className="overflow-auto flex flex-wrap w-full h-full px-4 py-2">
+                <div className="w-full h-fit grid justify-center grid-cols-[repeat(auto-fill,_minmax(130px,_1fr))] gap-4">    
+                    {
+                        pictures?.map((p, idx) => {
+                            return (
+
+                                <Picture
+                                    key={idx}
+                                    url={`${SERVER_URL}/picture/preview?shareMode=2&id=${p.id}&token=${cookie.load('token')}`}
+                                    pid={p.pid}
+                                    name={p.fileName}
+                                />
+                            )
+                        })
+                    }
+                </div>
+            </div>
+        </div>
+    )
+}

app/(dashboard)/layout.tsx

@@ -0,0 +1,23 @@
+
+import { SideBar, SideBarItem } from "./components/side-bar"
+export default function DashboardLayout({
+    children,
+  }: {
+    children: React.ReactNode
+}){
+
+    return (
+        <section className="
+            flex min-w-0 h-full w-full max-w-full
+            absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
+            xl:max-w-6xl xl:h-[calc(100vh_-_40px)]
+        ">
+            <section className="w-full flex bg-default-50 overflow-hidden xl:rounded-3xl">
+                <SideBar />
+                <section className="flex-auto h-full">
+                    {children}
+                </section>
+            </section>
+        </section>
+    )
+}

app/authenticate/components/password-robustness-list.tsx → app/(root)/authenticate/components/password-robustness-list.tsx

@@ -4,12 +4,27 @@ const PasswordRobustnessList = (props: { active: boolean[] }) => {
     const labels = [
         {
             key: 'min',
-            label: '至少8位',
+            label: '至少5位',
             defaultShow: true
         },
         {
-            key: 'fuck',
-            label: '大写字母、小写字母、数字、特殊符号中至少包含两种',
+            key: 'uppercase',
+            label: '大写字母',
+            defaultShow: true
+        },
+        {
+            key: 'lowercase',
+            label: '小写字母',
+            defaultShow: true,
+        },
+        {
+            key: 'number',
+            label: '数字',
+            defaultShow: true
+        },
+        {
+            key: 'special',
+            label: '特殊符号',
             defaultShow: true
         },
         {

app/authenticate/page.tsx → app/(root)/authenticate/page.tsx

@@ -44,9 +44,12 @@ export default function Page(){
     const router = useRouter();
     const fns = useMemo(() => {
         return [
-            (val: string) => val.length >= 8,
-            (val: string) => /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]/.test(val),
-            (val: string) => val.length <= 30
+            (val: string) => val.length > 5,
+            (val: string) => /[A-Z]/.test(val),
+            (val: string) => /[a-z]/.test(val),
+            (val: string) => /[0-9]/.test(val),
+            (val: string) => /\W/.test(val),
+            (val: string) => val.length < 20
         ]
     }, [])
     useEffect(()=>{

app/(root)/layout.tsx

@@ -0,0 +1,87 @@
+import "@/styles/globals.css";
+import {Metadata} from "next";
+import {siteConfig} from "@/config/site";
+import {fontSans} from "@/config/fonts";
+import {AuthProvider, Providers, ToastProvider} from "../providers";
+import {Navbar} from "@/components/navbar";
+import {Link} from "@nextui-org/link";
+import clsx from "clsx";
+import React from "react";
+import {rgba} from "color2k";
+import {Toaster} from "react-hot-toast";
+
+export const metadata: Metadata = {
+    title: {
+        default: siteConfig.name,
+        template: `%s - ${siteConfig.name}`,
+    },
+    description: siteConfig.description,
+    themeColor: [
+        {media: "(prefers-color-scheme: light)", color: "white"},
+        {media: "(prefers-color-scheme: dark)", color: "black"},
+    ],
+    icons: {
+        icon: "/favicon.ico",
+        shortcut: "/favicon-16x16.png",
+        apple: "/apple-touch-icon.png",
+    },
+};
+
+export default function RootLayout({children,}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <main className="w-full h-full">
+            <Navbar/>
+            <section className="container mx-auto max-w-7xl pt-16 px-6 flex-grow">
+                <ToastProvider>
+                    <Toaster toastOptions={{
+                        className: '',
+                        duration: 5000,
+                        style: {
+                            background: rgba(0, 0, 0, 0),
+                            color: rgba(0, 0, 0, 0),
+                            borderStyle: 'none',
+                            boxShadow: 'none'
+                        }
+                    }
+                    } gutter={-15}/>
+                    <AuthProvider whiteList={['/', '/authenticate', '/pricing']}>
+                        {children}
+                    </AuthProvider>
+                </ToastProvider>
+            </section>
+            <footer className="max-w-[900px] mx-auto px-6 py-3 w-full flex flex-col gap-2 text-sm">
+                <ul className="w-fit flex gap-2 mx-auto">
+                    <li>
+                        <Link href="#" size="sm">
+                            使用条款
+                        </Link>
+                    </li>
+                    <li>|</li>
+                    <li>
+                        <Link href="#" size="sm">
+                            用户协议
+                        </Link>
+                    </li>
+                    <li>|</li>
+                    <li>
+                        <Link href="/about" size="sm">
+                            关于我们
+                        </Link>
+                    </li>
+                </ul>
+                <div className="text-center">
+                    <Link href="https://beian.miit.gov.cn/" isExternal size="sm">
+                        鄂ICP备2023011709号-7
+                    </Link>
+                    <div className="mx-auto text-default-600 text-center">
+                            <span>
+                                Copyright &copy;2023 Vastsea, All rights reserved - ToYou Project
+                            </span>
+                    </div>
+                </div>
+            </footer>
+        </main>
+    );
+}