Basic user management

2026-02-05 00:46:22 +01:00
parent e280fcfba8
commit 11108bdfcc
55 changed files with 1524 additions and 54 deletions
--- a/app/Domains/UserManagement/Views/VerifyEmail.vue
+++ b/app/Domains/UserManagement/Views/VerifyEmail.vue
@@ -0,0 +1,152 @@
+<script setup>
+import AppLayout from '../../../../resources/js/layouts/AppLayout.vue'
+import {computed, onMounted, reactive, ref} from 'vue'
+import { toast } from 'vue3-toastify'
+import ShadowedBox from "../../../Views/Components/ShadowedBox.vue";
+import {useAjax} from "../../../../resources/js/components/ajaxHandler.js";
+import ErrorText from "../../../Views/Components/ErrorText.vue";
+
+
+const props = defineProps({
+    navbar: Object,
+    tenant: String,
+    user: Object,
+    currentPath: String,
+    errors: Object,
+    availableLocalGroups: Array,
+})
+
+onMounted(() => {
+    if (undefined !== props.errors && undefined !== props.errors.username) {
+        toast.error(props.errors.username[0])
+    }
+})
+const form = reactive({
+    email: '',
+    verificationToken: '',
+    password: '',
+})
+
+const errors = reactive({})
+const { request } = useAjax()
+
+const isValid = computed(() => {
+    errors.email = '';
+    errors.verificationToken = '';
+    errors.password = '';
+
+    if (!form.email) {
+        errors.email = 'Bitte gib deine E-Mail-Adresse ein'
+    } else if (!/^\S+@\S+\.\S+$/.test(form.email)) {
+        errors.email = 'Ungültige E-Mail'
+    }
+
+    if (!form.verificationToken) {
+        errors.verificationToken = 'Bitte gib den Sicherheitsschlüssel, den du per E-Mail erhalten hast, ein'
+    }
+
+    if (!form.password) {
+        errors.password = 'Bitte gib ein Passwort ein'
+    } else if (form.password.length < 2) {
+        errors.password = 'Das Passwort muss mindestens 12 Zeichen lang sein'
+    }
+
+    if (form.password !== form.password_confirmation) {
+        errors.password = 'Das Passwort und die Wiederholung stimmen nicht überein'
+    }
+
+    return !errors.password && !errors.email && !errors.verificationToken
+})
+
+async function submit() {
+
+    if (!isValid.value) return false
+
+    const data = await request("/api/v1/register/confirmEmail", {
+        method: "POST",
+        body: {
+            "email": form.email,
+            "verificationToken": form.verificationToken,
+            "password": form.password,
+        }
+    });
+
+    if (data.error_types) {
+        Object.keys(data.error_types).forEach((key) => {
+            if (key in errors) {
+                errors[key] = data.error_types[key]
+            }
+        });
+
+    } else {
+        toast.success(data.message)
+        window.location.href = '/login';
+    }
+    return;
+}
+
+function resetPassword() {
+    window.location.href = '/reset-password';
+}
+
+
+const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+</script>
+
+<template>
+    <AppLayout title='E-Mail bestätigen' :user="props.user" :navbar="props.navbar" :tenant="props.tenant" :currentPath="props.currentPath">
+        <form method="POST" action="/register" @submit.prevent="submit">
+            <input type="hidden" name="_token" :value="csrfToken" />
+            <shadowed-box style="width: 75%; margin: 150px auto; padding: 20px;">
+                <p>
+                    Bitte prüfe dein E-Mail-Postfach.<br />
+                    Solltest du keinen Aktivierungsschlüssel erhalten haben, kontaktiere bitte einen Administrator.
+                </p>
+                <table>
+                    <tr>
+                        <th>E-Mail-Adresse</th>
+                        <td>
+                            <input type="email" name="email" id="email" v-model="form.email" />
+                            <ErrorText :message="errors.email" />
+                        </td>
+                    </tr>
+
+                    <tr>
+                        <th>Sicherheitsschlüssel</th>
+                        <td>
+                            <input type="text" name="verificationToken" id="verificationToken" v-model="form.verificationToken" />
+                            <ErrorText :message="errors.verificationToken" />
+                        </td>
+                    </tr>
+
+                    <tr>
+                        <th>Dein neues Passwort</th>
+                        <td><input type="password" name="password" id="password" v-model="form.password" /></td>
+                    </tr>
+
+                    <tr>
+                        <th>Passwort (wiederholen)</th>
+                        <td>
+                            <input type="password" name="password_retype" id="password_retype" v-model="form.password_confirmation" />
+                            <ErrorText :message="errors.password" />
+                        </td>
+                    </tr>
+
+                    <tr>
+                        <td colspan="2">
+                            <input type="submit" value="E-Mail validieren" style="margin-top: 20px;" />
+                            <input type="button" @click="resetPassword" style="margin-top: 20px; margin-left: 20px;" value="Validierungscode neu zusenden" />
+                        </td>
+                    </tr>
+                </table>
+            </shadowed-box>
+        </form>
+    </AppLayout>
+</template>
+
+<style>
+    th {
+        width: 150px;
+    }
+
+</style>