WorkshopTasker/pages/login.vue

<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,
  middleware: ["first-run"],
});

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>
      <VBtn
        v-if="loggedIn"
        color="primary"
        @click="navigateTo('/clients')"
      >
        go to clients
      </VBtn>
    </template>
  </VCard>
</template>