added registration for users

2 files changed, 92 insertions, 26 deletions

diff --git a/src/views/LogIn.vue b/src/views/LogIn.vue
index dc1f983..1b5f6c9 100644
--- a/src/views/LogIn.vue
+++ b/src/views/LogIn.vue
@@ -10,8 +10,10 @@ const toast = useToast({
 
 const router = useRouter()
 
+const storedEmail = sessionStorage.getItem('email')
+
 const isLoading = ref(false)
-const email = ref('')
+const email = ref(storedEmail ? storedEmail : '')
 const password = ref('')
 
 const login = async (e) => {
diff --git a/src/views/Register.vue b/src/views/Register.vue
index 9c3089a..fcd124c 100644
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -1,5 +1,56 @@
 <script setup lang="ts">
-import { RouterLink } from 'vue-router'
+import { ref, toRaw } from 'vue'
+import { RouterLink, useRouter } from 'vue-router'
+import axios from 'axios'
+import { useToast } from 'vue-toast-notification'
+
+const toast = useToast({
+  position: 'top-right'
+})
+
+const router = useRouter()
+
+const isLoading = ref(false)
+const username = ref('')
+const email = ref('')
+const password = ref('')
+const passwordConfirm = ref('')
+
+const register = async (e) => {
+  e.preventDefault()
+  isLoading.value = true
+
+  if (toRaw(password.value) !== toRaw(passwordConfirm.value)) {
+    toast.error('Password and confirm password do not match')
+    return
+  }
+
+  try {
+    const res = await axios.post('/auth/signup', {
+      username: toRaw(username.value),
+      email: toRaw(email.value),
+      password: toRaw(password.value)
+    })
+
+    toast.default('Successfully created a new account')
+    sessionStorage.setItem('email', res.data.data.Email)
+    router.push({ path: `/login` })
+  } catch (err) {
+    const statusCode = err.request.status
+
+    switch (statusCode) {
+      // TODO: handle all potential errors
+      case 409:
+        toast.error(err.response.data.error)
+        break
+      default:
+        toast.error('An unhandled exception occoured. Please check logs')
+        console.error(err)
+    }
+  }
+
+  isLoading.value = false
+}
 </script>
 
 <template>
@@ -32,48 +83,61 @@ import { RouterLink } from 'vue-router'
     </ul>
 
     <div>
-      <form>
+      <form v-on:submit="register">
         <div class="form-floating mb-4">
-          <input id="login-username-input" type="text" class="form-control" placeholder="" />
-          <label for="login-username-input">Username</label>
+          <input
+            id="register-username-input"
+            type="text"
+            class="form-control"
+            placeholder=""
+            v-model="username"
+          />
+          <label for="register-username-input">Username</label>
         </div>
 
         <div class="form-floating mb-4">
-          <input id="login-email-input" type="text" class="form-control" placeholder="" />
-          <label for="login-email-input">E-Mail</label>
+          <input
+            id="register-email-input"
+            type="text"
+            class="form-control"
+            placeholder=""
+            v-model="email"
+          />
+          <label for="register-email-input">E-Mail</label>
         </div>
 
         <div class="form-floating mb-4">
-          <input id="login-password-input" type="password" class="form-control" placeholder="" />
-          <label for="login-password-input">Password</label>
+          <input
+            id="register-password-input"
+            type="password"
+            class="form-control"
+            placeholder=""
+            v-model="password"
+          />
+          <label for="register-password-input">Password</label>
         </div>
 
         <div class="form-floating mb-4">
           <input
-            id="login-password-confirm-input"
+            id="register-confirmpassword-input"
             type="password"
             class="form-control"
             placeholder=""
+            v-model="passwordConfirm"
           />
-          <label for="login-password-confirm-input">Confirm Password</label>
+          <label for="register-confirmpassword-input">Confirm Password</label>
         </div>
 
-        <!--
-      <div class="row mb-4">
-        <div class="col-md-6 d-flex justify-content-center">
-          <div class="form-check mb-3 mb-md-0">
-            <input class="form-check-input" type="checkbox" value="" id="loginCheck" checked />
-            <label class="form-check-label" for="loginCheck"> Remember me </label>
+        <button
+          type="submit"
+          class="btn btn-primary btn-block mb-4"
+          :class="{ disabled: isLoading }"
+        >
+          Create Account
+          <div v-if="isLoading" class="spinner-border spinner-border-sm ms-1" role="status">
+            <span class="sr-only"></span>
           </div>
-        </div>
-
-        <div class="col-md-6 d-flex justify-content-center">
-          <a href="#!">Forgot password?</a>
-        </div>
-      </div>
-      -->
-
-        <button type="submit" class="btn btn-primary btn-block mb-4">Create Account</button>
+        </button>
 
         <div class="text-center">
           <p>Already have an account? <RouterLink to="/login">Sign In</RouterLink></p>