Personal data and password change

2026-04-26 01:15:58 +02:00
parent f4ea07d82c
commit 5bcdc2fb5d
20 changed files with 620 additions and 26 deletions
--- a/app/Domains/UserManagement/Views/Profile.vue
+++ b/app/Domains/UserManagement/Views/Profile.vue
@@ -0,0 +1,100 @@
+<script setup>
+import { ref } from 'vue'
+import AppLayout from '../../../../resources/js/layouts/AppLayout.vue'
+import ShadowedBox from '../../../Views/Components/ShadowedBox.vue'
+import { request } from '../../../../resources/js/components/HttpClient.js'
+import {toast} from "vue3-toastify";
+
+const props = defineProps({
+    username: String,
+})
+
+const password = ref('')
+const passwordConfirmation = ref('')
+const saving = ref(false)
+const successMessage = ref('')
+const errorMessage = ref('')
+
+const submit = async () => {
+    if (!password.value) {
+        toast.error('Bitte gib ein neues Passwort ein')
+        return;
+    }
+
+    if (password.value !== passwordConfirmation.value) {
+        toast.error('Die Wiederholung des Passworts stimmt nicht mit dem Passwort überein')
+        return;
+    }
+
+
+    saving.value = true
+    successMessage.value = ''
+    errorMessage.value = ''
+
+    const result = await request('/api/v1/profile', {
+        method: 'POST',
+        body: {
+            password: password.value,
+            password_confirmation: passwordConfirmation.value,
+        },
+    })
+
+    saving.value = false
+
+    if (result?.success) {
+        toast.success(result.message)
+        password.value = ''
+        passwordConfirmation.value = ''
+    } else {
+        toast.error(result?.message ?? 'Beim Speichern ist ein Fehler aufgetreten.')
+    }
+}
+</script>
+
+<template>
+    <AppLayout title="Profil">
+        <shadowed-box style="width: 95%; margin: 20px auto; padding: 20px; overflow-x: hidden;">
+            <h2>Mein Profil</h2>
+            <form @submit.prevent="submit">
+                <table class="form-table" style="width: 90%; margin: auto;">
+                    <tr>
+                        <td style="width: 250px;">Anmeldename:</td>
+                        <td>
+                            <span>{{ username }}</span>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Neues Passwort:</td>
+                        <td>
+                            <input type="password" v-model="password" autocomplete="new-password" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Passwort wiederholen:</td>
+                        <td>
+                            <input type="password" v-model="passwordConfirmation" autocomplete="new-password" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td colspan="2" class="btn-row">
+                            <button type="submit" class="button" :disabled="saving">
+                                {{ saving ? 'Wird gespeichert…' : 'Passwort ändern' }}
+                            </button>
+                        </td>
+                    </tr>
+                </table>
+            </form>
+        </shadowed-box>
+    </AppLayout>
+</template>
+
+<style scoped>
+.feedback {
+    padding: 10px 14px;
+    border-radius: 6px;
+    margin-bottom: 16px;
+    font-weight: 500;
+}
+.feedback.success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
+.feedback.error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
+</style>