From bd3a7a25792b837c5f28c7580adf132abc6f35e7 Mon Sep 17 00:00:00 2001
From: vnugent <public@vaughnnugent.com>
Date: Sun, 25 Feb 2024 01:11:06 -0500
Subject: 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
---
 front-end/src/components/Login/AdminReg.vue | 84 +++++++++++++++++++++++++++++
 front-end/src/components/Login/UserPass.vue |  2 +-
 2 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 front-end/src/components/Login/AdminReg.vue

(limited to 'front-end/src/components/Login')

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"
             >
-- 
cgit