sfp_front_vue_serprati_digital/src/pages/login/VerifyEmailPage.vue

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

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

      <UserTypeBadge :tipo="tipo" />

      <p class="login-title">{{ $t("auth.verify_email_title") }}</p>
      <p class="login-description">
        {{ $t("auth.verify_email_description") }}
      </p>

      <div class="email-box q-mb-lg">
        <q-icon name="mdi-email-outline" size="16px" class="q-mr-xs" />
        <span>{{ email }}</span>
      </div>

      <q-btn
        class="full-width login-btn"
        color="secondary"
        :label="$t('auth.enter_code')"
        unelevated
        @click="goToCode"
      />

      <p class="login-hint q-mt-md">
        {{ $t("auth.no_email_hint") }}
        <a href="#" class="login-link" @click.prevent="resend">
          {{ $t("auth.check_spam") }}
        </a>
      </p>

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

<script setup>
import { useRouter, useRoute } from "vue-router";

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

const router = useRouter();
const route = useRoute();

const email = route.query.email ?? "";
const tipo  = route.query.tipo  ?? "administrador";

const goToCode = () =>
  router.push({ name: "VerifyCodePage", query: { email, tipo } });

const resend = () =>
  router.push({ name: "ForgotPasswordPage", query: { tipo } });

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

<style lang="scss" scoped>
@use "src/css/quasar.variables.scss";

.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.72);
  z-index: 0;
}
.login-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 400px;
  padding: 32px 24px 40px;
}
.login-logo { width: 180px; filter: brightness(0) invert(1); }
.login-title { color: #fff; font-size: 18px; font-weight: 700; margin: 0 0 8px; text-align: center; }
.login-description { color: rgba(255,255,255,0.8); font-size: 13px; text-align: center; margin: 0 0 16px; }
.email-box {
  display: flex; align-items: center;
  background: rgba(255,255,255,0.15);
  border-radius: 8px; padding: 8px 16px;
  color: #fff; font-size: 14px;
}
.login-btn { height: 44px; font-size: 15px; font-weight: 600; width: 100%; }
.login-hint { color: rgba(255,255,255,0.65); font-size: 12px; text-align: center; margin: 0; }
.login-link { color: rgba(255,255,255,0.75); font-size: 13px; text-decoration: none; cursor: pointer;
  &:hover { color: #fff; text-decoration: underline; }
}
</style>