263 lines
8.9 KiB
Vue
263 lines
8.9 KiB
Vue
<script setup>
|
|
|
|
import { confirmedValidator, passwordValidator } from "@validators";
|
|
import { computed, ref } from "vue";
|
|
import { useStore } from "vuex";
|
|
const store = useStore();
|
|
const refVForm = ref(null);
|
|
const isCurrentPasswordVisible = ref(false);
|
|
const isNewPasswordVisible = ref(false);
|
|
const isConfirmPasswordVisible = ref(false);
|
|
const currentPassword = ref("");
|
|
const newPassword = ref("");
|
|
const confirmPassword = ref("");
|
|
const passwordConfirmationTarget = computed(() => newPassword.value);
|
|
const passwordRequirements = [
|
|
"Minimum 8 characters long - the more, the better",
|
|
"At least one lowercase character",
|
|
"At least one number, symbol, or whitespace character",
|
|
];
|
|
|
|
const serverKeys = [
|
|
{
|
|
name: "Server Key 1",
|
|
key: "23eaf7f0-f4f7-495e-8b86-fad3261282ac",
|
|
createdOn: "28 Apr 2021, 18:20 GTM+4:10",
|
|
permission: "Full Access",
|
|
},
|
|
{
|
|
name: "Server Key 2",
|
|
key: "bb98e571-a2e2-4de8-90a9-2e231b5e99",
|
|
createdOn: "12 Feb 2021, 10:30 GTM+2:30",
|
|
permission: "Read Only",
|
|
},
|
|
{
|
|
name: "Server Key 3",
|
|
key: "2e915e59-3105-47f2-8838-6e46bf83b711",
|
|
createdOn: "28 Dec 2020, 12:21 GTM+4:10",
|
|
permission: "Full Access",
|
|
},
|
|
];
|
|
|
|
const recentDevicesHeaders = [
|
|
{
|
|
title: "BROWSER",
|
|
key: "browser",
|
|
},
|
|
{
|
|
title: "DEVICE",
|
|
key: "device",
|
|
},
|
|
{
|
|
title: "LOCATION",
|
|
key: "location",
|
|
},
|
|
{
|
|
title: "RECENT ACTIVITY",
|
|
key: "recentActivity",
|
|
},
|
|
];
|
|
|
|
const recentDevices = [
|
|
{
|
|
browser: "Chrome on Windows",
|
|
device: "HP Spectre 360",
|
|
location: "New York, NY",
|
|
recentActivity: "28 Apr 2022, 18:20",
|
|
deviceIcon: {
|
|
icon: "ri-macbook-line",
|
|
color: "primary",
|
|
},
|
|
},
|
|
{
|
|
browser: "Chrome on iPhone",
|
|
device: "iPhone 12x",
|
|
location: "Los Angeles, CA",
|
|
recentActivity: "20 Apr 2022, 10:20",
|
|
deviceIcon: {
|
|
icon: "ri-android-line",
|
|
color: "error",
|
|
},
|
|
},
|
|
{
|
|
browser: "Chrome on Android",
|
|
device: "Oneplus 9 Pro",
|
|
location: "San Francisco, CA",
|
|
recentActivity: "16 Apr 2022, 04:20",
|
|
deviceIcon: {
|
|
icon: "ri-smartphone-line",
|
|
color: "success",
|
|
},
|
|
},
|
|
{
|
|
browser: "Chrome on macOS",
|
|
device: "Apple iMac",
|
|
location: "New York, NY",
|
|
recentActivity: "28 Apr 2022, 18:20",
|
|
deviceIcon: {
|
|
icon: "ri-mac-line",
|
|
color: "secondary",
|
|
},
|
|
},
|
|
{
|
|
browser: "Chrome on Windows",
|
|
device: "HP Spectre 360",
|
|
location: "Los Angeles, CA",
|
|
recentActivity: "20 Apr 2022, 10:20",
|
|
deviceIcon: {
|
|
icon: "ri-macbook-line",
|
|
color: "primary",
|
|
},
|
|
},
|
|
{
|
|
browser: "Chrome on Android",
|
|
device: "Oneplus 9 Pro",
|
|
location: "San Francisco, CA",
|
|
recentActivity: "16 Apr 2022, 04:20",
|
|
deviceIcon: {
|
|
icon: "ri-android-line",
|
|
color: "success",
|
|
},
|
|
},
|
|
];
|
|
const save = async () => {
|
|
const { valid } = await refVForm.value.validate();
|
|
console.log(valid);
|
|
if (valid) {
|
|
try {
|
|
await store.dispatch("patientPasswordupdate", {
|
|
password: currentPassword.value,
|
|
new_password: newPassword.value,
|
|
confirm_password: confirmPassword.value,
|
|
});
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
|
|
currentPassword.value = null;
|
|
newPassword.value = null;
|
|
confirmPassword.value = null;
|
|
}
|
|
};
|
|
|
|
const isOneTimePasswordDialogVisible = ref(false);
|
|
</script>
|
|
|
|
<template>
|
|
<VRow>
|
|
<!-- SECTION: Change Password -->
|
|
<VCol cols="12">
|
|
<VCard>
|
|
<VCardItem class="pb-6">
|
|
<VCardTitle>Change Password</VCardTitle>
|
|
</VCardItem>
|
|
<VForm ref="refVForm">
|
|
<VCardText class="pt-0">
|
|
<!-- 👉 Current Password -->
|
|
<VRow>
|
|
<VCol cols="12" md="6">
|
|
<!-- 👉 current password -->
|
|
<VTextField v-model="currentPassword" :type="isCurrentPasswordVisible
|
|
? 'text'
|
|
: 'password'
|
|
" :append-inner-icon="isCurrentPasswordVisible
|
|
? 'ri-eye-off-line'
|
|
: 'ri-eye-line'
|
|
" autocomplete="on" label="Current Password" placeholder="············"
|
|
@click:append-inner="
|
|
isCurrentPasswordVisible =
|
|
!isCurrentPasswordVisible
|
|
" />
|
|
</VCol>
|
|
</VRow>
|
|
|
|
<!-- 👉 New Password -->
|
|
<VRow>
|
|
<VCol cols="12" md="6">
|
|
<!-- 👉 new password -->
|
|
<VTextField v-model="newPassword" :type="isNewPasswordVisible
|
|
? 'text'
|
|
: 'password'
|
|
" :append-inner-icon="isNewPasswordVisible
|
|
? 'ri-eye-off-line'
|
|
: 'ri-eye-line'
|
|
" label="New Password" autocomplete="on" placeholder="············"
|
|
@click:append-inner="
|
|
isNewPasswordVisible =
|
|
!isNewPasswordVisible
|
|
" :rules="[passwordValidator]" />
|
|
</VCol>
|
|
|
|
<VCol cols="12" md="6">
|
|
<!-- 👉 confirm password -->
|
|
<VTextField v-model="confirmPassword" :type="isConfirmPasswordVisible
|
|
? 'text'
|
|
: 'password'
|
|
" :append-inner-icon="isConfirmPasswordVisible
|
|
? 'ri-eye-off-line'
|
|
: 'ri-eye-line'
|
|
" autocomplete="on" label="Confirm New Password" placeholder="············"
|
|
@click:append-inner="
|
|
isConfirmPasswordVisible =
|
|
!isConfirmPasswordVisible
|
|
" :rules="[
|
|
(value) =>
|
|
confirmedValidator(
|
|
value,
|
|
passwordConfirmationTarget
|
|
),
|
|
]" />
|
|
</VCol>
|
|
</VRow>
|
|
</VCardText>
|
|
|
|
<!-- 👉 Password Requirements -->
|
|
<VCardText>
|
|
<h6 class="text-h6 text-medium-emphasis mt-1">
|
|
Password Requirements:
|
|
</h6>
|
|
|
|
<VList>
|
|
<VListItem v-for="(item, index) in passwordRequirements" :key="index" class="px-0">
|
|
<template #prepend>
|
|
<VIcon size="8" icon="ri-circle-fill"
|
|
color="rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))" />
|
|
</template>
|
|
<VListItemTitle class="text-medium-emphasis text-wrap">
|
|
{{ item }}
|
|
</VListItemTitle>
|
|
</VListItem>
|
|
</VList>
|
|
|
|
<!-- 👉 Action Buttons -->
|
|
<div class="d-flex flex-wrap gap-4">
|
|
<VBtn @click="save">Save changes</VBtn>
|
|
|
|
<!-- <VBtn
|
|
type="reset"
|
|
color="secondary"
|
|
variant="outlined"
|
|
>
|
|
Reset
|
|
</VBtn>-->
|
|
</div>
|
|
</VCardText>
|
|
</VForm>
|
|
</VCard>
|
|
</VCol>
|
|
<!-- !SECTION -->
|
|
|
|
<!-- SECTION Two-steps verification -->
|
|
|
|
<!-- !SECTION -->
|
|
|
|
<!-- SECTION Recent Devices -->
|
|
|
|
<!-- !SECTION -->
|
|
</VRow>
|
|
|
|
<!-- SECTION Enable One time password -->
|
|
|
|
<!-- !SECTION -->
|
|
</template>
|