feat: 完善登录表单

nonhana · Nov 19, 2024 · 83cfa62 · 83cfa62
1 parent 8545b2b
commit 83cfa62
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 31 deletions.
diff --git a/components/hana/Button.vue b/components/hana/Button.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
-    type?: 'common' | 'icon'
+    type?: string
+    iconButton?: boolean
     icon?: string
     to?: string
     active?: boolean
@@ -11,7 +12,7 @@ const props = withDefaults(
     darkMode?: boolean
   }>(),
   {
-    type: 'common',
+    iconButton: false,
     active: false,
     shape: 'round',
     disabled: false,
@@ -30,13 +31,17 @@ const component = computed(() => {
   return 'button'
 })
 
-function handleClick(event: Event) {
+function handleClick(e: Event) {
   if (!props.disabled) {
     emits('click')
+    if (!props.type) {
+      e.preventDefault()
+      e.stopPropagation()
+    }
   }
   else {
-    event.preventDefault()
-    event.stopPropagation()
+    e.preventDefault()
+    e.stopPropagation()
   }
 }
 </script>
@@ -45,9 +50,10 @@ function handleClick(event: Event) {
   <component
     :is="component"
     :to="to"
+    :type="type"
     class="flex shrink-0 select-none items-center justify-center gap-1 transition-all"
     :class="[
-      type === 'common' ? 'px-[10px] py-2' : 'p-2',
+      iconButton ? 'p-2' : 'px-[10px] py-2',
       active
         ? darkMode ? 'bg-hana-blue/80' : 'bg-hana-blue-200/40 text-hana-blue'
         : darkMode ? 'bg-hana-blue text-white' : 'text-text',

diff --git a/components/hana/Dialog.vue b/components/hana/Dialog.vue
@@ -33,7 +33,7 @@ const transitionClasses = {
   <transition v-bind="transitionClasses">
     <div
       v-if="visible"
-      class="fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 rounded-2xl bg-white p-5"
+      class="fixed left-1/2 top-1/2 z-50 max-w-[90%] -translate-x-1/2 -translate-y-1/2 rounded-2xl bg-white p-5 shadow"
       :style="{ width }"
     >
       <div class="mb-5">
@@ -43,7 +43,7 @@ const transitionClasses = {
         >
           <div v-if="!hideHeader" class="flex items-center">
             <span v-if="title" class="text-2xl font-bold">{{ title }}</span>
-            <HanaButton icon="lucide:x" class="relative -right-2 -top-2 ml-auto" type="icon" @click="handleClose" />
+            <HanaButton icon="lucide:x" class="relative -right-2 -top-2 ml-auto" icon-button @click="handleClose" />
           </div>
         </slot>
       </div>

diff --git a/components/hana/Drawer.vue b/components/hana/Drawer.vue
@@ -64,7 +64,7 @@ onBeforeUnmount(() => {
       <slot name="header">
         <div v-if="!hideHeader" class="flex h-12 items-center">
           <span v-if="title" class="text-text">{{ title }}</span>
-          <HanaButton icon="lucide:x" class="ml-auto" type="icon" @click="handleClose" />
+          <HanaButton icon="lucide:x" class="ml-auto" icon-button @click="handleClose" />
         </div>
         <hr>
       </slot>

diff --git a/components/hana/Input.vue b/components/hana/Input.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 withDefaults(defineProps<{
+  name?: string
   type?: 'text' | 'textarea' | 'password'
   placeholder?: string
   resize?: 'none' | 'vertical' | 'horizontal' | 'both'
@@ -56,6 +57,7 @@ function handleKeyDown(event: KeyboardEvent) {
         <!-- input -->
         <input
           v-model="value"
+          :name="name"
           :type="type"
           class="w-full border-none bg-hana-blue-50 py-2 pl-10 pr-3 text-sm focus:ring-2 focus:ring-hana-blue-400"
           :class="shape === 'rounded' ? 'rounded-full' : 'rounded-lg'"
@@ -77,6 +79,7 @@ function handleKeyDown(event: KeyboardEvent) {
     <template v-else>
       <textarea
         v-model="value"
+        :name="name"
         class="w-full border-none bg-hana-blue-50 px-3 py-2 text-sm focus:ring-2 focus:ring-hana-blue-400"
         :style="{ resize }"
         :placeholder="placeholder"

diff --git a/components/hana/Paginator.vue b/components/hana/Paginator.vue
@@ -32,7 +32,7 @@ function goToPage(page: number) {
 <template>
   <div class="hana-card flex w-fit gap-2">
     <HanaButton
-      type="icon"
+      icon-button
       icon="lucide:chevron-left"
       :disabled="currentPage === 1"
       @click="stepPage('prev')"
@@ -41,15 +41,15 @@ function goToPage(page: number) {
       v-for="page in totalPages"
       :key="page"
       :active="page === currentPage"
-      type="icon"
+      icon-button
       @click="goToPage(page)"
     >
       <span class="size-5">
         {{ page }}
       </span>
     </HanaButton>
     <HanaButton
-      type="icon"
+      icon-button
       icon="lucide:chevron-right"
       :disabled="currentPage === totalPages"
       @click="stepPage('next')"

diff --git a/components/main/Header.vue b/components/main/Header.vue
@@ -39,12 +39,38 @@ function changeMode() {
   curMode.value = curMode.value === 'light' ? 'dark' : 'light'
 }
 
-const userWindowVisible = ref(false)
+const loginWindowVisible = ref(false)
+const registerWindowVisible = ref(false)
 
-function handleUserCommand(command: string) {
+function toggleLoginRegisterWindow() {
+  loginWindowVisible.value = !loginWindowVisible.value
+  registerWindowVisible.value = !registerWindowVisible.value
+}
+
+function handleUserCommand(command: string | number | object) {
   switch (command) {
     case t('header.user.notLoggedIn.login'):
-      userWindowVisible.value = true
+      loginWindowVisible.value = true
+      break
+    case t('header.user.notLoggedIn.register'):
+      registerWindowVisible.value = true
+      break
+  }
+}
+
+function handleSubmit(type: 'login' | 'register', e: Event) {
+  switch (type) {
+    case 'login':
+      if (e.target) {
+        const formData = new FormData(e.target as HTMLFormElement)
+        console.log(Object.fromEntries(formData))
+      }
+      break
+    case 'register':
+      if (e.target) {
+        const formData = new FormData(e.target as HTMLFormElement)
+        console.log(Object.fromEntries(formData))
+      }
       break
   }
 }
@@ -55,7 +81,7 @@ function handleUserCommand(command: string) {
     <div class="relative mx-auto flex size-full items-center justify-between px-2 md:max-w-[90%] xl:max-w-[70%]">
       <HanaDropdown trigger="click" animation="slide" offset="start" :show-arrow="false" class="md:hidden">
         <HanaButton
-          type="icon"
+          icon-button
           icon="lucide:align-justify"
         />
         <template #dropdown>
@@ -90,14 +116,14 @@ function handleUserCommand(command: string) {
 
       <div class="flex gap-0 transition-all lg:gap-4">
         <HanaButton
-          type="icon"
+          icon-button
           :icon="curMode === 'light' ? 'lucide:moon' : 'lucide:sun'"
           class="ml-auto"
           @click="changeMode"
         />
         <HanaDropdown animation="slide" offset="end" :show-arrow="false" @command="handleUserCommand">
           <HanaButton
-            type="icon"
+            icon-button
             icon="lucide:user-round"
             class="ml-auto"
           />
@@ -117,18 +143,38 @@ function handleUserCommand(command: string) {
       </div>
     </div>
   </div>
-  <HanaDialog v-model="userWindowVisible" title="欢迎来到...花园">
-    <div class="flex flex-col gap-4">
-      <HanaInput prefix-icon="lucide:user-round" shape="rounded" placeholder="请输入用户名" />
-      <HanaInput prefix-icon="lucide:key-round" shape="rounded" type="password" placeholder="请输入密码" />
-    </div>
-    <div class="mt-8 flex flex-col gap-4">
-      <HanaButton type="common" class="w-full" dark-mode>
-        <span>登录</span>
-      </HanaButton>
-      <HanaButton type="common" class="w-full">
-        <span class="text-hana-blue">创建账户</span>
-      </HanaButton>
-    </div>
+  <HanaDialog v-model="loginWindowVisible" title="欢迎来到...花园。">
+    <form @submit.prevent="(e) => handleSubmit('login', e)">
+      <div class="flex flex-col gap-4">
+        <HanaInput name="account" prefix-icon="lucide:user-round" shape="rounded" placeholder="用户名 / 邮箱" />
+        <HanaInput name="password" prefix-icon="lucide:key-round" shape="rounded" type="password" placeholder="密码" />
+      </div>
+      <div class="mt-8 flex flex-col gap-4">
+        <HanaButton class="w-full" dark-mode type="submit">
+          <span>登录</span>
+        </HanaButton>
+        <HanaButton class="w-full" @click="toggleLoginRegisterWindow">
+          <span class="text-hana-blue">创建账户</span>
+        </HanaButton>
+      </div>
+    </form>
+  </HanaDialog>
+  <HanaDialog v-model="registerWindowVisible" title="这里有你想找的花吗？">
+    <form @submit.prevent="(e) => handleSubmit('register', e)">
+      <div class="flex flex-col gap-4">
+        <HanaInput name="username" prefix-icon="lucide:user-round" shape="rounded" placeholder="用户名" />
+        <HanaInput name="email" prefix-icon="lucide:mail" shape="rounded" placeholder="邮箱" />
+        <HanaInput name="site" prefix-icon="lucide:globe" shape="rounded" placeholder="站点（无可不填）" />
+        <HanaInput name="password" prefix-icon="lucide:key-round" shape="rounded" type="password" placeholder="密码" />
+      </div>
+      <div class="mt-8 flex flex-col gap-4">
+        <HanaButton class="w-full" dark-mode type="submit">
+          <span>注册</span>
+        </HanaButton>
+        <HanaButton class="w-full" @click="toggleLoginRegisterWindow">
+          <span class="text-hana-blue">已有帐号</span>
+        </HanaButton>
+      </div>
+    </form>
   </HanaDialog>
 </template>
diff --git a/prisma/migrations/20241119132610_/migration.sql b/prisma/migrations/20241119132610_/migration.sql
@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - Added the required column `password` to the `User` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "password" TEXT NOT NULL;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -47,6 +47,7 @@ model User {
   id       Int       @id @default(autoincrement())
   email    String    @unique
   name     String?   @default("佚名")
+  password String
   site     String?
   avatar   String?
   comments Comment[]