feat: separate password reset page into two, one for sending the email and one to change the password

layouts/auth.vue

@@ -18,7 +18,7 @@
 			</div>
 			<div v-else id="auth-form-container">
 				<slot />
-				<div v-if="useRoute().path != '/reset-password'">Forgot password? Recover <NuxtLink :href="resetPasswordUrl">here</NuxtLink>!</div>
+				<div v-if="!['/recover', '/reset-password'].includes(route.path)">Forgot password? Recover <NuxtLink href="/recover">here</NuxtLink>!</div>
 			</div>
 			<div v-if="instanceUrl">
 				Instance URL is set to <span style="color: var(--primary-color);">{{ instanceUrl }}</span>
@@ -37,14 +37,12 @@ const apiVersion = useRuntimeConfig().public.apiVersion;
 const apiBase = useCookie("api_base");
 const registrationEnabled = useState("registrationEnabled", () => true);
 
-const query = useRoute().query as Record<string, string>;
+const route = useRoute();
+
+const query = route.query as Record<string, string>;
 const searchParams = new URLSearchParams(query);
 searchParams.delete("token");
 
-const resetPasswordUrl = `/reset-password?${searchParams}`;
-
-const auth = useAuth();
-
 onMounted(async () => {
 	instanceUrl.value = useCookie("instance_url").value;
 	console.log("set instance url to:", instanceUrl.value);

middleware/auth.global.ts

@@ -16,7 +16,7 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 		}
 	}
 
