Merge branch 'main' into koda/137-user-edit-flow

2026-05-23 01:05:12 +02:00
parent a810f54153 adaf3d2b32
commit 300b295ef0
8 changed files with 259 additions and 12 deletions
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { Form, Head, Link } from '@inertiajs/vue3';
+import { LogOut } from 'lucide-vue-next';
+import SecurityController from '@/actions/App/Http/Controllers/Settings/SecurityController';
+import InputError from '@/components/InputError.vue';
+import PasswordInput from '@/components/PasswordInput.vue';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Spinner } from '@/components/ui/spinner';
+import AuthLayout from '@/layouts/AuthLayout.vue';
+import { logout } from '@/routes';
+
+withDefaults(
+    defineProps<{
+        status?: string | null;
+    }>(),
+    {
+        status: null,
+    },
+);
+</script>
+
+<template>
+    <AuthLayout
+        title="Change your password"
+        description="You must update your password before you can continue using the application."
+    >
+        <Head title="Change your password" />
+
+        <div class="mb-6 flex justify-end">
+            <Button as-child variant="ghost" size="sm">
+                <Link :href="logout()" as="button">
+                    <LogOut class="size-4" />
+                    Log out
+                </Link>
+            </Button>
+        </div>
+
+        <div
+            v-if="status"
+            class="mb-6 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900"
+        >
+            {{ status }}
+        </div>
+
+        <Form
+            v-bind="SecurityController.update.form()"
+            reset-on-success
+            :reset-on-error="[
+                'password',
+                'password_confirmation',
+                'current_password',
+            ]"
+            v-slot="{ errors, processing }"
+        >
+            <div class="space-y-6">
+                <div class="grid gap-2">
+                    <Label htmlFor="current_password">Current password</Label>
+                    <PasswordInput
+                        id="current_password"
+                        name="current_password"
+                        class="mt-1 block w-full"
+                        required
+                        autocomplete="current-password"
+                        autofocus
+                        placeholder="Current password"
+                    />
+
+                    <InputError :message="errors.current_password" />
+                </div>
+
+                <div class="grid gap-2">
+                    <Label htmlFor="password">New password</Label>
+                    <PasswordInput
+                        id="password"
+                        name="password"
+                        class="mt-1 block w-full"
+                        required
+                        autocomplete="new-password"
+                        placeholder="New password"
+                    />
+
+                    <InputError :message="errors.password" />
+                </div>
+
+                <div class="grid gap-2">
+                    <Label htmlFor="password_confirmation">
+                        Confirm new password
+                    </Label>
+                    <PasswordInput
+                        id="password_confirmation"
+                        name="password_confirmation"
+                        class="mt-1 block w-full"
+                        required
+                        autocomplete="new-password"
+                        placeholder="Confirm new password"
+                    />
+
+                    <InputError :message="errors.password_confirmation" />
+                </div>
+
+                <div class="flex items-center">
+                    <Button
+                        class="w-full"
+                        :disabled="processing"
+                        data-test="force-password-change-button"
+                    >
+                        <Spinner v-if="processing" />
+                        Save new password
+                    </Button>
+                </div>
+            </div>
+        </Form>
+    </AuthLayout>
+</template>