Merge pull request 'Implement email verification' (#26) from email-verification into main

Reviewed-on: #26

components/Settings/UserSettings/Account.vue

@@ -43,6 +43,14 @@ async function changeEmail() {
       body: formData
     })
 
+	const apiBase = useCookie("api_base").value;
+
+	if (apiBase) {
+		const stats = await useApi().fetchInstanceStats(apiBase);
+		if (stats.email_verification_required) {
+			return window.location.reload();
+		}
+	}
     alert('success!!')
   } catch (error: any) {
     if (error?.response?.status !== 200) {

composables/api.ts

@@ -1,4 +1,4 @@
-import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
+import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse, StatsResponse } from "~/types/interfaces";
 
 export const useApi = () => {
 	async function fetchGuilds(): Promise<GuildResponse[] | undefined> {
@@ -41,6 +41,15 @@ export const useApi = () => {
 		return await fetchWithApi(`/channels/${channelId}/messages/${messageId}`);
 	}
 
+	async function fetchInstanceStats(apiBase: string): Promise<StatsResponse> {
+		return await $fetch(`${apiBase}/stats`, { method: "GET" });
+	}
+
+	async function sendVerificationEmail(): Promise<void> {
+		const email = useAuth().user.value?.email;
+		await fetchWithApi("/auth/verify-email", { method: "POST", body: { email } });
+	}
+
 	return {
 		fetchGuilds,
 		fetchGuild,
@@ -51,6 +60,8 @@ export const useApi = () => {
 		fetchUsers,
 		fetchUser,
 		fetchMessages,
-		fetchMessage
+		fetchMessage,
+		fetchInstanceStats,
+		sendVerificationEmail
 	}
 }

composables/auth.ts

@@ -7,6 +7,7 @@ export const useAuth = () => {
   async function clearAuth() {
     accessToken.value = null;
     user.value = null;
+	await navigateTo("/login");
   }
 
   async function register(username: string, email: string, password: string) {

layouts/auth.vue

@@ -20,30 +20,7 @@
 				<slot />
 			</div>
 			<div v-if="instanceUrl">
-				Instance URL is set to {{ instanceUrl }}
+				Instance URL is set to <span style="color: var(--primary-color);">{{ instanceUrl }}</span>
-			</div>
-			<div v-if="auth.accessToken.value">
-				You're logged in!
-				<form @submit="logout">
-					<div>
-						<label for="logout-password">Password</label>
-						<br>
-						<input type="password" name="logout-password" id="logout-password" v-model="form.password"
-							required>
-					</div>
-					<div>
-						<button type="submit">Log out</button>
-					</div>
-				</form>
-				<div>
-					<button @click="refresh">Refresh</button>
-				</div>
-				<div>
-					<button @click="showUser">Show user</button>
-				</div>
-				<div>
-					<button @click="getUser">Get me</button>
-				</div>
 			</div>
 		</div>
 	</div>
@@ -51,7 +28,6 @@
 
 <script lang="ts" setup>
 import { FetchError } from 'ofetch';
-import type { StatsResponse } from '~/types/interfaces';
 
 const instanceUrl = ref<string | null | undefined>(null);
 const instanceUrlInput = ref<string>();
@@ -63,9 +39,7 @@ const registrationEnabled = useState("registrationEnabled", () => true);
 const auth = useAuth();
 
 onMounted(async () => {
-	const cookie = useCookie("instance_url").value;
+	instanceUrl.value = useCookie("instance_url").value;
-	instanceUrl.value = cookie;
-	console.log(cookie);
 	console.log("set instance url to:", instanceUrl.value);
 });
 
@@ -73,8 +47,8 @@ async function selectInstance(e: Event) {
 	e.preventDefault();
 	console.log("trying input instance");
 	if (instanceUrlInput.value) {
-		console.log("input has value");
 		const gorbTxtUrl = new URL(`/.well-known/gorb.txt`, instanceUrlInput.value);
+		console.log("input has value");
 		try {
 			console.log("trying to get gorb.txt:", gorbTxtUrl);
 			const res = await $fetch.raw(gorbTxtUrl.href, { responseType: "text" });
@@ -87,10 +61,10 @@ async function selectInstance(e: Event) {
 				instanceUrl.value = origin;
 				useCookie("instance_url").value = origin;
 				console.log("set instance url to:", origin);
-				const { status, data, error } = await useFetch<StatsResponse>(`${apiBase.value}/stats`);
+				const stats = await useApi().fetchInstanceStats(apiBase.value);
-				if (status.value == "success" && data.value) {
+				if (stats) {
-					registrationEnabled.value = data.value.registration_enabled;
+					registrationEnabled.value = stats.registration_enabled;
-					console.log("set registration enabled value to:", data.value.registration_enabled);
+					console.log("set registration enabled value to:", stats.registration_enabled);
 				}
 				return;
 			}
@@ -148,18 +122,22 @@ async function showUser(e: Event) {
 	align-items: center;
 }
 
-#auth-form-container,
+#auth-form-container {
-#auth-form-container form {
 	display: flex;
-	width: 50dvw;
+	width: 20dvw;
 	flex-direction: column;
 	align-items: center;
+	text-align: center;
 	gap: 1em;
+	margin-bottom: 2dvh;
 }
 
 #auth-form-container form {
+	display: flex;
+	flex-direction: column;
 	text-align: left;
 	margin-top: 10dvh;
+	gap: 1em;
 }
 
 #instance-error-container {

middleware/auth.global.ts

@@ -2,7 +2,21 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 	console.log("to.fullPath:", to.fullPath);
 	const loading = useState("loading");
 	const accessToken = useCookie("access_token").value;
-	if (["/login", "/register"].includes(to.path)) {
+	const apiBase = useCookie("api_base").value;
+	const { fetchInstanceStats } = useApi();
+	
+	console.log("[AUTH] instance url:", apiBase);
+	if (apiBase && !Object.keys(to.query).includes("special") && to.path != "/verify-email") {
+		const user = await useAuth().getUser();
+		const stats = await fetchInstanceStats(apiBase);
+		console.log("[AUTH] stats:", stats);
+		console.log("[AUTH] email verification check:", user?.email && !user.email_verified && stats.email_verification_required);
+		if (user?.email && !user.email_verified && stats.email_verification_required) {
+			return await navigateTo("/register?special=verify_email");
+		}
+	}
+
+	if (["/login", "/register"].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);
@@ -19,6 +33,14 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 				if (parsed.ApiBaseUrl) {
 					apiBase.value = `${parsed.ApiBaseUrl}/v${apiVersion}`;
 					console.log("set apiBase to:", parsed.ApiBaseUrl);
+					console.log("hHEYOO");
+					const instanceUrl = useCookie("instance_url");
+					console.log("hHEYOO 2");
+					console.log("instance url:", instanceUrl.value);
+					if (!instanceUrl.value) {
+						instanceUrl.value = `${requestUrl.protocol}//${requestUrl.host}`;
+						console.log("set instance url to:", instanceUrl.value);
+					}
 				}
 			}
 		}

pages/login.vue

@@ -44,10 +44,9 @@ const apiBase = useCookie("api_base");
 
 if (apiBase.value) {
 	console.log("apiBase:", apiBase.value);
-	const statsUrl = new URL("/stats", apiBase.value).href;
+	const stats = await useApi().fetchInstanceStats(apiBase.value);
-	const { status, data } = await useFetch<StatsResponse>(statsUrl);
+	if (stats) {
-	if (status.value == "success" && data.value) {
+		registrationEnabled.value = stats.registration_enabled;
-		registrationEnabled.value = data.value.registration_enabled;
 	}
 }
 

pages/register.vue

@@ -1,6 +1,6 @@
 <template>
   <NuxtLayout>
-    <form v-if="registrationEnabled" @submit="register">
+    <form v-if="registrationEnabled && !registrationSubmitted && !showEmailVerificationScreen" @submit="register">
       <div>
         <!--
         <span class="form-error" v-if="errors.username.length > 0">
@@ -32,32 +32,87 @@
         <button type="submit">Register</button>
       </div>
     </form>
+	<div v-else-if="registrationEnabled && (registrationSubmitted || showEmailVerificationScreen) && !emailSent">
+		<p v-if="emailVerificationRequired">
+			This instance requires email verification to use it.
+			<br><br>
+			<span v-if="registrationSubmitted">
+				Please open the link sent to your email.
+			</span>
+			<span v-else-if="showEmailVerificationScreen">
+				Please click on the link you've already received, or click on the button below to receive a new email.
+			</span>
+		</p>
+		<p v-else>
+			Would you like to verify your email?
+			<!--
+			<br>
+			This is required for resetting your password and making other important changes.
+			-->
+		</p>
+		<Button v-if="(!emailVerificationRequired || showEmailVerificationScreen) && !emailSent" text="Send email" variant="neutral" :callback="sendEmail"></Button>
+	</div>
+	<div v-else-if="emailSent">
+		<p>
+			An email has been sent and should arrive soon.
+			<br>
+			If you don't see it in your inbox, try checking the spam folder.
+		</p>
+	</div>
     <div v-else>
       <h3>This instance has disabled registration.</h3>
     </div>
-    <div>
+    <div v-if="loggedIn">
-      Already have an account? <NuxtLink :href="loginUrl">Log in</NuxtLink>!
+	  <Button text="Log out" variant="scary" :callback="() => {}"></Button>
+	</div>
+    <div v-else>
+	  Already have an account? <NuxtLink :href="loginUrl">Log in</NuxtLink>!
     </div>
   </NuxtLayout>
 </template>
 
 <script lang="ts" setup>
-import type { StatsResponse } from '~/types/interfaces';
 definePageMeta({
   layout: "auth"
-})
+});
 
 const registrationEnabled = useState("registrationEnabled", () => true);
+const emailVerificationRequired = useState("emailVerificationRequired", () => false);
+const registrationSubmitted = ref(false);
+const emailSent = ref(false);
+
+const auth = useAuth();
+
+const loggedIn = ref(await auth.getUser());
+
+const query = new URLSearchParams(useRoute().query as Record<string, string>);
+
+const user = await useAuth().getUser();
+
+if (user?.email_verified) {
+	if (query.get("redirect_to")) {
+		await navigateTo(query.get("redirect_to"));
+	} else {
+		await navigateTo("/");
+	}
+}
+
+const showEmailVerificationScreen = query.get("special") == "verify_email";
+console.log("show email verification screen?", showEmailVerificationScreen);
+
+const { fetchInstanceStats, sendVerificationEmail } = useApi();
 
 console.log("wah");
 console.log("weoooo")
 const apiBase = useCookie("api_base");
 console.log("apiBase:", apiBase.value);
 if (apiBase.value) {
-	const { status, data, error } = await useFetch<StatsResponse>(`${apiBase.value}/stats`);
+	const stats = await fetchInstanceStats(apiBase.value);
-	if (status.value == "success" && data.value) {
+	if (stats) {
-		registrationEnabled.value = data.value.registration_enabled;
+		registrationEnabled.value = stats.registration_enabled;
-		console.log("set registration enabled value to:", data.value.registration_enabled);
+		console.log("set registration enabled value to:", stats.registration_enabled);
+		emailVerificationRequired.value = stats.email_verification_required;
+		console.log("set email verification required value to:", stats.email_verification_required);
 	}
 }
 
@@ -90,8 +145,6 @@ const errorMessages = reactive({
 */
 
 //const authStore = useAuthStore();
-const auth = useAuth();
-const query = useRoute().query as Record<string, string>;
 const searchParams = new URLSearchParams(query);
 const loginUrl = `/login?${searchParams}`
 
@@ -133,13 +186,22 @@ async function register(e: Event) {
   console.log("Sending registration data");
   try {
     await auth.register(form.username, form.email, form.password);
-    return await navigateTo(query.redirect_to);
+	if (!emailVerificationRequired.value) {
+		return await navigateTo(query.get("redirect_to"));
+	}
+	await sendVerificationEmail();
+	registrationSubmitted.value = true;
   } catch (error) {
     console.error("Error registering:", error);
   }
   //return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
 }
 
+async function sendEmail() {
+	await sendVerificationEmail();
+	emailSent.value = true;
+}
+
 </script>
 
 <style></style>

pages/verify-email.vue

@@ -15,6 +15,12 @@ const token = useRoute().query.token;
 try {
 	const res = await fetchWithApi("/auth/verify-email", { query: { token } });
 	console.log("hi");
+	const query = useRoute().query;
+	if (query.redirect_to) {
+		await navigateTo(`/?redirect_to=${query.redirect_to}`);
+	} else {
+		await navigateTo("/");
+	}
 } catch (error) {
 	console.error("Error verifying email:", error);
 	errorMessage.value = error;