@sowell/quasar-app-extension-auth 0.4.1 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sowell/quasar-app-extension-auth",
-  "version": "0.4.1",
+  "version": "0.4.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-microsoft.svg

@@ -0,0 +1,13 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_9080_32853)">
+<path d="M11.4062 11.4062H0V0H11.4062V11.4062Z" fill="#F1511B"/>
+<path d="M24 11.4062H12.5939V0H24V11.4062Z" fill="#80CC28"/>
+<path d="M11.4059 24.0002H0V12.594H11.4059V24.0002Z" fill="#00ADEF"/>
+<path d="M24 24.0002H12.5939V12.594H24V24.0002Z" fill="#FBBC09"/>
+</g>
+<defs>
+<clipPath id="clip0_9080_32853">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/pages/AdminAuth.vue

@@ -9,7 +9,7 @@
           <div class="q-pl-md q-pr-md" style="max-width: 500px">
             <h4 class="title">{{ WELCOME_TITLE }}</h4>
             <div class="subtitle">{{ WELCOME_SUBTITLE }}</div>
-            <q-form @submit="onSubmit">
+            <q-form @submit="handleSubmit">
               <div>
                 <div class="q-ml-xs q-mb-xs text-subtitle2 text-weight-bold">
                   {{ $t("auth.email") }}
