diff options
Diffstat (limited to 'front-end/src/components/Login')
-rw-r--r-- | front-end/src/components/Login/AdminReg.vue | 84 | ||||
-rw-r--r-- | front-end/src/components/Login/UserPass.vue | 2 |
2 files changed, 85 insertions, 1 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 diff --git a/front-end/src/components/Login/UserPass.vue b/front-end/src/components/Login/UserPass.vue index 9d72d08..c47e594 100644 --- a/front-end/src/components/Login/UserPass.vue +++ b/front-end/src/components/Login/UserPass.vue @@ -99,7 +99,7 @@ const onSubmit = async () => { </form> <form v-else class="space-y-4 md:space-y-6" action="#" @submit.prevent="onSubmit" :disabled="waiting"> <fieldset> - <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label> + <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" > |