@sowell/quasar-app-extension-auth 0.3.4 → 0.3.7

package/src/components/pages/ResetPassword.vue

@@ -40,7 +40,7 @@
               class="full-width q-mb-md"
             >
               <template #prepend>
-                <q-icon :name="ionLockClosedOutline" />
+                <q-icon :name="icons.ionLockClosedOutline" />
               </template>
             </q-input>
           </div>
@@ -60,7 +60,10 @@
         </q-form>
       </div>
       <q-dialog v-model="passwordUpdated" persistent>
-        <sowell-message :passwordUpdated="passwordUpdated" @goToLoginPage="goToLoginPage"/>
+        <sowell-message
+          :passwordUpdated="passwordUpdated"
+          @goToLoginPage="goToLoginPage"
+        />
       </q-dialog>
     </q-page>
   </q-layout>
@@ -68,210 +71,36 @@
 
 <script lang="ts">
 //@ts-ignore
-import { computed, defineComponent, ref, Ref, onMounted } from "vue";
+import { defineComponent } from "vue";
 import SowellMessage from "../dialogs/Message.vue";
-import { useQuasar } from "quasar";
-import { useI18n } from "vue-i18n";
-import { $api, $prompts, $router } from "../../injects";
-import jwt from 'jwt-decode'
-import { Buffer } from 'buffer/' // NOTE: the trailing '/' is intentional and required by buffer
-import {
-  ionLockClosedOutline,
-  ionCloseOutline,
-  ionAlertCircleOutline
-} from "@quasar/extras/ionicons-v5";
-
-interface DecodedToken { // FIXME: consider to move to its own file
-  sub: number,
-  email: string,
-  token: string
-}
+import { useResetPassword } from "composables/resetPassword";
 
 export default defineComponent({
   name: "ResetPassword",
   components: { SowellMessage },
   setup() {
-    const { patch, post } = $api();
     const {
-      AUTH_SERVER_SIGNING_ROUTE,
-      AUTH_SERVER_UPDATE_PASSWORD_ROUTE,
+      password,
+      loading,
+      passwordUpdated,
+      validations,
       LOCAL_LOGIN_ROUTE,
-    } = $prompts();
-    const $q = useQuasar();
-    const router = $router()
-    const $route = router.currentRoute.value
-    const password = ref("");
-    const loading = ref(false);
-    const passwordUpdated = ref(false)
-    const { t } = useI18n();
-
-    const token = ref("")
-
-    const decodedToken = computed(() => {
-      if (!token.value) return null
-      return jwt(token.value) as DecodedToken
-    }) as Ref<DecodedToken | null>
-
-    const canSubmit = computed(() => {
-      return decodedToken.value !== null && password.value.length >= 6
-    });
-
-    const validations = {
-      passwordRules: [
-        (val: string) => !!val || t("auth.passwordPresenceError"),
-        (val: string) => val.length >= 6 || t("auth.passwordLengthError")
-      ],
-      passwordConfirmationRules: [
-        (val: string) =>
-          val === password.value || t("auth.newPasswordConfirmationFailed"),
-        (val: string) => !!val || t("auth.passwordPresenceError"),
-        (val: string) => val.length >= 6 || t("auth.passwordLengthError"),
-      ],
-    };
-
-    const decodeKey = (key: string) => {
-      try {
-        // remove backslash to avoid decoding error
-        key = key.replace(/\\n/g, '')
-        const decodedKey = Buffer.from(key, 'base64').toString('utf-8').split(',')
-        // split instead of JSON.parse as JSON.parse doesn't work
-
-        if (decodedKey.length !== 2) {
-          throw 'Invalid encoded key'
-        }
-
-        const email = decodedKey[0].replace('{', '').split(':')[1]
-        const tmpToken = decodedKey[1].replace('}', '').split(':')[1]
-        return {
-          decoded: true,
-          email,
-          tmpToken
-        }
-      } catch (err) {
-        console.log('decodeKey err', err)
-        return {
-          decoded: false
-        }
-      }
-    }
-
-    const onSubmit = () => {
-      const updatePasswordPayload = {
-        data: {
-          type: "users",
-          id: decodedToken.value.sub,
-          attributes:
-          {
-            password: password.value
-          }
-        }
-      }
-      const updatePasswordHeaders = {
-        headers: {
-          'Authorization': `Bearer ${token.value}`
-        }
-      }
-
-      patch(
-        AUTH_SERVER_UPDATE_PASSWORD_ROUTE.replace(':userId', String(decodedToken.value.sub)),
-        updatePasswordPayload,
-        updatePasswordHeaders
-      ).then(() => {
-        passwordUpdated.value = true;
-      }).catch(() => {
-          $q.notify({
-            message: t("auth.passwordRecoveryFailed"),
-            color: "negative",
-            icon:ionAlertCircleOutline,
-            position: "top",
-            actions: [
-              {
-                color: "white",
-                icon: ionCloseOutline,
-              },
-            ],
-          });
-        });
-    };
-
-    const goToLoginPage = () => {
-      router.push(LOCAL_LOGIN_ROUTE);
-    }
-    
-    onMounted(() => {
-      let key = $route.query.key as string
-      const { decoded, email, tmpToken } = decodeKey(key)
-
-      if (!decoded) {
-        return $q.notify({
-          message: t("auth.passwordRecoveryInvalidLink"),
-          color: "negative",
-          position: "top",
-          icon: ionAlertCircleOutline,
-          actions: [
-            {
-              color: "white",
-              icon: ionCloseOutline,
-            },
-          ],
-        })
-      }
-
-      const tmpAuthPayload = {
-        auth: { 
-          email: email, 
-          token: tmpToken
-        }
-      }
-
-      post(AUTH_SERVER_SIGNING_ROUTE, tmpAuthPayload)
-        .then((response) => {
-          token.value = response.data.jwt
-          if (!token.value) throw 'Error reading the temporary token'
-        })
-        .catch((error) => {
-          if (error.response) {
-            // Request made and server responded
-            if (error.response.status === 404) {
-              return $q.notify({
-                message: t("auth.passwordRecoveryExpiredLink"),
-                color: "negative",
-                icon: ionAlertCircleOutline,
-                position: "top",
-                actions: [
-                  {
-                    color: "white",
-                    icon: ionCloseOutline,
-                  },
-                ],
-              });
-            }
-          }
-          return $q.notify({
-            message: t("auth.passwordRecoveryFailed"),
-            color: "negative",
-            position: "top",
-            icon: ionAlertCircleOutline,
-            actions: [
-              {
-                color: "white",
-                icon: ionCloseOutline,
-              },
-            ],
-          });
-        });
-    })
+      canSubmit,
+      onSubmit,
+      goToLoginPage,
+      icons,
+    } = useResetPassword();
 
     return {
       password,
-      validations,
       loading,
-      onSubmit,
       canSubmit,
       passwordUpdated,
       LOCAL_LOGIN_ROUTE,
-      ionLockClosedOutline,
-      goToLoginPage
+      validations,
+      onSubmit,
+      goToLoginPage,
+      icons
     };
   },
 });

