Converted views/Login.vue to compositionapi

frontend/src/views/Login.vue

@@ -11,39 +11,39 @@
         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 * as auth from "@/utils/auth";
 import {
   name,
@@ -52,25 +52,70 @@ import {
   recaptchaKey,
   signup,
 } from "@/utils/constants";
+import { 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() {
+// Define refs
+const createMode = ref<boolean>(false)
+const error = ref<string>("")
+const username = ref<string>("")
+const password = ref<string>("")
+const passwordConfirm = ref<string>("")
+
+const route = useRoute()
+const router = useRouter()
+const { t } = useI18n({})
+// Define functions
+const toggleMode = () => createMode.value = !createMode.value;
+
+
+const submit = async (event: Event) => {
+  event.preventDefault();
+  event.stopPropagation();
+
+  let redirect = route.query.redirect;
+  if (redirect === "" || redirect === undefined || redirect === null) {
+    redirect = "/files/";
+  }
+
+  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);
+    // @ts-ignore
+    router.push({ path: redirect });
+  } catch (e: any) {
+    console.error(e);
+    if (e.message == 409) {
+      error.value = t("login.usernameTaken");
+    } else {
+      error.value = t("login.wrongCredentials");
+    }
+  }
+}
+
+// Run hooks
+onMounted(() => {
     if (!recaptcha) return;
 
     window.grecaptcha.ready(function () {
@@ -78,53 +123,6 @@ export default {
         sitekey: recaptchaKey,
       });
     });
-  },
-  methods: {
-    toggleMode() {
-      this.createMode = !this.createMode;
-    },
-    async submit(event) {
-      event.preventDefault();
-      event.stopPropagation();
+})
 
-      let redirect = this.$route.query.redirect;
-      if (redirect === "" || redirect === undefined || redirect === null) {
-        redirect = "/files/";
-      }
-
-      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) {
-        console.error(e);
-        if (e.message == 409) {
-          this.error = this.$t("login.usernameTaken");
-        } else {
-          this.error = this.$t("login.wrongCredentials");
-        }
-      }
-    },
-  },
-};
 </script>