92 lines
3.0 KiB
Vue
92 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { AuthApiClient } from '@/api/auth';
|
|
import { ApiError } from '@/api/base';
|
|
import AppButton from '@/components/AppButton.vue';
|
|
import AppPage from '@/components/AppPage.vue';
|
|
import AppForm from '@/components/form/AppForm.vue';
|
|
import FormControl from '@/components/form/FormControl.vue';
|
|
import FormGroup from '@/components/form/FormGroup.vue';
|
|
import ModalWrapper from '@/components/ModalWrapper.vue';
|
|
import { useAuthStore } from '@/stores/auth-store';
|
|
import { showAlert, showConfirm } from '@/util/alert';
|
|
import { hideLoader, showLoader } from '@/util/loader';
|
|
import { ref, useTemplateRef } from 'vue';
|
|
|
|
const authStore = useAuthStore()
|
|
|
|
const changePasswordModal = useTemplateRef('changePasswordModal')
|
|
const currentPassword = ref('')
|
|
const newPassword = ref('')
|
|
|
|
async function doDeleteUser() {
|
|
if (await showConfirm('Are you sure you want to delete your account? All data will be permanently deleted.')) {
|
|
const api = new AuthApiClient()
|
|
try {
|
|
await api.deleteMyUser()
|
|
await showAlert('Your user has been deleted. You will now be logged out.')
|
|
authStore.onUserLoggedOut()
|
|
} catch (err) {
|
|
console.error(err)
|
|
}
|
|
}
|
|
}
|
|
|
|
async function showChangePasswordModal() {
|
|
await changePasswordModal.value?.show()
|
|
// Reset password vars to avoid data leakage.
|
|
currentPassword.value = ''
|
|
newPassword.value = ''
|
|
}
|
|
|
|
async function doChangePassword() {
|
|
changePasswordModal.value?.close()
|
|
showLoader()
|
|
const api = new AuthApiClient()
|
|
try {
|
|
await api.changeMyPassword(currentPassword.value, newPassword.value)
|
|
hideLoader()
|
|
await showAlert('Password has been updated.')
|
|
} catch (err) {
|
|
hideLoader()
|
|
console.error(err)
|
|
if (err instanceof ApiError) {
|
|
await showAlert(err.message)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<template>
|
|
<AppPage title="My User">
|
|
<p>
|
|
You are logged in as <code>{{ authStore.state?.username }}</code>.
|
|
</p>
|
|
<div style="text-align: right;">
|
|
<AppButton @click="showChangePasswordModal()">Change Password</AppButton>
|
|
<AppButton @click="doDeleteUser()">Delete My User Account</AppButton>
|
|
</div>
|
|
|
|
<!-- Modal for changing the user's password. -->
|
|
<ModalWrapper ref="changePasswordModal">
|
|
<template v-slot:default>
|
|
<AppForm>
|
|
<h2>Change Password</h2>
|
|
<FormGroup>
|
|
<FormControl label="Current Password">
|
|
<input type="password" v-model="currentPassword" minlength="8" />
|
|
</FormControl>
|
|
</FormGroup>
|
|
<FormGroup>
|
|
<FormControl label="New Password">
|
|
<input type="password" v-model="newPassword" minlength="8" @keydown.enter.prevent="doChangePassword()" />
|
|
</FormControl>
|
|
</FormGroup>
|
|
</AppForm>
|
|
</template>
|
|
<template v-slot:buttons>
|
|
<AppButton @click="doChangePassword()">Change</AppButton>
|
|
<AppButton button-style="secondary" @click="changePasswordModal?.close()">Cancel</AppButton>
|
|
</template>
|
|
</ModalWrapper>
|
|
</AppPage>
|
|
</template>
|