@sowell/quasar-app-extension-auth 0.5.1 → 1.0.0

package/src/components/pages/Auth.vue

@@ -7,24 +7,20 @@
             <img
               src="../../assets/Logo.svg"
               class="q-mb-sm q-mr-md"
-              style="width: 27px; height: 47px"
-            />
+              style="width: 27px; height: 47px" />
             <img
               src="../../assets/Sowell.svg"
               class="q-mb-sm"
-              style="width: 146px; height: 38px"
-            />
+              style="width: 146px; height: 38px" />
           </div>
           <div
             class="text-subtitle1 text-center head q-mt-xl"
-            style="font-weight: 600; font-size: 34px"
-          >
+            style="font-weight: 600; font-size: 34px">
             {{ $t("auth.title") }}
           </div>
           <div
             class="q-mt-lg q-mb-xl text-subtitle1 text-center"
-            style="font-size: 16px"
-          >
+            style="font-size: 16px">
             {{ $t("auth.loginHelp") }}
           </div>
         </div>
@@ -32,8 +28,7 @@
           <div>
             <div
               class="q-ml-xs q-mb-xs"
-              style="font-size: 14px; font-weight: 600"
-            >
+              style="font-size: 14px; font-weight: 600">
               {{ $t("auth.email") }}
             </div>
             <q-input
@@ -44,8 +39,7 @@
               :rules="validations['email']"
               lazy-rules
               dense
-              :input-style="{ fontSize: '14px', fontWeight: '500' }"
-            >
+              :input-style="{ fontSize: '14px', fontWeight: '500' }">
               <template #prepend>
                 <q-icon :name="icons.ionMailOutline" />
               </template>
@@ -54,8 +48,7 @@
           <div>
             <div
               class="q-ml-xs q-mb-xs"
-              style="font-size: 14px; font-weight: 600"
-            >
+              style="font-size: 14px; font-weight: 600">
               {{ $t("auth.password") }}
             </div>
             <q-input
@@ -66,19 +59,16 @@
               lazy-rules
               borderless
               dense
-              :input-style="{ fontSize: '14px', fontWeight: '600' }"
-            >
+              :input-style="{ fontSize: '14px', fontWeight: '600' }">
               <template #prepend>
                 <q-icon :name="icons.ionLockClosedOutline" />
               </template>
               <template #append>
                 <q-icon
-                  :name="
-                    showPassword ? icons.ionEyeOffOutline : icons.ionEyeOutline
-                  "
+                  :name="showPassword ? icons.ionEyeOffOutline : icons.ionEyeOutline
+              "
                   class="cursor-pointer q-mr-sm"
-                  @click="showPassword = !showPassword"
-                />
+                  @click="showPassword = !showPassword" />
               </template>
             </q-input>
           </div>
@@ -92,15 +82,13 @@
             :loading="loading"
             type="submit"
             class="full-width q-mt-lg"
-            :disable="isSubmitBtnDisabled() || loading || msalLoading"
-          />
+            :disable="isSubmitBtnDisabled() || loading || msalLoading" />
           <div
             class="q-mb-lg q-mt-xl text-primary"
             @click="forgottenPassword = true"
             data-cy="forgot-password"
             data-testid="ask-password-change-btn"
-            style="font-size: 16px; font-weight: 500; cursor: pointer"
-          >
+            style="font-size: 16px; font-weight: 500; cursor: pointer">
             {{ $t("auth.forgottenPassword") }}
           </div>
           <div v-if="USE_SSO">
@@ -109,15 +97,12 @@
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
-              "
-            >
+              ">
               <div
-                style="width: 35%; border: 1px solid #bcc3c7; height: 1px"
-              ></div>
+                style="width: 35%; border: 1px solid #bcc3c7; height: 1px"></div>
               <div class="text-weight-bold">{{ $t("common.or") }}</div>
               <div
-                style="width: 35%; border: 1px solid #bcc3c7; height: 1px"
-              ></div>
+                style="width: 35%; border: 1px solid #bcc3c7; height: 1px"></div>
             </div>
             <q-btn
               data-cy="submit-sso-login"
@@ -131,8 +116,7 @@
               :icon="`img:${MicrosoftLogo}`"
               class="full-width q-mt-lg"
               @click="msalAuth"
-              outline
-            />
+              outline />
           </div>
         </q-form>
       </div>
@@ -144,17 +128,16 @@
           transition-show="fade"
           transition-hide="fade"
           persistent
