jaro/ikea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: button to peek password in change password

Browse Source
This commit is contained in:
mesayusriana12
2022-08-30 10:56:42 +07:00
parent b35b61dc14
commit 780560249e
1 changed files with 28 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
View File

@@ -7,6 +7,8 @@ import JetFormSection from '@/Jetstream/FormSection.vue';
import JetInput from '@/Jetstream/Input.vue'; import JetInput from '@/Jetstream/Input.vue';
import JetInputError from '@/Jetstream/InputError.vue'; import JetInputError from '@/Jetstream/InputError.vue';
import JetLabel from '@/Jetstream/Label.vue'; import JetLabel from '@/Jetstream/Label.vue';
import Button from '@/Jetstream/Button.vue';
import Icon from '@/Components/Icon.vue';
const passwordInput = ref(null); const passwordInput = ref(null);
const currentPasswordInput = ref(null); const currentPasswordInput = ref(null);
@@ -17,6 +19,12 @@ const form = useForm({
password_confirmation: '', password_confirmation: '',
}); });
const peek = ref(false);
const toggle = () => {
peek.value = !peek.value;
}
const updatePassword = () => { const updatePassword = () => {
form.put(route('user-password.update'), { form.put(route('user-password.update'), {
errorBag: 'updatePassword', errorBag: 'updatePassword',
@@ -50,14 +58,24 @@ const updatePassword = () => {
<template #form> <template #form>
<div class="col-span-6 sm:col-span-4"> <div class="col-span-6 sm:col-span-4">
<JetLabel for="current_password" value="Current Password" /> <JetLabel for="current_password" value="Current Password" />
<JetInput <div class="flex">
id="current_password" <JetInput
ref="currentPasswordInput" id="current_password"
v-model="form.current_password" ref="currentPasswordInput"
type="password" v-model="form.current_password"
class="mt-1 block w-full" :type="peek ? 'text' : 'password'"
autocomplete="current-password" class="mt-1 block w-full rounded-r-none"
/> autocomplete="current-password"
/>
<Button
type="button"
class="mt-1 block w-full rounded-l-none basis-12 bg-slate-200 outline outline-1 outline-gray-300 text-black hover:bg-slate-600 hover:text-slate-50"
@click="toggle"
>
<Icon v-if="peek" name="eye-slash" />
<Icon v-else name="eye" />
</Button>
</div>
<JetInputError :message="form.errors.current_password" class="mt-2" /> <JetInputError :message="form.errors.current_password" class="mt-2" />
</div> </div>
@@ -67,7 +85,7 @@ const updatePassword = () => {
id="password" id="password"
ref="passwordInput" ref="passwordInput"
v-model="form.password" v-model="form.password"
type="password" :type="peek ? 'text' : 'password'"
class="mt-1 block w-full" class="mt-1 block w-full"
autocomplete="new-password" autocomplete="new-password"
/> />
@@ -79,7 +97,7 @@ const updatePassword = () => {
<JetInput <JetInput
id="password_confirmation" id="password_confirmation"
v-model="form.password_confirmation" v-model="form.password_confirmation"
type="password" :type="peek ? 'text' : 'password'"
class="mt-1 block w-full" class="mt-1 block w-full"
autocomplete="new-password" autocomplete="new-password"
/> />