update component structure
This commit is contained in:
Dede Fuji Abdul
@ -1,148 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
|
||||
import {
|
||||
CheckIcon,
|
||||
ExclamationTriangleIcon, InformationCircleIcon, QuestionMarkCircleIcon,
|
||||
} from '@heroicons/vue/24/outline'
|
||||
import { XMarkIcon } from '@heroicons/vue/24/solid';
|
||||
import { ref, watch } from 'vue';
|
||||
import InputText from '../InputText.vue';
|
||||
import ButtonPrimary from '../ButtonPrimary.vue';
|
||||
import { dispatchNotification } from '../Notification';
|
||||
|
||||
const props = defineProps({ open: Boolean });
|
||||
const emits = defineEmits(['onClose']);
|
||||
const open = ref(props.open)
|
||||
const oldPassword = ref('');
|
||||
const password = ref('');
|
||||
const passwordConfirmation = ref('');
|
||||
const isLoading = ref(false);
|
||||
|
||||
function close() {
|
||||
open.value = false;
|
||||
emits('onClose', false);
|
||||
}
|
||||
|
||||
function showLoading() {
|
||||
isLoading.value = true;
|
||||
}
|
||||
|
||||
function hideLoading() {
|
||||
isLoading.value = false;
|
||||
}
|
||||
|
||||
function handleOnChangePassword() {
|
||||
if (oldPassword.value == '') {
|
||||
dispatchNotification({
|
||||
title: 'Peringatan',
|
||||
content: 'Password lama tidak boleh kosong',
|
||||
type: 'error',
|
||||
})
|
||||
} else if (password.value == '') {
|
||||
dispatchNotification({
|
||||
title: 'Peringatan',
|
||||
content: 'Password baru tidak boleh kosong',
|
||||
type: 'error',
|
||||
})
|
||||
} else if (passwordConfirmation.value == '') {
|
||||
dispatchNotification({
|
||||
title: 'Peringatan',
|
||||
content: 'Konfirmasi password tidak boleh kosong',
|
||||
type: 'error',
|
||||
})
|
||||
} else if (password.value != passwordConfirmation.value) {
|
||||
dispatchNotification({
|
||||
title: 'Peringatan',
|
||||
content: 'Password baru dan konfirmasi password tidak sama',
|
||||
type: 'error',
|
||||
})
|
||||
} else if (oldPassword.value == password.value) {
|
||||
dispatchNotification({
|
||||
title: 'Peringatan',
|
||||
content: 'Password baru tidak boleh sama dengan password lama',
|
||||
type: 'error',
|
||||
})
|
||||
} else {
|
||||
showLoading();
|
||||
setTimeout(() => {
|
||||
hideLoading();
|
||||
close();
|
||||
}, 15000);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
watch(() => props.open, (value) => {
|
||||
open.value = value;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Log Out Dialog -->
|
||||
<TransitionRoot as="template" :show="open">
|
||||
<Dialog as="div" class="relative z-20" @close="close">
|
||||
<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
|
||||
leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
|
||||
<div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" />
|
||||
</TransitionChild>
|
||||
|
||||
<div class="fixed inset-0 z-10 overflow-y-auto">
|
||||
<div class="flex items-center justify-center min-h-full p-4 text-center sm:p-0">
|
||||
<TransitionChild as="template" enter="ease-out duration-300"
|
||||
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
|
||||
leave-from="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
|
||||
<DialogPanel
|
||||
class="relative p-4 overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl sm:max-w-sm sm:p-6 sm:my-8 sm:w-full">
|
||||
<form @submit.prevent="handleOnChangePassword" class="flex flex-col">
|
||||
<div class="absolute top-0 right-0 pt-4 pr-4 ">
|
||||
<button type="button"
|
||||
class="text-gray-400 bg-white rounded-md hover:text-gray-500 focus:outline-none focus:ring-0"
|
||||
@click="close">
|
||||
<span class="sr-only">Close</span>
|
||||
<XMarkIcon class="w-6 h-6" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<DialogTitle as="h4" class="font-medium leading-6 text-gray-900 text-md">
|
||||
Ubah Password
|
||||
</DialogTitle>
|
||||
<div class="flex flex-col mt-2">
|
||||
<label for="password" class="mb-2 text-xs font-medium text-dark">
|
||||
Password Lama
|
||||
</label>
|
||||
<InputText type="password" class-name="mb-3 text-sm placeholder:text-sm"
|
||||
placeholder="Masukan Password lama" :value="oldPassword"
|
||||
@update:value="oldPassword = $event" />
|
||||
|
||||
<label for="password" class="mb-2 text-xs font-medium text-dark">
|
||||
Password Baru
|
||||
</label>
|
||||
<InputText class-name="mb-3 text-sm placeholder:text-sm" type="password"
|
||||
placeholder="Masukan Password baru" :value="password"
|
||||
@update:value="password = $event" />
|
||||
|
||||
<label for="password" class="mb-2 text-xs font-medium text-dark">
|
||||
Konfirmasi Password
|
||||
</label>
|
||||
<InputText class-name="mb-3 text-sm placeholder:text-sm" type="password"
|
||||
placeholder="Konfirmasi Password" :value="passwordConfirmation"
|
||||
@update:value="passwordConfirmation = $event" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Section -->
|
||||
<div class="mt-2">
|
||||
<ButtonPrimary
|
||||
class-name="inline-flex justify-center w-full px-4 py-2 font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm text-md focus:outline-none focus:ring-0 sm:text-sm"
|
||||
type="submit" label="Ubah Password" :disabled="isLoading" :is-loading="isLoading" />
|
||||
</div>
|
||||
</form>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
</template>
|
||||
Reference in New Issue
Block a user