Password reset (#7494)

* wip

* wip

* Update well-known.ts

* wip

* clean up

* Update request-reset-password.ts

* Update forgot-password.vue

* Update reset-password.ts

* Update request-reset-password.ts

src/client/components/forgot-password.vue

@@ -0,0 +1,71 @@
+<template>
+<XModalWindow ref="dialog"
+	:width="370"
+	:height="400"
+	@close="$refs.dialog.close()"
+	@closed="$emit('closed')"
+>
+	<template #header>{{ $ts.forgotPassword }}</template>
+
+	<form class="_monolithic_" @submit.prevent="onSubmit" v-if="$instance.enableEmail">
+		<div class="_section">
+			<MkInput v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required>
+				<span>{{ $ts.username }}</span>
+				<template #prefix>@</template>
+			</MkInput>
+
+			<MkInput v-model:value="email" type="email" spellcheck="false" required>
+				<span>{{ $ts.emailAddress }}</span>
+				<template #desc>{{ $ts._forgotPassword.enterEmail }}</template>
+			</MkInput>
+
+			<MkButton type="submit" :disabled="processing" primary style="margin: 0 auto;">{{ $ts.send }}</MkButton>
+		</div>
+		<div class="_section">
+			<MkA to="/about" class="_link">{{ $ts._forgotPassword.ifNoEmail }}</MkA>
+		</div>
+	</form>
+	<div v-else>
+		{{ $ts._forgotPassword.contactAdmin }}
+	</div>
+</XModalWindow>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import XModalWindow from '@client/components/ui/modal-window.vue';
+import MkButton from '@client/components/ui/button.vue';
+import MkInput from '@client/components/ui/input.vue';
+import * as os from '@client/os';
+
+export default defineComponent({
+	components: {
+		XModalWindow,
+		MkButton,
+		MkInput,
+	},
+
+	emits: ['done', 'closed'],
+
+	data() {
+		return {
+			username: '',
+			email: '',
+			processing: false,
+		};
+	},
+
+	methods: {
+		async onSubmit() {
+			this.processing = true;
+			await os.apiWithDialog('request-reset-password', {
+				username: this.username,
+				email: this.email,
+			});
+
+			this.$emit('done');
+			this.$refs.dialog.close();
+		}
+	}
+});
+</script>

src/client/components/signin.vue

@@ -11,6 +11,7 @@
 			<MkInput v-model:value="password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required>
 				<span>{{ $ts.password }}</span>
 				<template #prefix><i class="fas fa-lock"></i></template>
+				<template #desc><button class="_textButton" @click="resetPassword">{{ $ts.forgotPassword }}</button></template>
 			</MkInput>
 			<MkButton type="submit" primary :disabled="signing" style="margin: 0 auto;">{{ signing ? $ts.loggingIn : $ts.login }}</MkButton>
 		</div>
@@ -49,8 +50,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode/';
-import MkButton from './ui/button.vue';
-import MkInput from './ui/input.vue';
+import MkButton from '@client/components/ui/button.vue';
+import MkInput from '@client/components/ui/input.vue';
 import { apiUrl, host } from '@client/config';
 import { byteify, hexify } from '@client/scripts/2fa';
 import * as os from '@client/os';
@@ -197,6 +198,11 @@ export default defineComponent({
 					this.signing = false;
 				});
 			}
+		},
+
+		resetPassword() {
+			os.popup(import('@client/components/forgot-password.vue'), {}, {
+			}, 'closed');
 		}
 	}
 });