sfp_front_vue_serprati_digital/src/pages/login/ForgotPasswordPage.vue

<template>
  <q-page class="login-page column items-center justify-center">
    <div class="login-overlay" />

    <div class="login-card column items-center">
      <div class="column items-center fields-card">
        <q-img :src="Logo" class="login-logo q-mb-lg" />

        <p class="login-title">{{ $t("auth.forgot_password_title") }}</p>
        
        <UserTypeBadge :tipo="tipo" />

        <q-form
          ref="formRef"
          class="full-width"
          autocomplete="off"
          @submit="onSubmit"
        >
          <DefaultInput
            v-model="form.email"
            v-model:error="validationErrors.email"
            type="email"
            autofocus
            :label="$t('common.terms.email')"
            :rules="[inputRules.required, inputRules.email]"
          >
            <template #append>
              <q-icon name="mdi-account-outline" color="grey-5" />
            </template>
          </DefaultInput>

          <q-btn
            class="full-width q-mt-sm login-btn"
            color="violet-normal"
            :label="$t('auth.continue')"
            type="submit"
            unelevated
            :loading
          >
            <template #loading>
              <q-spinner />
            </template>
          </q-btn>
        </q-form>

        <a href="#" class="login-link q-mt-md" @click.prevent="goBack">
          <q-icon name="mdi-arrow-left" size="12px" class="q-mr-xs" />
          {{ $t("auth.back_to_site") }}
        </a>
      </div>
    </div>
  </q-page>
</template>

<script setup>
import { ref, useTemplateRef } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useInputRules } from "src/composables/useInputRules";
import { useSubmitHandler } from "src/composables/useSubmitHandler";
import { forgotPassword } from "src/api/auth";

import Logo from "src/assets/logo_serprati.svg";
import DefaultInput from "src/components/defaults/DefaultInput.vue";
import UserTypeBadge from "./components/UserTypeBadge.vue";

const router = useRouter();
const route = useRoute();
const { inputRules } = useInputRules();

const tipo = route.query.tipo ?? "administrador";
const formRef = useTemplateRef("formRef");

const {
  loading,
  validationErrors,
  execute: submitForm,
} = useSubmitHandler({
  onSuccess: () =>
    router.push({
      name: "VerifyEmailPage",
      query: { email: form.value.email, tipo },
    }),
  formRef,
});

const form = ref({ email: null });

const onSubmit = async () => {
  await submitForm(() => forgotPassword(form.value.email, tipo));
};

const goBack = () => router.push({ name: "LoginPage" });
</script>

<style lang="scss" scoped>
@use "sass:map";
@use "src/css/quasar.variables.scss" as *;

.login-page {
  min-height: 100dvh;
  background-image: url("src/assets/pessoas_fundo.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
}

.login-overlay {
  position: absolute;
  inset: 0;
  background: rgba(74, 20, 140, 0.48);
  z-index: 0;
}

.login-card {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 32px);
  min-height: calc(100dvh - 32px);
  background: rgba(255, 255, 255, 0.747);
  border-radius: 16px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.15);
}

.fields-card {
  width: 100%;
  max-width: 600px;
  padding: 32px;
  border-radius: 12px;
}

.login-logo {
  width: 380px;
}

.login-title {
  color: map.get($colors, "violet-normal");
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  text-align: center;
}

.login-description {
  color: map.get($colors, "text-2");
  font-size: 13px;
  text-align: center;
  margin: 0 0 20px;
}

.login-btn {
  height: 44px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.login-link {
  color: map.get($colors, "violet-normal");
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;

  &:hover {
    color: map.get($colors, "violet-normal-hover");
    text-decoration: underline;
  }
}
</style>