rudeshark.net/packages/client/src/components/MkForgotPassword.vue
2023-04-07 17:01:42 -07:00

111 lines
2.1 KiB
Vue

<template>
<XModalWindow
ref="dialog"
:width="370"
:height="400"
@close="dialog.close()"
@closed="emit('closed')"
>
<template #header>{{ i18n.ts.forgotPassword }}</template>
<form
v-if="instance.enableEmail"
class="bafeceda"
@submit.prevent="onSubmit"
>
<div class="main _formRoot">
<MkInput
v-model="username"
class="_formBlock"
type="text"
pattern="^[a-zA-Z0-9_]+$"
:spellcheck="false"
autofocus
required
>
<template #label>{{ i18n.ts.username }}</template>
<template #prefix>@</template>
</MkInput>
<MkInput
v-model="email"
class="_formBlock"
type="email"
:spellcheck="false"
required
>
<template #label>{{ i18n.ts.emailAddress }}</template>
<template #caption>{{
i18n.ts._forgotPassword.enterEmail
}}</template>
</MkInput>
<MkButton
class="_formBlock"
type="submit"
:disabled="processing"
primary
style="margin: 0 auto"
>{{ i18n.ts.send }}</MkButton
>
</div>
<div class="sub">
<MkA to="/about" class="_link">{{
i18n.ts._forgotPassword.ifNoEmail
}}</MkA>
</div>
</form>
<div v-else class="bafecedb">
{{ i18n.ts._forgotPassword.contactAdmin }}
</div>
</XModalWindow>
</template>
<script lang="ts" setup>
import {} from "vue";
import XModalWindow from "@/components/MkModalWindow.vue";
import MkButton from "@/components/MkButton.vue";
import MkInput from "@/components/form/input.vue";
import * as os from "@/os";
import { instance } from "@/instance";
import { i18n } from "@/i18n";
const emit = defineEmits<{
(ev: "done"): void;
(ev: "closed"): void;
}>();
let dialog: InstanceType<typeof XModalWindow> = $ref();
let username = $ref("");
let email = $ref("");
let processing = $ref(false);
async function onSubmit() {
processing = true;
await os.apiWithDialog("request-reset-password", {
username,
email,
});
emit("done");
dialog.close();
}
</script>
<style lang="scss" scoped>
.bafeceda {
> .main {
padding: 24px;
}
> .sub {
border-top: solid 0.5px var(--divider);
padding: 24px;
}
}
.bafecedb {
padding: 24px;
}
</style>