feat: migrate to vue 3 (#2689)

---------

Co-authored-by: Joep <jcbuhre@gmail.com>
Co-authored-by: Omar Hussein <omarmohammad1951@gmail.com>
Co-authored-by: Oleg Lobanov <oleg@lobanov.me>

frontend/src/utils/auth.ts

@@ -0,0 +1,102 @@
+import { useAuthStore } from "@/stores/auth";
+import router from "@/router";
+import { JwtPayload, jwtDecode } from "jwt-decode";
+import { baseURL } from "./constants";
+import { StatusError } from "@/api/utils";
+
+export function parseToken(token: string) {
+  // falsy or malformed jwt will throw InvalidTokenError
+  const data = jwtDecode<JwtPayload & { user: IUser }>(token);
+
+  document.cookie = `auth=${token}; Path=/; SameSite=Strict;`;
+
+  localStorage.setItem("jwt", token);
+
+  const authStore = useAuthStore();
+  authStore.jwt = token;
+  authStore.setUser(data.user);
+}
+
+export async function validateLogin() {
+  try {
+    if (localStorage.getItem("jwt")) {
+      await renew(<string>localStorage.getItem("jwt"));
+    }
+  } catch (error) {
+    console.warn("Invalid JWT token in storage"); // eslint-disable-line
+    throw error;
+  }
+}
+
+export async function login(
+  username: string,
+  password: string,
+  recaptcha: string
+) {
+  const data = { username, password, recaptcha };
+
+  const res = await fetch(`${baseURL}/api/login`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(data),
+  });
+
+  const body = await res.text();
+
+  if (res.status === 200) {
+    parseToken(body);
+  } else {
+    throw new StatusError(
+      body || `${res.status} ${res.statusText}`,
+      res.status
+    );
+  }
+}
+
+export async function renew(jwt: string) {
+  const res = await fetch(`${baseURL}/api/renew`, {
+    method: "POST",
+    headers: {
+      "X-Auth": jwt,
+    },
+  });
+
+  const body = await res.text();
+
+  if (res.status === 200) {
+    parseToken(body);
+  } else {
+    throw new StatusError(
+      body || `${res.status} ${res.statusText}`,
+      res.status
+    );
+  }
+}
+
+export async function signup(username: string, password: string) {
+  const data = { username, password };
+
+  const res = await fetch(`${baseURL}/api/signup`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(data),
+  });
+
+  if (res.status !== 200) {
+    throw new StatusError(`${res.status} ${res.statusText}`, res.status);
+  }
+}
+
+export function logout() {
+  document.cookie = "auth=; Max-Age=0; Path=/; SameSite=Strict;";
+
+  const authStore = useAuthStore();
+  authStore.clearUser();
+
+  localStorage.setItem("jwt", "");
+  router.push({ path: "/login" });
+}