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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sowell/quasar-app-extension-auth",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "A Quasar app extension to manage Authentication",
   "main": "src/index.js",
   "repository": "https://github.com/sowell-ai/quasar.extension.auth",

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/components/pages/Auth.vue

@@ -1,113 +1,106 @@
 <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-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-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"
+            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>
+          <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
-                data-cy="email"
-                v-model.trim="email"
-                type="email"
-                :label="$t('auth.email')"
-                :rules="validations['email']"
-                lazy-rules
-                autofocus
-                rounded
-                outlined
+                v-model="emailResetPassword"
                 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>
+                :placeholder="$t('auth.email')"
+                autofocus
+              />
             </q-card-section>
-            <div class="forgottenPass">
+
+            <q-card-actions align="right">
               <q-btn
-                @click="forgottenPassword = true"
-                no-caps
-                flat
-                :label="$t('auth.forgottenPassword')"
+                outline
+                rounded
+                :label="$t('common.cancel')"
+                class="btn-min"
+                v-close-popup
               />
-            </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()"
+                :label="$t('common.send')"
+                class="btn-min"
+                @click="resetPassword"
               />
             </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>
-    </q-page-container>
+          </q-card>
+        </q-dialog>
+      </div>
+    </q-page>
   </q-layout>
 </template>
 
@@ -119,9 +112,20 @@ 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";
+
+interface HeadersInterface {
+  headers: {
+    "x-requested-roles"?: string
+  }
+}
+
 export default defineComponent({
   name: "Auth",
   setup() {
+    const {
+      "@sowell/auth": { X_REQUESTED_ROLES },
+    } = prompts;
     const email = ref("");
     const password = ref("");
     const loading = ref(false);
@@ -184,8 +188,14 @@ 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("token/updateRaw", token);
@@ -193,11 +203,31 @@ export default defineComponent({
         })
         .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')
+          }
         });
     };
 
@@ -225,3 +255,11 @@ export default defineComponent({
   },
 });
 </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/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/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: "",
+    },
   ];
 };