@sowell/quasar-app-extension-auth 0.2.4 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sowell/quasar-app-extension-auth",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "A Quasar app extension to manage Authentication",
   "main": "src/index.js",
   "repository": "https://github.com/sowell-ai/quasar.extension.auth",

package/src/assets/error.svg

@@ -0,0 +1,5 @@
+<svg id="noun_Error_1688921" xmlns="http://www.w3.org/2000/svg" width="63" height="63" viewBox="0 0 63 63">
+  <circle id="Ellipse_90" data-name="Ellipse 90" cx="31.5" cy="31.5" r="31.5" fill="#f2d7d7"/>
+  <path id="Tracé_727" data-name="Tracé 727" d="M14.477,29.163h0A4.078,4.078,0,0,1,10.5,25.186V9.277A4.078,4.078,0,0,1,14.477,5.3h0a4.078,4.078,0,0,1,3.977,3.977V25.186A4.078,4.078,0,0,1,14.477,29.163Z" transform="translate(17.34 8.753)" fill="#ce0101"/>
+  <path id="Tracé_728" data-name="Tracé 728" d="M14.477,23.654h0A4.078,4.078,0,0,1,10.5,19.677h0A4.078,4.078,0,0,1,14.477,15.7h0a4.078,4.078,0,0,1,3.977,3.977h0A4.078,4.078,0,0,1,14.477,23.654Z" transform="translate(17.34 25.927)" fill="#ce0101"/>
+</svg>

package/src/assets/success.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 62 62">
+  <g id="noun_validation_1683882" transform="translate(0.1 -0.4)">
+    <circle id="Ellipse_89" data-name="Ellipse 89" cx="31" cy="31" r="31" transform="translate(-0.1 0.4)" fill="#dff2d6"/>
+    <path id="Tracé_724" data-name="Tracé 724" d="M36.165,13.221a1.189,1.189,0,0,0-1.868.311L21.84,31.906l-8.253-8.253a1.169,1.169,0,0,0-1.868.156,1.667,1.667,0,0,0,.156,2.18l9.5,9.342h0c.156.156.156.156.311.156a.152.152,0,0,1,.156.156c.156,0,.311.156.623.156h0c.156,0,.467,0,.467-.156l.156-.156c.156,0,.156-.156.311-.156h0L36.632,15.713A2.752,2.752,0,0,0,36.165,13.221Z" transform="translate(6.399 6.953)" fill="#3b9843"/>
+  </g>
+</svg>

package/src/boot/router-guards.ts