package/src/components/pages/WebAuth.vue

@@ -1,67 +1,89 @@
 <template>
   <q-layout>
     <div class="row window-height">
-      <div class="column col content-center justify-center">
-        <div style="max-width:500px">
-          <h4 class="title">{{ $t('auth.title') }}</h4>
-          <div class="subtitle">{{ $t('auth.subtitle') }}</div>
-          <q-form @submit="onSubmit">
-            <div>
-              <div
-                class="q-ml-xs q-mb-xs text-subtitle2 text-weight-bold"
-              >
-                {{ $t('auth.email') }}
+      <div class="col column content-center bgWhite">
+        <div class="q-mt-xl">
+          <img
+            src="../../assets/Sowell-logo.svg"
+            style="width: 210px"
+            class="logoWhite"
+          />
+        </div>
+        <div class="column col content-center justify-center bgWhite">
+          <div style="max-width: 500px">
+            <h4 class="title">{{ WELCOME_TITLE }}</h4>
+            <div class="subtitle">{{ WELCOME_SUBTITLE }}</div>
+            <q-form @submit="onSubmit">
+              <div>
+                <div class="q-ml-xs q-mb-xs text-subtitle2 text-weight-bold">
+                  {{ $t("auth.email") }}
+                </div>
+                <q-input
+                  v-model.trim="email"
+                  type="email"
+                  :rules="validations['email']"
+                  lazy-rules
+                  dense
+                  outlined
+                  input-class="text-subtitle2 text-weight-medium"
+                />
+                <div class="q-ml-xs q-mb-xs text-subtitle2 text-weight-bold">
+                  {{ $t("auth.password") }}
+                </div>
+                <q-input
+                  v-model="password"
+                  :type="showPassword ? 'text' : 'password'"
+                  :rules="validations['password']"
+                  lazy-rules
+                  dense
+                  outlined
+                  input-class="text-subtitle2 text-weight-bold"
+                >
+                  <template #append>
+                    <q-icon
+                      :name="
+                        showPassword ? icons.ionEyeSharp : icons.ionEyeOffSharp
+                      "
+                      class="cursor-pointer q-mr-sm lightenDark"
+                      @click="showPassword = !showPassword"
+                    />
+                  </template>
+                </q-input>
               </div>
