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

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.4",
+  "version": "0.2.8",
   "description": "A Quasar app extension to manage Authentication",
   "main": "src/index.js",
   "repository": "https://github.com/sowell-ai/quasar.extension.auth",

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

@@ -12,8 +12,8 @@ export default boot(({ router, store }: BootInterface) => {
     let isValid = store.getters["token/getIsValid"];
     let token = store.getters["token/getRaw"];
     if (
-      !isValid &&
-      !token &&
+      (!isValid ||
+        !token ) &&
       to.path !== LOCAL_LOGIN_ROUTE &&
       to.name !== "update_password"
     ) {

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

@@ -41,7 +41,7 @@
               no-caps
               data-cy="send-new-password"
               class="full-width"
-              :disable="canSubmit"
+              :disable="!canSubmit"
             />
           </div>
         </q-form>
@@ -52,50 +52,111 @@
 
 <script lang="ts">
 //@ts-ignore
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, ref, Ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 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 loading = ref(false);
     const { t } = useI18n();
 
-    const canSubmit = computed(() => password.value.length < 6);
+    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 decodedToken.value !== null && password.value.length >= 6
+    });
 
     const validations = {
       passwordRules: [
         (val: string) => !!val || t("auth.passwordPresenceError"),
-        (val: string) => val.length >= 6 || t("auth.passwordLengthError"),
+        (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,
-      };
-      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",
@@ -104,6 +165,49 @@ 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,
       validations,

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/store/index.ts

@@ -50,7 +50,12 @@ const mutations: MutationTree<tokenStateInterface> = {
 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)
   }
 }