feat: adiciona step 2 de recuperar a senha

src/pages/ForgotMyPasswordPage.vue

@@ -16,69 +16,51 @@
           name="mdi-arrow-left"
           size="sm"
           color="primary"
-          @click="$router.back()"
+          @click="currentStep === 'resend-email' ? currentStep = 'email-data' : $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]"
-          />
+      <EmailDataStep
+        v-if="currentStep === 'email-data'"
+        :loading
+        @submit="handleSubmit"
+      />
 
-          <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>
+      <ResendEmailStep
+        v-else-if="currentStep === 'resend-email'"
+        :email
+        :loading
+        @resend="handleResend"
+      />
     </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";
+import EmailDataStep from "./forgot-password/EmailDataStep.vue";
+import ResendEmailStep from "./forgot-password/ResendEmailStep.vue";
 
+const currentStep = ref("email-data");
 const email = ref("");
+const loading = ref(false);
+
+async function handleSubmit(submittedEmail) {
+  loading.value = true;
+  email.value = submittedEmail;
+  // TODO: chamar API de recuperação de senha
+  await new Promise((resolve) => setTimeout(resolve, 500));
+  loading.value = false;
+  currentStep.value = "resend-email";
+}
 
-const { inputRules } = useInputRules();
+async function handleResend() {
+  loading.value = true;
+  // TODO: chamar API de recuperação de senha
+  await new Promise((resolve) => setTimeout(resolve, 500));
+  loading.value = false;
+}
 </script>
 
 <style lang="scss" scoped>

src/pages/forgot-password/EmailDataStep.vue

@@ -0,0 +1,63 @@
+<template>
+  <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" @submit.prevent="emit('submit', email)">
+      <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>
+</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";
+
+defineProps({
+  loading: Boolean,
+});
+
+const emit = defineEmits(["submit"]);
+
+const email = ref("");
+const { inputRules } = useInputRules();
+</script>

src/pages/forgot-password/ResendEmailStep.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="column items-center full-width">
+    <q-img
+      :src="Logo"
+      style="max-width: 379px; max-height: 106px; height: 100%; width: 100%"
+    />
+    <div class="text-h4 text-weight-regular q-mt-lg text-primary">
+      Verifique seu e-mail
+    </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
+      class="text-body2 text-center text-primary q-px-lg"
+      style="font-weight: 400"
+    >
+      Enviamos um e-mail com um link para redefinir sua senha<br />
+      Por Favor confira sua caixa de entrada e clique no link para prosseguir
+    </div>
+
+    <div class="text-body1 text-weight-medium text-primary q-mt-md">
+      {{ email }}
+    </div>
+
+    <div
+      class="text-body2 text-center text-primary q-mt-sm q-px-lg"
+      style="font-weight: 400"
+    >
+      Não achou o e-mail? Verifique a caixa de spam ou tente novamente
+    </div>
+
+    <div class="full-width q-px-lg q-mt-lg">
+      <q-btn
+        class="full-width"
+        color="primary-2"
+        size="md"
+        padding="sm"
+        :loading
+        @click="emit('resend')"
+      >
+        <q-icon name="mdi-refresh" class="q-mr-sm" />
+        Reenviar E-mail
+        <template #loading>
+          <q-spinner />
+        </template>
+      </q-btn>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Logo from "src/assets/images/logo.svg";
+
+defineProps({
+  email: { type: String, required: true },
+  loading: Boolean,
+});
+
+const emit = defineEmits(["resend"]);
+</script>