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/views/Login.vue

@@ -11,39 +11,38 @@
         type="text"
         autocapitalize="off"
         v-model="username"
-        :placeholder="$t('login.username')"
+        :placeholder="t('login.username')"
       />
       <input
         class="input input--block"
         type="password"
         v-model="password"
-        :placeholder="$t('login.password')"
+        :placeholder="t('login.password')"
       />
       <input
         class="input input--block"
         v-if="createMode"
         type="password"
         v-model="passwordConfirm"
-        :placeholder="$t('login.passwordConfirm')"
+        :placeholder="t('login.passwordConfirm')"
       />
 
       <div v-if="recaptcha" id="recaptcha"></div>
       <input
         class="button button--block"
         type="submit"
-        :value="createMode ? $t('login.signup') : $t('login.submit')"
+        :value="createMode ? t('login.signup') : t('login.submit')"
       />
 
       <p @click="toggleMode" v-if="signup">
-        {{
-          createMode ? $t("login.loginInstead") : $t("login.createAnAccount")
-        }}
+        {{ createMode ? t("login.loginInstead") : t("login.createAnAccount") }}
       </p>
     </form>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { StatusError } from "@/api/utils";
 import * as auth from "@/utils/auth";
 import {
   name,
@@ -52,78 +51,77 @@ import {
   recaptchaKey,
   signup,
 } from "@/utils/constants";
+import { inject, onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute, useRouter } from "vue-router";
 
-export default {
-  name: "login",
-  computed: {
-    signup: () => signup,
-    name: () => name,
-    logoURL: () => logoURL,
-  },
-  data: function () {
-    return {
-      createMode: false,
-      error: "",
-      username: "",
-      password: "",
-      recaptcha: recaptcha,
-      passwordConfirm: "",
-    };
-  },
-  mounted() {
-    if (!recaptcha) return;
+// Define refs
+const createMode = ref<boolean>(false);
+const error = ref<string>("");
+const username = ref<string>("");
+const password = ref<string>("");
+const passwordConfirm = ref<string>("");
 
-    window.grecaptcha.ready(function () {
-      window.grecaptcha.render("recaptcha", {
-        sitekey: recaptchaKey,
-      });
-    });
-  },
-  methods: {
-    toggleMode() {
-      this.createMode = !this.createMode;
-    },
-    async submit(event) {
-      event.preventDefault();
-      event.stopPropagation();
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n({});
+// Define functions
+const toggleMode = () => (createMode.value = !createMode.value);
 
-      let redirect = this.$route.query.redirect;
-      if (redirect === "" || redirect === undefined || redirect === null) {
-        redirect = "/files/";
+const $showError = inject<IToastError>("$showError")!;
+
+const submit = async (event: Event) => {
+  event.preventDefault();
+  event.stopPropagation();
+
+  const redirect = (route.query.redirect || "/files/") as string;
+
+  let captcha = "";
+  if (recaptcha) {
+    captcha = window.grecaptcha.getResponse();
+
+    if (captcha === "") {
+      error.value = t("login.wrongCredentials");
+      return;
+    }
+  }
+
+  if (createMode.value) {
+    if (password.value !== passwordConfirm.value) {
+      error.value = t("login.passwordsDontMatch");
+      return;
+    }
+  }
+
+  try {
+    if (createMode.value) {
+      await auth.signup(username.value, password.value);
+    }
+
+    await auth.login(username.value, password.value, captcha);
+    router.push({ path: redirect });
+  } catch (e: any) {
+    // console.error(e);
+    if (e instanceof StatusError) {
+      if (e.status === 409) {
+        error.value = t("login.usernameTaken");
+      } else if (e.status === 403) {
+        error.value = t("login.wrongCredentials");
+      } else {
+        $showError(e);
       }
-
-      let captcha = "";
-      if (recaptcha) {
-        captcha = window.grecaptcha.getResponse();
-
-        if (captcha === "") {
-          this.error = this.$t("login.wrongCredentials");
-          return;
-        }
-      }
-
-      if (this.createMode) {
-        if (this.password !== this.passwordConfirm) {
-          this.error = this.$t("login.passwordsDontMatch");
-          return;
-        }
-      }
-
-      try {
-        if (this.createMode) {
-          await auth.signup(this.username, this.password);
-        }
-
-        await auth.login(this.username, this.password, captcha);
-        this.$router.push({ path: redirect });
-      } catch (e) {
-        if (e.message == 409) {
-          this.error = this.$t("login.usernameTaken");
-        } else {
-          this.error = this.$t("login.wrongCredentials");
-        }
-      }
-    },
-  },
+    }
+  }
 };
+
+// Run hooks
+onMounted(() => {
+  if (!recaptcha) return;
+
+  window.grecaptcha.ready(function () {
+    window.grecaptcha.render("recaptcha", {
+      sitekey: recaptchaKey,
+    });
+  });
+});
 </script>