This commit is contained in:
Simon Pocrnjič
2026-01-10 20:11:20 +01:00
parent 711438d79f
commit c4d2f6e473
21 changed files with 1744 additions and 1889 deletions
@@ -1,12 +1,12 @@
<script setup>
import { ref } from 'vue';
import { useForm } from '@inertiajs/vue3';
import ActionMessage from '@/Components/ActionMessage.vue';
import FormSection from '@/Components/FormSection.vue';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/Components/ui/card';
import { Button } from '@/Components/ui/button';
import { Input } from '@/Components/ui/input';
import { Label } from '@/Components/ui/label';
import InputError from '@/Components/InputError.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import TextInput from '@/Components/TextInput.vue';
import { CheckCircle, Lock } from 'lucide-vue-next';
const passwordInput = ref(null);
const currentPasswordInput = ref(null);
@@ -38,63 +38,64 @@ const updatePassword = () => {
</script>
<template>
<FormSection @submitted="updatePassword">
<template #title>
Update Password
</template>
<Card>
<form @submit.prevent="updatePassword">
<CardHeader>
<div class="flex items-center gap-2">
<Lock class="h-5 w-5 text-muted-foreground" />
<CardTitle>Update Password</CardTitle>
</div>
<CardDescription>
Ensure your account is using a long, random password to stay secure.
</CardDescription>
</CardHeader>
<template #description>
Ensure your account is using a long, random password to stay secure.
</template>
<CardContent class="space-y-6">
<div class="space-y-2">
<Label for="current_password">Current Password</Label>
<Input
id="current_password"
ref="currentPasswordInput"
v-model="form.current_password"
type="password"
autocomplete="current-password"
/>
<InputError :message="form.errors.current_password" class="mt-2" />
</div>
<template #form>
<div class="col-span-6 sm:col-span-4">
<InputLabel for="current_password" value="Current Password" />
<TextInput
id="current_password"
ref="currentPasswordInput"
v-model="form.current_password"
type="password"
class="mt-1 block w-full"
autocomplete="current-password"
/>
<InputError :message="form.errors.current_password" class="mt-2" />
</div>
<div class="space-y-2">
<Label for="password">New Password</Label>
<Input
id="password"
ref="passwordInput"
v-model="form.password"
type="password"
autocomplete="new-password"
/>
<InputError :message="form.errors.password" class="mt-2" />
</div>
<div class="col-span-6 sm:col-span-4">
<InputLabel for="password" value="New Password" />
<TextInput
id="password"
ref="passwordInput"
v-model="form.password"
type="password"
class="mt-1 block w-full"
autocomplete="new-password"
/>
<InputError :message="form.errors.password" class="mt-2" />
</div>
<div class="space-y-2">
<Label for="password_confirmation">Confirm Password</Label>
<Input
id="password_confirmation"
v-model="form.password_confirmation"
type="password"
autocomplete="new-password"
/>
<InputError :message="form.errors.password_confirmation" class="mt-2" />
</div>
</CardContent>
<div class="col-span-6 sm:col-span-4">
<InputLabel for="password_confirmation" value="Confirm Password" />
<TextInput
id="password_confirmation"
v-model="form.password_confirmation"
type="password"
class="mt-1 block w-full"
autocomplete="new-password"
/>
<InputError :message="form.errors.password_confirmation" class="mt-2" />
</div>
</template>
<template #actions>
<ActionMessage :on="form.recentlySuccessful" class="me-3">
Saved.
</ActionMessage>
<PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
Save
</PrimaryButton>
</template>
</FormSection>
<CardFooter class="flex items-center justify-between">
<div class="flex items-center gap-2 text-sm text-muted-foreground">
<CheckCircle v-if="form.recentlySuccessful" class="h-4 w-4 text-green-600" />
<span v-if="form.recentlySuccessful">Saved.</span>
</div>
<Button type="submit" :disabled="form.processing">
Save
</Button>
</CardFooter>
</form>
</Card>
</template>