aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorVidhu Kant Sharma <vidhukant@vidhukant.com>2023-10-05 10:12:16 +0530
committerVidhu Kant Sharma <vidhukant@vidhukant.com>2023-10-05 10:12:16 +0530
commit1f7c4fd1631e2ec0fd908f87c22a9ade8aa4f439 (patch)
tree4c082b7402588da64a9134cc8fa6c0d73671d32f /src
parentf1ada5b3292d45fed7eb808d8cc4d98573636e9b (diff)
added registration for users
Diffstat (limited to 'src')
-rw-r--r--src/views/LogIn.vue4
-rw-r--r--src/views/Register.vue114
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>