diff options
author | vnugent <public@vaughnnugent.com> | 2024-02-25 01:11:06 -0500 |
---|---|---|
committer | vnugent <public@vaughnnugent.com> | 2024-02-25 01:11:06 -0500 |
commit | bd3a7a25792b837c5f28c7580adf132abc6f35e7 (patch) | |
tree | 2a3ec046f8f76f115e648f2bc6d1576cfa0a6c6f /front-end/src/components/Login/AdminReg.vue | |
parent | 52645b724834e669788a45edb9d135f243432540 (diff) |
Squashed commit of the following:
commit 069f81fc3c87c437eceff756ddca7a4c1b58044d
Author: vnugent <public@vaughnnugent.com>
Date: Sat Feb 24 22:33:34 2024 -0500
feat: #3 setup mode, admin signup, fixes, and contianerize!
commit 97ffede9eb312fca0257afa06969d47a12703f3b
Author: vnugent <public@vaughnnugent.com>
Date: Mon Feb 19 22:26:03 2024 -0500
feat: new account setup and invitation links
commit 1c8f59bc0a1b25ce5013b0f1fc7fa73c0de415d6
Author: vnugent <public@vaughnnugent.com>
Date: Thu Feb 15 16:49:59 2024 -0500
feat: update packages, drag/drop link, and fix some button padding
Diffstat (limited to 'front-end/src/components/Login/AdminReg.vue')
-rw-r--r-- | front-end/src/components/Login/AdminReg.vue | 84 |
1 files changed, 84 insertions, 0 deletions
diff --git a/front-end/src/components/Login/AdminReg.vue b/front-end/src/components/Login/AdminReg.vue new file mode 100644 index 0000000..8546512 --- /dev/null +++ b/front-end/src/components/Login/AdminReg.vue @@ -0,0 +1,84 @@ +<script setup lang="ts"> +import { reactive, computed } from 'vue' +import { useVuelidate } from '@vuelidate/core' +import { required, maxLength, minLength, email, helpers } from '@vuelidate/validators' +import { useVuelidateWrapper, apiCall, useWait } from '@vnuge/vnlib.browser' +import { useStore } from '../../store' + +const { waiting } = useWait(); +const store = useStore(); + +const vState = reactive({ username: '', password: '', repeat: ''}) + +const rules = computed(() =>({ + username: { + required: helpers.withMessage('Email cannot be empty', required), + email: helpers.withMessage('Your email address is not valid', email), + maxLength: helpers.withMessage('Email address must be less than 50 characters', maxLength(50)) + }, + password: { + required: helpers.withMessage('Password cannot be empty', required), + minLength: helpers.withMessage('Password must be at least 8 characters', minLength(8)), + maxLength: helpers.withMessage('Password must have less than 128 characters', maxLength(128)) + }, + repeat:{ + required: helpers.withMessage('Password cannot be empty', required), + minLength: helpers.withMessage('Password must be at least 8 characters', minLength(8)), + maxLength: helpers.withMessage('Password must have less than 128 characters', maxLength(128)), + match: helpers.withMessage('Passwords must match', (value: string) => value === vState.password) + } +})); + +const v$ = useVuelidate(rules, vState) +const { validate } = useVuelidateWrapper(v$ as any); + +const onSubmit = async () => { + + // If the form is not valid set the error message + if (!await validate()) { + return + } + + // Run login in an apicall wrapper + await apiCall(async ({ toaster }) => { + + const res = await store.registation.api.registerAdmin( + v$.value.username.$model, + v$.value.password.$model + ); + + const message = res.getResultOrThrow(); + + toaster.general.success({ + title: 'Success!', + text: message + }) + }) +} +</script> + +<template> + <form class="space-y-4 md:space-y-6" id="admin-registation" action="#" @submit.prevent="onSubmit" :disabled="waiting"> + <fieldset> + <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email</label> + <input type="email" name="email" id="email" class="input" placeholder="name@company.com" required + v-model="v$.username.$model"> + </fieldset> + <fieldset> + <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label> + <input type="password" name="password" id="password" class="input" placeholder="••••••••" required + v-model="v$.password.$model"> + </fieldset> + <fieldset> + <label for="repeat-password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Repeat Password</label> + <input type="password" name="repeat-password" id="repeat-password" class="input" placeholder="••••••••" required + v-model="v$.repeat.$model"> + </fieldset> + <button form="admin-registation" type="submit" class="btn">Register</button> + </form> + <p class="py-4 text-sm text-red-500"> + This tab is only visible when the server is in setup mode. You can create as many admin accounts as you like now. + </p> +</template> + +<style scoped lang="scss"></style>
\ No newline at end of file |