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

package/src/components/pages/Auth.vue

@@ -0,0 +1,265 @@
+<template>
+  <q-layout>
+    <q-page class="column justify-center items-center">
+      <div class="q-pa-xl">
+        <div class="column justify-ceter">
+          <img src="../../assets/Logo.svg" class="q-mb-sm" />
+          <div class="text-subtitle1 text-center head" style="font-weight: 600">
+            {{ $t("auth.title") }}
+          </div>
+          <div class="q-mt-xl q-mb-lg text-subtitle1" style="font-size: 14px">
+            {{ $t("auth.loginHelp") }}
+          </div>
+        </div>
+        <q-form @submit="onSubmit">
+          <q-input
+            data-cy="email"
+            v-model.trim="email"
+            type="email"
+            :label="$t('auth.email')"
+            :rules="validations['email']"
+            lazy-rules
+            dense
+            :input-style="{ fontSize: '14px', fontWeight: '500' }"
+          />
+          <q-input
+            data-cy="password"
+            v-model="password"
+            :type="showPassword ? 'text' : 'password'"
+            :label="$t('auth.password')"
+            :rules="validations['password']"
+            lazy-rules
+            dense
+            :input-style="{ fontSize: '14px', fontWeight: '600' }"
+          >
+            <template #append>
+              <q-icon
+                :name="showPassword ? 'visibility' : 'visibility_off'"
+                class="cursor-pointer"
+                @click="showPassword = !showPassword"
+              />
+            </template>
+          </q-input>
+          <div
+            class="q-mb-xl"
+            @click="forgottenPassword = true"
+            style="color: #40c4ff; font-weight: 500; cursor: pointer"
+          >
+            {{ $t("auth.forgottenPassword") }}
+          </div>
+          <q-btn
+            data-cy="submit-login"
+            rounded
+            :label="$t('auth.login')"
+            style="background: #40c4ff"
+            no-caps
+            text-color="white"
+            :loading="loading"
+            type="submit"
+            class="full-width q-mt-lg"
+            :disable="isSubmitBtnDisabled()"
+          />
+        </q-form>
+      </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>
+        </q-dialog>
+      </div>
+    </q-page>
+  </q-layout>
+</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";
+import { useQuasar } from "quasar";
+import { useI18n } from "vue-i18n";
+import { AxiosError, AxiosResponse } from "axios";
+import prompts from "app/quasar.extensions.json";
+
+interface HeadersInterface {
+  headers: {
+    "x-requested-roles"?: string
+  }
+}
+
+export default defineComponent({
+  name: "Auth",
+  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 emailResetPassword = ref("");
+    const { post } = $api();
+    const {
+      LOCAL_SUCCESS_REDIRECTION_ROUTE,
+      AUTH_SERVER_SIGNING_ROUTE,
+      AUTH_SERVER_RESET_PASSWORD_ROUTE,
+    } = $prompts();
+    const $q = useQuasar();
+    const { push, replace } = $router();
+    const { dispatch, getters } = $store();
+    const { t } = useI18n();
+
+    onMounted(() => {
+      if (getters["token/getRaw"]) {
+        replace(LOCAL_SUCCESS_REDIRECTION_ROUTE);
+      }
+    });
+
+    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 resetPassword = () => {
+      const data = {
+        email: emailResetPassword.value,
+      };
+
+      post(AUTH_SERVER_RESET_PASSWORD_ROUTE, data)
+        .then(() => {
+          $q.notify({
+            message: t("auth.emailSent"),
+            color: "positive",
+            position: "top",
+          });
+          forgottenPassword.value = false;
+        })
+        .catch(() => {
+          $q.notify({
+            message: t("auth.emailNotRecognize"),
+            color: "negative",
+            position: "top",
+          });
+        });
+    };
+
+    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",
+                position: "top",
+              });
+              console.log('403')
+              break;
+            case 404:
+              $q.notify({
+                message: t("auth.404"),
+                color: "negative",
+                position: "top",
+              });
+              console.log('404')
+              break;
+            default:
+              $q.notify({
+                message: t("auth.loginFailed"),
+                color: "negative",
+                position: "top",
+              });
+              console.log('default')
+          }
+        });
+    };
+
+    const isSubmitBtnDisabled = () => {
+      return !(
+        email.value &&
+        isEmail(email.value) &&
+        password.value &&
+        password.value.length > 5
+      );
+    };
+
+    return {
+      email,
+      password,
+      loading,
+      showPassword,
+      validations,
+      isSubmitBtnDisabled,
+      onSubmit,
+      forgottenPassword,
+      emailResetPassword,
+      resetPassword,
+    };
+  },
+});
+</script>
+
+<style scoped>
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap");
+
+.q-page {
+  font-family: "Montserrat", sans-serif;
+}
+</style>