-	if (["/login", "/register", "/reset-password"].includes(to.path) && !Object.keys(to.query).includes("special")) {
+	if (["/login", "/register", "/recover", "/reset-password"].includes(to.path) && !Object.keys(to.query).includes("special")) {
 		console.log("path is login or register");
 		const apiBase = useCookie("api_base");
 		console.log("apiBase gotten:", apiBase.value);

pages/recover.vue

@@ -0,0 +1,89 @@
+<template>
+  <NuxtLayout name="auth">
+    <div v-if="errorValue">{{ errorValue }}</div>
+      <form v-if="!emailFormSent" @submit.prevent="sendEmail">
+        <div>
+          <label for="identifier">Email or username</label>
+            <br>
+          <input type="text" name="identifier" id="identifier" v-model="emailForm.identifier">
+        </div>
+        <div>
+          <Button type="submit" text="Send email" variant="normal" />
+        </div>
+      </form>
+      <div v-else>
+        If an account with that username/email exists, an email will be sent to it shortly.
+      </div>
+    <div v-if="registrationEnabled">
+      Don't have an account? <NuxtLink :href="registerUrl">Register</NuxtLink> one!
+    </div>
+    <div>
+      Already have an account? <NuxtLink :href="loginUrl">Log in</NuxtLink>!
+    </div>
+  </NuxtLayout>
+</template>
+
+<script lang="ts" setup>
+import Button from '~/components/UserInterface/Button.vue';
+
+const emailForm = reactive({
+  identifier: ""
+});
+
+const emailFormSent = ref(false);
+
+const passwordForm = reactive({
+  password: ""
+});
+
+const errorValue = ref<string>();
+
+const registrationEnabled = ref<boolean>(true);
+const apiBase = useCookie("api_base");
+
+const query = useRoute().query as Record<string, string>;
+const searchParams = new URLSearchParams(query);
+
+const token = ref(searchParams.get("token"))
+searchParams.delete("token");
+const { resetPassword } = useApi();
+
+const registerUrl = `/register?${searchParams}`;
+const loginUrl = `/login?${searchParams}`;
+
+if (apiBase.value) {
+	console.log("apiBase:", apiBase.value);
+	const stats = await useApi().fetchInstanceStats(apiBase.value);
+	if (stats) {
+		registrationEnabled.value = stats.registration_enabled;
+	}
+}
+
+const { sendPasswordResetEmail } = useApi();
+
+async function sendEmail() {
+  try {
+    await sendPasswordResetEmail(emailForm.identifier);
+    emailFormSent.value = true;
+  } catch (error) {
+    errorValue.value = (error as any).toString();
+  }
+}
+
+async function sendPassword() {
+  try {
+    console.log("pass:", passwordForm.password);
+    const hashedPass = await hashPassword(passwordForm.password)
+    console.log("hashed pass:", hashedPass);
+    await resetPassword(hashedPass, token.value!);
+    return await navigateTo(`/login?${searchParams}`);
+  } catch (error) {
+    errorValue.value = (error as any).toString();
+  }
+}
+
+</script>
+
+<style>
+
+</style>

pages/reset-password.vue

@@ -1,50 +1,27 @@
 <template>
   <NuxtLayout name="auth">
     <div v-if="errorValue">{{ errorValue }}</div>
-    <div v-if="!token">
+    <form @submit.prevent="sendPassword">
-      <form v-if="!emailFormSent" @submit.prevent="sendEmail">
+      <div>
-        <div>
+        <label for="password">Password</label>
-          <label for="identifier">Email or username</label>
+        <br>
-            <br>
+        <input type="password" name="password" id="password" v-model="passwordForm.password">
-          <input type="text" name="identifier" id="identifier" v-model="emailForm.identifier">
-        </div>
-        <div>
-          <Button type="submit" text="Send email" variant="normal" />
-        </div>
-      </form>
-      <div v-else>
-        If an account with that username/email exists, an email will be sent to it shortly.
       </div>
-    </div>
+      <div>
-    <div v-else>
+        <Button type="submit" text="Submit" variant="normal" />
-      <form @submit.prevent="sendPassword">
+      </div>
-        <div>
+    </form>
-          <label for="password">Password</label>
-          <br>
-          <input type="password" name="password" id="password" v-model="passwordForm.password">
-        </div>
-        <div>
-          <Button type="submit" text="Submit" variant="normal" />
-        </div>
-      </form>
-    </div>
-    <div v-if="registrationEnabled">
-      Don't have an account? <NuxtLink :href="registerUrl">Register</NuxtLink> one!
-    </div>
-    <div>
-      Already have an account? <NuxtLink :href="loginUrl">Log in</NuxtLink>!
-    </div>
   </NuxtLayout>
 </template>
 
 <script lang="ts" setup>
 import Button from '~/components/UserInterface/Button.vue';
 
-const emailForm = reactive({
+const query = useRoute().query as Record<string, string>;
-  identifier: ""
+const searchParams = new URLSearchParams(query);
-});
+const token = ref(searchParams.get("token"))
 
-const emailFormSent = ref(false);
+if (!token.value) await navigateTo("/login");
 
 const passwordForm = reactive({
   password: ""
@@ -52,45 +29,15 @@ const passwordForm = reactive({
 
 const errorValue = ref<string>();
 
-const registrationEnabled = ref<boolean>(true);
-const apiBase = useCookie("api_base");
-
-const query = useRoute().query as Record<string, string>;
-const searchParams = new URLSearchParams(query);
-
-const token = ref(searchParams.get("token"))
-searchParams.delete("token");
 const { resetPassword } = useApi();
 
-const registerUrl = `/register?${searchParams}`;
-const loginUrl = `/login?${searchParams}`;
-
-if (apiBase.value) {
-	console.log("apiBase:", apiBase.value);
-	const stats = await useApi().fetchInstanceStats(apiBase.value);
-	if (stats) {
-		registrationEnabled.value = stats.registration_enabled;
-	}
-}
-
-const { sendPasswordResetEmail } = useApi();
-
-async function sendEmail() {
-  try {
-    await sendPasswordResetEmail(emailForm.identifier);
-    emailFormSent.value = true;
-  } catch (error) {
-    errorValue.value = (error as any).toString();
-  }
-}
-
 async function sendPassword() {
   try {
     console.log("pass:", passwordForm.password);
     const hashedPass = await hashPassword(passwordForm.password)
     console.log("hashed pass:", hashedPass);
     await resetPassword(hashedPass, token.value!);
-    return await navigateTo(`/login?${searchParams}`);
+    return await navigateTo("/login?");
   } catch (error) {
     errorValue.value = (error as any).toString();
   }