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

package/src/components/pages/WebResetPassword.vue

@@ -0,0 +1,128 @@
+<template>
+  <q-layout>
+    <q-page class="q-pa-md row justify-center">
+      <div>
+        <div class="q-mt-xl">
+          <img
+            src="../../assets/Sowell-logo.svg"
+            class="q-mb-sm q-mr-md"
+            style="width: 190px"
+          />
+        </div>
+        <div
+          class="column justify-center full-height"
+          style="max-width: 550px; margin-top: -90px"
+        >
+          <div></div>
+          <div
+            class="text-subtitle1 q-mt-lg"
+            style="font-size: 34px; font-weight: 600; line-height: 34px"
+          >
+            {{ $t("auth.passwordRecovery") }}
+          </div>
+          <div
+            class="text-subtitle1 q-mt-lg q-mb-lg"
+            style="font-size: 16px; font-weight: 400; line-height: 24px"
+          >
+            {{ $t("auth.recommendPassword") }}
+          </div>
+          <q-form class="column form" @submit="onSubmit">
+            <div>
+              <div class="q-mb-sm" style="font-size: 14px; font-weight: 600">
+                {{ $t("auth.newPassword") }}
+              </div>
+              <q-input
+                id="password"
+                v-model="password"
+                data-cy="reset-password"
+                :rules="validations['passwordRules']"
+                outlined
+                :type="showPassword ? 'text' : 'password'"
+                bg-color="white"
+                dense
+                class="full-width q-mb-md"
+              >
+                <template #append>
+                  <q-icon
+                    :name="
+                      showPassword
+                        ? icons.ionEyeOffOutline
+                        : icons.ionEyeOutline
+                    "
+                    class="cursor-pointer q-mr-sm"
+                    @click="showPassword = !showPassword"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <q-space class="mobile" />
+            <div>
+              <q-btn
+                :label="$t('common.register')"
+                color="primary"
+                :loading="loading"
+                type="submit"
+                no-caps
+                class="submitBtn"
+                data-cy="send-new-password"
+                :disable="!canSubmit"
+              />
+            </div>
+          </q-form>
+        </div>
+      </div>
+      <q-dialog v-model="passwordUpdated" persistent>
+        <sw-info-dialog
+          :title="$t('auth.passwordChanged')"
+          :content="$t('auth.passwordUpdated')"
+          :image="'passwordUpdated'"
+          :passwordUpdated="passwordUpdated"
+          @goToLoginPage="goToLoginPage"
+        />
+      </q-dialog>
+    </q-page>
+  </q-layout>
+</template>
+
+<script lang="ts">
+//@ts-ignore
+import { defineComponent } from "vue";
+import SwInfoDialog from "../dialogs/sw-info-dialog.vue";
+import { useResetPassword } from "composables/resetPassword";
+
+export default defineComponent({
+  name: "ResetPassword",
+  components: { SwInfoDialog },
+  setup() {
+    const {
+      password,
+      loading,
+      passwordUpdated,
+      showPassword,
+      validations,
+      canSubmit,
+      onSubmit,
+      goToLoginPage,
+      icons
+    } = useResetPassword();
+
+    return {
+      password,
+      validations,
+      loading,
+      canSubmit,
+      passwordUpdated,
+      showPassword,
+      goToLoginPage,
+      onSubmit,
+      icons
+    };
+  },
+});
+</script>
+
+<style scoped>
+.submitBtn {
+  width: 254px;
+}
+</style>

package/src/composables/auth.ts

