Merge pull request #28 from hrodriguezimagina/wizard_login

- OTP rebuild
imagina · Jan 18, 2024 · 45ff644 · 45ff644
2 parents ef4555d + 2f5c7b8
commit 45ff644
Showing 1 changed file with 57 additions and 39 deletions.
diff --git a/_components/auth/emailAuth.vue b/_components/auth/emailAuth.vue
@@ -1,30 +1,52 @@
 <template>
   <div id="formLoginEmailComponent">
-    <!--Title-->
-    <div class="box-title text-uppercase q-mb-sm text-center">
-      {{ $tr('iprofile.cms.label.login') }}
+    <div v-if="sent">
+      <div>
+        <!--Title-->
+        <div class="text-h6 text-center box-title">{{ $tr('iprofile.cms.form.checkYourEmail') }}</div>
+        <!-- Content -->
+        <div class="text-body2 text-justify q-mt-md" v-html="sentEmailLabel">
+        </div>
+      </div>
+      <div class="q-mt-xl text-center">
+        <div class="text-body2">
+          <span class="text-weight-bold">{{ $tr('iprofile.cms.form.notReceivedEmail') }}</span>
+        </div>
+        <div class="text-body2">
+          {{ $tr('iprofile.cms.form.checkYourSpamFolder') }}
+        </div>
+        <q-btn 
+          class="q-mt-lg"
+          @click="init()"        
+          :label="$tr('iprofile.cms.form.resendEmail')"
+          color="primary"
+          rounded
+          unelevated
+          no-caps
+        />
+      </div>
     </div>
+    <div v-else>
+      <q-form @submit="authenticate()" class="row q-col-gutter-x-sm q-pt-sm"
+              autocorrect="off" autocomplete="off" @validation-error="$alert.error($tr('isite.cms.message.formInvalid'))">
+        <!-- Intro Message -->
+        <div class="text-justiy q-mb-md">{{ $tr('iprofile.cms.form.introMessage') }}</div>
 
-    <q-form @submit="authenticate()" class="row q-col-gutter-x-sm q-pt-sm"
-            autocorrect="off" autocomplete="off" @validation-error="$alert.error($tr('isite.cms.message.formInvalid'))">
-      <!-- Intro Message -->
-      <div class="text-justiy q-mb-md">{{ $tr('iprofile.cms.form.introMessage') }}</div>
-
-      <!-- Email field -->
-      <dynamic-field class="col-12" v-model="email" :field="emailConfig"/>
-
-      <!--Actions-->
-      <div id="formActions" class="row full-width q-mb-md">
-        <!-- Button login -->
-        <q-btn :loading="loading" type="submit" color="primary" class="full-width" rounded unelevated no-caps>
-          {{ $tr('iprofile.cms.form.emailLogin') }}
-          <template v-slot:loading>
-            <q-spinner-oval/>
-          </template>
-        </q-btn>
-      </div>
-    </q-form>
+        <!-- Email field -->
+        <dynamic-field class="col-12" v-model="email" :field="emailConfig"/>
 
+        <!--Actions-->
+        <div id="formActions" class="row full-width q-mb-md">
+          <!-- Button login -->
+          <q-btn :loading="loading" type="submit" color="primary" class="full-width" rounded unelevated no-caps>
+            {{ $tr('iprofile.cms.form.emailLogin') }}
+            <template v-slot:loading>
+              <q-spinner-oval/>
+            </template>
+          </q-btn>
+        </div>
+      </q-form>
+    </div>
   </div>
 </template>
 <script>
@@ -38,7 +60,9 @@ export default {
   data() {
     return {
       loading: false,
-      email: ''
+      email: '',
+      sentEmailLabel: '',
+      sent: false, 
     }
   },
   computed: {
@@ -57,7 +81,13 @@ export default {
     }
   },
   methods: {
-    init() {},
+    init() {
+      this.loading = false
+      this.email = ''
+      this.sentEmailLabel = false
+      this.sent = false
+    },
+
     //Get data
     authenticate() {
       this.loading = true;
@@ -71,22 +101,10 @@ export default {
       }
 
       this.$crud.post('apiRoutes.quser.validateEmail', requestParams).then(response => {
-        this.$alert.info({
-          mode: 'modal',
-          message: `<div class="text-justify">${this.$tr('iprofile.cms.form.sendEmailToVerify', { email: this.email })}</div>`,
-          actions: [
-            {
-              label: this.$tr('isite.cms.label.accept'),
-              color: 'green',
-              handler: () => {
-                this.email = '';
-                this.loading = false;
-              }
-            }
-          ]
-        })
+        this.sentEmailLabel = this.$tr('iprofile.cms.form.sendEmailToVerify', { email: this.email })
+        this.sent = true
+        this.loading = false
       }).catch(error => this.$alert.error({ message: error }))
-
     }
   }
 }