feat(signup): implement signup page

.changes/signup-panel.md

@@ -0,0 +1,5 @@
+---
+"algohub": patch:feat
+---
+
+Add sign up panel in `signup.vue`.

.cspell.json

@@ -6,6 +6,7 @@
         "pinia",
         "primeicons",
         "primevue",
+        "signup",
         "SWPU",
         "tailwindcss",
         "tauri",

src/App.vue

@@ -7,6 +7,8 @@ themeStore.init();
 </script>
 
 <template>
-    <Toast />
-    <RouterView />
+    <main class="w-full h-screen">
+        <Toast />
+        <RouterView />
+    </main>
 </template>

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,39 +680,24 @@ 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 {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
 
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
-
 .font-bold {
   font-weight: 700;
 }
@@ -700,42 +715,16 @@ 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 {
     font-size: 2.25rem;
     line-height: 2.5rem;
   }
 }
-
-@media (min-width: 1024px) {
-  .lg\:w-full {
-    width: 100%;
-  }
-}

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>