feat: esqueci minha senha

src/pages/ForgotMyPasswordPage.vue

@@ -0,0 +1,91 @@
+<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: 539px;
+        width: 100%;
+        height: 100%;
+        border-radius: 15px;
+      "
+    >
+      <div class="flex full-width q-gutter-x-sm items-center q-mb-xl">
+        <q-icon
+          name="mdi-arrow-left"
+          size="sm"
+          color="primary"
+          @click="$router.back()"
+        />
+        <span class="text-h6 text-weight-regular">Esqueci minha senha</span>
+      </div>
+
+      <div class="column items-center full-width">
+        <q-img
+          :src="Logo"
+          style="max-width: 379px; max-height: 106px; height: 100%; width: 100%"
+        />
+
+        <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 class="text-body1 q-my-lg text-primary" style="font-weight: 400">
+          Informe o seu e-mail para redefinir sua senha
+        </div>
+
+        <q-form class="full-width q-px-lg column q-gutter-y-lg q-mt-xs">
+          <DefaultInput
+            v-model="email"
+            type="email"
+            lazy-rules
+            :label="$t('common.terms.email')"
+            :rules="[inputRules.required]"
+          />
+
+          <div>
+            <q-btn
+              class="full-width q-mt-md"
+              color="primary-2"
+              label="Continuar"
+              size="md"
+              padding="sm"
+              type="submit"
+              :loading
+            >
+              <template #loading>
+                <q-spinner />
+              </template>
+            </q-btn>
+          </div>
+        </q-form>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script setup>
+import Logo from "src/assets/images/logo.svg";
+import DefaultInput from "src/components/defaults/DefaultInput.vue";
+import { useInputRules } from "src/composables/useInputRules";
+import { ref } from "vue";
+
+const email = ref("");
+
+const { inputRules } = useInputRules();
+</script>
+
+<style lang="scss" scoped>
+.login-page {
+  background-image: url("background.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+</style>

src/pages/login/LoginPage.vue

@@ -58,10 +58,12 @@
         />
 
         <span
-          class="q-ma-xs text-body2 text-primary"
+          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"

src/router/routes.js

@@ -80,6 +80,17 @@ const routes = [
       },
     ],
   },
+  {
+    path: "/forgot-my-password",
+    component: () => import("layouts/LoginLayout.vue"),
+    children: [
+      {
+        path: "",
+        name: "ForgotMyPasswordPage",
+        component: () => import("pages/ForgotMyPasswordPage.vue")
+      }
+    ]
+  },
 
   // Always leave this as last one,
   // but you can also remove it