package/src/components/pages/ResetPassword.vue

@@ -0,0 +1,123 @@
+<template>
+  <q-layout>
+    <q-page class="flex flex-center">
+      <div>
+        <div class="column items-center q-mb-xl">
+          <img
+            style="width: 40px"
+            src="../../assets/Logo.svg"
+            class="q-mb-sm"
+          />
+          <div
+            class="text-h5 text-center head q-mt-sm"
+            style="font-size: 17px; font-weight: 500"
+          >
+            {{ $t("auth.passwordRecovery") }}
+          </div>
+        </div>
+        <q-form class="column items-center" @submit="onSubmit">
+          <div>
+            <div class="q-mb-sm" style="font-size: 14px; font-weight: 400">
+              {{ $t("auth.newPassword") }}
+            </div>
+            <q-input
+              id="password"
+              v-model="password"
+              data-cy="reset-password"
+              :rules="validations['passwordRules']"
+              outlined
+              dense
+              class="full-width q-mb-md"
+            />
+          </div>
+
+          <div class="full-width">
+            <q-btn
+              rounded
+              :label="$t('common.register')"
+              color="primary"
+              :loading="loading"
+              type="submit"
+              no-caps
+              data-cy="send-new-password"
+              class="full-width"
+              :disable="canSubmit"
+            />
+          </div>
+        </q-form>
+      </div>
+    </q-page>
+  </q-layout>
+</template>
+
+<script lang="ts">
+//@ts-ignore
+import { computed, defineComponent, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import { $api, $prompts } from "../../injects";
+
+export default defineComponent({
+  name: "ResetPassword",
+
+  setup() {
+    const { patch } = $api();
+    const {
+      AUTH_SERVER_UPDATE_PASSWORD_ROUTE,
+      LOCAL_SUCCESS_REDIRECTION_ROUTE,
+    } = $prompts();
+    const $q = useQuasar();
+    const router = useRouter();
+    const password = ref("");
+    const loading = ref(false);
+    const { t } = useI18n();
+
+    const canSubmit = computed(() => password.value.length < 6);
+
+    const validations = {
+      passwordRules: [
+        (val: string) => !!val || t("auth.passwordPresenceError"),
+        (val: string) => val.length >= 6 || t("auth.passwordLengthError"),
+      ],
+    };
+
+    const onSubmit = () => {
+      const data = {
+        password: password.value,
+      };
+      patch(AUTH_SERVER_UPDATE_PASSWORD_ROUTE, data)
+        .then(() => {
+          $q.notify({
+            message: t("auth.passwordRecoverySuccess"),
+            color: "positive",
+            position: "top",
+          });
+          router.push(LOCAL_SUCCESS_REDIRECTION_ROUTE);
+        })
+        .catch(() => {
+          $q.notify({
+            message: t("auth.passwordRecoveryFailed"),
+            color: "negative",
+            position: "top",
+          });
+        });
+    };
+
+    return {
+      password,
+      validations,
+      loading,
+      onSubmit,
+      canSubmit,
+    };
+  },
+});
+</script>
+
+<style scoped>
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap");
+.q-page {
+  font-family: "Montserrat", sans-serif;
+}
+</style>

package/src/i18n/en-US/index.ts

@@ -0,0 +1,24 @@
+export default {
+  auth: {
+    title: "Log in to access the management interface",
+    email: "Email",
+    password: "Password",
+    forgottenPassword: "Forgotten password",
+    login: "Login",
+    emailPresenceError: "The email must be provided",
+    emailValidationError: "The email is not valid",
+    passwordPresenceError: "The password must be provided",
+    passwordLengthError: "The password length be at least 6",
+    loginFailed: "Incorrect credentials",
+    emailNotRecognize: "Login failed, please check your credentials",
+    emailSent: "Email sent, check your inbox",
+    tapEmail: "Please enter your email",
+    404: "No user found with the provided credentials",
+    403: "Insufficient rights, your account does not allow access to this interface",
+  },
+  common: {
+    register: "Save",
+    send: "Send",
+    cancel: "Cancel",
+  },
+};

package/src/i18n/fr-FR/index.ts

@@ -0,0 +1,24 @@
+export default {
+  auth: {
+    title: "Connectez vous",
+    email: "Email",
+    password: "Mot de passe",
+    forgottenPassword: "Mot de passe oublié",
+    login: "Connexion",
+    emailPresenceError: "L'adresse email doit être fournie",
+    emailValidationError: "L'adresse email fournie est invalide",
+    passwordPresenceError: "Le mot de passe doit être fourni",
+    passwordLengthError: "La longueur du mot de passe doit être au minimum 6",
+    loginFailed: "Identifiants incorrectes",
+    emailNotRecognize: "L'adresse email fournie n'est pas reconnue",
+    emailSent: "Email envoyé, vérifier votre boite email",
+    tapEmail: "Entrer votre email",
+    404: "Aucun utilisateur trouvé avec les identifiants donnés",
+    403: "Droits insuffisants, votre compte ne permet pas d'acceder à cette interface",
+  },
+  common: {
+    register: "Enregistre",
+    send: "Envoyer",
+    cancel: "Annuler",
+  },
+};

package/src/i18n/index.ts

@@ -0,0 +1,7 @@
+import enUS from "./en-US";
+import frFR from "./fr-FR";
+
+export default {
+  "en-US": enUS,
+  "fr-FR": frFR,
+};

package/src/index.js

@@ -1,34 +1,38 @@
-const path = require("path")
-
+"use strict";
+const path = require("path");
 function extendConf(conf) {
-  conf.boot.push("~@sowell/quasar-app-extension-auth/src/boot/register.js")
-  conf.boot.push(
-    "~@sowell/quasar-app-extension-auth/src/boot/navigation-guards.js"
-  )
-  conf.boot.push("~@sowell/quasar-app-extension-auth/src/boot/axios.js")
+  const requiredPlugins = ["Notify"];
 
-  conf.build.transpileDependencies.push(/quasar-app-extension-auth[\\/]src/)
-
-  const requiredPlugins = ["Notify"]
   requiredPlugins.forEach((plugin) => {
     if (!conf.framework.plugins.includes(plugin)) {
-      conf.framework.plugins.push(plugin)
+      conf.framework.plugins.push(plugin);
     }
-  })
-}
+  });
+
+  conf.boot.push("~@sowell/quasar-app-extension-auth/src/boot/register.ts");
+
+  conf.boot.push("~@sowell/quasar-app-extension-auth/src/boot/store.ts");
+
+  conf.boot.push("~@sowell/quasar-app-extension-auth/src/boot/router.ts");
 
