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

package/src/boot/axios.js

@@ -1,17 +0,0 @@
-import axios from "axios"
-// FIXME: find another way to call this path
-import prompts from "../../../../../quasar.extensions.json"
-import { headers } from "setupHeaders"
-
-const {
-  "@sowell/auth": { auth_server_base_url }
-} = prompts
-
-const api = axios.create({
-  baseURL: auth_server_base_url,
-  headers: headers
-})
-
-export default ({ app }) => {
-  app.provide("api", api)
-}

package/src/boot/navigation-guards.js

@@ -1,16 +0,0 @@
-// FIXME: find another way to call this path
-import prompts from "../../../../../quasar.extensions.json"
-
-export default ({ router, store }) => {
-  const { "@sowell/auth": { local_login_route, local_check_code_route }} = prompts
-   router.beforeEach((to, from, next) => {
-     const isAuthenticated = store.state.auth.token !== null ? true : false
-     if (!isAuthenticated && to.path !== local_login_route && to.path !== local_check_code_route) {
-      next(local_login_route)
-     }
-     else {
-       next()
-
-     }
-   })
-}

package/src/boot/register.js

@@ -1,45 +0,0 @@
-import { boot } from "quasar/wrappers"
-
-// FIXME: find another way to call this path
-import prompts from "../../../../../quasar.extensions.json"
-import { i18n } from "../../../../../src/boot/i18n.js"
-
-export default boot(({ app, router }) => {
-  let { routes } = router.options
-  let routeData = routes.find((r) => r.path === "/")
-  app.provide("prompts", prompts)
-  app.provide("i18n", i18n.global)
-
-  const {
-    "@sowell/auth": {
-      local_login_route,
-      local_check_code_route,
-      local_update_password_route
-    }
-  } = prompts
-
-  const currentRoutes = routeData.children.map((route) => route.path)
-
-  const newRoutes = [
-    {
-      path: local_login_route,
-      component: () => import("../components/Auth")
-    },
-    {
-      path: local_check_code_route,
-      component: () => import("../components/ResetCode")
-    },
-    {
-      path: local_update_password_route,
-      component: () => import("../components/ResetPassword")
-    }
-  ]
-
-  routeData.children = []
-  for (let route of newRoutes) {
-    if (!currentRoutes.includes(route.path)) {
-      routeData.children.push(route)
-    }
-  }
-  router.addRoute(routeData)
-})

package/src/components/Auth.vue

