48 lines
1.3 KiB
Vue
48 lines
1.3 KiB
Vue
<template>
|
|
<div class="content-l">
|
|
<h2>Change Password</h2>
|
|
<UiPompt :prompt="prompt" @close="prompt = undefined"></UiPompt>
|
|
<div class="col-2 tile-l">
|
|
<UiInput label="New Password" required>
|
|
<input type="password" v-model="password">
|
|
</UiInput>
|
|
<UiInput label="Repeat Password" required>
|
|
<input type="password" v-model="repeatPassword">
|
|
</UiInput>
|
|
</div>
|
|
<div class="center">
|
|
<UiButton class="width-6rem" icon="change_circle" reverse @click="() => change()">Change</UiButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Prompt, PromptType } from '~/components/ui/Prompt';
|
|
import { changePassword } from '~/requests/user';
|
|
import UiPompt from '~/components/ui/UiPompt.vue';
|
|
|
|
const password = ref('');
|
|
const repeatPassword = ref('');
|
|
|
|
const prompt: Ref<Prompt | undefined> = ref(undefined);
|
|
function change()
|
|
{
|
|
if (password.value && password.value === repeatPassword.value)
|
|
{
|
|
changePassword(requireUser().username, password.value, () => {
|
|
password.value = '';
|
|
repeatPassword.value = '';
|
|
prompt.value = new Prompt("Password changed successfully.", PromptType.SUCCESS);
|
|
});
|
|
}
|
|
else
|
|
{
|
|
prompt.value = new Prompt("Passwords don't match.", PromptType.ERROR);
|
|
throw new Error("Passwords don't match.");
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |