dst/store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate password fields to use InputGroup component for password visibility toggling

Browse Source
This commit is contained in:
Yoga Pangestu 2026-06-14 02:00:05 +07:00
parent 9365797f89
commit f0cc242c7e
2 changed files with 78 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
resources/js/components/LoginForm.vue
View File

@ -13,6 +13,7 @@ import {
FieldLabel, FieldLabel,
} from '@/components/ui/field'; } from '@/components/ui/field';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton } from '@/components/ui/input-group';
import { formErrors } from '@/lib/form'; import { formErrors } from '@/lib/form';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import FieldSeparator from './ui/field/FieldSeparator.vue'; import FieldSeparator from './ui/field/FieldSeparator.vue';
@ -75,27 +76,25 @@ function submit() {
Kata Sandi Kata Sandi
</FieldLabel> </FieldLabel>
<div class="relative"> <InputGroup>
<Input <InputGroupInput
id="password" id="password"
v-model="form.password" v-model="form.password"
:type="showPassword ? 'text' : 'password'" :type="showPassword ? 'text' : 'password'"
placeholder="********" placeholder="********"
required required
class="pr-10"
/> />
<InputGroupAddon align="inline-end">
<Button <InputGroupButton
variant="ghost"
size="icon"
type="button" type="button"
size="icon-xs"
@click="showPassword = !showPassword" @click="showPassword = !showPassword"
class="absolute inset-y-0 right-0"
> >
<Eye v-if="!showPassword" class="h-5 w-5" /> <Eye v-if="!showPassword" class="h-4 w-4" />
<EyeOff v-else class="h-5 w-5" /> <EyeOff v-else class="h-4 w-4" />
</Button> </InputGroupButton>
</div> </InputGroupAddon>
</InputGroup>
<FieldError <FieldError
:errors="formErrors(form, 'password')" :errors="formErrors(form, 'password')"

72
resources/js/pages/admin/account/Password.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { Head, useForm } from '@inertiajs/vue3'; import { Head, useForm } from '@inertiajs/vue3';
import { Save } from '@lucide/vue'; import { Save, Eye, EyeOff } from '@lucide/vue';
import { ref } from 'vue';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card'; import { Card, CardContent } from '@/components/ui/card';
@ -11,7 +12,7 @@ import {
FieldLabel, FieldLabel,
FieldSet, FieldSet,
} from '@/components/ui/field'; } from '@/components/ui/field';
import { Input } from '@/components/ui/input'; import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton } from '@/components/ui/input-group';
import AccountLayout from '@/layouts/AccountLayout.vue'; import AccountLayout from '@/layouts/AccountLayout.vue';
import { formErrors } from '@/lib/form'; import { formErrors } from '@/lib/form';
import type { PasswordFormData } from '@/types/account'; import type { PasswordFormData } from '@/types/account';
@ -22,6 +23,10 @@ const form = useForm<PasswordFormData>({
password_confirmation: '', password_confirmation: '',
}); });
const showCurrentPassword = ref(false);
const showPassword = ref(false);
const showPasswordConfirmation = ref(false);
function submit() { function submit() {
form.put('/admin/account/password', { form.put('/admin/account/password', {
onSuccess: () => { onSuccess: () => {
@ -49,8 +54,25 @@ function submit() {
<FieldLabel for="current_password" required> <FieldLabel for="current_password" required>
Kata Sandi Saat Ini Kata Sandi Saat Ini
</FieldLabel> </FieldLabel>
<Input id="current_password" v-model="form.current_password" type="password" <InputGroup>
placeholder="********" autocomplete="current-password" /> <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')" /> <FieldError :errors="formErrors(form, 'current_password')" />
</Field> </Field>
@ -58,8 +80,25 @@ function submit() {
<FieldLabel for="password" required> <FieldLabel for="password" required>
Kata Sandi Baru Kata Sandi Baru
</FieldLabel> </FieldLabel>
<Input id="password" v-model="form.password" type="password" placeholder="********" <InputGroup>
autocomplete="new-password" /> <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')" /> <FieldError :errors="formErrors(form, 'password')" />
</Field> </Field>
@ -67,8 +106,25 @@ function submit() {
<FieldLabel for="password_confirmation" required> <FieldLabel for="password_confirmation" required>
Konfirmasi Kata Sandi Baru Konfirmasi Kata Sandi Baru
</FieldLabel> </FieldLabel>
<Input id="password_confirmation" v-model="form.password_confirmation" <InputGroup>
type="password" placeholder="********" autocomplete="new-password" /> <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')" /> <FieldError :errors="formErrors(form, 'password_confirmation')" />
</Field> </Field>
</FieldGroup> </FieldGroup>