@@ -1,279 +0,0 @@
-<template>
-  <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
-            id="email"
-            v-model.trim="emailOrPhone"
-            type="email"
-            :label="$t('auth.email')"
-            :rules="validations['emailOrPhone']"
-            lazy-rules
-            autofocus
-            rounded
-            outlined
-            dense
-            class="full-width q-mb-md"
-          />
-          <q-input
-            id="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
-            rounded
-            :label="$t('auth.login')"
-            color="primary"
-            :loading="loading"
-            type="submit"
-            class="full-width"
-          />
-        </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>
-</template>
-
-<script>
-import { useStore } from "vuex"
-import { useQuasar } from "quasar"
-import { useRouter } from "vue-router"
-import { ref, onMounted, defineComponent, inject } from "vue"
-import isEmail from "validator/es/lib/isEmail"
-import prompts from "./prompt.js"
-
-export default defineComponent({
-  name: "Auth",
-
-  setup() {
-    const i18n = inject("i18n")
-    const api = inject("api")
-    const {
-      local_success_redirection_route,
-      local_check_code_route,
-      auth_server_signing_route,
-      auth_server_reset_password_route,
-      auth_type,
-      vuex_set_token_mutation,
-      vuex_set_email_or_phonenumber_user_mutation,
-      vuex_clear_token_mutation,
-      vuex_set_infos_user_mutation,
-      vuex_get_token_getter
-    } = prompts()
-    const store = useStore()
-    const $q = useQuasar()
-    const router = useRouter()
-    const phoneRegex = /\+.[0-9]/
-    const emailOrPhone = ref("")
-    const password = ref("")
-    const loading = ref(false)
-    const showPassword = ref(false)
-    const forgottenPassword = ref(false)
-    const emailResetPassword = ref("")
-
-    onMounted(() => {
-      if (store.state.auth.token) {
-        router.replace(local_success_redirection_route)
-      }
-    })
-
-    const validations = {
-      emailOrPhone: [
-        (val) => !!val || i18n.t("auth.emailPresenceError"),
-        (val) =>
-          isEmail(val) ||
-          phoneRegex.test(val) ||
-          i18n.t("auth.emailValidationError")
-      ],
-      password: [(val) => !!val || i18n.t("auth.passwordPresenceError")]
-    }
-
-    const resetPassword = async () => {
-      let data = null
-      if (isEmail(emailResetPassword.value)) {
-        store.commit(vuex_set_infos_user_mutation, emailResetPassword.value)
-        data = {
-          email: emailResetPassword.value
-        }
-      } else if (phoneRegex.test(emailResetPassword.value)) {
-        store.commit(vuex_set_infos_user_mutation, emailResetPassword.value)
-        data = {
-          phone_number: emailResetPassword.value
-        }
-      }
-      await api
-        .post(auth_server_reset_password_route, data)
-        .then(() => {
-          $q.notify({
-            message: i18n.t("auth.emailSent"),
-            color: "positive",
-            position: "top"
-          })
-          router.push(local_check_code_route)
-        })
-        .catch(() => {
-          $q.notify({
-            message: i18n("auth.emailNotRecognize"),
-            color: "negative",
-            position: "top"
-          })
-        })
-    }
-
-    const onSubmit = async () => {
-      loading.value = true
-      let data = null
-      if (isEmail(emailOrPhone.value)) {
-        data = {
-          email: emailOrPhone.value,
-          password: password.value
-        }
-      } else if (phoneRegex.test(emailOrPhone.value)) {
-        data = {
-          phone_number: emailOrPhone.value,
-          password: password.value
-        }
-      }
-      await api
-        .post(auth_server_signing_route, data)
-        .then(async function (response) {
-          const { data } = response
-          if (response.status == "201") {
-            store.commit(vuex_set_token_mutation, data.token)
-            store.commit(
-              vuex_set_email_or_phonenumber_user_mutation,
-              emailOrPhone
-            )
-            api.defaults.headers.Authorization = `${auth_type} ${store.getters[vuex_get_token_getter]}`
-            router.push(local_success_redirection_route)
-          } else {
-            store.commit(vuex_clear_token_mutation)
-            api.defaults.headers.Authorization = ""
-          }
-          loading.value = false
-        })
-        .catch(() => {
-          loading.value = false
-          store.commit(vuex_clear_token_mutation)
-          $q.notify({
-            message: i18n.t("auth.loginFailed"),
-            color: "negative",
-            position: "top"
-          })
-        })
-    }
-
-    return {
-      emailOrPhone,
-      password,
-      loading,
-      showPassword,
-      validations,
-      onSubmit,
-      forgottenPassword,
-      emailResetPassword,
-      resetPassword
-    }
-  }
-})
-</script>
-
-<style scoped>
-.head,
-.q-page {
-  opacity: 0.7;
-}
-
-.q-card {
-  width: 400px;
-  padding: 50px;
-}
-
-.forgottenPass {
-  margin-top: 0 !important;
-  margin-left: 25px !important;
-  cursor: pointer;
-  color: #40c4ff;
-}
-
-.resetPasswordTitle {
-  opacity: 0.7;
-  text-align: center;
-  font-size: 20px;
-}
-
-.btn-min {
-  min-width: 100px !important;
-}
-</style>

package/src/components/ResetCode.vue

@@ -1,140 +0,0 @@
-<template>
-  <q-page class="flex flex-center">
-    <q-card square>
-      <q-card-section>
-        <div class="text-h5 text-center head">
-          {{ $t("auth.secretCodeTitle") }}
-        </div>
-      </q-card-section>
-
-      <q-form class="q-gutter-md" @submit="onSubmit">
-        <q-card-section>
-          <q-input
-            id="codeSecret"
-            v-model="code"
-            :rules="validations['code']"
-            type="text"
-            :label="$t('auth.secretCode')"
-            lazy-rules
-            rounded
-            outlined
-            dense
-            class="full-width q-mb-md"
-          >
-          </q-input>
-        </q-card-section>
-
-        <q-card-actions>
-          <q-btn
-            rounded
-            :label="$t('common.send')"
-            color="primary"
-            :loading="loading"
-            type="submit"
-            class="full-width"
-          />
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-page>
-</template>
-
-<script>
-import { ref, onMounted, defineComponent, inject } from "vue"
-import { useStore } from "vuex"
-import { useQuasar } from "quasar"
-import { useRouter } from "vue-router"
-import isEmail from "validator/es/lib/isEmail"
-import prompts from "./prompt.js"
-
-export default defineComponent({
-  name: "ResetCode",
-
-  setup() {
-    const i18n = inject("i18n")
-    const api = inject("api")
-    const store = useStore()
-    const $q = useQuasar()
-    const router = useRouter()
-    const phoneRegex = /\+.[0-9]/
-    const code = ref("")
-    const loading = ref(false)
-    const {
-      auth_server_signing_route,
-      local_update_password_route,
-      auth_type,
-      local_success_redirection_route,
-      vuex_set_token_mutation,
-      vuex_set_email_or_phonenumber_user_mutation,
-      vuex_get_token_getter,
-      vuex_get_infos_user_getter
-    } = prompts()
-
-    const validations = {
-      code: [(val) => !!val || i18n.t("auth.secretCodePresenceError")]
-    }
-
-    onMounted(() => {
-      if (store.state.auth.token) {
-        router.replace(local_success_redirection_route)
-      }
-    })
-
-    async function onSubmit() {
-      let data = {}
-      const emailOrPhoneNumber = await store.getters[vuex_get_infos_user_getter]
-      if (isEmail(emailOrPhoneNumber)) {
-        data = {
-          email: emailOrPhoneNumber,
-          password_recovery_code: code.value
-        }
-      } else if (phoneRegex.text(emailOrPhoneNumber)) {
-        data = {
-          phone_number: emailOrPhoneNumber,
-          password_recovery_code: code.value
-        }
-      }
-
-      api
-        .post(auth_server_signing_route, data)
-        .then(({ data }) => {
-          $q.notify({
-            message: i18n.t("auth.secretCodeSuccess"),
-            color: "positive",
-            position: "top"
-          })
-          store.commit(vuex_set_token_mutation, data.token)
-          store.commit(vuex_set_email_or_phonenumber_user_mutation, email)
-          api.defaults.headers.Authorization = `${auth_type} ${store.getters[vuex_get_token_getter]}`
-          router.push(local_update_password_route)
-        })
-        .catch(() => {
-          $q.notify({
-            message: i18n.t("auth.secretCodeFailed"),
-            color: "negative",
-            position: "top"
-          })
-        })
-    }
-
-    return {
-      code,
-      loading,
-      validations,
-      onSubmit
-    }
-  }
-})
-</script>
-
-<style scoped>
-.head,
-.q-page {
-  opacity: 0.7;
-}
-
-.q-card {
-  width: 400px;
-  padding: 50px;
-}
-</style>

