@sowell/quasar-app-extension-auth 0.2.1 → 0.2.5

package/.github/workflows/main.yml

@@ -19,4 +19,4 @@ jobs:
         uses: cypress-io/github-action@v2
         with:
           working-directory: dev
-          command: yarn test:e2e:ci
+          command: yarn test

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sowell/quasar-app-extension-auth",
-  "version": "0.2.1",
+  "version": "0.2.5",
   "description": "A Quasar app extension to manage Authentication",
   "main": "src/index.js",
   "repository": "https://github.com/sowell-ai/quasar.extension.auth",
@@ -8,8 +8,9 @@
     "lint": "cd dev && eslint --ext .js,.ts,.vue ./",
     "dev": "cd dev && quasar dev",
     "dep": "cd dev && yarn",
-    "test:e2e": "cd dev && yarn && cross-env E2E_TEST=true start-test \"quasar dev\" http-get://localhost:8080 \"cypress open\"",
-    "test:e2e:ci": "cd dev && yarn && cross-env E2E_TEST=true start-test \"quasar dev\" http-get://localhost:8080 \"cypress run\""
+    "test:link": "cd dev && yarn test:link",
+    "test:browser": "cd dev && yarn test:browser",
+    "test": "cd dev && yarn test"
   },
   "keywords": [],
   "author": "SoWell SAS",

package/src/assets/Logo.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="39.779" height="70.275" viewBox="0 0 39.779 70.275">
+  <g id="Logo_Sowell_bleu" data-name="Logo Sowell bleu" transform="translate(-403.55 -422.444)">
+    <path id="Tracé_455" data-name="Tracé 455" d="M440.01,457.9l-9.08-19.791a4,4,0,0,0-5.243-2.083h0a4,4,0,0,0-2.083,5.243l4.939,11.466a19.894,19.894,0,0,0-20.414,6.519,4.349,4.349,0,0,0-.21,1.945c0,2.45,2.091,4.11,4.578,4.11a4.524,4.524,0,0,0,3.021-1.149c1.98-1.693,5.1-3.689,7.905-3.689a11.327,11.327,0,1,1-11.3,12.2c.065-1.637.144-2.7.144-2.7a4.326,4.326,0,0,0-8.417-1.406l-.018-.009c-.006.039-.012.078-.019.118a4.317,4.317,0,0,0-.2,1.3c0,.072,0,.149.006.223q-.072.862-.076,1.74a19.814,19.814,0,0,0,5.441,13.66l14.429,19.43,15.461-20.608h0a21.785,21.785,0,0,0,4.413-12.484C443.729,465.218,440.01,457.9,440.01,457.9Z" transform="translate(0 -12.306)" fill="#40c4ff"/>
+    <path id="Tracé_456" data-name="Tracé 456" d="M802.618,443.124l-.884-17.044a4,4,0,0,0-4.326-3.622h0a3.985,3.985,0,0,0-2.968,1.771Z" transform="translate(-362.817 0)" fill="#40c4ff"/>
+  </g>
+</svg>

package/src/assets/error.svg

@@ -0,0 +1,5 @@
+<svg id="noun_Error_1688921" xmlns="http://www.w3.org/2000/svg" width="63" height="63" viewBox="0 0 63 63">
+  <circle id="Ellipse_90" data-name="Ellipse 90" cx="31.5" cy="31.5" r="31.5" fill="#f2d7d7"/>
+  <path id="Tracé_727" data-name="Tracé 727" d="M14.477,29.163h0A4.078,4.078,0,0,1,10.5,25.186V9.277A4.078,4.078,0,0,1,14.477,5.3h0a4.078,4.078,0,0,1,3.977,3.977V25.186A4.078,4.078,0,0,1,14.477,29.163Z" transform="translate(17.34 8.753)" fill="#ce0101"/>
+  <path id="Tracé_728" data-name="Tracé 728" d="M14.477,23.654h0A4.078,4.078,0,0,1,10.5,19.677h0A4.078,4.078,0,0,1,14.477,15.7h0a4.078,4.078,0,0,1,3.977,3.977h0A4.078,4.078,0,0,1,14.477,23.654Z" transform="translate(17.34 25.927)" fill="#ce0101"/>
+</svg>

