<script lang="ts" setup>
import avatar1 from '@images/avatars/avatar-1.png'
const accountData = {
avatarImg: avatar1,
firstName: 'john',
lastName: 'Doe',
email: 'johnDoe@example.com',
org: 'ThemeSelection',
phone: '+1 (917) 543-9876',
address: '123 Main St, New York, NY 10001',
state: 'New York',
zip: '10001',
country: ['USA'],
language: ['English'],
timezone: '(GMT-11:00) International Date Line West',
currency: 'USD',
}
const refInputEl = ref<HTMLElement>()
const isConfirmDialogOpen = ref(false)
const accountDataLocal = ref(structuredClone(accountData))
const isAccountDeactivated = ref(false)
const validateAccountDeactivation = [(v: string) => !!v || 'Please confirm account deactivation']
const resetForm = () => {
accountDataLocal.value = structuredClone(accountData)
}
// changeAvatar function
const changeAvatar = (file: Event) => {
const fileReader = new FileReader()
const { files } = file.target as HTMLInputElement
if (files && files.length) {
fileReader.readAsDataURL(files[0])
fileReader.onload = () => {
if (typeof fileReader.result === 'string')
accountDataLocal.value.avatarImg = fileReader.result
}
}
}
// reset avatar image
const resetAvatar = () => {
accountDataLocal.value.avatarImg = accountData.avatarImg
}
const timezones = [
'(GMT-11:00) International Date Line West',
'(GMT-11:00) Midway Island',
'(GMT-10:00) Hawaii',
'(GMT-09:00) Alaska',
'(GMT-08:00) Pacific Time (US & Canada)',
'(GMT-08:00) Tijuana',
'(GMT-07:00) Arizona',
'(GMT-07:00) Chihuahua',
'(GMT-07:00) La Paz',
'(GMT-07:00) Mazatlan',
'(GMT-07:00) Mountain Time (US & Canada)',
'(GMT-06:00) Central America',
'(GMT-06:00) Central Time (US & Canada)',
'(GMT-06:00) Guadalajara',
'(GMT-06:00) Mexico City',
'(GMT-06:00) Monterrey',
'(GMT-06:00) Saskatchewan',
'(GMT-05:00) Bogota',
'(GMT-05:00) Eastern Time (US & Canada)',
'(GMT-05:00) Indiana (East)',
'(GMT-05:00) Lima',
'(GMT-05:00) Quito',
'(GMT-04:00) Atlantic Time (Canada)',
'(GMT-04:00) Caracas',
'(GMT-04:00) La Paz',
'(GMT-04:00) Santiago',
'(GMT-03:30) Newfoundland',
'(GMT-03:00) Brasilia',
'(GMT-03:00) Buenos Aires',
'(GMT-03:00) Georgetown',
'(GMT-03:00) Greenland',
'(GMT-02:00) Mid-Atlantic',
'(GMT-01:00) Azores',
'(GMT-01:00) Cape Verde Is.',
'(GMT+00:00) Casablanca',
'(GMT+00:00) Dublin',
'(GMT+00:00) Edinburgh',
'(GMT+00:00) Lisbon',
'(GMT+00:00) London',
]
const currencies = [
'USD',
'EUR',
'GBP',
'AUD',
'BRL',
'CAD',
'CNY',
'CZK',
'DKK',
'HKD',
'HUF',
'INR',
]
</script>
<template>
<VRow>
<VCol cols="12">
<VCard>
<VCardText>
<div class="d-flex mb-10">
<!-- 👉 Avatar -->
<VAvatar
rounded
size="100"
class="me-6"
:image="accountDataLocal.avatarImg"
/>
<!-- 👉 Upload Photo -->
<form class="d-flex flex-column justify-center gap-4">
<div class="d-flex flex-wrap gap-4">
<VBtn
color="primary"
@click="refInputEl?.click()"
>
<VIcon
icon="ri-upload-cloud-line"
class="d-sm-none"
/>
<span class="d-none d-sm-block">Upload new photo</span>
</VBtn>
<input
ref="refInputEl"
type="file"
name="file"
accept=".jpeg,.png,.jpg,GIF"
hidden
@input="changeAvatar"
>
<VBtn
type="reset"
color="error"
variant="outlined"
@click="resetAvatar"
>
<span class="d-none d-sm-block">Reset</span>
<VIcon
icon="ri-refresh-line"
class="d-sm-none"
/>
</VBtn>
</div>
<p class="text-body-1 mb-0">
Allowed JPG, GIF or PNG. Max size of 800K
</p>
</form>
</div>
<!-- 👉 Form -->
<VForm>
<VRow>
<!-- 👉 First Name -->
<VCol
md="6"
cols="12"
>
<VTextField
v-model="accountDataLocal.firstName"
placeholder="John"
label="First Name"
/>
</VCol>
<!-- 👉 Last Name -->
<VCol
md="6"
cols="12"
>
<VTextField
v-model="accountDataLocal.lastName"
placeholder="Doe"
label="Last Name"
/>
</VCol>
<!-- 👉 Email -->
<VCol
cols="12"
md="6"
>
<VTextField
v-model="accountDataLocal.email"
label="E-mail"
placeholder="johndoe@gmail.com"
type="email"
/>
</VCol>
<!-- 👉 Organization -->
<VCol
cols="12"
md="6"
>
<VTextField
v-model="accountDataLocal.org"
label="Organization"
placeholder="ThemeSelection"
/>
</VCol>
<!-- 👉 Phone -->
<VCol
cols="12"
md="6"
>
<VTextField
v-model="accountDataLocal.phone"
label="Phone Number"
placeholder="+1 (917) 543-9876"
/>
</VCol>
<!-- 👉 Address -->
<VCol
cols="12"
md="6"
>
<VTextField
v-model="accountDataLocal.address"
label="Address"
placeholder="123 Main St, New York, NY 10001"
/>
</VCol>
<!-- 👉 State -->
<VCol
cols="12"
md="6"
>
<VTextField
v-model="accountDataLocal.state"
label="State"
placeholder="New York"
/>
</VCol>
<!-- 👉 Zip Code -->
<VCol
cols="12"
md="6"
>
<VTextField
v-model="accountDataLocal.zip"
label="Zip Code"
placeholder="10001"
/>
</VCol>
<!-- 👉 Country -->
<VCol
cols="12"
md="6"
>
<VSelect
v-model="accountDataLocal.country"
multiple
chips
closable-chips
label="Country"
:items="['USA', 'Canada', 'UK', 'India', 'Australia']"
placeholder="Select Country"
/>
</VCol>
<!-- 👉 Language -->
<VCol
cols="12"
md="6"
>
<VSelect
v-model="accountDataLocal.language"
label="Language"
multiple
chips
closable-chips
placeholder="Select Language"
:items="['English', 'Spanish', 'Arabic', 'Hindi', 'Urdu']"
/>
</VCol>
<!-- 👉 Timezone -->
<VCol
cols="12"
md="6"
>
<VSelect
v-model="accountDataLocal.timezone"
label="Timezone"
placeholder="Select Timezone"
:items="timezones"
:menu-props="{ maxHeight: 200 }"
/>
</VCol>
<!-- 👉 Currency -->
<VCol
cols="12"
md="6"
>
<VSelect
v-model="accountDataLocal.currency"
label="Currency"
placeholder="Select Currency"
:items="currencies"
:menu-props="{ maxHeight: 200 }"
/>
</VCol>
<!-- 👉 Form Actions -->
<VCol
cols="12"
class="d-flex flex-wrap gap-4"
>
<VBtn>Save changes</VBtn>
<VBtn
color="secondary"
variant="outlined"
type="reset"
@click.prevent="resetForm"
>
Reset
</VBtn>
</VCol>
</VRow>
</VForm>
</VCardText>
</VCard>
</VCol>
<VCol cols="12">
<!-- 👉 Delete Account -->
<VCard title="Delete Account">
<VCardText>
<!-- 👉 Checkbox and Button -->
<div>
<VCheckbox
v-model="isAccountDeactivated"
:rules="validateAccountDeactivation"
label="I confirm my account deactivation"
/>
</div>
<VBtn
:disabled="!isAccountDeactivated"
color="error"
class="mt-3"
@click="isConfirmDialogOpen = true"
>
Deactivate Account
</VBtn>
</VCardText>
</VCard>
</VCol>
</VRow>
<!-- Confirm Dialog -->
<ConfirmDialog
v-model:isDialogVisible="isConfirmDialogOpen"
confirmation-question="Are you sure you want to deactivate your account?"
confirm-title="Deactivated!"
confirm-msg="Your account has been deactivated successfully."
cancel-title="Cancelled"
cancel-msg="Account Deactivation Cancelled!"
/>
</template>