@sowell/quasar-app-extension-auth 0.2.3 → 0.2.7

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/.github/workflows/publish.yml

@@ -0,0 +1,24 @@
+name: npm-publish
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  npm-publish:
+    name: npm-publish
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+      - name: Nodejs
+        uses: actions/setup-node@v2
+        with:
+          node-version: "14"
+          cache: yarn
+          registry-url: https://registry.npmjs.org
+      - name: publish
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}}

package/README.md

@@ -8,7 +8,7 @@
 # Install
 
 ```bash
-quasar ext add mamy-auth
+quasar ext add @sowell/auth
 ```
 
 Quasar CLI will retrieve it from NPM and install the extension.
@@ -39,7 +39,7 @@ The default is http://localhost:3000, you must point it to your server base url
 
 6. Server route for authentication
 
-The default is /users/sign_in
+The default is /auth
 
 7. Server route to reset password
 
@@ -78,7 +78,7 @@ The default is auth/getInfosUser and return email or phone number
 # Uninstall
 
 ```bash
-quasar ext remove mamy-auth
+quasar ext remove @sowell/auth
 ```
 
 # Info

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sowell/quasar-app-extension-auth",
-  "version": "0.2.3",
+  "version": "0.2.7",
   "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/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,17 +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) => {
-    let isValid = store.getters["token/getIsValid"]
-    let token = store.getters["token/getRaw"]
+    let isValid = store.getters["token/getIsValid"];
+    let token = store.getters["token/getRaw"];
     if (
-      !isValid &&
-      !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/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

@@ -43,6 +43,7 @@
           <div
             class="q-mb-xl"
             @click="forgottenPassword = true"
+            data-cy="forgot-password"
             style="color: #40c4ff; font-weight: 500; cursor: pointer"
           >
             {{ $t("auth.forgottenPassword") }}
@@ -63,41 +64,15 @@
       </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>
+          <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>
@@ -105,7 +80,6 @@
 </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";
@@ -113,6 +87,8 @@ 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: {
@@ -122,6 +98,7 @@ interface HeadersInterface {
 
 export default defineComponent({
   name: "Auth",
+  components: { SendEmail, SowellMessage },
   setup() {
     const {
       "@sowell/auth": { X_REQUESTED_ROLES },
@@ -131,12 +108,15 @@ export default defineComponent({
     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();
@@ -157,26 +137,23 @@ 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;
         });
     };
 
@@ -251,6 +228,8 @@ export default defineComponent({
       forgottenPassword,
       emailResetPassword,
       resetPassword,
+      isReset,
+      sendEmailSuccess,
     };
   },
 });

package/src/components/pages/ResetPassword.vue

@@ -1,111 +1,162 @@
 <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-input>
-        </q-card-section>
-
-        <q-card-actions>
-          <q-btn
-            rounded
-            :label="$t('common.register')"
-            color="primary"
-            :loading="loading"
-            type="submit"
-            class="full-width"
-            :disable="canSubmit"
+  <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"
           />
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-page>
+          <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, Ref, onMounted } from "vue";
 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";
+import { $api, $prompts, $router } from "../../injects";
+import jwt from 'jwt-decode'
+import { Buffer } from 'buffer'
+
+interface DecodedToken { // FIXME: consider to move to its own file
+  sub: number,
+  email: string,
+  token: string
+}
 
 export default defineComponent({
   name: "ResetPassword",
 
   setup() {
-    const { patch } = $api();
+    const { patch, post } = $api();
     const {
+      AUTH_SERVER_SIGNING_ROUTE,
       AUTH_SERVER_UPDATE_PASSWORD_ROUTE,
-      LOCAL_SUCCESS_REDIRECTION_ROUTE,
+      LOCAL_LOGIN_ROUTE,
     } = $prompts();
     const $q = useQuasar();
-    const router = useRouter();
+    const router = $router()
+    const $route = router.currentRoute.value
     const password = ref("");
-    const passwordConfirmation = ref("");
     const loading = 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 password.value != "" &&
-        password.value === passwordConfirmation.value
-        ? false
-        : true;
+      return decodedToken.value !== null && password.value.length >= 6
     });
 
     const validations = {
       passwordRules: [
-        (val: string) => !!val || t("auth.newPasswordPresenceError"),
+        (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.resetPasswordPresenceError"),
+        (val: string) => val.length >= 6 || t("auth.resetPasswordLengthError"),
       ],
     };
 
+    const decodeKey  = (key: string) => {
+      try {
+        const decodedKey = Buffer.from(key, "base64").toString("utf-8").split(',')
+        if (decodedKey.length !== 2) {
+          throw 'Invalid encoded key'
+        }
+        console.log('decodedKey', decodedKey)
+        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 data = {
-        password: password.value,
-        password_confirmation: passwordConfirmation.value,
-      };
-      patch(AUTH_SERVER_UPDATE_PASSWORD_ROUTE, data)
-        .then(() => {
+      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(() => {
           $q.notify({
             message: t("auth.passwordRecoverySuccess"),
             color: "positive",
             position: "top",
           });
-          router.push(LOCAL_SUCCESS_REDIRECTION_ROUTE);
-        })
-        .catch(() => {
+          router.push(LOCAL_LOGIN_ROUTE);
+        }).catch(() => {
           $q.notify({
             message: t("auth.passwordRecoveryFailed"),
             color: "negative",
@@ -114,9 +165,51 @@ export default defineComponent({
         });
     };
 
+    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",
+        })
+      }
+
+      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",
+                position: "top",
+              });
+            }
+          }
+          return $q.notify({
+            message: t("auth.passwordRecoveryFailed"),
+            color: "negative",
+            position: "top",
+          });
+        });
+    })
+
     return {
       password,
-      passwordConfirmation,
       validations,
       loading,
       onSubmit,
@@ -127,13 +220,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/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/prompts.js

@@ -27,7 +27,7 @@ module.exports = function () {
       type: "input",
       required: true,
       message: "Route to update the password (page)",
-      default: "/reset_password",
+      default: "/ResetPassword/",
     },
     {
       name: "AUTH_SERVER_BASE_URL",
@@ -41,7 +41,7 @@ module.exports = function () {
       type: "input",
       required: true,
       message: "API endpoint for signin (without host)",
-      default: "/users/sign_in",
+      default: "/auth",
     },
     {
       name: "AUTH_SERVER_RESET_PASSWORD_ROUTE",

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

@@ -34,13 +34,28 @@ const mutations: MutationTree<tokenStateInterface> = {
   },
   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);
-    const parseJwt = JSON.parse(window.atob(value.split(".")[1]));
+    let parseJwt: string
+    try {
+      parseJwt = JSON.parse(window.atob(value.split(".")[1]));
+    } catch (error) {
+      parseJwt = ""
+    }
     commit("setPayload", parseJwt)
   }
 }