From 3f9d113e8b24f2bf29e4f67b6d7ce9bb4376211c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8B=8F=E5=90=91=E5=A4=9C?= <fu050409@163.com>
Date: Wed, 20 Nov 2024 00:20:00 +0800
Subject: [PATCH] feat(signup): implement signup page

---
 .changes/signup-panel.md |   5 ++
 .cspell.json             |   1 +
 src/App.vue              |   6 +-
 src/assets/tailwind.css  | 125 ++++++++++++++++++--------------------
 src/views/login.vue      |  87 ++++++++++++++-------------
 src/views/signup.vue     | 126 +++++++++++++++++++++++++++++++++++++++
 6 files changed, 237 insertions(+), 113 deletions(-)
 create mode 100644 .changes/signup-panel.md
 create mode 100644 src/views/signup.vue

diff --git a/.changes/signup-panel.md b/.changes/signup-panel.md
new file mode 100644
index 0000000..9b74c00
--- /dev/null
+++ b/.changes/signup-panel.md
@@ -0,0 +1,5 @@
+---
+"algohub": patch:feat
+---
+
+Add sign up panel in `signup.vue`.
diff --git a/.cspell.json b/.cspell.json
index f52ad6c..efff715 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -6,6 +6,7 @@
         "pinia",
         "primeicons",
         "primevue",
+        "signup",
         "SWPU",
         "tailwindcss",
         "tauri",
diff --git a/src/App.vue b/src/App.vue
index aa2926a..82151fe 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,6 +7,8 @@ themeStore.init();
 </script>
 
 <template>
-    <Toast />
-    <RouterView />
+    <main class="w-full h-screen">
+        <Toast />
+        <RouterView />
+    </main>
 </template>
diff --git a/src/assets/tailwind.css b/src/assets/tailwind.css
index a728324..274beac 100644
--- a/src/assets/tailwind.css
+++ b/src/assets/tailwind.css
@@ -554,14 +554,52 @@ video {
   display: none;
 }
 
-.m-10 {
-  margin: 2.5rem;
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
 }
 
 .m-auto {
   margin: auto;
 }
 
