Saad Ibn-Ezzoubayr
35545c2a8f
Initial commit of the L'Ami Fiduciaire SaaS platform built on Laravel 12, Vue 3, Inertia.js 2, and Tailwind CSS 4. Story 0.1 (rename folders to declarations in database) is implemented and code-reviewed: migration, rollback, and 6 Pest tests all passing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
117 lines
4.5 KiB
Vue
117 lines
4.5 KiB
Vue
<script setup lang="ts">
|
|
import { Form, Head } from '@inertiajs/vue3';
|
|
import Heading from '@/components/Heading.vue';
|
|
import InputError from '@/components/InputError.vue';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import AppLayout from '@/layouts/AppLayout.vue';
|
|
import SettingsLayout from '@/layouts/settings/Layout.vue';
|
|
import type { BreadcrumbItem } from '@/types';
|
|
import PasswordController from '@/actions/App/Http/Controllers/Settings/PasswordController';
|
|
import { edit } from '@/routes/user-password';
|
|
|
|
const breadcrumbItems: BreadcrumbItem[] = [
|
|
{
|
|
title: 'Password settings',
|
|
href: edit().url,
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout :breadcrumbs="breadcrumbItems">
|
|
<Head title="Password settings" />
|
|
|
|
<h1 class="sr-only">Password Settings</h1>
|
|
|
|
<SettingsLayout>
|
|
<div class="space-y-6">
|
|
<Heading
|
|
variant="small"
|
|
title="Update password"
|
|
description="Ensure your account is using a long, random password to stay secure"
|
|
/>
|
|
|
|
<Form
|
|
v-bind="PasswordController.update.form()"
|
|
:options="{
|
|
preserveScroll: true,
|
|
}"
|
|
reset-on-success
|
|
:reset-on-error="[
|
|
'password',
|
|
'password_confirmation',
|
|
'current_password',
|
|
]"
|
|
class="space-y-6"
|
|
v-slot="{ errors, processing, recentlySuccessful }"
|
|
>
|
|
<div class="grid gap-2">
|
|
<Label for="current_password">Current password</Label>
|
|
<Input
|
|
id="current_password"
|
|
name="current_password"
|
|
type="password"
|
|
class="mt-1 block w-full"
|
|
autocomplete="current-password"
|
|
placeholder="Current password"
|
|
/>
|
|
<InputError :message="errors.current_password" />
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label for="password">New password</Label>
|
|
<Input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
class="mt-1 block w-full"
|
|
autocomplete="new-password"
|
|
placeholder="New password"
|
|
/>
|
|
<InputError :message="errors.password" />
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label for="password_confirmation"
|
|
>Confirm password</Label
|
|
>
|
|
<Input
|
|
id="password_confirmation"
|
|
name="password_confirmation"
|
|
type="password"
|
|
class="mt-1 block w-full"
|
|
autocomplete="new-password"
|
|
placeholder="Confirm password"
|
|
/>
|
|
<InputError :message="errors.password_confirmation" />
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<Button
|
|
:disabled="processing"
|
|
data-test="update-password-button"
|
|
>Save password</Button
|
|
>
|
|
|
|
<Transition
|
|
enter-active-class="transition ease-in-out"
|
|
enter-from-class="opacity-0"
|
|
leave-active-class="transition ease-in-out"
|
|
leave-to-class="opacity-0"
|
|
>
|
|
<p
|
|
v-show="recentlySuccessful"
|
|
class="text-sm text-neutral-600"
|
|
>
|
|
Saved.
|
|
</p>
|
|
</Transition>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
</SettingsLayout>
|
|
</AppLayout>
|
|
</template>
|