Initial commit

pages/login.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+/* global $fetch */
+import { ref, watch } from "vue";
+import { VForm } from "vuetify/components";
+import { navigateTo, useCookie, useFetch, useRoute } from "nuxt/app";
+import { cookieSettings } from "~/utils/cookieSettings";
+import { definePageMeta } from "~/.nuxt/imports";
+
+const route = useRoute();
+
+const login = ref("");
+const password = ref("");
+const loading = ref(false);
+const error = ref<true | string>(true);
+const form = ref<VForm | null>(null);
+const loggedIn = ref<boolean>(useCookie("token", cookieSettings).value != null);
+
+const redirectTo = ref(route.redirectedFrom);
+
+definePageMeta({
+  layout: false,
+});
+
+async function submit() {
+  loading.value = true;
+  try {
+    const result = await $fetch("/api/login", {
+      body: { login: login.value, password: password.value },
+      method: "POST",
+    });
+    console.log(result);
+    loggedIn.value = true;
+    password.value = "";
+  } catch (e) {
+    console.log(typeof e);
+    console.error(e);
+    console.log(e);
+    error.value = (e as any).data.message;
+  }
+  loading.value = false;
+  if (redirectTo.value) navigateTo(redirectTo.value.fullPath);
+  if (form.value) form.value.validate();
+}
+
+async function logout() {
+  try {
+    await $fetch("/api/logout");
+    loggedIn.value = false;
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+const userInfo = ref(JSON.stringify(useFetch("/api/users/me").data));
+watch(loggedIn, updateUserInfo);
+async function updateUserInfo() {
+  if (loggedIn.value) {
+    try {
+      userInfo.value = JSON.stringify(await $fetch("/api/users/me"));
+    } catch (e) {
+      // expected if the user is not logged in
+      userInfo.value = "";
+    }
+  } else {
+    userInfo.value = "";
+  }
+}
+
+updateUserInfo();
+</script>
+
+<template>
+  <VCard max-width="450px" class="mx-auto mt-16" variant="outlined">
+    <VProgressLinear
+      absolute
+      :active="loading"
+      :indeterminate="loading"
+      color="primary"
+    />
+    <template #title>
+      Log in
+    </template>
+    <template #text>
+      <VForm v-if="!loggedIn" ref="form" class="form" :disabled="loading">
+        <VTextField
+          v-model="login"
+          label="Login"
+          :rules="[() => error]"
+          :disabled="loggedIn"
+          autocomplete="username"
+          variant="outlined"
+          color="primary"
+        />
+        <VTextField
+          v-model="password"
+          label="Password"
+          type="password"
+          :rules="[() => error]"
+          :disabled="loggedIn"
+          autocomplete="current-password"
+          variant="outlined"
+          color="primary"
+          class="pt-4"
+        />
+      </VForm>
+      <p v-if="loggedIn">
+        Logged in<br>{{ userInfo }}
+      </p>
+    </template>
+    <template #actions>
+      <VBtn
+        v-if="!loggedIn"
+        color="primary"
+        :disabled="loggedIn || loading"
+        @click="submit"
+      >
+        Login
+      </VBtn>
+      <VBtn
+        v-if="loggedIn"
+        color="primary"
+        :disabled="!loggedIn"
+        @click="logout"
+      >
+        Logout
+      </VBtn>
+    </template>
+  </VCard>
+</template>