199 lines
5.3 KiB
Vue
199 lines
5.3 KiB
Vue
<script setup>
|
|
import chrome from '@images/logos/chrome.png'
|
|
|
|
const isNewPasswordVisible = ref(false)
|
|
const isConfirmPasswordVisible = ref(false)
|
|
const smsVerificationNumber = ref('')
|
|
const isTwoFactorDialogOpen = ref(false)
|
|
|
|
const recentDeviceHeader = [
|
|
{
|
|
title: 'BROWSER',
|
|
key: 'browser',
|
|
},
|
|
{
|
|
title: 'DEVICE',
|
|
key: 'device',
|
|
},
|
|
{
|
|
title: 'LOCATION',
|
|
key: 'location',
|
|
},
|
|
{
|
|
title: 'RECENT ACTIVITY',
|
|
key: 'activity',
|
|
},
|
|
]
|
|
|
|
const recentDevices = [
|
|
{
|
|
browser: 'Chrome on Windows',
|
|
logo: chrome,
|
|
device: 'Dell XPS 15',
|
|
location: 'United States',
|
|
activity: '10, Jan 2020 20:07',
|
|
},
|
|
{
|
|
browser: 'Chrome on Android',
|
|
logo: chrome,
|
|
device: 'Google Pixel 3a',
|
|
location: 'Ghana',
|
|
activity: '11, Jan 2020 10:16',
|
|
},
|
|
{
|
|
browser: 'Chrome on macOS',
|
|
logo: chrome,
|
|
device: 'Apple iMac',
|
|
location: 'Mayotte',
|
|
activity: '11, Jan 2020 12:10',
|
|
},
|
|
{
|
|
browser: 'Chrome on iPhone',
|
|
logo: chrome,
|
|
device: 'Apple iPhone XR',
|
|
location: 'Mauritania',
|
|
activity: '12, Jan 2020 8:29',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<VRow>
|
|
<VCol cols="12">
|
|
<!-- 👉 Change password -->
|
|
<VCard title="Change Password">
|
|
<VCardText>
|
|
<VAlert
|
|
variant="tonal"
|
|
color="warning"
|
|
closable
|
|
class="mb-6"
|
|
>
|
|
<VAlertTitle>Ensure that these requirements are met</VAlertTitle>
|
|
<span>Minimum 8 characters long, uppercase & symbol</span>
|
|
</VAlert>
|
|
|
|
<VForm @submit.prevent="() => {}">
|
|
<VRow>
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VTextField
|
|
label="New Password"
|
|
placeholder="············"
|
|
:type="isNewPasswordVisible ? 'text' : 'password'"
|
|
:append-inner-icon="isNewPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
|
@click:append-inner="isNewPasswordVisible = !isNewPasswordVisible"
|
|
/>
|
|
</VCol>
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VTextField
|
|
label="Confirm Password"
|
|
placeholder="············"
|
|
:type="isConfirmPasswordVisible ? 'text' : 'password'"
|
|
:append-inner-icon="isConfirmPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
|
@click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
|
|
/>
|
|
</VCol>
|
|
|
|
<VCol cols="12">
|
|
<VBtn type="submit">
|
|
Change Password
|
|
</VBtn>
|
|
</VCol>
|
|
</VRow>
|
|
</VForm>
|
|
</VCardText>
|
|
</VCard>
|
|
</VCol>
|
|
|
|
<VCol cols="12">
|
|
<!-- 👉 Two step verification -->
|
|
<VCard
|
|
title="Two-step verification"
|
|
subtitle="Keep your account secure with authentication step."
|
|
>
|
|
<VCardText>
|
|
<div>
|
|
<h4 class="font-weight-medium mb-1">
|
|
SMS
|
|
</h4>
|
|
<VTextField
|
|
:model-value="smsVerificationNumber"
|
|
readonly
|
|
placeholder="+1(968) 819-2547"
|
|
density="compact"
|
|
>
|
|
<template #append>
|
|
<IconBtn
|
|
rounded
|
|
variant="outlined"
|
|
color="secondary"
|
|
class="me-2"
|
|
>
|
|
<VIcon
|
|
icon="ri-edit-box-line"
|
|
@click="isTwoFactorDialogOpen = true"
|
|
/>
|
|
</IconBtn>
|
|
|
|
<IconBtn
|
|
rounded
|
|
variant="outlined"
|
|
color="secondary"
|
|
>
|
|
<VIcon icon="ri-user-add-line" />
|
|
</IconBtn>
|
|
</template>
|
|
</VTextField>
|
|
</div>
|
|
|
|
<p class="mb-0 mt-4">
|
|
Two-factor authentication adds an additional layer of security to your account by requiring more than just a password to log in. <a
|
|
href="javascript:void(0)"
|
|
class="text-decoration-none"
|
|
>Learn more</a>.
|
|
</p>
|
|
</VCardText>
|
|
</VCard>
|
|
</VCol>
|
|
|
|
<VCol cols="12">
|
|
<!-- 👉 Recent devices -->
|
|
<VCard title="Recent devices">
|
|
<VDataTable
|
|
:items="recentDevices"
|
|
:headers="recentDeviceHeader"
|
|
hide-default-footer
|
|
class="text-no-wrap rounded-0"
|
|
>
|
|
<template #item.browser="{ item }">
|
|
<div class="d-flex align-center">
|
|
<VAvatar
|
|
:image="item.logo"
|
|
:size="22"
|
|
class="me-3"
|
|
/>
|
|
<h6 class="text-h6 font-weight-medium">
|
|
{{ item.browser }}
|
|
</h6>
|
|
</div>
|
|
</template>
|
|
<!-- TODO Refactor this after vuetify provides proper solution for removing default footer -->
|
|
<template #bottom />
|
|
</VDataTable>
|
|
</VCard>
|
|
</VCol>
|
|
</VRow>
|
|
|
|
<!-- 👉 Enable One Time Password Dialog -->
|
|
<TwoFactorAuthDialog
|
|
v-model:isDialogVisible="isTwoFactorDialogOpen"
|
|
:sms-code="smsVerificationNumber"
|
|
/>
|
|
</template>
|