From 491e736422c16aef9f6ce07086da739b29355a22 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Mon, 14 Jul 2025 22:27:30 +0200
Subject: [PATCH 1/6] feat: change Button component to be a button and not a
 div, and made callback optional

---
 components/UserInterface/Button.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/UserInterface/Button.vue b/components/UserInterface/Button.vue
index 66706de..467b65e 100644
--- a/components/UserInterface/Button.vue
+++ b/components/UserInterface/Button.vue
@@ -1,14 +1,14 @@
 <template>
-	<div @click="props.callback()" class="button" :class="props.variant + '-button'">
+	<button @click="props.callback ? props.callback() : null" class="button" :class="props.variant + '-button'">
 		{{ props.text }}
-	</div>
+	</button>
 </template>
 
 <script lang="ts" setup>
 
 const props = defineProps<{
 	text: string,
-	callback: CallableFunction,
+	callback?: CallableFunction,
 	variant?: "normal" | "scary" | "neutral",
 }>();
 
@@ -28,6 +28,8 @@ const props = defineProps<{
 	border-radius: 0.7rem;
 	text-decoration: none;
 	display: inline-block;
+
+	border: none;
 }
 
 .button:hover {

From 42ed743054acc3bd4cfb37f49ed2293f33b4b48c Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Mon, 14 Jul 2025 22:28:15 +0200
Subject: [PATCH 2/6] feat: add functions to send password reset email and
 actual password reset in api composable

---
 composables/api.ts | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/composables/api.ts b/composables/api.ts
index 0b438a6..9212eb6 100644
--- a/composables/api.ts
+++ b/composables/api.ts
@@ -74,6 +74,14 @@ export const useApi = () => {
 		await fetchWithApi("/auth/verify-email", { method: "POST", body: { email } });
 	}
 
+	async function sendPasswordResetEmail(identifier: string): Promise<void> {
+		await fetchWithApi("/auth/reset-password", { method: "GET", query: { identifier } });
+	}
+
+	async function resetPassword(password: string, token: string) {
+		await fetchWithApi("/auth/reset-password", { method: "POST", body: { password, token } });
+	}
+
 	return {
 		fetchGuilds,
 		fetchGuild,
@@ -92,6 +100,8 @@ export const useApi = () => {
 		joinGuild,
 		createChannel,
 		fetchInstanceStats,
-		sendVerificationEmail
+		sendVerificationEmail,
+		sendPasswordResetEmail,
+		resetPassword
 	}
 }

From 17791fc01793db2ce18f7acf43f60989696702be Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Mon, 14 Jul 2025 22:28:40 +0200
Subject: [PATCH 3/6] feat: implement resetting of password if forgotten

---
 layouts/auth.vue          |   8 +++
 middleware/auth.global.ts |   2 +-
 pages/login.vue           |   3 +-
 pages/register.vue        |   1 +
 pages/reset-password.vue  | 103 ++++++++++++++++++++++++++++++++++++++
 5 files changed, 115 insertions(+), 2 deletions(-)
 create mode 100644 pages/reset-password.vue

diff --git a/layouts/auth.vue b/layouts/auth.vue
index 95eca49..5d44793 100644
--- a/layouts/auth.vue
+++ b/layouts/auth.vue
@@ -18,6 +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>
 			<div v-if="instanceUrl">
 				Instance URL is set to <span style="color: var(--primary-color);">{{ instanceUrl }}</span>
@@ -36,6 +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 searchParams = new URLSearchParams(query);
+searchParams.delete("token");
+
+const resetPasswordUrl = `/reset-password?${searchParams}`;
+
 const auth = useAuth();
 
 onMounted(async () => {
@@ -111,6 +118,7 @@ const form = reactive({
 #auth-form-container form {
 	display: flex;
 	flex-direction: column;
+	align-items: center;
 	text-align: left;
 	margin-top: 10dvh;
 	gap: 1em;
diff --git a/middleware/auth.global.ts b/middleware/auth.global.ts
index c0da664..4fdfead 100644
--- a/middleware/auth.global.ts
+++ b/middleware/auth.global.ts
@@ -16,7 +16,7 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 		}
 	}
 
-	if (["/login", "/register"].includes(to.path) && !Object.keys(to.query).includes("special")) {
+	if (["/login", "/register", "/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);
diff --git a/pages/login.vue b/pages/login.vue
index 03078c3..7b3c23a 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -38,6 +38,7 @@ const form = reactive({
 
 const query = useRoute().query as Record<string, string>;
 const searchParams = new URLSearchParams(query);
+searchParams.delete("token");
 
 const registrationEnabled = ref<boolean>(true);
 const apiBase = useCookie("api_base");
@@ -50,7 +51,7 @@ if (apiBase.value) {
 	}
 }
 
-const registerUrl = `/register?${searchParams}`
+const registerUrl = `/register?${searchParams}`;
 
 const { login } = useAuth();
 
diff --git a/pages/register.vue b/pages/register.vue
index 708fed0..36bdb53 100644
--- a/pages/register.vue
+++ b/pages/register.vue
@@ -86,6 +86,7 @@ const auth = useAuth();
 const loggedIn = ref(await auth.getUser());
 
 const query = new URLSearchParams(useRoute().query as Record<string, string>);
+query.delete("token");
 
 const user = await useAuth().getUser();
 
diff --git a/pages/reset-password.vue b/pages/reset-password.vue
new file mode 100644
index 0000000..f579fc5
--- /dev/null
+++ b/pages/reset-password.vue
@@ -0,0 +1,103 @@
+<template>
+  <NuxtLayout name="auth">
+    <div v-if="errorValue">{{ errorValue }}</div>
+    <div v-if="!token">
+      <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>
+    <div v-else>
+      <form @submit.prevent="sendPassword">
+        <div>
+          <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({
+  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>
\ No newline at end of file

From db2a99736ac5937ec1207de6d137477705e23b01 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 16 Jul 2025 11:36:12 +0200
Subject: [PATCH 4/6] feat: separate password reset page into two, one for
 sending the email and one to change the password

---
 layouts/auth.vue          | 10 ++---
 middleware/auth.global.ts |  2 +-
 pages/recover.vue         | 89 +++++++++++++++++++++++++++++++++++++++
 pages/reset-password.vue  | 81 ++++++-----------------------------
 4 files changed, 108 insertions(+), 74 deletions(-)
 create mode 100644 pages/recover.vue

diff --git a/layouts/auth.vue b/layouts/auth.vue
index 5d44793..7d21f00 100644
--- a/layouts/auth.vue
+++ b/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);
diff --git a/middleware/auth.global.ts b/middleware/auth.global.ts
index 4fdfead..e6d5128 100644
--- a/middleware/auth.global.ts
+++ b/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);
diff --git a/pages/recover.vue b/pages/recover.vue
new file mode 100644
index 0000000..a886d87
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/pages/reset-password.vue b/pages/reset-password.vue
index f579fc5..83e1f1f 100644
--- a/pages/reset-password.vue
+++ b/pages/reset-password.vue
@@ -1,50 +1,27 @@
 <template>
   <NuxtLayout name="auth">
     <div v-if="errorValue">{{ errorValue }}</div>
-    <div v-if="!token">
-      <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.
+    <form @submit.prevent="sendPassword">
+      <div>
+        <label for="password">Password</label>
+        <br>
+        <input type="password" name="password" id="password" v-model="passwordForm.password">
       </div>
-    </div>
-    <div v-else>
-      <form @submit.prevent="sendPassword">
-        <div>
-          <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>
+      <div>
+        <Button type="submit" text="Submit" variant="normal" />
+      </div>
+    </form>
   </NuxtLayout>
 </template>
 
 <script lang="ts" setup>
 import Button from '~/components/UserInterface/Button.vue';
 
-const emailForm = reactive({
-  identifier: ""
-});
+const query = useRoute().query as Record<string, string>;
+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();
   }

From 5bd307451df7d54a5589273f8dac2e36b840c71f Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 16 Jul 2025 11:37:04 +0200
Subject: [PATCH 5/6] feat: change wording of password recovery text slightly

---
 pages/recover.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/recover.vue b/pages/recover.vue
index a886d87..71ce217 100644
--- a/pages/recover.vue
+++ b/pages/recover.vue
@@ -12,7 +12,7 @@
         </div>
       </form>
       <div v-else>
-        If an account with that username/email exists, an email will be sent to it shortly.
+        If an account with that username or 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!

From 688001a4823642bf72f6a44104970b57c4e52cb1 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 16 Jul 2025 19:45:17 +0200
Subject: [PATCH 6/6] feat: add login link to reset-password page

---
 pages/reset-password.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/pages/reset-password.vue b/pages/reset-password.vue
index 83e1f1f..8f869c4 100644
--- a/pages/reset-password.vue
+++ b/pages/reset-password.vue
@@ -11,6 +11,9 @@
         <Button type="submit" text="Submit" variant="normal" />
       </div>
     </form>
+	<div>
+	  Already have an account? <NuxtLink :href="loginUrl">Log in</NuxtLink>!
+    </div>
   </NuxtLayout>
 </template>
 
@@ -19,6 +22,9 @@ import Button from '~/components/UserInterface/Button.vue';
 
 const query = useRoute().query as Record<string, string>;
 const searchParams = new URLSearchParams(query);
+
+const loginUrl = `/login?${searchParams}`;
+
 const token = ref(searchParams.get("token"))
 
 if (!token.value) await navigateTo("/login");