@sowell/quasar-app-extension-auth 0.3.6 → 0.3.9

package/src/components/pages/ResetPassword.vue

@@ -40,7 +40,7 @@
               class="full-width q-mb-md"
             >
               <template #prepend>
-                <q-icon :name="ionLockClosedOutline" />
+                <q-icon :name="icons.ionLockClosedOutline" />
               </template>
             </q-input>
           </div>
@@ -60,7 +60,10 @@
         </q-form>
       </div>
       <q-dialog v-model="passwordUpdated" persistent>
-        <sowell-message :passwordUpdated="passwordUpdated" @goToLoginPage="goToLoginPage"/>
+        <sowell-message
+          :passwordUpdated="passwordUpdated"
+          @goToLoginPage="goToLoginPage"
+        />
       </q-dialog>
     </q-page>
   </q-layout>
@@ -68,210 +71,36 @@
 
 <script lang="ts">
 //@ts-ignore
-import { computed, defineComponent, ref, Ref, onMounted } from "vue";
+import { defineComponent } from "vue";
 import SowellMessage from "../dialogs/Message.vue";
-import { useQuasar } from "quasar";
-import { useI18n } from "vue-i18n";
-import { $api, $prompts, $router } from "../../injects";
-import jwt from 'jwt-decode'
-import { Buffer } from 'buffer/' // NOTE: the trailing '/' is intentional and required by buffer
-import {
-  ionLockClosedOutline,
-  ionCloseOutline,
-  ionAlertCircleOutline
-} from "@quasar/extras/ionicons-v5";
-
-interface DecodedToken { // FIXME: consider to move to its own file
-  sub: number,
-  email: string,
-  token: string
-}
+import { useResetPassword } from "composables/resetPassword";
 
 export default defineComponent({
   name: "ResetPassword",
   components: { SowellMessage },
   setup() {
-    const { patch, post } = $api();
     const {
-      AUTH_SERVER_SIGNING_ROUTE,
-      AUTH_SERVER_UPDATE_PASSWORD_ROUTE,
+      password,
+      loading,
+      passwordUpdated,
+      validations,
       LOCAL_LOGIN_ROUTE,
-    } = $prompts();
-    const $q = useQuasar();
-    const router = $router()
-    const $route = router.currentRoute.value
-    const password = ref("");
-    const loading = ref(false);
-    const passwordUpdated = 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 decodedToken.value !== null && password.value.length >= 6
-    });
-
-    const validations = {
-      passwordRules: [
-        (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.passwordPresenceError"),
-        (val: string) => val.length >= 6 || t("auth.passwordLengthError"),
-      ],
-    };
-
-    const decodeKey = (key: string) => {
-      try {
-        // remove backslash to avoid decoding error
-        key = key.replace(/\\n/g, '')
-        const decodedKey = Buffer.from(key, 'base64').toString('utf-8').split(',')
-        // split instead of JSON.parse as JSON.parse doesn't work
-
-        if (decodedKey.length !== 2) {
-          throw 'Invalid encoded key'
-        }
-
-        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 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(() => {
-        passwordUpdated.value = true;
-      }).catch(() => {
-          $q.notify({
-            message: t("auth.passwordRecoveryFailed"),
-            color: "negative",
-            icon:ionAlertCircleOutline,
-            position: "top",
-            actions: [
-              {
-                color: "white",
-                icon: ionCloseOutline,
-              },
-            ],
-          });
-        });
-    };
-
-    const goToLoginPage = () => {
-      router.push(LOCAL_LOGIN_ROUTE);
-    }
-    
-    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",
-          icon: ionAlertCircleOutline,
-          actions: [
-            {
-              color: "white",
-              icon: ionCloseOutline,
-            },
-          ],
-        })
-      }
-
-      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",
-                icon: ionAlertCircleOutline,
-                position: "top",
-                actions: [
-                  {
-                    color: "white",
-                    icon: ionCloseOutline,
-                  },
-                ],
-              });
-            }
-          }
-          return $q.notify({
-            message: t("auth.passwordRecoveryFailed"),
-            color: "negative",
-            position: "top",
-            icon: ionAlertCircleOutline,
-            actions: [
-              {
-                color: "white",
-                icon: ionCloseOutline,
-              },
-            ],
-          });
-        });
-    })
+      canSubmit,
+      onSubmit,
+      goToLoginPage,
+      icons,
+    } = useResetPassword();
 
     return {
       password,
-      validations,
       loading,
-      onSubmit,
       canSubmit,
       passwordUpdated,
       LOCAL_LOGIN_ROUTE,
-      ionLockClosedOutline,
-      goToLoginPage
+      validations,
+      onSubmit,
+      goToLoginPage,
+      icons
     };
   },
 });