-//Create aliases to import or require certain modules or file more easily.
+  conf.boot.push(
+    "~@sowell/quasar-app-extension-auth/src/boot/router-guards.ts"
+  );
+  conf.boot.push("~@sowell/quasar-app-extension-auth/src/boot/axios.ts");
+
+  conf.build.transpileDependencies.push(/quasar-app-extension-auth[\\/]src/);
+
+  console.log("Boot sowell auth");
+}
 const chainWebpack = (ctx, chain) => {
   chain.resolve.alias.set(
-    "setupHeaders",
-    // eslint-disable-next-line no-undef
-    path.resolve(__dirname, "./config/setupHeaders")
-  )
-}
-
+    "@sowell/auth",
+    path.resolve(__dirname, "./components")
+  );
+};
 module.exports = function (api) {
-  api.compatibleWith("quasar", "^2.0.0-beta.12")
-  api.compatibleWith("@quasar/app", "^3.0.0-beta.12")
-  api.chainWebpack((chain) => chainWebpack(api.ctx, chain))
-  api.extendQuasarConf(extendConf)
-}
+  api.compatibleWith("quasar", "^2.0.0");
+  api.compatibleWith("@quasar/app", "^3.0.0");
+  api.chainWebpack((chain) => chainWebpack(api.ctx, chain));
+  api.extendQuasarConf(extendConf);
+};