@@ -0,0 +1,120 @@
+import { ref, onMounted } from "vue";
+import isEmail from "validator/es/lib/isEmail";
+import { useI18n } from "vue-i18n";
+import {
+  ionMailOutline,
+  ionLockClosedOutline,
+  ionEyeOutline,
+  ionEyeOffOutline,
+  ionEyeSharp,
+  ionEyeOffSharp,
+} from "@quasar/extras/ionicons-v5";
+
+import { $prompts, $router, useAuthState } from "../injects";
+
+interface HeadersInterface {
+  headers: {
+    "x-requested-roles"?: string;
+  };
+}
+
+export function useAuth() {
+  const authState = useAuthState();
+  const { t } = useI18n();
+  const {
+    LOCAL_SUCCESS_REDIRECTION_ROUTE,
+    APP_SERVER_BASE_URL,
+    X_REQUESTED_ROLES,
+    WELCOME_TITLE,
+    WELCOME_SUBTITLE,
+  } = $prompts();
+  const { push, replace } = $router();
+
+  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 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 retypeEmail = () => {
+    forgottenPassword.value = true;
+  };
+
+  const onSubmit = async () => {
+    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;
+
+    try {
+      await authState.signin(data, options);
+      push(LOCAL_SUCCESS_REDIRECTION_ROUTE);
+    } catch (err) {
+      loading.value = false;
+    }
+  };
+
+  const isSubmitBtnDisabled = () => {
+    return !(
+      email.value &&
+      isEmail(email.value) &&
+      password.value &&
+      password.value.length > 5
+    );
+  };
+
+  onMounted(() => {
+    if (authState.raw) {
+      replace(LOCAL_SUCCESS_REDIRECTION_ROUTE);
+    }
+  });
+
+  return {
+    email,
+    password,
+    loading,
+    showPassword,
+    validations,
+    forgottenPassword,
+    emailResetPassword,
+    isReset,
+    sendEmailSuccess,
+    authState,
+    APP_SERVER_BASE_URL,
+    WELCOME_TITLE,
+    WELCOME_SUBTITLE,
+    X_REQUESTED_ROLES,
+    onSubmit,
+    retypeEmail,
+    isSubmitBtnDisabled,
+    icons: {
+      ionMailOutline,
+      ionLockClosedOutline,
+      ionEyeOutline,
+      ionEyeOffOutline,
+      ionEyeSharp,
+      ionEyeOffSharp,
+    },
+  };
+}

package/src/composables/resetPassword.ts