package/src/assets/success.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 62 62">
+  <g id="noun_validation_1683882" transform="translate(0.1 -0.4)">
+    <circle id="Ellipse_89" data-name="Ellipse 89" cx="31" cy="31" r="31" transform="translate(-0.1 0.4)" fill="#dff2d6"/>
+    <path id="Tracé_724" data-name="Tracé 724" d="M36.165,13.221a1.189,1.189,0,0,0-1.868.311L21.84,31.906l-8.253-8.253a1.169,1.169,0,0,0-1.868.156,1.667,1.667,0,0,0,.156,2.18l9.5,9.342h0c.156.156.156.156.311.156a.152.152,0,0,1,.156.156c.156,0,.311.156.623.156h0c.156,0,.467,0,.467-.156l.156-.156c.156,0,.156-.156.311-.156h0L36.632,15.713A2.752,2.752,0,0,0,36.165,13.221Z" transform="translate(6.399 6.953)" fill="#3b9843"/>
+  </g>
+</svg>

package/src/boot/router-guards.ts

@@ -5,15 +5,17 @@ import { BootInterface } from "../interfaces";
 
 export default boot(({ router, store }: BootInterface) => {
   const {
-    "@sowell/auth": { LOCAL_LOGIN_ROUTE, LOCAL_CHECK_CODE_ROUTE },
+    "@sowell/auth": { LOCAL_LOGIN_ROUTE },
   } = prompts;
 
   router.beforeEach((to, from, next) => {
-    const token = store.state.auth.token;
+    let isValid = store.getters["token/getIsValid"];
+    let token = store.getters["token/getRaw"];
     if (
-      !token &&
+      (!isValid ||
+        !token ) &&
       to.path !== LOCAL_LOGIN_ROUTE &&
-      to.path !== LOCAL_CHECK_CODE_ROUTE
+      to.name !== "update_password"
     ) {
       next(LOCAL_LOGIN_ROUTE);
     } else {

package/src/boot/store.ts

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

package/src/components/dialogs/Message.vue

@@ -0,0 +1,81 @@
+<template>
+  <q-card style="min-width: 350px; border-radius: 30px">
+    <q-toolbar>
+      <q-space />
+      <q-btn
+        class="q-pt-md"
+        flat
+        dense
+        color="primary"
+        icon="close"
+        v-close-popup
+      />
+    </q-toolbar>
+    <q-card-section class="text-center">
+      <img v-if="sendEmailSuccess" src="../../assets/success.svg" />
+      <img v-else src="../../assets/error.svg" />
+    </q-card-section>
+
+    <q-card-section class="q-pt-none q-pl-lg q-pr-lg">
+      <div
+        class="text-subtitle1 q-mt-sm text-center"
+        style="font-size: 14px; font-weigth: 300; line-height: 20px"
+        data-cy="resetMessage"
+      >
+        {{
+          sendEmailSuccess ? $t("auth.emailSent") : $t("auth.emailNotRecognize")
+        }}
+      </div>
+      <div
+        class="q-mt-sm text-center q-mb-xl"
+        style="font-size: 15px; color: #737676"
+        v-if="sendEmailSuccess"
+      >
+        {{ emailResetPassword }}
+      </div>
+    </q-card-section>
+    <q-card-actions class="q-ml-lg q-mr-lg q-mb-lg">
+      <q-btn
+        v-if="!sendEmailSuccess"
+        data-cy="submit-login"
+        rounded
+        :label="$t('auth.reSend')"
+        color="primary"
+        padding="10px 5px 10px 5px"
+        :loading="loading"
+        no-caps
+        type="submit"
+        @click="reSendEmail"
+        class="full-width"
+      />
+    </q-card-actions>
+  </q-card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    emailResetPassword: {
+      type: String,
+      required: true,
+    },
+    sendEmailSuccess: {
+      type: Boolean,
+      required: true,
+    },
+    loading: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  emit: ["resetPassword"],
+  setup(props: any, { emit }: any) {
+    const reSendEmail = () => {
+      emit("reSendEmail");
+    };
+    return { reSendEmail };
+  },
+});
+</script>

package/src/components/dialogs/SendEmail.vue

@@ -0,0 +1,69 @@
+<template>
+  <q-card style="min-width: 350px; border-radius: 30px">
+    <q-toolbar>
+      <q-space />
+      <q-btn
+        class="q-pt-md"
+        flat
+        dense
+        color="primary"
+        icon="close"
+        v-close-popup
+      />
+    </q-toolbar>
+    <q-card-section>
+      <p
+        class="resetPasswordTitle text-center"
+        style="font-size: 20px; font-weigth: 600"
+      >
+        {{ $t("auth.tapEmail") }}
+      </p>
+    </q-card-section>
+
+    <q-card-section class="q-pt-none q-pl-lg q-pr-lg">
+      <q-input
+        v-model="email"
+        dense
+        outlined
+        data-cy="emailReset"
+        :placeholder="$t('auth.email')"
+        autofocus
+      />
+      <div
+        class="text-subtitle1 q-mt-sm"
+        style="font-size: 13px; font-weigth: 300; line-height: 20px"
+      >
+        {{ $t("auth.resetText") }}
+      </div>
+    </q-card-section>
+
+    <q-card-actions align="center" class="q-ml-lg q-mr-lg q-mb-lg">
+      <q-btn
+        rounded
+        color="primary"
+        data-cy="sendEmails"
+        no-caps
+        :label="$t('common.reset')"
+        class="btn-min full-width"
+        @click="sendEmail"
+        v-close-popup
+      />
+    </q-card-actions>
+  </q-card>
+</template>
+
+<script lang="ts">
+// @ts-ignore
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  emit: ["resetPassword"],
+  setup(props: any, { emit }: any) {
+    const email = ref("");
+    const sendEmail = () => {
+      emit("resetPassword", email.value);
+    };
+    return { sendEmail, email };
+  },
+});
+</script>

package/src/components/pages/Auth.vue

@@ -1,146 +1,130 @@
 <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>
+    <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-page>
-    </q-page-container>
+        <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"
+            data-cy="forgot-password"
+            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>
+          <send-email @resetPassword="resetPassword" />
+        </q-dialog>
+        <q-dialog v-model="isReset" persistent>
+          <sowell-message
+            :emailResetPassword="emailResetPassword"
+            :sendEmailSuccess="sendEmailSuccess"
+            :loading="loading"
+            @reSendEmail="resetPassword"
+          />
+        </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";
+import SendEmail from "../dialogs/SendEmail.vue";
+import SowellMessage from "../dialogs/Message.vue";
+
+interface HeadersInterface {
+  headers: {
+    "x-requested-roles"?: string
+  }
+}
+
 export default defineComponent({
   name: "Auth",
+  components: { SendEmail, SowellMessage },
   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 { state, dispatch } = $store();
+    const { dispatch, getters } = $store();
     const { t } = useI18n();
 
     onMounted(() => {
-      if (state.auth.token) {
+      if (getters["token/getRaw"]) {
         replace(LOCAL_SUCCESS_REDIRECTION_ROUTE);
       }
     });
@@ -153,26 +137,22 @@ export default defineComponent({
       password: [(val: string) => !!val || t("auth.passwordPresenceError")],
     });
 
-    const resetPassword = () => {
+    const resetPassword = (email: string) => {
       const data = {
-        email: emailResetPassword.value,
+        auth: {
+          email,
+          base: APP_SERVER_BASE_URL,
+        },
       };
 
       post(AUTH_SERVER_RESET_PASSWORD_ROUTE, data)
         .then(() => {
-          $q.notify({
-            message: t("auth.emailSent"),
-            color: "positive",
-            position: "top",
-          });
           forgottenPassword.value = false;
+          isReset.value = true;
+          sendEmailSuccess.value = true;
         })
         .catch(() => {
-          $q.notify({
-            message: t("auth.emailNotRecognize"),
-            color: "negative",
-            position: "top",
-          });
+          isReset.value = true;
         });
     };
 
@@ -184,24 +164,46 @@ export default defineComponent({
           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)
+      post(AUTH_SERVER_SIGNING_ROUTE, data, options)
         .then((response: AxiosResponse) => {
           const token = response.data.jwt;
-          dispatch("auth/updateToken", token);
-          const payload = parseJwt(token);
-          const user = { roles: payload.roles };
-          dispatch("auth/updateUser", user);
-
+          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",
-          });
+          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')
+          }
         });
     };
 
@@ -214,10 +216,6 @@ export default defineComponent({
       );
     };
 
-    const parseJwt = (token: string) => {
-      return JSON.parse(window.atob(token.split(".")[1]));
-    };
-
     return {
       email,
       password,
@@ -229,7 +227,17 @@ export default defineComponent({
       forgottenPassword,
       emailResetPassword,
       resetPassword,
+      isReset,
+      sendEmailSuccess,
     };
   },
 });
 </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

@@ -1,59 +1,59 @@
 <template>
-  <q-page class="flex flex-center">
-    <q-card square>
-      <q-card-section>
-        <div class="text-h5 text-center head">
-          {{ $t("auth.passwordRecovery") }}
-        </div>
-      </q-card-section>
-
-      <q-form class="q-gutter-md" @submit="onSubmit">
-        <q-card-section>
-          <q-input
-            id="password"
-            v-model="password"
-            type="password"
-            :label="$t('auth.newPassword')"
-            :rules="validations['passwordRules']"
-            rounded
-            outlined
-            dense
-            class="full-width q-mb-md"
-          >
-          </q-input>
-          <q-input
-            id="passwordConfirmation"
-            v-model="passwordConfirmation"
-            type="password"
-            :label="$t('auth.newPasswordConfirmation')"
-            :rules="validations['passwordConfirmationRules']"
-            rounded
-            outlined
-            dense
-            class="full-width q-mb-md"
+  <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"
           >
-          </q-input>
-        </q-card-section>
+            {{ $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>
 
-        <q-card-actions>
-          <q-btn
-            rounded
-            :label="$t('common.register')"
-            color="primary"
-            :loading="loading"
-            type="submit"
-            class="full-width"
-            :disable="canSubmit"
-          />
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-page>
+          <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">
-import { useQuasar } from "quasar";
+//@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";
@@ -70,31 +70,21 @@ export default defineComponent({
     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;
-    });
+    const canSubmit = computed(() => password.value.length < 6);
 
     const validations = {
       passwordRules: [
-        (val: string) => !!val || t("auth.newPasswordPresenceError"),
-      ],
-      passwordConfirmationRules: [
-        (val: string) =>
-          val === password.value || t("auth.newPasswordConfirmationFailed"),
+        (val: string) => !!val || t("auth.passwordPresenceError"),
+        (val: string) => val.length >= 6 || t("auth.passwordLengthError"),
       ],
     };
 
     const onSubmit = () => {
       const data = {
         password: password.value,
-        password_confirmation: passwordConfirmation.value,
       };
       patch(AUTH_SERVER_UPDATE_PASSWORD_ROUTE, data)
         .then(() => {
@@ -116,7 +106,6 @@ export default defineComponent({
 
     return {
       password,
-      passwordConfirmation,
       validations,
       loading,
       onSubmit,
@@ -127,13 +116,8 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.head,
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap");
 .q-page {
-  opacity: 0.7;
-}
-
-.q-card {
-  width: 400px;
-  padding: 50px;
+  font-family: "Montserrat", sans-serif;
 }
 </style>

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

@@ -14,6 +14,7 @@ export default {
     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",

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

@@ -14,6 +14,7 @@ export default {
     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",

package/src/injects/prompts.ts

@@ -1,5 +1,6 @@
 import { inject } from "vue";
 export interface PromptsInterface {
+  APP_SERVER_BASE_URL: string;
   LOCAL_LOGIN_ROUTE: string;
   LOCAL_SUCCESS_REDIRECTION_ROUTE: string;
   LOCAL_CHECK_CODE_ROUTE: string;

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

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

package/src/prompts.js

@@ -82,9 +82,8 @@ module.exports = function () {
       name: "VUEX_SET_EMAIL_MUTATION",
       type: "input",
       required: true,
-      message:
-        "Vuex mutation to store user email when authenticated",
-      default: "auth/set_email_user"
+      message: "Vuex mutation to store user email when authenticated",
+      default: "auth/set_email_user",
     },
     {
       name: "VUEX_SET_INFOS_USER_MUTATION",
@@ -107,5 +106,12 @@ module.exports = function () {
       message: "Vuex getter user information",
       default: "auth/get_infos_user",
     },
+    {
+      name: "X_REQUESTED_ROLES",
+      type: "input",
+      required: true,
+      message: "Role required for the application",
+      default: "",
+    },
   ];
 };

package/src/routes/index.ts

@@ -14,6 +14,7 @@ const routes: RouteRecordRaw[] = [
   },
   {
     path: LOCAL_UPDATE_PASSWORD_ROUTE,
+    name:"update_password",
     // @ts-ignore
     component: () => import("@sowell/auth/pages/ResetPassword.vue"),
   },

package/src/store/index.ts

@@ -1,16 +1,71 @@
-import { Module } from "vuex";
-import state from "./state";
-import actions from "./actions";
-import getters from "./getters";
-import mutations from "./mutations";
-import { AuthStateInterface } from "../interfaces";
+import { Module, GetterTree, MutationTree, ActionTree } from "vuex";
+import { tokenStateInterface, payload } from "../interfaces";
 
-const authModule: Module<AuthStateInterface, any> = {
+const state: tokenStateInterface = {
+  raw: "",
+  payload: {
+    company_hp: undefined,
+    exp: undefined,
+    gm_key: "",
+    roles: [],
+    sub: null
+  }
+}
+
+const getters: GetterTree<tokenStateInterface, any> = {
+  getRaw(state) {
+    return state.raw
+  },
+  getPayload(state) {
+    return state.payload
+  },
+  getIsValid(state) {
+    if (state.payload.exp) {
+      return new Date(state.payload.exp * 1000) >= new Date() ? true : false;
+    } else {
+      return false
+    }
+  }
+}
+
+const mutations: MutationTree<tokenStateInterface> = {
+  setRaw(state, value: string) {
+    state.raw = value
+  },
+  setPayload(state, value: payload) {
+    state.payload = {...value}
+  },
+  reset(state) {
+    state.raw = ""
+    state.payload = {
+      company_hp: undefined,
+      exp: undefined,
+      gm_key: "",
+      roles: [],
+      sub: null
+    }
+  }
+}
+
+const actions: ActionTree<tokenStateInterface, any> = {
+  updateRaw({ commit }, value: string) {
+    commit("setRaw", value);
+    let parseJwt: string
+    try {
+      parseJwt = JSON.parse(window.atob(value.split(".")[1]));
+    } catch (error) {
+      parseJwt = ""
+    }
+    commit("setPayload", parseJwt)
+  }
+}
+
+const tokenModule: Module<tokenStateInterface, any> = {
   namespaced: true,
-  actions,
   getters,
   mutations,
-  state,
-};
+  actions,
+  state
+}
 
-export default authModule;
+export default tokenModule;

package/src/interfaces/AuthState.ts

@@ -1,7 +0,0 @@
-export interface UserInterface {
-  roles: string[];
-}
-export interface AuthStateInterface {
-  token: string | null;
-  user: UserInterface;
-}

package/src/store/actions.ts

@@ -1,13 +0,0 @@
-import { ActionTree } from "vuex";
-import { AuthStateInterface, UserInterface } from "../interfaces";
-
-const actions: ActionTree<AuthStateInterface, any> = {
-  updateToken({ commit }, value: string) {
-    commit("setToken", value);
-  },
-  updateUser({ commit }, value: UserInterface) {
-    commit("setUser", value);
-  },
-};
-
-export default actions;

package/src/store/getters.ts

@@ -1,13 +0,0 @@
-import { GetterTree } from "vuex";
-import { AuthStateInterface } from "../interfaces";
-
-const getters: GetterTree<AuthStateInterface, any> = {
-  getToken(state) {
-    return state.token;
-  },
-  getUser(state) {
-    return state.user;
-  },
-};
-
-export default getters;

package/src/store/mutations.ts

@@ -1,13 +0,0 @@
-import { MutationTree } from "vuex";
-import { AuthStateInterface, UserInterface } from "../interfaces";
-
-const mutation: MutationTree<AuthStateInterface> = {
-  setToken(state, value: string) {
-    return (state.token = value);
-  },
-  setUser(state, value: UserInterface) {
-    return (state.user = value);
-  },
-};
-
-export default mutation;

package/src/store/state.ts

@@ -1,12 +0,0 @@
-import { AuthStateInterface } from "../interfaces";
-
-function state(): AuthStateInterface {
-  return {
-    token: "",
-    user: {
-      roles: [],
-    },
-  };
-}
-
-export default state;