149 lines
6.9 KiB
Vue
149 lines
6.9 KiB
Vue
<script setup lang="ts">
|
|
import { Head, useForm } from '@inertiajs/vue3';
|
|
import { Save, Eye, EyeOff } from '@lucide/vue';
|
|
import { ref } from 'vue';
|
|
import { toast } from 'vue-sonner';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import {
|
|
Field,
|
|
FieldError,
|
|
FieldGroup,
|
|
FieldLabel,
|
|
FieldSet,
|
|
} from '@/components/ui/field';
|
|
import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton } from '@/components/ui/input-group';
|
|
import AccountLayout from '@/layouts/AccountLayout.vue';
|
|
import { formErrors } from '@/lib/form';
|
|
import { update } from '@/routes/admin/account/password';
|
|
import type { PasswordFormData } from '@/types/account';
|
|
|
|
|
|
const form = useForm<PasswordFormData>({
|
|
current_password: '',
|
|
password: '',
|
|
password_confirmation: '',
|
|
});
|
|
|
|
const showCurrentPassword = ref(false);
|
|
const showPassword = ref(false);
|
|
const showPasswordConfirmation = ref(false);
|
|
|
|
function submit() {
|
|
form.put(update.url(), {
|
|
onSuccess: () => {
|
|
form.reset();
|
|
},
|
|
onError: (errors: any) => {
|
|
if (errors.system) {
|
|
toast.error(errors.system);
|
|
}
|
|
},
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<Head title="Kata Sandi" />
|
|
|
|
<AccountLayout>
|
|
<form @submit.prevent="submit">
|
|
<div class="grid gap-6">
|
|
<Card>
|
|
<CardContent>
|
|
<FieldSet>
|
|
<FieldGroup class="grid gap-4 sm:grid-cols-3">
|
|
<Field>
|
|
<FieldLabel for="current_password" required>
|
|
Kata Sandi Saat Ini
|
|
</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupInput
|
|
id="current_password"
|
|
v-model="form.current_password"
|
|
:type="showCurrentPassword ? 'text' : 'password'"
|
|
placeholder="********"
|
|
autocomplete="current-password"
|
|
/>
|
|
<InputGroupAddon align="inline-end">
|
|
<InputGroupButton
|
|
type="button"
|
|
size="icon-xs"
|
|
@click="showCurrentPassword = !showCurrentPassword"
|
|
>
|
|
<Eye v-if="!showCurrentPassword" class="h-4 w-4" />
|
|
<EyeOff v-else class="h-4 w-4" />
|
|
</InputGroupButton>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<FieldError :errors="formErrors(form, 'current_password')" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel for="password" required>
|
|
Kata Sandi Baru
|
|
</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupInput
|
|
id="password"
|
|
v-model="form.password"
|
|
:type="showPassword ? 'text' : 'password'"
|
|
placeholder="********"
|
|
autocomplete="new-password"
|
|
/>
|
|
<InputGroupAddon align="inline-end">
|
|
<InputGroupButton
|
|
type="button"
|
|
size="icon-xs"
|
|
@click="showPassword = !showPassword"
|
|
>
|
|
<Eye v-if="!showPassword" class="h-4 w-4" />
|
|
<EyeOff v-else class="h-4 w-4" />
|
|
</InputGroupButton>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<FieldError :errors="formErrors(form, 'password')" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel for="password_confirmation" required>
|
|
Konfirmasi Kata Sandi Baru
|
|
</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupInput
|
|
id="password_confirmation"
|
|
v-model="form.password_confirmation"
|
|
:type="showPasswordConfirmation ? 'text' : 'password'"
|
|
placeholder="********"
|
|
autocomplete="new-password"
|
|
/>
|
|
<InputGroupAddon align="inline-end">
|
|
<InputGroupButton
|
|
type="button"
|
|
size="icon-xs"
|
|
@click="showPasswordConfirmation = !showPasswordConfirmation"
|
|
>
|
|
<Eye v-if="!showPasswordConfirmation" class="h-4 w-4" />
|
|
<EyeOff v-else class="h-4 w-4" />
|
|
</InputGroupButton>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<FieldError :errors="formErrors(form, 'password_confirmation')" />
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div class="flex items-center justify-end gap-2">
|
|
<Button type="submit" :disabled="form.processing">
|
|
<Save class="size-4" />
|
|
{{ form.processing ? 'Menyimpan...' : 'Simpan' }}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</AccountLayout>
|
|
</template>
|