3. Zwischenstand

frontend/pages/password-change.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { FormSubmitEvent } from '#ui/types'
+
 definePageMeta({
   layout: "notLoggedIn"
 })
@@ -6,25 +8,31 @@ definePageMeta({
 const auth = useAuthStore()
 const toast = useToast()
 
+const state = reactive({
+  oldPassword: '',
+  newPassword: ''
+})
 
+const loading = ref(false)
 
-
-const doChange = async (data:any) => {
+const doChange = async (event: FormSubmitEvent<typeof state>) => {
+  loading.value = true
   try {
-    const res = await useNuxtApp().$api("/api/auth/password/change", {
+    await useNuxtApp().$api("/api/auth/password/change", {
       method: "POST",
       body: {
-        old_password: data.oldPassword,
-        new_password: data.newPassword,
+        old_password: event.data.oldPassword,
+        new_password: event.data.newPassword,
       }
     })
 
-    // Weiterleiten nach erfolgreichem Login
     toast.add({title:"Ändern erfolgreich"})
     await auth.logout()
     return navigateTo("/login")
   } catch (err: any) {
     toast.add({title:"Es gab ein Problem beim ändern",color:"error"})
+  } finally {
+    loading.value = false
   }
 }
 </script>
@@ -37,26 +45,39 @@ const doChange = async (data:any) => {
         dark="/Logo_Dark.png"
     />
 
-    <UAuthForm
-        title="Passwort zurücksetzen"
-        description="Geben Sie Ihre E-Mail ein um ein neues Passwort per E-Mail zu erhalten."
-        align="bottom"
-        :fields="[{
-            name: 'oldPassword',
-            label: 'Altes Passwort',
-            type: 'password',
-            placeholder: 'Dein altes Passwort'
-          },{
-            name: 'newPassword',
-            label: 'Neues Passwort',
-            type: 'password',
-            placeholder: 'Dein neues Passwort'
-          }]"
-        :loading="false"
-        @submit="doChange"
-        :submit-button="{label: 'Ändern'}"
-        divider="oder"
-    >
-    </UAuthForm>
+    <div class="mt-6 space-y-5">
+      <div class="space-y-1">
+        <h1 class="text-xl font-semibold">Passwort ändern</h1>
+        <p class="text-sm text-muted">
+          Geben Sie Ihr aktuelles und Ihr neues Passwort ein.
+        </p>
+      </div>
+
+      <UForm :state="state" class="space-y-4" @submit="doChange">
+        <UFormField label="Altes Passwort" name="oldPassword">
+          <UInput
+              v-model="state.oldPassword"
+              type="password"
+              class="w-full"
+              placeholder="Dein altes Passwort"
+              autocomplete="current-password"
+          />
+        </UFormField>
+
+        <UFormField label="Neues Passwort" name="newPassword">
+          <UInput
+              v-model="state.newPassword"
+              type="password"
+              class="w-full"
+              placeholder="Dein neues Passwort"
+              autocomplete="new-password"
+          />
+        </UFormField>
+
+        <UButton type="submit" block class="w-full" :loading="loading">
+          Ändern
+        </UButton>
+      </UForm>
+    </div>
   </UCard>
-</template>
+</template>