-          data-testid="ask-password-change-modal"
-        >
-          <send-email @resetPassword="resetPassword" />
+          data-testid="ask-password-change-modal">
+          <send-email @resetPassword="resetPassword" @close="() => forgottenPassword = false" />
         </q-dialog>
         <q-dialog v-model="isReset" persistent>
           <sowell-message
             :emailResetPassword="emailResetPassword"
             :sendEmailSuccess="sendEmailSuccess"
             :loading="loading"
-            @retypeEmail="retypeEmail"
-          />
+            @retypeEmail="retypeEmail" 
+            @close="() => isReset= false"/>
         </q-dialog>
       </div>
     </div>
@@ -171,12 +154,20 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, onMounted } from "vue";
-import * as packageInfo from "app/package.json";
-import SendEmail from "../dialogs/SendEmail.vue";
-import SowellMessage from "../dialogs/Message.vue";
-import { useAuth } from "composables/auth";
-import MicrosoftLogo from "../../assets/logo-microsoft.svg";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+import { defineComponent, reactive, onMounted } from "vue"
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+import * as packageInfo from "app/package.json"
+
+import SendEmail from "../dialogs/SendEmail.vue"
+import SowellMessage from "../dialogs/Message.vue"
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+import MicrosoftLogo from "../../assets/logo-microsoft.svg"
+
+import { useAuth } from "composables/auth"
 
 export default defineComponent({
   name: "Auth",
@@ -195,43 +186,43 @@ export default defineComponent({
       sendEmailSuccess,
       authState,
       APP_SERVER_BASE_URL,
+      icons,
+      USE_SSO,
       onSubmit,
       retypeEmail,
       isSubmitBtnDisabled,
-      icons,
-      USE_SSO,
-      msalAuth,
-    } = useAuth();
+      msalAuth
+    } = useAuth()
 
     const appVersion = reactive({
-      versionNumber: "",
-    });
+      versionNumber: ""
+    })
     const resetPassword = async (email: string) => {
       const data = {
         auth: {
           email,
-          base: APP_SERVER_BASE_URL,
-        },
-      };
+          base: APP_SERVER_BASE_URL
+        }
+      }
       try {
-        forgottenPassword.value = false;
+        forgottenPassword.value = false
         await authState.resetPassword(data).then(() => {
-          sendEmailSuccess.value = true;
-          isReset.value = true;
-        });
+          sendEmailSuccess.value = true
+          isReset.value = true
+        })
       } catch {
-        sendEmailSuccess.value = false;
-        isReset.value = true;
+        sendEmailSuccess.value = false
+        isReset.value = true
       }
-    };
+    }
 
     const handleSubmit = () => {
-      onSubmit("SoWell");
-    };
+      onSubmit("SoWell")
+    }
 
     onMounted(() => {
-      appVersion.versionNumber = packageInfo.version;
-    });
+      appVersion.versionNumber = packageInfo.version
+    })
 
     return {
       email,
@@ -244,19 +235,19 @@ export default defineComponent({
       emailResetPassword,
       isReset,
       sendEmailSuccess,
-      onSubmit,
-      resetPassword,
-      isSubmitBtnDisabled,
-      retypeEmail,
       icons,
       appVersion,
       USE_SSO,
+      MicrosoftLogo,
+      onSubmit,
+      isSubmitBtnDisabled,
+      retypeEmail,
       msalAuth,
       handleSubmit,
-      MicrosoftLogo,
-    };
-  },
-});
+      resetPassword
+    }
+  }
+})
 </script>
 
 <style scoped>
