mirror of https://github.com/halo-dev/halo
86 lines
2.3 KiB
Vue
86 lines
2.3 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
import { apiClient } from "@/utils/api-client";
|
||
|
|
import { Toast, VButton } from "@halo-dev/components";
|
||
|
|
import { ref } from "vue";
|
||
|
|
import { useI18n } from "vue-i18n";
|
||
|
|
import IconLogo from "~icons/core/logo?width=5rem&height=2rem";
|
||
|
|
|
||
|
|
const { t } = useI18n();
|
||
|
|
|
||
|
|
interface ResetPasswordForm {
|
||
|
|
email: string;
|
||
|
|
username: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const loading = ref(false);
|
||
|
|
|
||
|
|
async function onSubmit(data: ResetPasswordForm) {
|
||
|
|
try {
|
||
|
|
loading.value = true;
|
||
|
|
await apiClient.common.user.sendPasswordResetEmail({
|
||
|
|
passwordResetEmailRequest: {
|
||
|
|
email: data.email,
|
||
|
|
username: data.username,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
Toast.success(t("core.reset_password.operations.send.toast_success"));
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Failed to send password reset email", error);
|
||
|
|
} finally {
|
||
|
|
loading.value = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const inputClasses = {
|
||
|
|
outer: "!py-3 first:!pt-0 last:!pb-0",
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="flex h-screen flex-col items-center bg-white/90 pt-[30vh]">
|
||
|
|
<IconLogo class="mb-8" />
|
||
|
|
<div class="flex w-72 flex-col">
|
||
|
|
<FormKit
|
||
|
|
id="reset-password-form"
|
||
|
|
name="reset-password-form"
|
||
|
|
type="form"
|
||
|
|
:classes="{
|
||
|
|
form: '!divide-none',
|
||
|
|
}"
|
||
|
|
:config="{ validationVisibility: 'submit' }"
|
||
|
|
@submit="onSubmit"
|
||
|
|
@keyup.enter="$formkit.submit('reset-password-form')"
|
||
|
|
>
|
||
|
|
<FormKit
|
||
|
|
:classes="inputClasses"
|
||
|
|
name="username"
|
||
|
|
:placeholder="$t('core.reset_password.fields.username.label')"
|
||
|
|
:validation-label="$t('core.reset_password.fields.username.label')"
|
||
|
|
:autofocus="true"
|
||
|
|
type="text"
|
||
|
|
validation="required"
|
||
|
|
></FormKit>
|
||
|
|
<FormKit
|
||
|
|
:classes="inputClasses"
|
||
|
|
name="email"
|
||
|
|
:placeholder="$t('core.reset_password.fields.email.label')"
|
||
|
|
:validation-label="$t('core.reset_password.fields.email.label')"
|
||
|
|
:autofocus="true"
|
||
|
|
type="text"
|
||
|
|
validation="required"
|
||
|
|
></FormKit>
|
||
|
|
</FormKit>
|
||
|
|
<VButton
|
||
|
|
class="mt-8"
|
||
|
|
block
|
||
|
|
:loading="loading"
|
||
|
|
type="secondary"
|
||
|
|
@click="$formkit.submit('reset-password-form')"
|
||
|
|
>
|
||
|
|
{{ $t("core.reset_password.operations.send.label") }}
|
||
|
|
</VButton>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|