From 866d0c5f8ada76da520dbdbdff1d38760565f86a Mon Sep 17 00:00:00 2001
From: Leon Xu <dcwinfield362@gmail.com>
Date: Fri, 31 Dec 2021 11:31:39 -0800
Subject: [PATCH] doc: update register page

---
 src/views/Register.vue | 79 ++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 77 insertions(+), 2 deletions(-)

diff --git a/src/views/Register.vue b/src/views/Register.vue
index 51a3346..125ec16 100644
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -1,16 +1,91 @@
 <template>
-  <div></div>
+  <div class="max-w-screen-sm mx-auto px-4 py-10">
+    <!-- Error Handling -->
+    <div v-if="errorMsg" class="mb-10 p-4 rounded-md bg-light-grey shadow-lg">
+      <p class="text-red-500">{{ errorMsg }}</p>
+    </div>
+
+    <!-- Register -->
+    <form
+      action=""
+      class="p-8 flex flex-col bg-light-grey rounded-md shadow-lg"
+    >
+      <h1 class="text-3xl text-at-light-green mb-4">Register</h1>
+      <div class="flex flex-col mb-2">
+        <label for="email" class="mb-1 text-sm text-at-light-green"
+          >Email</label
+        >
+        <input
+          type="email"
+          class="p-2 text-gray-500 focus:outline-none"
+          id="email"
+          v-model="email"
+        />
+      </div>
+      <div class="flex flex-col mb-2">
+        <label for="password" class="mb-1 text-sm text-at-light-green"
+          >Password</label
+        >
+        <input
+          type="password"
+          class="p-2 text-gray-500 focus:outline-none"
+          id="password"
+          v-model="password"
+        />
+      </div>
+      <div class="flex flex-col mb-2">
+        <label for="confirmPassword" class="mb-1 text-sm text-at-light-green"
+          >Confirm Password</label
+        >
+        <input
+          type="password"
+          class="p-2 text-gray-500 focus:outline-none"
+          id="confirmPassword"
+          v-model="confirmPassword"
+        />
+      </div>
+
+      <button
+        type="submit"
+        class="
+          mt-6
+          py-2
+          px-6
+          rounded-sm
+          self-start
+          text-sm text-white
+          bg-at-light-green
+          duration-200
+          border-solid border-2 border-transparent
+          hover:border-at-light-green hover:bg-white hover:text-at-light-green
+        "
+      >
+        Register
+      </button>
+      <p class="text-sm mt-6 text-center">
+        Already have an account?
+        <router-link :to="{ name: 'Login' }">
+          <span class="text-at-light-green">Login</span>
+        </router-link>
+      </p>
+    </form>
+  </div>
 </template>
 
 <script>
+import { ref } from "vue";
 export default {
   name: "register",
   setup() {
     // Create data / vars
+    const email = ref(null);
+    const password = ref(null);
+    const confirmPassword = ref(null);
+    const errorMsg = ref(null);
 
     // Register function
 
-    return {};
+    return { email, password, confirmPassword, errorMsg };
   },
 };
 </script>