@@ -12,8 +12,8 @@ export default boot(({ router, store }: BootInterface) => {
     let isValid = store.getters["token/getIsValid"];
     let token = store.getters["token/getRaw"];
     if (
-      !isValid &&
-      !token &&
+      (!isValid ||
+        !token ) &&
       to.path !== LOCAL_LOGIN_ROUTE &&
       to.name !== "update_password"
     ) {

package/src/components/dialogs/Message.vue

@@ -0,0 +1,81 @@
+<template>
+  <q-card style="min-width: 350px; border-radius: 30px">
+    <q-toolbar>
+      <q-space />
+      <q-btn
+        class="q-pt-md"
+        flat
+        dense
+        color="primary"
+        icon="close"
+        v-close-popup
+      />
+    </q-toolbar>
+    <q-card-section class="text-center">
+      <img v-if="sendEmailSuccess" src="../../assets/success.svg" />
+      <img v-else src="../../assets/error.svg" />
+    </q-card-section>
+
+    <q-card-section class="q-pt-none q-pl-lg q-pr-lg">
+      <div
+        class="text-subtitle1 q-mt-sm text-center"
+        style="font-size: 14px; font-weigth: 300; line-height: 20px"
+        data-cy="resetMessage"
+      >
+        {{
+          sendEmailSuccess ? $t("auth.emailSent") : $t("auth.emailNotRecognize")
+        }}
+      </div>
+      <div
+        class="q-mt-sm text-center q-mb-xl"
+        style="font-size: 15px; color: #737676"
+        v-if="sendEmailSuccess"
+      >
+        {{ emailResetPassword }}
+      </div>
+    </q-card-section>
+    <q-card-actions class="q-ml-lg q-mr-lg q-mb-lg">
+      <q-btn
+        v-if="!sendEmailSuccess"
+        data-cy="submit-login"
+        rounded
+        :label="$t('auth.reSend')"
+        color="primary"
+        padding="10px 5px 10px 5px"
+        :loading="loading"
+        no-caps
+        type="submit"
+        @click="reSendEmail"
+        class="full-width"
+      />
+    </q-card-actions>
+  </q-card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    emailResetPassword: {
+      type: String,
+      required: true,
+    },
+    sendEmailSuccess: {
+      type: Boolean,
+      required: true,
+    },
+    loading: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  emit: ["resetPassword"],
+  setup(props: any, { emit }: any) {
+    const reSendEmail = () => {
+      emit("reSendEmail");
+    };
+    return { reSendEmail };
+  },
+});
+</script>

package/src/components/dialogs/SendEmail.vue

@@ -0,0 +1,69 @@
+<template>
+  <q-card style="min-width: 350px; border-radius: 30px">
+    <q-toolbar>
+      <q-space />
+      <q-btn
+        class="q-pt-md"
+        flat
+        dense
+        color="primary"
+        icon="close"
+        v-close-popup
+      />
+    </q-toolbar>
+    <q-card-section>
+      <p
+        class="resetPasswordTitle text-center"
+        style="font-size: 20px; font-weigth: 600"
+      >
+        {{ $t("auth.tapEmail") }}
+      </p>
+    </q-card-section>
+
+    <q-card-section class="q-pt-none q-pl-lg q-pr-lg">
+      <q-input
+        v-model="email"
+        dense
+        outlined
+        data-cy="emailReset"
+        :placeholder="$t('auth.email')"
+        autofocus
+      />
+      <div
+        class="text-subtitle1 q-mt-sm"
+        style="font-size: 13px; font-weigth: 300; line-height: 20px"
+      >
+        {{ $t("auth.resetText") }}
+      </div>
+    </q-card-section>
+
+    <q-card-actions align="center" class="q-ml-lg q-mr-lg q-mb-lg">
+      <q-btn
+        rounded
+        color="primary"
+        data-cy="sendEmails"
+        no-caps
+        :label="$t('common.reset')"
+        class="btn-min full-width"
+        @click="sendEmail"
+        v-close-popup
+      />
+    </q-card-actions>
+  </q-card>
+</template>
+
+<script lang="ts">
+// @ts-ignore
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  emit: ["resetPassword"],
+  setup(props: any, { emit }: any) {
+    const email = ref("");
+    const sendEmail = () => {
+      emit("resetPassword", email.value);
+    };
+    return { sendEmail, email };
+  },
+});
+</script>

package/src/components/pages/Auth.vue

@@ -43,6 +43,7 @@
           <div
             class="q-mb-xl"
             @click="forgottenPassword = true"
+            data-cy="forgot-password"
             style="color: #40c4ff; font-weight: 500; cursor: pointer"
           >
             {{ $t("auth.forgottenPassword") }}
@@ -63,41 +64,15 @@
       </div>
       <div>
         <q-dialog v-model="forgottenPassword" persistent>
-          <q-card style="min-width: 350px">
-            <q-card-section>
-              <p class="resetPasswordTitle">
-                {{ $t("auth.tapEmail") }}
-              </p>
-            </q-card-section>
-
-            <q-card-section class="q-pt-none">
-              <q-input
-                v-model="emailResetPassword"
-                dense
-                rounded
-                outlined
-                :placeholder="$t('auth.email')"
-                autofocus
-              />
-            </q-card-section>
-
-            <q-card-actions align="right">
-              <q-btn
-                outline
-                rounded
-                :label="$t('common.cancel')"
-                class="btn-min"
-                v-close-popup
-              />
-              <q-btn
-                rounded
-                color="primary"
-                :label="$t('common.send')"
-                class="btn-min"
-                @click="resetPassword"
-              />
-            </q-card-actions>
-          </q-card>
+          <send-email @resetPassword="resetPassword" />
+        </q-dialog>
+        <q-dialog v-model="isReset" persistent>
+          <sowell-message
+            :emailResetPassword="emailResetPassword"
+            :sendEmailSuccess="sendEmailSuccess"
+            :loading="loading"
+            @reSendEmail="resetPassword"
+          />
         </q-dialog>
       </div>
     </q-page>