+.m-10 {
+  margin: 2.5rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .mt-6 {
   margin-top: 1.5rem;
 }
@@ -570,14 +608,14 @@ video {
   display: flex;
 }
 
-.grid {
-  display: grid;
-}
-
 .hidden {
   display: none;
 }
 
+.\!hidden {
+  display: none !important;
+}
+
 .h-full {
   height: 100%;
 }
@@ -586,12 +624,8 @@ video {
   height: 100vh;
 }
 
-.max-h-full {
-  max-height: 100%;
-}
-
-.max-h-screen {
-  max-height: 100vh;
+.h-80 {
+  height: 20rem;
 }
 
 .w-full {
@@ -602,8 +636,8 @@ video {
   flex: 1 1 0%;
 }
 
-.flex-shrink {
-  flex-shrink: 1;
+.basis-\[40rem\] {
+  flex-basis: 40rem;
 }
 
 .flex-row {
@@ -614,10 +648,6 @@ video {
   flex-direction: column;
 }
 
-.flex-col-reverse {
-  flex-direction: column-reverse;
-}
-
 .items-start {
   align-items: flex-start;
 }
@@ -650,27 +680,17 @@ video {
   gap: 1rem;
 }
 
-.overflow-hidden {
-  overflow: hidden;
-}
-
 .p-6 {
   padding: 1.5rem;
 }
 
-.px-6 {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-}
-
-.py-12 {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
+.text-center {
+  text-align: center;
 }
 
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
 }
 
 .text-sm {
@@ -678,11 +698,6 @@ video {
   line-height: 1.25rem;
 }
 
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
-
 .font-bold {
   font-weight: 700;
 }
@@ -700,32 +715,12 @@ video {
     display: flex;
   }
 
-  .md\:h-full {
-    height: 100%;
-  }
-
-  .md\:flex-1 {
-    flex: 1 1 0%;
-  }
-
-  .md\:grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .md\:flex-row {
-    flex-direction: row;
+  .md\:\!flex {
+    display: flex !important;
   }
 
-  .md\:flex-col {
-    flex-direction: column;
-  }
-
-  .md\:items-center {
-    align-items: center;
-  }
-
-  .md\:justify-center {
-    justify-content: center;
+  .md\:\!hidden {
+    display: none !important;
   }
 
   .md\:text-4xl {
@@ -733,9 +728,3 @@ video {
     line-height: 2.5rem;
   }
 }
-
-@media (min-width: 1024px) {
-  .lg\:w-full {
-    width: 100%;
-  }
-}
diff --git a/src/views/login.vue b/src/views/login.vue
index c4d6fad..4935613 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -53,50 +53,51 @@ const onLogin = async ({ valid }: { valid: boolean }) => {
 </script>
 
 <template>
-  <main class="w-full h-screen">
-    <div class="flex flex-row h-full">
-      <div class="hidden md:flex flex-col items-center justify-center h-full w-full">
-        <div class="flex flex-1 flex-col items-center justify-center w-full h-full">
-          <Image class="hidden md:flex" :src="themeStore.dark ? '/acm-light.png' : '/acm.png'" alt="Image" width="250" />
-          <h1 class="text-3xl md:text-4xl font-bold mt-6 md:m-0">ACM Algorithm Hub</h1>
-        </div>
-        <footer class="flex flex-row items-start w-full">
-          <Button @click="themeStore.toggle" :icon="`pi pi-${themeStore.dark ? 'moon' : 'sun'}`" plain text></Button>
-        </footer>
+  <div class="flex flex-row h-full">
+    <div class="hidden md:flex flex-col items-center justify-center h-full w-full">
+      <div class="flex flex-1 flex-col items-center justify-center w-full h-full">
+        <Image class="hidden md:flex" :src="themeStore.dark ? '/acm-light.png' : '/acm.png'" alt="Image" width="250" />
+        <h1 class="text-3xl md:text-4xl font-bold mt-6 md:m-0">ACM Algorithm Hub</h1>
       </div>
-      <div class="flex w-full">
-        <Card class="m-auto flex w-full h-full items-center justify-center flex-col">
-          <template v-if="false" #header class="hidden"></template>
-          <template #title>Welcome to ACM Algorithm Hub</template>
-          <template #subtitle>Association of Computing Machinery affiliated with SWPU</template>
-          <template #content>
-            <Form v-slot="$form" :initialValues :resolver @submit="onLogin"
-              class="flex flex-col p-6 gap-4 items-center justify-center">
-              <div class="flex flex-col gap-1 w-full">
-                <InputText name="identity" type="text" placeholder="Username or Email" fluid />
-                <Message v-if="$form.identity?.invalid" severity="error" size="small" variant="simple">{{
-                  $form.identity.error.message }}</Message>
-              </div>
-              <div class="flex flex-col gap-1 w-full">
-                <Password name="password" type="text" placeholder="Password" :feedback="false" toggleMask fluid />
-                <Message v-if="$form.password?.invalid" severity="error" size="small" variant="simple">{{
-                  $form.password.error.message }}</Message>
-              </div>
-              <div class="flex flex-col gap-1 w-full">
-                <div class="flex items-center gap-2">
-                  <Checkbox inputId="terms" name="terms" binary />
-                  <label for="terms" class="text-sm">I have read and agree to the <a href="#" class="underline">Affero
-                      General Public License v3</a>.</label>
-                </div>
-                <Message v-if="$form.terms?.invalid" severity="error" size="small" variant="simple">{{
-                  $form.terms.error.message }}</Message>
+      <footer class="flex flex-row items-start w-full">
+        <Button @click="themeStore.toggle" :icon="`pi pi-${themeStore.dark ? 'moon' : 'sun'}`" plain text></Button>
+      </footer>
+    </div>
+    <div class="flex w-full ">
+      <Card class="m-auto flex basis-[40rem] w-full h-full items-center justify-center flex-col">
+        <template #header>
+          <Button @click="themeStore.toggle" class="md:!hidden" :icon="`pi pi-${themeStore.dark ? 'moon' : 'sun'}`"
+            plain text></Button>
+        </template>
+        <template #title>Welcome to ACM Algorithm Hub</template>
+        <template #subtitle>Association of Computing Machinery affiliated with SWPU</template>
+        <template #content>
+          <Form v-slot="$form" :initialValues :resolver @submit="onLogin"
+            class="flex flex-col p-6 gap-4 items-center justify-center">
+            <div class="flex flex-col gap-1 w-full">
+              <InputText name="identity" type="text" placeholder="Username or Email" fluid />
+              <Message v-if="$form.identity?.invalid" severity="error" size="small" variant="simple">{{
+                $form.identity.error.message }}</Message>
+            </div>
+            <div class="flex flex-col gap-1 w-full">
+              <Password name="password" type="text" placeholder="Password" :feedback="false" toggleMask fluid />
+              <Message v-if="$form.password?.invalid" severity="error" size="small" variant="simple">{{
+                $form.password.error.message }}</Message>
+            </div>
+            <div class="flex flex-col gap-1 w-full">
+              <div class="flex items-center gap-2">
+                <Checkbox inputId="terms" name="terms" binary />
+                <label for="terms" class="text-sm">I have read and agree to the <a href="#" class="underline">Affero
+                    General Public License v3</a>.</label>
               </div>
-              <p>Do not have an account? <a @click="router.push('/signup')" class="underline">Sign up</a></p>
-              <Button type="submit" label="Login" class="w-full" secondary></Button>
-            </Form>
-          </template>
-        </Card>
-      </div>
+              <Message v-if="$form.terms?.invalid" severity="error" size="small" variant="simple">{{
+                $form.terms.error.message }}</Message>
+            </div>
+            <p>Do not have an account? <a @click="router.push('/signup')" class="underline">Sign up</a></p>
+            <Button type="submit" label="Login" class="w-full" secondary></Button>
+          </Form>
+        </template>
+      </Card>
     </div>
-  </main>
+  </div>
 </template>
diff --git a/src/views/signup.vue b/src/views/signup.vue
new file mode 100644
index 0000000..227d194
--- /dev/null
+++ b/src/views/signup.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { reactive, type Ref, ref } from "vue";
+import { useToast } from 'primevue/usetoast';
+import { useRouter } from "vue-router";
+import { useThemeStore } from "../scripts/store";
+
+const toast = useToast();
+const router = useRouter();
+const themeStore = useThemeStore();
+
+const activeStep = ref("1");
+
+interface RegisterForm<T> {
+  username?: T;
+  email?: T;
+  password?: T;
+  retyped_password?: T;
+  terms?: T;
+}
+
+const resolver = ({ values }: { values: RegisterForm<string> }) => {
+  const errors: RegisterForm<{ message: string }[]> = {};
+
+  if (!values.username) {
+    errors.username = [{ message: "Username is required." }]
+  }
+  if (!values.email) {
+    errors.email = [{ message: "Email is required." }]
+  }
+  if (!values.password) {
+    errors.password = [{ message: "Password is required." }]
+  }
+  if (!values.retyped_password || values.password !== values.retyped_password) {
+    errors.retyped_password = [{ message: "Passwords do not match." }]
+  }
+  if (!values.terms) {
+    errors.terms = [{ message: "You must agree to the terms and conditions." }]
+  }
+
+  return { errors };
+}
+
+const registerInitialValues = reactive({
+  username: "",
+  email: "",
+  password: "",
+  terms: false,
+})
+
+const inProgress = ref(false);
+const onRegister = async ({ valid, states }: { valid: boolean, states: RegisterForm<Ref<string>> }) => {
+  if (!valid) return;
+
+  if (inProgress.value) return;
+  inProgress.value = true;
+
+  console.log(states);
+
+  inProgress.value = false;
+  toast.add({ severity: "info", summary: "Register unsupported in nightly release now.", detail: "Please check your email for verification." });
+}
+</script>
+
+<template>
+  <div class="flex flex-col justify-center items-center h-screen">
+    <div class="flex flex-col container h-full m-10">
+      <div class="flex flex-row justify-between mb-4 w-full">
+        <Button @click="router.go(-1)" icon="pi pi-arrow-left" label="Back" plain outlined></Button>
+        <Button @click="themeStore.toggle" :icon="`pi pi-${themeStore.dark ? 'moon' : 'sun'}`" plain text></Button>
+      </div>
+      <Stepper v-model:value="activeStep" linear class="h-full basis-[40rem]">
+        <StepList>
+          <Step value="1">Signup</Step>
+          <Step value="2"></Step>
+          <Step value="3"></Step>
+        </StepList>
+        <StepPanels class="h-80%">
+          <StepPanel value="1" class="h-full">
+            <Card class="m-auto flex basis-[40rem] w-full h-full items-center justify-center flex-col">
+              <template #title>Sign Up</template>
+              <template #subtitle>Create a new account with AlgoHub</template>
+              <template #content>
+                <Form v-slot="$form" :initialValues=registerInitialValues :resolver @submit="onRegister"
+                  class="flex flex-col gap-4 justify-center items-center">
+                  <div class="flex flex-col gap-1 w-full">
+                    <InputText name="username" type="text" placeholder="Username" fluid />
+                    <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{
+                      $form.username.error.message }}</Message>
+                  </div>
+                  <div class="flex flex-col gap-1 w-full">
+                    <InputText name="email" type="text" placeholder="Email" fluid />
+                    <Message v-if="$form.email?.invalid" severity="error" size="small" variant="simple">{{
+                      $form.email.error.message }}</Message>
+                  </div>
+                  <div class="flex flex-col gap-1 w-full">
+                    <Password name="password" type="text" placeholder="Password" :feedback="false" toggleMask fluid />
+                    <Message v-if="$form.password?.invalid" severity="error" size="small" variant="simple">{{
+                      $form.password.error.message }}</Message>
+                  </div>
+                  <div class="flex flex-col gap-1 w-full">
+                    <Password name="retyped_password" type="text" placeholder="Retype Password" :feedback="false"
+                      toggleMask fluid />
+                    <Message v-if="$form.retyped_password?.invalid" severity="error" size="small" variant="simple">{{
+                      $form.retyped_password.error.message }}</Message>
+                  </div>
+                  <div class="flex flex-col gap-1 w-full">
+                    <div class="flex items-center gap-2">
+                      <Checkbox inputId="terms" name="terms" binary />
+                      <label for="terms" class="text-sm">I have read and agree to the <a href="#"
+                          class="underline">Affero
+                          General Public License v3</a>.</label>
+                    </div>
+                    <Message v-if="$form.terms?.invalid" severity="error" size="small" variant="simple">{{
+                      $form.terms.error.message }}</Message>
+                  </div>
+                  <p>Already have an account? <a @click="router.push('/login')" class="underline">Login</a></p>
+                  <Button type="submit" label="Register" class="w-full" :disabled="inProgress" secondary></Button>
+                </Form>
+              </template>
+            </Card>
+          </StepPanel>
+        </StepPanels>
+      </Stepper>
+    </div>
+  </div>
+</template>