diff options
| -rw-r--r-- | src/views/LogIn.vue | 4 | ||||
| -rw-r--r-- | src/views/Register.vue | 114 |
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> |