package/src/injects/api.ts

@@ -0,0 +1,10 @@
+import { AxiosInstance } from "axios";
+import { inject } from "vue";
+
+export const $api = (): AxiosInstance => {
+  const $api = inject<AxiosInstance>("$api");
+  if ($api == undefined) {
+    throw Error("Could not inject api");
+  }
+  return $api;
+};

package/src/injects/index.ts

@@ -0,0 +1,4 @@
+export * from "./api";
+export * from "./prompts";
+export * from "./router";
+export * from "./store";

package/src/injects/prompts.ts

@@ -0,0 +1,25 @@
+import { inject } from "vue";
+export interface PromptsInterface {
+  LOCAL_LOGIN_ROUTE: string;
+  LOCAL_SUCCESS_REDIRECTION_ROUTE: string;
+  LOCAL_CHECK_CODE_ROUTE: string;
+  LOCAL_UPDATE_PASSWORD_ROUTE: string;
+  AUTH_SERVER_BASE_URL: string;
+  AUTH_SERVER_SIGNING_ROUTE: string;
+  AUTH_SERVER_RESET_PASSWORD_ROUTE: string;
+  AUTH_SERVER_UPDATE_PASSWORD_ROUTE: string;
+  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;
+}
+export const $prompts = (): PromptsInterface => {
+  const $prompts = inject<Record<"@sowell/auth", PromptsInterface>>("$prompts");
+  if ($prompts == undefined) {
+    throw Error("Could not inject prompts");
+  }
+  return $prompts["@sowell/auth"];
+};

package/src/injects/router.ts

@@ -0,0 +1,10 @@
+import { inject } from "vue";
+import { Router } from "vue-router";
+
+export const $router = (): Router => {
+  const $router = inject<Router>("$router");
+  if ($router == undefined) {
+    throw Error("Could not inject router");
+  }
+  return $router;
+};

package/src/injects/store.ts

@@ -0,0 +1,10 @@
+import { inject } from "vue";
+import { Store } from "vuex";
+
+export const $store = (): Store<any> => {
+  const $store = inject<Store<any>>("$store");
+  if ($store == undefined) {
+    throw Error("Could not inject store");
+  }
+  return $store;
+};

package/src/interfaces/Boot.ts

@@ -0,0 +1,8 @@
+import { Router } from "vue-router";
+import { Store } from "vuex";
+import { App } from "vue";
+export interface BootInterface {
+  router: Router;
+  store: Store<any>;
+  app: App<any>;
+}

package/src/interfaces/TokenStateInterface.ts

@@ -0,0 +1,11 @@
+export interface payload {
+  company_hp?: number
+  exp?: number
+  gm_key: string
+  roles: string[] | []
+  sub: number | null
+}
+export interface tokenStateInterface {
+  raw: string
+  payload: payload
+}

package/src/interfaces/index.ts

@@ -0,0 +1,2 @@
+export * from "./Boot";
+export * from "./TokenStateInterface";