@@ -264,4 +255,3 @@ export default defineComponent({
   background: transparent;
 }
 </style>
-

package/src/components/pages/AuthReporter.vue

@@ -16,7 +16,7 @@
             />
           </div>
         </div>
-        <div class="">
+        <div class="login-page">
           <q-form @submit="handleSubmit">
             <div>
               <div
@@ -119,7 +119,7 @@
           persistent
           data-testid="ask-password-change-modal"
         >
-          <send-email @resetPassword="resetPassword" />
+          <send-email @resetPassword="resetPassword" @close="() => forgottenPassword = false" />
         </q-dialog>
         <q-dialog v-model="isReset" persistent>
           <sowell-message
@@ -127,9 +127,11 @@
             :sendEmailSuccess="sendEmailSuccess"
             :loading="loading"
             @retypeEmail="retypeEmail"
+            @close="() => isReset = false"
           >
             <q-btn
               v-if="sendEmailSuccess && isOtp"
+              data-testid="next-btn"
               class="q-mt-md full-width"
               unelevated
               style="background: #fff"
@@ -157,11 +159,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, onMounted, computed } from "vue";
-import * as packageInfo from "app/package.json";
-import SendEmail from "../dialogs/SendEmail.vue";
-import SowellMessage from "../dialogs/Message.vue";
-import { useAuth } from "composables/auth";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+import { defineComponent, reactive, onMounted, computed } from "vue"
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+import * as packageInfo from "app/package.json"
+import SendEmail from "../dialogs/SendEmail.vue"
+import SowellMessage from "../dialogs/Message.vue"
+import { useAuth } from "composables/auth"
 
 export default defineComponent({
   name: "Auth",
@@ -182,46 +188,46 @@ export default defineComponent({
       authState,
       APP_SERVER_BASE_URL,
       IS_OTP,
+      icons,
       onSubmit,
       retypeEmail,
       isSubmitBtnDisabled,
-      goToOtpValidation,
-      icons,
-    } = useAuth();
+      goToOtpValidation
+    } = useAuth()
 
     const handleSubmit = () => {
-      onSubmit();
-    };
+      onSubmit()
+    }
 
     const appVersion = reactive({
-      versionNumber: "",
-    });
+      versionNumber: ""
+    })
 
-    const isOtp = computed(() => IS_OTP.toLowerCase() === "y");
+    const isOtp = computed(() => IS_OTP.toLowerCase() === "y")
 
     const resetPassword = async (email: string) => {
       const data = {
         auth: {
           email,
-          base: APP_SERVER_BASE_URL,
+          base: APP_SERVER_BASE_URL
         },
-      };
+      }
       try {
-        forgottenPassword.value = false;
+        forgottenPassword.value = false
         await authState.resetPassword(data).then(() => {
-          localStorage.setItem("emailResetPassword", email);
-          sendEmailSuccess.value = true;
-          isReset.value = true;
-        });
+          localStorage.setItem("emailResetPassword", email)
+          sendEmailSuccess.value = true
+          isReset.value = true
+        })
       } catch {
-        sendEmailSuccess.value = false;
-        isReset.value = true;
+        sendEmailSuccess.value = false
+        isReset.value = true
       }
     };
 
     onMounted(() => {
-      appVersion.versionNumber = packageInfo.version;
-    });
+      appVersion.versionNumber = packageInfo.version
+    })
 
     return {
       email,
@@ -235,17 +241,17 @@ export default defineComponent({
       emailResetPassword,
       isReset,
       sendEmailSuccess,
-      handleSubmit,
-      resetPassword,
-      goToOtpValidation,
-      isSubmitBtnDisabled,
-      retypeEmail,
       icons,
       appVersion,
       isOtp,
-    };
-  },
-});
+      goToOtpValidation,
+      isSubmitBtnDisabled,
+      retypeEmail,
+      handleSubmit,
+      resetPassword
+    }
+  }
+})
 </script>
 
 <style>
