diff options
Diffstat (limited to 'src/views')
| -rw-r--r-- | src/views/AllBrands.vue | 9 | ||||
| -rw-r--r-- | src/views/AllCustomers.vue | 7 | ||||
| -rw-r--r-- | src/views/AllItems.vue | 7 | ||||
| -rw-r--r-- | src/views/HomeView.vue | 5 | ||||
| -rw-r--r-- | src/views/LogIn.vue | 139 | ||||
| -rw-r--r-- | src/views/NewCustomer.vue | 7 | ||||
| -rw-r--r-- | src/views/NewItem.vue | 7 | ||||
| -rw-r--r-- | src/views/Register.vue | 106 |
8 files changed, 287 insertions, 0 deletions
diff --git a/src/views/AllBrands.vue b/src/views/AllBrands.vue new file mode 100644 index 0000000..d07e316 --- /dev/null +++ b/src/views/AllBrands.vue @@ -0,0 +1,9 @@ +<script setup lang="ts"> +import brandsTable from './../components/brands_table.vue' +import newBrand from './../components/new_brand.vue' +</script> + +<template> + <newBrand /> + <brandsTable /> +</template> diff --git a/src/views/AllCustomers.vue b/src/views/AllCustomers.vue new file mode 100644 index 0000000..ba9096b --- /dev/null +++ b/src/views/AllCustomers.vue @@ -0,0 +1,7 @@ +<script setup lang="ts"> +import clientsTable from './../components/customers_table.vue' +</script> + +<template> + <clientsTable /> +</template> diff --git a/src/views/AllItems.vue b/src/views/AllItems.vue new file mode 100644 index 0000000..9cf3708 --- /dev/null +++ b/src/views/AllItems.vue @@ -0,0 +1,7 @@ +<script setup lang="ts"> +import itemsTable from './../components/items_table.vue' +</script> + +<template> + <itemsTable /> +</template> diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue new file mode 100644 index 0000000..6b087a7 --- /dev/null +++ b/src/views/HomeView.vue @@ -0,0 +1,5 @@ +<script setup lang="ts"></script> + +<template> + <h1>OpenBills Home Page</h1> +</template> diff --git a/src/views/LogIn.vue b/src/views/LogIn.vue new file mode 100644 index 0000000..fb9bdcd --- /dev/null +++ b/src/views/LogIn.vue @@ -0,0 +1,139 @@ +<script setup lang="ts"> +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 email = ref("") +const password = ref("") + +const login = async (e) => { + e.preventDefault() + isLoading.value = true + + try { + const res = await axios.post('/auth/signin', { + "accountname": toRaw(email.value), + "password": toRaw(password.value), + "method": "email" + }) + + localStorage.setItem("authToken", res.data.auth_token) + localStorage.setItem("refToken", res.data.refresh_token) + toast.default(`Welcome, ${res.data.data.Username}`) + router.push({ path: "/" }) + } catch (err) { + const statusCode = err.request.status + + switch(statusCode) { + case 401: + toast.error('Password is incorrect') + break; + case 404: + toast.error('User does not exist') + break; + default: + toast.error('An unhandled exception occoured. Please check logs') + } + } + + isLoading.value = false +} +</script> + +<template> + <div id="login-form" class="mx-auto mt-5"> + <ul class="nav nav-pills nav-justified mb-3" id="ex1" role="tablist"> + <li class="nav-item" role="presentation"> + <RouterLink + class="nav-link active" + id="tab-login" + data-mdb-toggle="pill" + to="/login" + role="tab" + aria-controls="pills-login" + aria-selected="true" + >Login</RouterLink + > + </li> + <li class="nav-item" role="presentation"> + <RouterLink + class="nav-link" + id="tab-register" + data-mdb-toggle="pill" + to="/register" + role="tab" + aria-controls="pills-register" + aria-selected="false" + >Register</RouterLink + > + </li> + </ul> + + <div> + <form v-on:submit="login"> + <div class="form-floating mb-4"> + <input + id="login-email-input" + type="text" + class="form-control" + placeholder="" + v-model="email" + /> + <label for="login-email-input">E-Mail</label> + </div> + + <div class="form-floating mb-4"> + <input + id="login-password-input" + type="password" + class="form-control" + placeholder="" + v-model="password" + /> + <label for="login-password-input">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> + </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" :class="{ disabled: isLoading }"> + Sign In + <div v-if="isLoading" class="spinner-border spinner-border-sm ms-1" role="status"> + <span class="sr-only"></span> + </div> + </button> + + <div class="text-center"> + <p>Not a member? <RouterLink to="/register">Register</RouterLink></p> + </div> + </form> + </div> + </div> +</template> + +<style> +#login-form { + max-width: 30rem; + width: 100%; +} +</style> diff --git a/src/views/NewCustomer.vue b/src/views/NewCustomer.vue new file mode 100644 index 0000000..d19995e --- /dev/null +++ b/src/views/NewCustomer.vue @@ -0,0 +1,7 @@ +<script setup lang="ts"> +import newCustomer from './../components/new_customer.vue' +</script> + +<template> + <newCustomer /> +</template> diff --git a/src/views/NewItem.vue b/src/views/NewItem.vue new file mode 100644 index 0000000..89690c6 --- /dev/null +++ b/src/views/NewItem.vue @@ -0,0 +1,7 @@ +<script setup lang="ts"> +import newItem from './../components/new_item.vue' +</script> + +<template> + <newItem /> +</template> diff --git a/src/views/Register.vue b/src/views/Register.vue new file mode 100644 index 0000000..b96a0d1 --- /dev/null +++ b/src/views/Register.vue @@ -0,0 +1,106 @@ +<script setup lang="ts"> +import { RouterLink } from 'vue-router' +</script> + +<template> + <div id="signin-form" class="mx-auto mt-5"> + <ul class="nav nav-pills nav-justified mb-3" id="ex1" role="tablist"> + <li class="nav-item" role="presentation"> + <RouterLink + class="nav-link" + id="tab-login" + data-mdb-toggle="pill" + to="/login" + role="tab" + aria-controls="pills-login" + aria-selected="true" + >Login</RouterLink + > + </li> + <li class="nav-item" role="presentation"> + <RouterLink + class="nav-link active" + id="tab-register" + data-mdb-toggle="pill" + to="/register" + role="tab" + aria-controls="pills-register" + aria-selected="false" + >Register</RouterLink + > + </li> + </ul> + + <div> + <form> + <div class="form-floating mb-4"> + <input + id="login-username-input" + type="text" + class="form-control" + placeholder="" + /> + <label for="login-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> + </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> + </div> + + <div class="form-floating mb-4"> + <input + id="login-password-confirm-input" + type="password" + class="form-control" + placeholder="" + /> + <label for="login-password-confirm-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> + </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> + + <div class="text-center"> + <p>Already have an account? <RouterLink to="/login">Sign In</RouterLink></p> + </div> + </form> + </div> + </div> +</template> + +<style> +#signin-form { + max-width: 30rem; + width: 100%; +} +</style> |