@@ -0,0 +1,219 @@
+import { useQuasar } from "quasar";
+import { useI18n } from "vue-i18n";
+import jwt from "jwt-decode";
+import { computed, ref, Ref, onMounted } from "vue";
+import {
+  ionCloseOutline,
+  ionEyeOutline,
+  ionEyeOffOutline,
+  ionAlertCircleOutline,
+  ionLockClosedOutline,
+} from "@quasar/extras/ionicons-v5";
+
+import { $api, $prompts, $router } from "../injects";
+import { Buffer } from "buffer/"; // NOTE: the trailing '/' is intentional and required by buffer
+
+interface DecodedToken {
+  sub: number;
+  email: string;
+  token: string;
+}
+export function useResetPassword() {
+  const $q = useQuasar();
+  const { t } = useI18n();
+
+  const password = ref("");
+  const loading = ref(false);
+  const passwordUpdated = ref(false);
+  const showPassword = ref(false);
+  const token = ref("");
+
+  const { patch, post } = $api();
+  const router = $router();
+  const {
+    AUTH_SERVER_SIGNING_ROUTE,
+    AUTH_SERVER_UPDATE_PASSWORD_ROUTE,
+    LOCAL_LOGIN_ROUTE,
+  } = $prompts();
+  const $route = router.currentRoute.value;
+
+  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) {
+      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}`,
+      },
+    };
+    loading.value = true;
+
+    patch(
+      AUTH_SERVER_UPDATE_PASSWORD_ROUTE.replace(
+        ":userId",
+        String(decodedToken.value.sub),
+      ),
+      updatePasswordPayload,
+      updatePasswordHeaders,
+    )
+      .then(() => {
+        loading.value = false;
+        passwordUpdated.value = true;
+      })
+      .catch(() => {
+        loading.value = false;
+        $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,
+            },
+          ],
+        });
+      });
+  });
+
+  return {
+    password,
+    loading,
+    passwordUpdated,
+    showPassword,
+    validations,
+    canSubmit,
+    LOCAL_LOGIN_ROUTE,
+    onSubmit,
+    goToLoginPage,
+    icons: {
+      ionEyeOutline,
+      ionEyeOffOutline,
+      ionLockClosedOutline,
+    },
+  };
+}

package/src/index.js

@@ -29,6 +29,10 @@ const chainWebpack = (ctx, chain) => {
     "@sowell/auth",
     path.resolve(__dirname, "./components")
   );
+  chain.resolve.alias.set(
+    "composables",
+    path.resolve(__dirname, "./composables")
+  );
 };
 module.exports = function (api) {
   api.compatibleWith("quasar", "^2.0.0");

package/src/injects/index.ts

@@ -2,3 +2,4 @@ export * from "./api";
 export * from "./prompts";
 export * from "./router";
 export * from "./store";
+export * from './states'

package/src/injects/prompts.ts

@@ -12,10 +12,12 @@ export interface PromptsInterface {
   AUTH_TYPE: string;
   VUEX_SET_TOKEN_MUTATION: string;
   VUEX_CLEAR_TOKEN_MUTATION: string;
-  VUEX_SET_EMAIL_OR_PHONENUMBER_USER_MUTATION: string;
   VUEX_SET_INFOS_USER_MUTATION: string;
   VUEX_GET_TOKEN_GETTER: string;
   VUEX_GET_INFOS_USER_GETTER: string;
+  X_REQUESTED_ROLES: string;
+  WELCOME_TITLE: string;
+  WELCOME_SUBTITLE: string;
 }
 export const $prompts = (): PromptsInterface => {
   const $prompts = inject<Record<"@sowell/auth", PromptsInterface>>("$prompts");

package/src/injects/states.ts

@@ -0,0 +1,58 @@
+import { inject } from "vue";
+import { Store } from "pinia";
+import { AxiosResponse } from "axios";
+
+export interface AuthStatePayload {
+  company_hp: string;
+  exp: number;
+  gm_key: string;
+  roles: string[];
+  sub: number;
+}
+
+export interface AuthState {
+  raw?: string;
+  payload?: AuthStatePayload;
+}
+
+export interface RequestOptions {
+  headers: {
+    "x-requested-roles"?: string;
+  };
+}
+
+export interface SignInPayload {
+  auth: {
+    email: string;
+    password: string;
+  };
+}
+
+export interface ResetPasswordPayload {
+  auth: {
+    email: string;
+    base: string;
+  };
+}
+
+export const useAuthState = (): Store<
+  "auth",
+  AuthState,
+  {
+    getIsValid(state: AuthState): boolean;
+  },
+  {
+    signin(
+      data: SignInPayload,
+      options: RequestOptions
+    ): Promise<AxiosResponse>;
+    resetPassword(data: ResetPasswordPayload): Promise<AxiosResponse>;
+    updateRaw(value: string): void;
+  }
+> => {
+  const authState = inject<Store<"auth", AuthState>>("authState");
+  if (authState == undefined) {
+    throw Error("Could not inject authState");
+  }
+  return authState;
+};

package/src/prompts.js

@@ -113,5 +113,33 @@ module.exports = function () {
       message: "Role required for the application",
       default: "",
     },
+    {
+      name: "FORGOTTEN_PASSWORD_TITLE",
+      type: "input",
+      required: true,
+      message: "Title on forgotten password page",
+      default: "",
+    },
+    {
+      name: "FORGOTTEN_PASSWORD_SUBTITLE",
+      type: "input",
+      required: true,
+      message: "Subtitle on forgotten password page",
+      default: "",
+    },
+    {
+      name: "WELCOME_TITLE",
+      type: "input",
+      required: true,
+      message: "Title on login page",
+      default: "",
+    },
+    {
+      name: "WELCOME_SUBTITLE",
+      type: "input",
+      required: true,
+      message: "Subtitle on login page",
+      default: "",
+    },
   ];
 };

package/src/routes/index.ts

@@ -18,7 +18,14 @@ const routes: RouteRecordRaw[] = [
     path: LOCAL_UPDATE_PASSWORD_ROUTE,
     name:"update_password",
     // @ts-ignore
-    component: () => import("@sowell/auth/pages/ResetPassword.vue"),
+    component: () =>
+      import(
+        `@sowell/auth/pages/${
+          webAuthRoles.includes(X_REQUESTED_ROLES)
+            ? "WebResetPassword.vue"
+            : "ResetPassword.vue"
+        }`
+      ),
   },
 ];
 

package/tsconfig.json

@@ -2,7 +2,6 @@
   "compilerOptions": {
     "allowJs": true,
     "target": "es6",
-    "module": "commonjs",
     "strict": true,
     "moduleResolution": "node",
     "esModuleInterop": true,