gorb/frontend
4
0
Fork 0
Code Issues 7 Pull requests 3 Projects Releases Packages 1 Wiki Activity Actions

Merge pull request 'Implement email verification' (#26) from email-verification into main
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details

Browse source 
Reviewed-on: #26
This commit is contained in:
SauceyRed 2025-07-09 17:54:33 +00:00
commit 7ff2b35ae2
8 changed files with 142 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

8
components/Settings/UserSettings/Account.vue
View file

@ -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) {

15
composables/api.ts
View file

@ -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
}
}

1
composables/auth.ts
View file

@ -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) {

50
layouts/auth.vue
View file

@ -20,30 +20,7 @@
<slot />
</div>
<div v-if="instanceUrl">
Instance URL is set to {{ instanceUrl }}
</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>
Instance URL is set to <span style="color: var(--primary-color);">{{ instanceUrl }}</span>
</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 = cookie;
console.log(cookie);
instanceUrl.value = useCookie("instance_url").value;
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`);
if (status.value == "success" && data.value) {
registrationEnabled.value = data.value.registration_enabled;
console.log("set registration enabled value to:", data.value.registration_enabled);
const stats = await useApi().fetchInstanceStats(apiBase.value);
if (stats) {
registrationEnabled.value = stats.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 form {
#auth-form-container {
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 {

24
middleware/auth.global.ts
View file

@ -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);
}
}
}
}

7
pages/login.vue
View file

@ -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 { status, data } = await useFetch<StatsResponse>(statsUrl);
if (status.value == "success" && data.value) {
registrationEnabled.value = data.value.registration_enabled;
const stats = await useApi().fetchInstanceStats(apiBase.value);
if (stats) {
registrationEnabled.value = stats.registration_enabled;
}
}

86
pages/register.vue
View file

@ -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>
Already have an account? <NuxtLink :href="loginUrl">Log in</NuxtLink>!
<div v-if="loggedIn">
<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`);
if (status.value == "success" && data.value) {
registrationEnabled.value = data.value.registration_enabled;
console.log("set registration enabled value to:", data.value.registration_enabled);
const stats = await fetchInstanceStats(apiBase.value);
if (stats) {
registrationEnabled.value = stats.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>

6
pages/verify-email.vue
View file

@ -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;