@sowell/quasar-app-extension-auth 0.1.8 → 0.2.2

package/src/boot/router.ts

@@ -0,0 +1,20 @@
+//@ts-ignore
+import { boot } from "quasar/wrappers";
+import { BootInterface } from "../interfaces";
+import newRoutes from "../routes";
+
+export default boot(({ app, router }: BootInterface) => {
+  // Register auth routes
+  let { routes } = router.options;
+  let routeData = routes.find((r) => r.path === "/");
+  if (routeData?.children) {
+    const currentRoutes = routeData.children.map((route) => route.path);
+
+    newRoutes.forEach((route) => {
+      if (!currentRoutes.includes(route.path)) {
+        router.addRoute(route);
+      }
+    });
+  }
+  app.provide("$router", router);
+});

package/src/boot/store.ts

@@ -0,0 +1,10 @@
+//@ts-ignore
+import { boot } from "quasar/wrappers";
+import { BootInterface } from "../interfaces";
+import tokenModule from "../store";
+
+export default boot(({ app, store }: BootInterface) => {
+  // Register store module
+  store.registerModule("token", tokenModule);
+  app.provide("$store", store);
+});

package/src/components/pages/Auth.vue

@@ -0,0 +1,227 @@
+<template>
+  <q-layout>
+    <q-page-container>
+      <q-page class="flex flex-center">
+        <q-card square>
+          <q-card-section>
+            <div class="text-h5 text-center head">
+              {{ $t("auth.title") }}
+            </div>
+          </q-card-section>
+
+          <q-form class="q-gutter-md" @submit="onSubmit">
+            <q-card-section>
+              <q-input
+                data-cy="email"
+                v-model.trim="email"
+                type="email"
+                :label="$t('auth.email')"
+                :rules="validations['email']"
+                lazy-rules
+                autofocus
+                rounded
+                outlined
+                dense
+                class="full-width q-mb-md"
+              />
+              <q-input
+                data-cy="password"
+                v-model="password"
+                :type="showPassword ? 'text' : 'password'"
+                :label="$t('auth.password')"
+                :rules="validations['password']"
+                lazy-rules
+                rounded
+                outlined
+                dense
+                class="full-width q-mb-md"
+              >
+                <template #append>
+                  <q-icon
+                    :name="showPassword ? 'visibility' : 'visibility_off'"
+                    class="cursor-pointer"
+                    @click="showPassword = !showPassword"
+                  />
+                </template>
+              </q-input>
+            </q-card-section>
+            <div class="forgottenPass">
+              <q-btn
+                @click="forgottenPassword = true"
+                no-caps
+                flat
+                :label="$t('auth.forgottenPassword')"
+              />
+            </div>
+            <q-card-actions>
+              <q-btn
+                data-cy="submit-login"
+                rounded
+                :label="$t('auth.login')"
+                color="primary"
+                :loading="loading"
+                type="submit"
+                class="full-width"
+                :disable="isSubmitBtnDisabled()"
+              />
+            </q-card-actions>
+          </q-form>
+        </q-card>
+        <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-page-container>
+  </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";
+export default defineComponent({
+  name: "Auth",
+  setup() {
+    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,
+        },
+      };
+
+      post(AUTH_SERVER_SIGNING_ROUTE, data)
+        .then((response: AxiosResponse) => {
+          const token = response.data.jwt;
+          dispatch("token/updateRaw", token);
+          push(LOCAL_SUCCESS_REDIRECTION_ROUTE);
+        })
+        .catch((error: AxiosError) => {
+          loading.value = false;
+          $q.notify({
+            message: t("auth.loginFailed"),
+            color: "negative",
+            position: "top",
+          });
+        });
+    };
+
+    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>

package/src/components/{ResetPassword.vue → pages/ResetPassword.vue}

@@ -51,68 +51,68 @@
   </q-page>
 </template>
 
-<script>
-import { ref, defineComponent, computed, inject } from "vue"
-import { useQuasar } from "quasar"
-import { useRouter } from "vue-router"
-import prompts from "./prompt.js"
-import { api } from "../boot/axios"
+<script lang="ts">
+import { useQuasar } from "quasar";
+import { computed, defineComponent, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import { $api, $prompts } from "../../injects";
 
 export default defineComponent({
   name: "ResetPassword",
 
   setup() {
-    const i18n = inject("i18n")
+    const { patch } = $api();
     const {
-      auth_server_update_password_route,
-      local_success_redirection_route
-    } = prompts()
-    const $q = useQuasar()
-    const router = useRouter()
-    const password = ref("")
-    const passwordConfirmation = ref("")
-    const loading = ref(false)
+      AUTH_SERVER_UPDATE_PASSWORD_ROUTE,
+      LOCAL_SUCCESS_REDIRECTION_ROUTE,
+    } = $prompts();
+    const $q = useQuasar();
+    const router = useRouter();
+    const password = ref("");
+    const passwordConfirmation = ref("");
+    const loading = ref(false);
+    const { t } = useI18n();
 
     const canSubmit = computed(() => {
       return password.value != "" &&
         password.value === passwordConfirmation.value
         ? false
-        : true
-    })
+        : true;
+    });
 
     const validations = {
       passwordRules: [
-        (val) => !!val || i18n.t("auth.newPasswordPresenceError")
+        (val: string) => !!val || t("auth.newPasswordPresenceError"),
       ],
       passwordConfirmationRules: [
-        (val) =>
-          val === password.value || i18n.t("auth.newPasswordConfirmationFailed")
-      ]
-    }
+        (val: string) =>
+          val === password.value || t("auth.newPasswordConfirmationFailed"),
+      ],
+    };
 
-    function onSubmit() {
+    const onSubmit = () => {
       const data = {
         password: password.value,
-        password_confirmation: passwordConfirmation.value
-      }
-      api
-        .patch(auth_server_update_password_route, data)
+        password_confirmation: passwordConfirmation.value,
+      };
+      patch(AUTH_SERVER_UPDATE_PASSWORD_ROUTE, data)
         .then(() => {
           $q.notify({
-            message: i18n.t("auth.passwordRecoverySuccess"),
+            message: t("auth.passwordRecoverySuccess"),
             color: "positive",
-            position: "top"
-          })
-          router.push(local_success_redirection_route)
+            position: "top",
+          });
+          router.push(LOCAL_SUCCESS_REDIRECTION_ROUTE);
         })
         .catch(() => {
           $q.notify({
-            message: i18n.t("auth.passwordRecoveryFailed"),
+            message: t("auth.passwordRecoveryFailed"),
             color: "negative",
-            position: "top"
-          })
-        })
-    }
+            position: "top",
+          });
+        });
+    };
 
     return {
       password,
@@ -120,10 +120,10 @@ export default defineComponent({
       validations,
       loading,
       onSubmit,
-      canSubmit
-    }
-  }
-})
+      canSubmit,
+    };
+  },
+});
 </script>
 
 <style scoped>

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

@@ -0,0 +1,23 @@
+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",
+  },
+  common: {
+    register: "Save",
+    send: "Send",
+    cancel: "Cancel",
+  },
+};

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

@@ -0,0 +1,23 @@
+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",
+  },
+  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,33 +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"
-  )
+  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";