-              <q-input
-                v-model.trim="email"
-                type="email"
-                outlined
-                :rules="validations['email']"
-                lazy-rules
-                dense
-                input-class="text-subtitle2 text-weight-medium"
-              />
-              <div
-                class="q-ml-xs q-mb-xs text-subtitle2 text-weight-bold"
-              >
-                {{ $t('auth.password') }}
+              <div class="row justify-between items-center">
+                <q-btn
+                  :label="$t('auth.login')"
+                  color="primary"
+                  no-caps
+                  unelevated
+                  text-color="white"
+                  :loading="loading"
+                  type="submit"
+                  :disable="isSubmitBtnDisabled()"
+                  class="submitBtn text-subtitle2 text-weight-bold"
+                />
+                <div
+                  class="cursor-pointer text-primary text-subtitle2"
+                  @click="forgottenPassword = true"
+                >
+                  {{ $t("auth.forgottenPassword") }}
+                </div>
               </div>
-              <q-input
-                v-model="password"
-                :type="showPassword ? 'text' : 'password'"
-                :rules="validations['password']"
-                lazy-rules
-                outlined
-                dense
-                input-class="text-subtitle2 text-weight-bold"
-              >
-                <template #append>
-                  <q-icon
-                    :name="showPassword ? ionEyeOutline : ionEyeOffOutline"
-                    class="cursor-pointer q-mr-sm"
-                    @click="showPassword = !showPassword"
-                  />
-                </template>
-              </q-input>
-            </div>
-            <div class="row justify-between items-center">
-              <q-btn
-                :label="$t('auth.login')"
-                color="primary"
-                no-caps
-                unelevated
-                text-color="white"
-                :loading="loading"
-                type="submit"
-                :disable="submitBtnDisabled"
-              />
-              <div class="cursor-pointer" @click="forgottenPassword = true">{{ $t('auth.forgottenPassword') }}</div>
-            </div>
-          </q-form>
+            </q-form>
+          </div>
         </div>
       </div>
-      <div class="column col bgBlue justify-center content-center">
-        <img src="../../assets/SowellWhite.svg" class="logoWhite"/>
+      <div
+        class="column col justify-center content-center"
+        :style="isManager ? 'background: #eef8fd' : ''"
+        :class="!isManager ? 'bgBlue' : ''"
+      >
+        <img
+          v-if="isManager"
+          src="../../assets/illustration-login.svg"
+          style="width: 600px"
+        />
+        <img v-else src="../../assets/SowellWhite.svg" class="logoWhite" />
       </div>
     </div>
     <div>
