sfp_vue_franchisor_ginastica_cerebro/src/pages/login/LoginPage.vue

<template>
  <q-page class="column justify-center items-center login-page">
    <div
      flat
      class="column justify-center items-center flex-grow full-width z-top bg-background"
      style="
        max-width: 659px;
        max-height: 738px;
        width: 100%;
        height: 100%;
        border-radius: 15px;
      "
    >
      <div class="column flex-center full-width">
        <q-img
          :src="Logo"
          style="max-width: 611px; max-height: 171px; height: 100%; width: 100%"
        />
        <div class="text-h4 q-mt-xl text-primary" style="font-weight: 400">
          Faça seu Login
        </div>

        <div
          class="items-center full-width q-px-lg q-mt-xl"
          style="display: flex; gap: 12px"
        >
          <div class="bg-primary" style="height: 1px; flex: 1"></div>
          <q-icon name="mdi-chevron-down" size="lg" color="warning" />
          <div class="bg-primary" style="height: 1px; flex: 1"></div>
        </div>
      </div>

      <q-form
        ref="formRef"
        class="full-width q-px-lg column q-gutter-y-md q-mt-xs"
        autocorrect="off"
        autocapitalize="off"
        autocomplete="off"
        spellcheck="false"
        @submit="onSubmit"
      >
        <DefaultInput
          v-model="form.email"
          v-model:error="validationErrors.email"
          type="email"
          lazy-rules
          icon="mdi-account"
          :label="$t('common.terms.email')"
          :rules="[inputRules.required, inputRules.email]"
        />

        <DefaultPasswordInput
          v-model="form.password"
          v-model:error="validationErrors.password"
          :rules="[inputRules.required, inputRules.min(6)]"
          :label="$t('common.terms.password')"
        />

        <span
          class="q-ma-xs text-body2 text-primary cursor-pointer"
          style="letter-spacing: 0.25px"
          @click="$router.push({ name: 'ForgotMyPasswordPage' })"
          >Esqueceu sua senha?</span
        >

        <div>
          <q-btn
            class="full-width q-mt-md"
            color="primary-2"
            label="Entrar"
            size="md"
            padding="sm"
            type="submit"
            :loading
          >
            <template #loading>
              <q-spinner />
            </template>
          </q-btn>
        </div>
      </q-form>
    </div>
  </q-page>
</template>

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

import Logo from "src/assets/images/logo.svg";
import DefaultInput from "src/components/defaults/DefaultInput.vue";
import DefaultPasswordInput from "src/components/defaults/DefaultPasswordInput.vue";

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

const { inputRules } = useInputRules();
const { login } = useAuth();

const formRef = useTemplateRef("formRef");

const {
  loading,
  validationErrors,
  execute: submitForm,
} = useSubmitHandler({
  onSuccess: () => router.push({ name: "DashboardPage" }),
  formRef: formRef,
});

const form = ref({
  email: null,
  password: process.env.PASSWORD ?? null,
});

const checkbox = ref(false);

const onSubmit = async () => {
  await submitForm(() => login(form.value.email, form.value.password));

  const email_storage = $q.cookies.get("email");
  if (email_storage && !checkbox.value) {
    $q.cookies.remove("email");
  }

  if (checkbox.value) {
    $q.cookies.set("email", form.value.email, {
      path: "/",
      sameSite: "Lax",
    });
  }
};

onBeforeMount(() => {
  const email_storage = $q.cookies.get("email");
  if (email_storage) {
    checkbox.value = true;
    form.value.email = email_storage;
  }
});
</script>

<style lang="scss" scoped>
.login-page {
  background-image: url("../../assets/images/background.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
</style>