@@ -258,7 +264,7 @@ export default defineComponent({
   background: #fce4e3;
 }
 
-div.q-field__messages {
+.login-page .q-field__messages {
   display: none;
 }
 </style>

package/src/components/pages/OtpValidation.vue

@@ -56,7 +56,7 @@
                 no-caps
                 class="submitBtn"
                 data-cy="send-new-otp"
-                :disable="canSubmit"
+                :disable="!canSubmit"
               />
               <q-btn
                 data-testid="back-btn"
@@ -75,70 +75,73 @@
 </template>
 
 <script lang="ts">
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 //@ts-ignore
-import { defineComponent, ref, computed } from "vue";
-import { $router, $prompts, $api } from "../../injects";
-import { useQuasar } from "quasar";
-import { useI18n } from "vue-i18n";
-import jwt from "jwt-decode";
-
+import { defineComponent, ref, computed } from "vue"
+import { useQuasar } from "quasar"
+import { useI18n } from "vue-i18n"
+import jwt from "jwt-decode"
 import {
   ionCloseOutline,
   ionAlertCircleOutline,
-} from "@quasar/extras/ionicons-v5";
+} from "@quasar/extras/ionicons-v5"
+
+import { $router, $prompts, $api } from "../../injects"
+
 
 interface DecodedToken {
-  uid: string;
-  cid: string;
-  exp: number;
+  uid: string
+  cid: string
+  exp: number
 }
 
 export default defineComponent({
   name: "ResetPassword",
   components: {},
   setup() {
-    const { t } = useI18n();
-    const router = $router();
-    const $q = useQuasar();
-    const { post } = $api();
+    const { t } = useI18n()
+    const router = $router()
+    const $q = useQuasar()
+    const { post } = $api()
     const {
       LOCAL_LOGIN_ROUTE,
       AUTH_SERVER_VERIFY_OTP,
       LOCAL_UPDATE_PASSWORD_ROUTE,
       UI_PAGE,
-    } = $prompts();
+    } = $prompts()
 
-    const otp = ref("");
-    const loading = ref(false);
+    const otp = ref("")
+    const loading = ref(false)
 
-    const isReporterUi = computed(() => UI_PAGE === "reporter");
+    const isReporterUi = computed(() => UI_PAGE === "reporter")
 
     const onSubmit = () => {
-      if (canSubmit && localStorage.getItem("emailResetPassword")) {
+      if (canSubmit.value && localStorage.getItem("emailResetPassword")) {
+        loading.value = true
         const data = {
           auth: {
             email: localStorage.getItem("emailResetPassword"),
-            password: otp.value,
-          },
-        };
+            password: otp.value.trim()
+          }
+        }
         post(AUTH_SERVER_VERIFY_OTP, data)
           .then((response) => {
             if (response.data.auth) {
-              let decoded = jwt(response.data.auth) as DecodedToken;
+              let decoded = jwt(response.data.auth) as DecodedToken
               if (decoded) {
                 localStorage.setItem(
                   "userInfos",
                   JSON.stringify({
                     uid: decoded.uid,
-                    token: response.data.auth,
+                    token: response.data.auth
                   })
-                );
-                router.push(LOCAL_UPDATE_PASSWORD_ROUTE);
+                )
+                router.push(LOCAL_UPDATE_PASSWORD_ROUTE)
               }
             }
           })
           .catch((error) => {
-            console.log("error", error);
+            console.log("error", error)
             $q.notify({
               message: t("auth.passwordRecoveryFailed"),
               color: "negative",
@@ -147,17 +150,19 @@ export default defineComponent({
               actions: [
                 {
                   color: "white",
-                  icon: ionCloseOutline,
-                },
-              ],
-            });
-          });
+                  icon: ionCloseOutline
+                }
+              ]
+            })
+          }).finaly(() => {
+            loading.value = false
+          })
       }
-    };
+    }
 
     const canSubmit = computed(() => {
-      return !otp.value.length;
-    });
+      return otp.value.length > 0
+    })
 
     return {
       otp,
@@ -165,11 +170,11 @@ export default defineComponent({
       router,
       LOCAL_LOGIN_ROUTE,
       isReporterUi,
-      onSubmit,
       canSubmit,
-    };
-  },
-});
+      onSubmit
+    }
+  }
+})
 </script>
 
 <style scoped>

package/src/components/pages/ResetPassword.vue

@@ -69,6 +69,7 @@
         <sowell-message
           :passwordUpdated="passwordUpdated"
           @goToLoginPage="goToLoginPage"
+          @close="() =>  passwordUpdated = false"
         />
       </q-dialog>
     </div>
@@ -76,10 +77,11 @@
 </template>
 
 <script lang="ts">
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 //@ts-ignore
-import { defineComponent } from "vue";
-import SowellMessage from "../dialogs/Message.vue";
-import { useResetPassword } from "composables/resetPassword";
+import { defineComponent } from "vue"
+import SowellMessage from "../dialogs/Message.vue"
+import { useResetPassword } from "composables/resetPassword"
 
 export default defineComponent({
   name: "ResetPassword",
@@ -94,8 +96,8 @@ export default defineComponent({
       canSubmit,
       onSubmit,
       goToLoginPage,
-      icons,
-    } = useResetPassword();
+      icons
+    } = useResetPassword()
 
     return {
       password,
@@ -104,12 +106,12 @@ export default defineComponent({
       passwordUpdated,
       LOCAL_LOGIN_ROUTE,
       validations,
-      onSubmit,
-      goToLoginPage,
       icons,
-    };
-  },
-});
+      onSubmit,
+      goToLoginPage
+    }
+  }
+})
 </script>
 
 <style scoped>