@@ -73,14 +95,13 @@
         transition-hide="fade"
         persistent
       >
-        <send-email @resetPassword="resetPassword" />
+        <web-send-email @resetPassword="resetPassword" />
       </q-dialog>
-      <q-dialog v-model="isReset" persistent>
-        <sowell-message
-          :emailResetPassword="emailResetPassword"
-          :sendEmailSuccess="sendEmailSuccess"
-          :loading="loading"
-          @retypeEmail="retypeEmail"
+      <q-dialog v-model="isNotification" persistent>
+        <sw-info-dialog
+          :title="infoDialog.title"
+          :content="infoDialog.content"
+          :image="infoDialog.image"
         />
       </q-dialog>
     </div>
@@ -89,203 +110,132 @@
 
 <script lang="ts">
 import isEmail from "validator/es/lib/isEmail";
-import { defineComponent, ref, onMounted, computed } from "vue";
-import { $api, $prompts, $router, $store } from "../../injects";
-import { useQuasar } from "quasar";
+import { defineComponent, ref, computed } from "vue";
+import { useAuthState } from "../../injects";
 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";
-import {
-  ionMailOutline,
-  ionLockClosedOutline,
-  ionEyeOutline,
-  ionEyeOffOutline,
-  ionAlertCircleOutline,
-  ionCloseOutline
-} from "@quasar/extras/ionicons-v5";
+import SwInfoDialog from "../dialogs/sw-info-dialog.vue";
+import WebSendEmail from "../dialogs/WebSendEmail.vue";
+
+import { useAuth } from "composables/auth";
 
 interface HeadersInterface {
   headers: {
-    "x-requested-roles"?: string
-  }
+    "x-requested-roles"?: string;
+  };
 }
 export default defineComponent({
-  name: 'Auth',
-  components: { SendEmail, SowellMessage },
+  name: "Auth",
+  components: { WebSendEmail, SwInfoDialog },
   setup() {
-    const {
-      "@sowell/auth": { X_REQUESTED_ROLES },
-    } = prompts;
-    const email = ref("");
-    const password = ref("");
-    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();
-    const { dispatch, getters } = $store();
     const { t } = useI18n();
+    const authState = useAuthState();
 
-    onMounted(() => {
-      if (getters["token/getRaw"]) {
-        replace(LOCAL_SUCCESS_REDIRECTION_ROUTE);
-      }
-    });
+    const {
+      email,
+      password,
+      loading,
+      showPassword,
+      validations,
+      forgottenPassword,
+      emailResetPassword,
+      WELCOME_TITLE,
+      WELCOME_SUBTITLE,
+      X_REQUESTED_ROLES,
+      APP_SERVER_BASE_URL,
+      onSubmit,
+      retypeEmail,
+      isSubmitBtnDisabled,
+      icons,
+    } = useAuth();
 
-    const validations = ref({
-      email: [
-        (val: string) => !!val || t("auth.emailPresenceError"),
-        (val: string) => isEmail(val.trim()) || t("auth.emailValidationError"),
-      ],
-      password: [(val: string) => !!val || t("auth.passwordPresenceError")],
+    const isNotification = ref(false);
+    const infoDialog = ref({
+      title: "",
+      content: "",
+      image: "",
     });
 
-    const resetPassword = (email: string) => {
+    const submitBtnDisabled = computed(
+      () =>
+        !(
+          email.value &&
+          isEmail(email.value) &&
+          password.value &&
+          password.value.length > 5
+        ),
+    );
+    const isManager = computed(() => X_REQUESTED_ROLES === "clean_manager");
+    const resetPassword = async (email: string) => {
       const data = {
         auth: {
           email,
           base: APP_SERVER_BASE_URL,
         },
       };
-
-
-      post(AUTH_SERVER_RESET_PASSWORD_ROUTE, data)
-        .then(() => {
-          forgottenPassword.value = false;
-          isReset.value = true;
-          sendEmailSuccess.value = true;
-        })
-        .catch(() => {
-          isReset.value = true;
-        });
-    };
-
-    const retypeEmail = () => {
-      forgottenPassword.value = true
-    }
-
-    const onSubmit = () => {
-      loading.value = true;
-      const data = {
-        auth: {
-          email: email.value,
-          password: password.value,
-        },
-      };
-      const options: HeadersInterface = {
-        headers:{}
-      };
-      // @ts-ignore
-      let requestedRoles = window.Cypress ? window.Cypress.requestedRoles : X_REQUESTED_ROLES;
-      if (requestedRoles) options.headers["x-requested-roles"] = requestedRoles;
-
-      post(AUTH_SERVER_SIGNING_ROUTE, data, options)
-        .then((response: AxiosResponse) => {
-          const token = response.data.jwt;
-          dispatch("token/updateRaw", token);
-          push(LOCAL_SUCCESS_REDIRECTION_ROUTE);
-        })
-        .catch((error: AxiosError) => {
-          loading.value = false;
-          switch (error.response?.status) {
-            case 403:
-              $q.notify({
-                message: t("auth.403"),
-                color: "negative",
-                icon: ionAlertCircleOutline,
-                position: "top",
-                actions: [
-                  {
-                    color: "white",
-                    icon: ionCloseOutline,
-                  },
-                ],
-              });
-              break;
-            case 404:
-              $q.notify({
-                message: t("auth.404"),
-                color: "negative",
-                icon: ionAlertCircleOutline,
-                position: "top",
-                actions: [
-                  {
-                    color: "white",
-                    icon: ionCloseOutline,
-                  },
-                ],
-              });
-              break;
-            default:
-              $q.notify({
-                message: t("auth.loginFailed"),
-                color: "negative",
-                icon: ionAlertCircleOutline,
-                position: "top",
-                actions: [
-                  {
-                    color: "white",
-                    icon: ionCloseOutline,
-                  },
-                ],
-              });
-          }
-        });
+      try {
+        await authState.resetPassword(data);
+        forgottenPassword.value = false;
+        infoDialog.value = {
+          title: t("auth.mailVerificationTitle"),
+          content: t("auth.mailVerificationSubtitle"),
+          image: "emailVerification",
+        };
+        forgottenPassword.value = false;
+        isNotification.value = true;
+      } catch {
+        infoDialog.value = {
+          title: t("auth.userNotFoundTitle"),
+          content: t("auth.userNotFoundSubtitle"),
+          image: "userNotFound",
+        };
+        isNotification.value = true;
+      }
     };
 
-    const submitBtnDisabled = computed(() => !(
-        email.value &&
-        isEmail(email.value) &&
-        password.value &&
-        password.value.length > 5
-      )
-    )
     return {
       email,
+      infoDialog,
       password,
       loading,
       showPassword,
       validations,
       submitBtnDisabled,
-      onSubmit,
       forgottenPassword,
       emailResetPassword,
+      isNotification,
+      isManager,
+      WELCOME_SUBTITLE,
+      WELCOME_TITLE,
+      isSubmitBtnDisabled,
       resetPassword,
-      isReset,
       retypeEmail,
-      sendEmailSuccess,
-      ionMailOutline,
-      ionLockClosedOutline,
-      ionEyeOutline,
-      ionEyeOffOutline,
-    }
+      onSubmit,
+      icons,
+    };
   },
-})
+});
 </script>
 
 <style scoped>
+.bgWhite {
+  background: #ffffff;
+}
 .bgBlue {
   background: var(--q-primary);
 }
+.lightenDark {
+  color: rgba(0, 0, 0, 0.24);
+}
 .title {
   margin: 0px 0px 16px 0px;
 }
 .subtitle {
-  margin-bottom: 104px
+  margin-bottom: 80px;
 }
 .logoWhite {
-  width: 30%
+  width: 30%;
+}
+.submitBtn {
+  width: 254px;
 }
 </style>