sfp_vue_franchisee_ginastica_cerebro/src/pages/LoginPage.vue

<template>
  <q-page padding class="login-page bg-background">
    <q-card flat class="login-card q-pa-md q-pt-xl bg-dark">
      <div class="text-center">
        <q-img :src="Logo" style="max-width: 250px" />
        <div class="text-h6">{{ $t("general.welcome") }}</div>
      </div>

      <q-form
        ref="loginForm"
        class="q-pa-md"
        autocorrect="off"
        autocapitalize="off"
        autocomplete="off"
        spellcheck="false"
        @submit="submitLogin"
      >
        <q-card-section class="q-mt-sm">
          <q-input
            v-model="email"
            filled
            type="email"
            label="Email"
            lazy-rules
            autofocus
            :rules="[inputRules.required, inputRules.email]"
          />

          <q-input
            v-model="password"
            :label="$t('users.password')"
            filled
            :type="isPwd ? 'password' : 'text'"
            class="q-mt-xs"
            lazy-rules
            :rules="[inputRules.required, inputRules.min(6)]"
          >
            <template #append>
              <q-icon
                :name="isPwd ? 'mdi-eye-off' : 'mdi-eye'"
                class="cursor-pointer q-ml-md"
                @click="isPwd = !isPwd"
              />
            </template>
          </q-input>

          <q-checkbox v-model="checkbox" label="Lembrar email" />
        </q-card-section>

        <q-card-actions align="right">
          <q-btn
            color="primary"
            :label="$t('navigation.login')"
            size="md"
            padding="md"
            type="submit"
            :loading="submitting"
          >
            <template #loading>
              <q-spinner />
            </template>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-page>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useAuth } from "src/composables/useAuth";
import { useRouter } from "vue-router";
import { useInputRules } from "src/composables/useInputRules";

import Logo from "src/assets/logo.png";

const router = useRouter();
const $q = useQuasar();

const { inputRules } = useInputRules();
const email = ref("");
const password = ref(process.env.PASSWORD);
const isPwd = ref(true);
const submitting = ref(false);
const loginForm = ref(null);
const checkbox = ref(false);

const submitLogin = async () => {
  try {
    submitting.value = true;

    const validate = await loginForm.value.validate();

    if (!validate) {
      return;
    }

    const email_storage = $q.cookies.get("email");

    if (email_storage && !checkbox.value) {
      $q.cookies.remove("email");
    }
    if (checkbox.value) {
      $q.cookies.set("email", email.value, {
        expires: "3d",
        path: "/",
        sameSite: "Lax",
      });
    }

    await useAuth().login(email.value, password.value);

    submitting.value = false;

    router.push({ name: "HomePage" });
  } catch (error) {
    submitting.value = false;
  }
};

onMounted(() => {
  const email_storage = $q.cookies.get("email");

  if (email_storage) {
    checkbox.value = true;
    email.value = email_storage;
  }

  if (process.env.DEV && process.env.SENHA) {
    password.value = process.env.SENHA;
  }
});
</script>

<style lang="scss" scoped>
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;

  .login-card {
    width: 100%;
    max-width: 500px;
    border-radius: 12px;
  }
}
</style>