package/src/components/ResetPassword.vue

@@ -1,139 +0,0 @@
-<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-card-actions>
-      </q-form>
-    </q-card>
-  </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"
-
-export default defineComponent({
-  name: "ResetPassword",
-
-  setup() {
-    const i18n = inject("i18n")
-    const api = inject("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)
-
-    const canSubmit = computed(() => {
-      return password.value != "" &&
-        password.value === passwordConfirmation.value
-        ? false
-        : true
-    })
-
-    const validations = {
-      passwordRules: [
-        (val) => !!val || i18n.t("auth.newPasswordPresenceError")
-      ],
-      passwordConfirmationRules: [
-        (val) =>
-          val === password.value || i18n.t("auth.newPasswordConfirmationFailed")
-      ]
-    }
-
-    function onSubmit() {
-      const data = {
-        password: password.value,
-        password_confirmation: passwordConfirmation.value
-      }
-      api
-        .patch(auth_server_update_password_route, data)
-        .then(() => {
-          $q.notify({
-            message: i18n.t("auth.passwordRecoverySuccess"),
-            color: "positive",
-            position: "top"
-          })
-          router.push(local_success_redirection_route)
-        })
-        .catch(() => {
-          $q.notify({
-            message: i18n.t("auth.passwordRecoveryFailed"),
-            color: "negative",
-            position: "top"
-          })
-        })
-    }
-
-    return {
-      password,
-      passwordConfirmation,
-      validations,
-      loading,
-      onSubmit,
-      canSubmit
-    }
-  }
-})
-</script>
-
-<style scoped>
-.head,
-.q-page {
-  opacity: 0.7;
-}
-
-.q-card {
-  width: 400px;
-  padding: 50px;
-}
-</style>

package/src/components/prompt.js

@@ -1,40 +0,0 @@
-import { inject } from "vue"
-export default function prompts() {
-  const {
-    "@sowell/auth": {
-      local_login_route,
-      local_success_redirection_route,
-      local_check_code_route,
-      local_update_password_route,
-      auth_server_base_url,
-      auth_server_signing_route,
-      auth_server_reset_password_route,
-      auth_server_update_password_route,
-      auth_type,
-      vuex_set_token_mutation,
-      vuex_set_email_or_phonenumber_user_mutation,
-      vuex_clear_token_mutation,
-      vuex_set_infos_user_mutation,
-      vuex_get_token_getter,
-      vuex_get_infos_user_getter
-    }
-  } = inject("prompts")
-
-  return {
-    local_login_route,
-    local_success_redirection_route,
-    local_check_code_route,
-    local_update_password_route,
-    auth_server_base_url,
-    auth_server_signing_route,
-    auth_server_reset_password_route,
-    auth_server_update_password_route,
-    auth_type,
-    vuex_set_token_mutation,
-    vuex_set_email_or_phonenumber_user_mutation,
-    vuex_clear_token_mutation,
-    vuex_set_infos_user_mutation,
-    vuex_get_token_getter,
-    vuex_get_infos_user_getter
-  }
-}

package/src/config/setupHeaders.js

@@ -1,6 +0,0 @@
-let headers = null
-const setup_headers = (payload) => {
-  headers = payload
-}
-
-export { setup_headers, headers }

package/src/install.js

@@ -1,10 +0,0 @@
-/**
- * Quasar App Extension install script
- *
- * Docs: https://quasar.dev/app-extensions/development-guide/install-api
- * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/InstallAPI.js
- */
-
-module.exports = function () {
-  //
-}