Implemented: feature for user authorisation (#2ebg32y)

capacitor.config.json

@@ -1,6 +1,6 @@
 {
-  "appId": "co.hotwax.ionic.sdk",
-  "appName": "ionic-sdk",
+  "appId": "co.hotwax.jobmanager",
+  "appName": "Job Manager",
   "bundledWebRuntime": false,
   "npmClient": "npm",
   "webDir": "dist",

package.json

@@ -15,6 +15,8 @@
     "@capacitor/android": "^2.4.7",
     "@capacitor/core": "^2.4.7",
     "@capacitor/ios": "^2.4.7",
+    "@casl/ability": "^6.0.0",
+    "@casl/vue": "^2.2.0",
     "@hotwax/apps-theme": "^1.1.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@ionic/core": "6.2.9",
@@ -24,6 +26,7 @@
     "@types/papaparse": "^5.3.1",
     "axios": "^0.21.4",
     "axios-cache-adapter": "^2.7.3",
+    "boon-js": "^2.0.3",
     "core-js": "^3.6.5",
     "file-saver": "^2.0.5",
     "http-status-codes": "^2.1.4",

src/App.vue

@@ -86,9 +86,9 @@ export default defineComponent({
     emitter.on('dismissLoader', this.dismissLoader);
     emitter.on('playAnimation', this.playAnimation);
     // Handles case when user resumes or reloads the app
-    // Luxon timezzone should be set with the user's selected timezone
-    if (this.userProfile && this.userProfile.userTimeZone) {
-      Settings.defaultZone = this.userProfile.userTimeZone;
+    if (this.userProfile) {
+      // Luxon timezone should be set with the user's selected timezone
+      this.userProfile.userTimeZone && (Settings.defaultZone = this.userProfile.userTimeZone);
     }
   },
   unmounted() {
@@ -98,7 +98,6 @@ export default defineComponent({
   },
   setup(){
     const store = useStore();
-
     return {
       store,
     }

src/authorization/Actions.ts

@@ -0,0 +1,4 @@
+export default {
+    'APP_JOB_VIEW': 'APP_JOB_VIEW',
+    'APP_JOB_UPDATE': 'APP_JOB_UPDATE' 
+}

src/authorization/Rules.ts

@@ -0,0 +1,13 @@
+export default {
+    "APP_PIPELINE_VIEW": "",
+    "APP_INVENTORY_VIEW": "",
+    "APP_PRODUCT_VIEW": "",
+    "APP_PREORDER_VIEW": "",
+    "APP_ORDERS_VIEW": "",
+    "APP_JOB_DETAILS_VIEW": "",
+    "APP_INITIAL_LOAD_VIEW": "",
+    "APP_MISC_VIEW": "",
+    "APP_BULK_EDITOR_VIEW": "COMMON_ADMIN",
+    "APP_JOB_VIEW": "",
+    "APP_JOB_UPDATE": "COMMON_ADMIN",
+} as any

src/authorization/index.ts

@@ -0,0 +1,124 @@
+import { AbilityBuilder, PureAbility } from '@casl/ability';
+import { getEvaluator, parse } from 'boon-js';
+import { Tokens } from 'boon-js/lib/types'
+
+// TODO Improve this
+// We will move this code to an external plugin and use below Actions and Rules accordlingly
+let Actions = {} as any;
+let Rules = {} as any;
+
+// We are using CASL library to define permissions.
+// Instead of using Action-Subject based authorisation we are going with Claim based Authorization.
+// We would be defining the permissions for each action and case, map with server permissiosn based upon certain rules.
+// https://casl.js.org/v5/en/cookbook/claim-authorization
+// Following the comment of Sergii Stotskyi, author of CASL
+// https://github.com/stalniy/casl/issues/525
+// We are defining a PureAbility and creating an instance with AbilityBuilder.
+type ClaimBasedAbility = PureAbility<string>;
+const { build } = new AbilityBuilder<ClaimBasedAbility>(PureAbility);
+const ability = build();
+
+/**
+ * The method returns list of permissions required for the rules. We are having set of rules, 
+ * through which app permissions are defined based upon the server permissions.
+ * When getting server permissions, as all the permissions are not be required. 
+ * Specific permissions used defining the rules are extracted and sent to server. 
+ * @returns permissions
+ */
+const getServerPermissionsFromRules = () => {
+    // Iterate for each rule
+    const permissions = Object.keys(Rules).reduce((permissions: any, rule: any) => {
+        const permissionRule = Rules[rule];
+        // some rules may be empty, no permission is required from server
+        if (permissionRule) {
+            // Each rule may have multiple permissions along with operators
+            // Boon js parse rules into tokens, each token may be operator or server permission
+            // permissionId will have token name as identifier. 
+            const permissionTokens = parse(permissionRule);
+            permissions = permissionTokens.reduce((permissions: any, permissionToken: any) => {
+                // Token object with name as identifier has permissionId 
+                if (Tokens.IDENTIFIER === permissionToken.name) {
+                    permissions.push(permissionToken.value);
+                }
+                return permissions;
+            }, permissions)
+        }
+        return permissions;
+    }, [])
+    return permissions;
+}
+
+/**
+ * The method is used to prepare app permissions from the server permissions.
+ * Rules could be defined such that each app permission could be defined based upon certain one or more server permissions.
+ * @param serverPermissions 
+ * @returns appPermissions
+ */
+const prepareAppPermissions = (serverPermissions: any) => {
+    const serverPermissionsInput = serverPermissions.reduce((serverPermissionsInput: any, permission: any) => {
+        serverPermissionsInput[permission] = true;
+        return serverPermissionsInput;
+    }, {})
+    // Boonjs evaluator needs server permissions as object with permissionId and boolean value
+    // Each rule is passed to evaluator along with the server permissions
+    // if the server permissions and rule matches, app permission is added to list
+    const permissions = Object.keys(Rules).reduce((permissions: any, rule: any) => {
+        const permissionRule = Rules[rule];
+        // If for any app permission, we have empty rule we user is assigned the permission
+        // If rule is not defined, the app permisions is still evaluated or provided to all the users.
+        if (!permissionRule || (permissionRule && getEvaluator(permissionRule)(serverPermissionsInput))) {
+            permissions.push(rule);
+        }
+        return permissions;
+    }, [])
+    const { can, rules } = new AbilityBuilder<ClaimBasedAbility>(PureAbility);
+    permissions.map((permission: any) => {
+        can(permission);
+    })
+    return rules;
+}
+
+/**
+ * 
+ * Sets the current app permissions. This should be used after perparing the app permissions from the server permissions
+ * @param permissions 
+ * @returns 
+ */
+const setPermissions = (permissions: any) => {
+    // If the user has passed undefined or null, it should not break the code
+    if (!permissions) permissions = [];
+    ability.update(permissions)
+    return true;
+};
+
+/**
+ * Resets the permissions list. Used for cases like logout 
+ */
+const resetPermissions = () => setPermissions([]);
+
+/**
+ * 
+ * @param permission 
+ * @returns 
+ */
+const hasPermission = (permission: string) => ability.can(permission);
+
+export { Actions, getServerPermissionsFromRules, hasPermission, prepareAppPermissions, resetPermissions, setPermissions};
+
+// TODO Move this code to an external plugin, to be used across the apps
+export default {
+    install(app: any, options: any) {
+
+        // Rules and Actions could be app and OMS package specific
+        Rules = options.rules;
+        Actions = options.actions;
+
+        // TODO Check why global properties is not working and apply across.
+        app.config.globalProperties.$permission = this;
+    },
+    getServerPermissionsFromRules, 
+    hasPermission, 
+    prepareAppPermissions, 
+    resetPermissions, 
+    setPermissions
+}

src/components/InitialJobConfiguration.vue

@@ -30,7 +30,7 @@
       </ion-item>
     </ion-list>
 
-    <ion-button size="small" fill="outline" expand="block" @click="runJob('Products')">{{ $t("Run import") }}</ion-button>
+    <ion-button :disabled="!hasPermission(Actions.APP_JOB_UPDATE)" size="small" fill="outline" expand="block" @click="runJob('Products')">{{ $t("Run import") }}</ion-button>
   </section>
 
   <section v-else>
@@ -93,7 +93,7 @@
       </ion-item>
     </ion-list>
 
-    <ion-button size="small" fill="outline" expand="block" :disabled="!lastShopifyOrderId" @click="runJob('Orders')">{{ $t("Run import") }}</ion-button>
+    <ion-button size="small" fill="outline" expand="block" :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || !lastShopifyOrderId" @click="runJob('Orders')">{{ $t("Run import") }}</ion-button>
   </section>
 </template>
 
@@ -123,6 +123,7 @@ import { mapGetters, useStore } from "vuex";
 import { translate } from "@/i18n";
 import { DateTime } from 'luxon';
 import { handleDateTimeInput,isFutureDate, showToast } from '@/utils';
+import { Actions, hasPermission } from '@/authorization'
 
 export default defineComponent({
   name: "InitialJobConfiguration",
@@ -234,6 +235,8 @@ export default defineComponent({
     };
 
     return {
+      Actions,
+      hasPermission,
       calendarClearOutline,
       customFulfillmentOptions,
       customOrderOptions,

src/components/JobActionsPopover.vue

@@ -14,7 +14,7 @@
         <ion-icon slot="start" :icon="pinOutline" />
         {{ $t("Pin job") }}
       </ion-item>
-      <ion-item @click="runJobNow(job)" lines="none" button>
+      <ion-item :disabled="!hasPermission(Actions.APP_JOB_UPDATE)" @click="runJobNow(job)" lines="none" button>
         <ion-icon slot="start" :icon="flashOutline" />
         {{ $t("Run now") }}
       </ion-item>      
@@ -40,6 +40,7 @@ import JobHistoryModal from '@/components/JobHistoryModal.vue'
 import { Plugins } from '@capacitor/core';
 import { showToast } from '@/utils'
 import emitter from "@/event-bus"
+import { Actions, hasPermission } from '@/authorization'
 
 export default defineComponent({
   name: "JobActionsPopover",
@@ -123,8 +124,10 @@ export default defineComponent({
     const store = useStore();  
 
     return {
+      Actions,
       copyOutline, 
       flashOutline,
+      hasPermission,
       pinOutline,
       store, 
       timeOutline  

src/components/JobConfiguration.vue

@@ -57,26 +57,26 @@
 
     <div class="actions desktop-only">
       <div>
-        <ion-button size="small" fill="outline" color="medium" :disabled="currentJob.statusId === 'SERVICE_DRAFT'" @click="skipJob(currentJob)">{{ $t("Skip once") }}</ion-button>
-        <ion-button size="small" fill="outline" color="danger" :disabled="currentJob.statusId === 'SERVICE_DRAFT'" @click="cancelJob(currentJob)">{{ $t("Disable") }}</ion-button>
+        <ion-button size="small" fill="outline" color="medium" :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || currentJob.statusId === 'SERVICE_DRAFT'" @click="skipJob(currentJob)">{{ $t("Skip once") }}</ion-button>
+        <ion-button size="small" fill="outline" color="danger" :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || currentJob.statusId === 'SERVICE_DRAFT'" @click="cancelJob(currentJob)">{{ $t("Disable") }}</ion-button>
       </div>
       <div>
-        <ion-button size="small" fill="outline" @click="saveChanges()">{{ $t("Save changes") }}</ion-button>
+        <ion-button :disabled="!hasPermission(Actions.APP_JOB_UPDATE)" size="small" fill="outline" @click="saveChanges()">{{ $t("Save changes") }}</ion-button>
       </div>
     </div>
 
     <div class=" actions mobile-only">
-      <ion-button size="small" expand="block" fill="outline" color="medium" :disabled="status === 'SERVICE_DRAFT'" @click="skipJob(currentJob)">{{ $t("Skip once") }}</ion-button>
-      <ion-button size="small" expand="block" fill="outline" color="danger" :disabled="status === 'SERVICE_DRAFT'" @click="cancelJob(currentJob)">{{ $t("Disable") }}</ion-button>
-      <ion-button expand="block" @click="saveChanges()">{{ $t("Save changes") }}</ion-button>
+      <ion-button size="small" expand="block" fill="outline" color="medium" :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || status === 'SERVICE_DRAFT'" @click="skipJob(currentJob)">{{ $t("Skip once") }}</ion-button>
+      <ion-button size="small" expand="block" fill="outline" color="danger" :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || status === 'SERVICE_DRAFT'" @click="cancelJob(currentJob)">{{ $t("Disable") }}</ion-button>
+      <ion-button :disabled="!hasPermission(Actions.APP_JOB_UPDATE)" expand="block" @click="saveChanges()">{{ $t("Save changes") }}</ion-button>
     </div>
   </section>
   <div class="more-actions">
     <ion-item @click="viewJobHistory(currentJob)" button>
       <ion-icon slot="start" :icon="timeOutline" />
       {{ $t("History") }}
     </ion-item>
-    <ion-item @click="runNow(title, currentJob)" button>
+    <ion-item :disabled="!hasPermission(Actions.APP_JOB_UPDATE)" @click="runNow(title, currentJob)" button>
       <ion-icon slot="start" :icon="flashOutline" />
       {{ $t("Run now") }}
     </ion-item>
@@ -129,6 +129,7 @@ import { DateTime } from 'luxon';
 import { translate } from '@/i18n'
 import { useRouter } from "vue-router";
 import emitter from '@/event-bus';
+import { Actions, hasPermission } from '@/authorization'
 
 export default defineComponent({
   name: "JobConfiguration",
@@ -399,9 +400,11 @@ export default defineComponent({
     const router = useRouter();
 
     return {
+      Actions,
       calendarClearOutline,
       copyOutline,
       flashOutline,
+      hasPermission,
       timeOutline,
       timerOutline,
       store,