@@ -160,6 +160,10 @@ export default defineComponent({
       icons,
     } = useAuth();
 
+    const handleSubmit = () => {
+      onSubmit()
+    }
+
     const IS_ADMIN = ["admin"].includes(X_REQUESTED_ROLES);
     const isNotification = ref(false);
     const requestedOtp = ref(false);
@@ -232,7 +236,7 @@ export default defineComponent({
       goToOtpValidation,
       resetPassword,
       retypeEmail,
-      onSubmit,
+      handleSubmit,
       icons,
     };
   },

package/src/components/pages/Auth.vue

@@ -28,7 +28,7 @@
             {{ $t("auth.loginHelp") }}
           </div>
         </div>
-        <q-form @submit="onSubmit">
+        <q-form @submit="handleSubmit">
           <div>
             <div
               class="q-ml-xs q-mb-xs"
@@ -82,15 +82,6 @@
               </template>
             </q-input>
           </div>
-
-          <div
-            class="q-mb-lg q-mt-xl text-primary"
-            @click="forgottenPassword = true"
-            data-cy="forgot-password"
-            style="font-size: 16px; font-weight: 500; cursor: pointer"
-          >
-            {{ $t("auth.forgottenPassword") }}
-          </div>
           <q-btn
             data-cy="submit-login"
             :label="$t('auth.login')"
@@ -103,6 +94,44 @@
             class="full-width q-mt-lg"
             :disable="isSubmitBtnDisabled()"
           />
+          <div
+            class="q-mb-lg q-mt-xl text-primary"
+            @click="forgottenPassword = true"
+            data-cy="forgot-password"
+            style="font-size: 16px; font-weight: 500; cursor: pointer"
+          >
+            {{ $t("auth.forgottenPassword") }}
+          </div>
+          <div v-if="USE_SSO">
+            <div
+              style="
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+              "
+            >
+              <div
+                style="width: 35%; border: 1px solid #bcc3c7; height: 1px"
+              ></div>
+              <div class="text-weight-bold">{{ $t("common.or") }}</div>
+              <div
+                style="width: 35%; border: 1px solid #bcc3c7; height: 1px"
+              ></div>
+            </div>
+            <q-btn
+              data-cy="submit-sso-login"
+              :label="$t('auth.msalLogin')"
+              color="primary"
+              no-caps
+              unelevated
+              text-color="black"
+              :loading="loading"
+              :icon="`img:${MicrosoftLogo}`"
+              class="full-width q-mt-lg"
+              @click="msalAuth"
+              outline
+            />
+          </div>
         </q-form>
       </div>
       <div>
@@ -144,6 +173,7 @@ import * as packageInfo from "app/package.json";
 import SendEmail from "../dialogs/SendEmail.vue";
 import SowellMessage from "../dialogs/Message.vue";
 import { useAuth } from "composables/auth";
+import MicrosoftLogo from "../../assets/logo-microsoft.svg";
 
 export default defineComponent({
   name: "Auth",
@@ -165,6 +195,8 @@ export default defineComponent({
       retypeEmail,
       isSubmitBtnDisabled,
       icons,
+      USE_SSO,
+      msalAuth,
     } = useAuth();
 
     const appVersion = reactive({
@@ -189,6 +221,10 @@ export default defineComponent({
       }
     };
 
+    const handleSubmit = () => {
+      onSubmit("SoWell");
+    };
+
     onMounted(() => {
       appVersion.versionNumber = packageInfo.version;
     });
@@ -209,6 +245,10 @@ export default defineComponent({
       retypeEmail,
       icons,
       appVersion,
+      USE_SSO,
+      msalAuth,
+      handleSubmit,
+      MicrosoftLogo,
     };
   },
 });

package/src/components/pages/AuthReporter.vue

@@ -17,7 +17,7 @@
           </div>
         </div>
         <div class="">
-          <q-form @submit="onSubmit">
+          <q-form @submit="handleSubmit">
             <div>
               <div
                 class="q-ml-xs q-mb-xs"
@@ -187,6 +187,10 @@ export default defineComponent({
       icons,
     } = useAuth();
 
+    const handleSubmit = () => {
+      onSubmit()
+    }
+
     const appVersion = reactive({
       versionNumber: "",
     });
@@ -229,7 +233,7 @@ export default defineComponent({
       emailResetPassword,
       isReset,
       sendEmailSuccess,
-      onSubmit,
+      handleSubmit,
       resetPassword,
       goToOtpValidation,
       isSubmitBtnDisabled,

package/src/components/pages/WebAuth.vue

@@ -9,7 +9,48 @@
           <div class="q-pl-md q-pr-md" style="max-width: 500px">
             <h4 class="title">{{ WELCOME_TITLE }}</h4>
             <div class="subtitle">{{ WELCOME_SUBTITLE }}</div>
-            <q-form @submit="onSubmit">
+            <div v-if="USE_SSO">
+              <q-btn
+                data-cy="submit-sso-login"
+                :label="$t('auth.msalLogin')"
+                color="primary"
+                no-caps
+                unelevated
+                text-color="black"
+                :loading="loading"
+                :icon="`img:${MicrosoftLogo}`"
+                class="full-width q-mt-lg"
+                @click="msalAuth"
+                outline
+              />
+              <div
+                style="
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  margin-top: 16px;
+                "
+              >
+                <div
+                  style="
+                    width: 20%;
+                    border: 1px solid #bcc3c7;
+                    height: 1px;
+                    margin-right: 16px;
+                  "
+                ></div>
+                <div class="text-weight-bold">{{ $t("common.or") }}</div>
+                <div
+                  style="
+                    width: 20%;
+                    border: 1px solid #bcc3c7;
+                    height: 1px;
+                    margin-left: 16px;
+                  "
+                ></div>
+              </div>
+            </div>
+            <q-form @submit="handleSubmit">
               <div>
                 <div class="q-ml-xs q-mb-xs text-subtitle2 text-weight-bold">
                   {{ $t("auth.email") }}
@@ -134,6 +175,7 @@ import SwInfoDialog from "../dialogs/sw-info-dialog.vue";
 import WebSendEmail from "../dialogs/WebSendEmail.vue";
 
 import { useAuth } from "composables/auth";
+import MicrosoftLogo from "../../assets/logo-microsoft.svg";
 
 interface HeadersInterface {
   headers: {
@@ -165,9 +207,13 @@ export default defineComponent({
       retypeEmail,
       isSubmitBtnDisabled,
       icons,
+      USE_SSO,
+      msalAuth,
     } = useAuth();
 
-    const IS_MANAGER = ["manager", "clean_manager", "admin"].includes(X_REQUESTED_ROLES);
+    const IS_MANAGER = ["manager", "clean_manager", "admin"].includes(
+      X_REQUESTED_ROLES
+    );
     const isNotification = ref(false);
     const requestedOtp = ref(false);
     const infoDialog = ref({
@@ -220,6 +266,10 @@ export default defineComponent({
       }
     };
 
+    const handleSubmit = () => {
+      onSubmit("SoWell");
+    };
+
     return {
       email,
       infoDialog,
@@ -241,6 +291,10 @@ export default defineComponent({
       retypeEmail,
       onSubmit,
       icons,
+      USE_SSO,
+      MicrosoftLogo,
+      handleSubmit,
+      msalAuth,
     };
   },
 });
@@ -264,7 +318,7 @@ export default defineComponent({
   margin: 0px 0px 16px 0px;
 }
 .subtitle {
-  margin-bottom: 80px;
+  margin-bottom: 40px;
 }
 .logoWhite {
   max-width: 600px;

package/src/composables/auth.ts

@@ -11,7 +11,13 @@ import {
 } from "@quasar/extras/ionicons-v5";
 import { Platform } from "quasar";
 
-import { $prompts, $router, SignInPayload, useAuthState } from "../injects";
+import {
+  $prompts,
+  $router,
+  SignInPayload,
+  useAuthState,
+  useMsalState,
+} from "../injects";
 
 interface HeadersInterface {
   headers: {
@@ -21,13 +27,14 @@ interface HeadersInterface {
 
 export function useAuth() {
   const authState = useAuthState();
-  const device = inject("Device")
+  const msalState = useMsalState();
+  const device = inject("Device");
   let deviceInfos = {
     manufacturer: "",
     model: "",
     platform: "",
-    version: ""
-  }
+    version: "",
+  };
 
   const { t } = useI18n();
   const {
@@ -38,12 +45,14 @@ export function useAuth() {
     WELCOME_SUBTITLE,
     IS_OTP,
     LOCAL_OTP_ROUTE,
-    APP_VERSION
+    APP_VERSION,
+    USE_SSO,
   } = $prompts();
   const { push, replace } = $router();
 
   const email = ref("");
   const password = ref("");
+  const msalToken = ref("");
   const loading = ref(false);
   const showPassword = ref(false);
   const forgottenPassword = ref(false);
@@ -86,17 +95,18 @@ export function useAuth() {
         manufacturer: info.manufacturer,
         model: info.model,
         platform: info.platform,
-        version: info.osVersion
-      }
+        version: info.osVersion,
+      };
     }
-  }
+  };
 
-  const onSubmit = async () => {
+  const onSubmit = async (provider = "SoWell") => {
     loading.value = true;
     const data: SignInPayload = {
       auth: {
         email: email.value,
-        password: password.value,
+        password: provider === "SoWell" ? password.value : undefined,
+        msalToken: provider === "MSAL" ? msalToken.value : undefined,
       },
     };
     if (device && Platform.is.capacitor) {
@@ -104,10 +114,10 @@ export function useAuth() {
         manufacturer: deviceInfos.manufacturer,
         model: deviceInfos.model,
         platform: deviceInfos.platform,
-        version: deviceInfos.version
+        version: deviceInfos.version,
       }),
         (data["app-clean"] = {
-          versionNumber: APP_VERSION
+          versionNumber: APP_VERSION,
         });
     }
     const options: HeadersInterface = {
@@ -126,7 +136,10 @@ export function useAuth() {
       // @ts-ignore
       if (!window.Cypress) {
         // FIXME: encrypt password
-        localStorage.setItem("credentials", JSON.stringify(data.auth));
+        localStorage.setItem(
+          "credentials",
+          JSON.stringify({ ...data.auth, provider: provider })
+        );
       }
       push(LOCAL_SUCCESS_REDIRECTION_ROUTE);
     } catch (err) {
@@ -157,8 +170,19 @@ export function useAuth() {
     push(LOCAL_OTP_ROUTE);
   };
 
+  const msalAuth = () => {
+    msalState.signIn().then(
+      async (result) => {
+        email.value = result.email;
+        msalToken.value = result.token;
+        await onSubmit("MSAL");
+      },
+      () => msalState.reset()
+    );
+  };
+
   onMounted(async () => {
-    await deviceInfo()
+    await deviceInfo();
     if (authState.raw) {
       replace(LOCAL_SUCCESS_REDIRECTION_ROUTE);
     }
@@ -186,6 +210,7 @@ export function useAuth() {
     X_REQUESTED_ROLES,
     IS_OTP,
     LOCAL_OTP_ROUTE,
+    USE_SSO,
     goToOtpValidation,
     onSubmit,
     retypeEmail,
@@ -198,5 +223,7 @@ export function useAuth() {
       ionEyeSharp,
       ionEyeOffSharp,
     },
+    msalState,
+    msalAuth,
   };
 }

package/src/i18n/en-US/index.ts

@@ -5,6 +5,7 @@ export default {
     password: "Password",
     forgottenPassword: "Forgotten password",
     login: "Login",
+    msalLogin: "Sign in with Microsoft",
     emailPresenceError: "The email must be provided",
     emailValidationError: "The email is not valid",
     passwordPresenceError: "The password must be provided",
@@ -27,5 +28,6 @@ export default {
     register: "Save",
     send: "Send",
     cancel: "Cancel",
+    or: "or"
   },
 };

package/src/i18n/fr-FR/index.ts

@@ -5,6 +5,7 @@ export default {
     password: "Mot de passe",
     forgottenPassword: "Mot de passe oublié",
     login: "Connexion",
+    msalLogin: "Se connecter avec Microsoft",
     emailPresenceError: "L'adresse email doit être fournie",
     emailValidationError: "L'adresse email fournie est invalide",
     passwordPresenceError: "Le mot de passe doit être fourni",
@@ -27,5 +28,6 @@ export default {
     register: "Enregistrer",
     send: "Envoyer",
     cancel: "Annuler",
+    or: "ou"
   },
 };

package/src/injects/prompts.ts

@@ -23,6 +23,7 @@ export interface PromptsInterface {
   AUTH_SERVER_VERIFY_OTP: string;
   UI_PAGE: string;
   APP_VERSION: string;
+  USE_SSO: boolean
 }
 export const $prompts = (): PromptsInterface => {
   const $prompts = inject<Record<"@sowell/auth", PromptsInterface>>("$prompts");

package/src/injects/states.ts

@@ -1,6 +1,7 @@
 import { inject } from "vue";
 import { Store } from "pinia";
 import { AxiosResponse } from "axios";
+import { $prompts } from "../injects";
 
 export interface AuthStatePayload {
   company_hp: string;
@@ -14,7 +15,33 @@ export interface AuthState {
   raw?: string;
   payload?: AuthStatePayload;
 }
+interface ConfigMobileAuth {
+  clientId: string;
+  scopes: ["email", "User.Read"];
+  keyHash: "2jmj7l5rSw0yVb/vlWAYkK/YBwk=";
+}
 
+export interface MsalState {
+  configMobile: {
+    auth: ConfigMobileAuth;
+    cache: {
+      cacheLocation: "localStorage";
+    };
+  };
+  configWeb: {
+    auth: {
+      clientId: string;
+      authority: "https://login.microsoftonline.com/organizations";
+      redirectUri: string;
+    };
+    cache: {
+      cacheLocation: "localStorage";
+    };
+  };
+  accessToken: string;
+  idToken: string;
+  email: string;
+}
 export interface RequestOptions {
   headers: {
     "x-requested-roles"?: string;
@@ -23,18 +50,19 @@ export interface RequestOptions {
 
 export interface SignInPayload {
   auth: {
-    email: string
-    password: string
-  }
+    email: string;
+    password?: string;
+    msalToken?: string;
+  };
   "device-clean"?: {
-    manufacturer: string
-    model: string
-    platform: string,
-    version: string
-  }
+    manufacturer: string;
+    model: string;
+    platform: string;
+    version: string;
+  };
   "app-clean"?: {
-    versionNumber: string
-  }
+    versionNumber: string;
+  };
 }
 
 export interface ResetPasswordPayload {
@@ -55,6 +83,7 @@ export const useAuthState = (): Store<
       data: SignInPayload,
       options: RequestOptions
     ): Promise<AxiosResponse>;
+    msalSignin(): Promise<AxiosResponse>;
     resetPassword(data: ResetPasswordPayload): Promise<AxiosResponse>;
     updateRaw(value: string): void;
   }
@@ -65,3 +94,19 @@ export const useAuthState = (): Store<
   }
   return authState;
 };
+
+export const useMsalState = (): Store<
+  "msal",
+  MsalState,
+  {
+    signIn(): () => Promise<{ email: string; token: string }>;
+    reset(): () => void;
+  }
+> => {
+  const { USE_SSO } = $prompts();
+  const msalState = inject<Store<"msal", MsalState>>("msalState");
+  if (USE_SSO && msalState == undefined) {
+    throw Error("Could not inject msalState");
+  }
+  return msalState;
+};