@@ -105,7 +80,6 @@
 </template>
 
 <script lang="ts">
-//import prompts from "app/quasar.extensions.json";
 import isEmail from "validator/es/lib/isEmail";
 import { defineComponent, ref, onMounted } from "vue";
 import { $api, $prompts, $router, $store } from "../../injects";
@@ -113,6 +87,8 @@ import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
 import { AxiosError, AxiosResponse } from "axios";
 import prompts from "app/quasar.extensions.json";
+import SendEmail from "../dialogs/SendEmail.vue";
+import SowellMessage from "../dialogs/Message.vue";
 
 interface HeadersInterface {
   headers: {
@@ -122,6 +98,7 @@ interface HeadersInterface {
 
 export default defineComponent({
   name: "Auth",
+  components: { SendEmail, SowellMessage },
   setup() {
     const {
       "@sowell/auth": { X_REQUESTED_ROLES },
@@ -131,12 +108,15 @@ export default defineComponent({
     const loading = ref(false);
     const showPassword = ref(false);
     const forgottenPassword = ref(false);
+    const isReset = ref(false);
+    const sendEmailSuccess = ref(false);
     const emailResetPassword = ref("");
     const { post } = $api();
     const {
       LOCAL_SUCCESS_REDIRECTION_ROUTE,
       AUTH_SERVER_SIGNING_ROUTE,
       AUTH_SERVER_RESET_PASSWORD_ROUTE,
+      APP_SERVER_BASE_URL,
     } = $prompts();
     const $q = useQuasar();
     const { push, replace } = $router();
@@ -157,26 +137,22 @@ export default defineComponent({
       password: [(val: string) => !!val || t("auth.passwordPresenceError")],
     });
 
-    const resetPassword = () => {
+    const resetPassword = (email: string) => {
       const data = {
-        email: emailResetPassword.value,
+        auth: {
+          email,
+          base: APP_SERVER_BASE_URL,
+        },
       };
 
       post(AUTH_SERVER_RESET_PASSWORD_ROUTE, data)
         .then(() => {
-          $q.notify({
-            message: t("auth.emailSent"),
-            color: "positive",
-            position: "top",
-          });
           forgottenPassword.value = false;
+          isReset.value = true;
+          sendEmailSuccess.value = true;
         })
         .catch(() => {
-          $q.notify({
-            message: t("auth.emailNotRecognize"),
-            color: "negative",
-            position: "top",
-          });
+          isReset.value = true;
         });
     };
 
@@ -251,6 +227,8 @@ export default defineComponent({
       forgottenPassword,
       emailResetPassword,
       resetPassword,
+      isReset,
+      sendEmailSuccess,
     };
   },
 });

package/src/injects/prompts.ts

@@ -1,5 +1,6 @@
 import { inject } from "vue";
 export interface PromptsInterface {
+  APP_SERVER_BASE_URL: string;
   LOCAL_LOGIN_ROUTE: string;
   LOCAL_SUCCESS_REDIRECTION_ROUTE: string;
   LOCAL_CHECK_CODE_ROUTE: string;

package/src/store/index.ts

@@ -50,7 +50,12 @@ const mutations: MutationTree<tokenStateInterface> = {
 const actions: ActionTree<tokenStateInterface, any> = {
   updateRaw({ commit }, value: string) {
     commit("setRaw", value);
-    const parseJwt = JSON.parse(window.atob(value.split(".")[1]));
+    let parseJwt: string
+    try {
+      parseJwt = JSON.parse(window.atob(value.split(".")[1]));
+    } catch (error) {
+      parseJwt = ""
+    }
     commit("setPayload", parseJwt)
   }
 }