Merge pull request hotwax#206 from hotwax/hotwax#205

Implemented: logic to identify authorisations for the given user (hotwax#205)

package.json

@@ -15,13 +15,15 @@
     "@capacitor/android": "^2.5.0",
     "@capacitor/core": "^2.4.7",
     "@capacitor/ios": "^2.5.0",
+    "@casl/ability": "^6.0.0",
     "@hotwax/apps-theme": "^1.1.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/oms-api": "^1.6.0",
     "@ionic/core": "6.2.9",
     "@ionic/vue": "6.2.9",
     "@ionic/vue-router": "6.2.9",
     "@shopify/app-bridge-utils": "^2.0.4",
+    "boon-js": "^2.0.3",
     "core-js": "^3.6.5",
     "luxon": "^3.2.0",
     "mitt": "^2.1.0",

src/authorization/Actions.ts

@@ -0,0 +1,4 @@
+export default {
+  'APP_ORDER_UPDATE': 'APP_ORDER_UPDATE',
+  'APP_RF_CONFIG_UPDATE': 'APP_RF_CONFIG_UPDATE',
+}

src/authorization/Rules.ts

@@ -0,0 +1,8 @@
+export default {
+    "APP_ORDERS_VIEW": "",
+    "APP_CATALOG_VIEW": "",
+    "APP_ORDER_DETAIL_VIEW": "",
+    "APP_PRODUCT_DETAIL_VIEW": "",
+    "APP_ORDER_UPDATE": "COMMON_ADMIN",
+    "APP_RF_CONFIG_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.add(permissionToken.value);
+                }
+                return permissions;
+            }, permissions)
+        }
+        return permissions;
+    }, new Set())
+    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/locales/en.json

@@ -103,6 +103,8 @@
   "Sizes": "Sizes",
   "Something went wrong": "Something went wrong",
   "Something went wrong. Picklist can not be created.": "Something went wrong. Picklist can not be created.",
+  "Something went wrong while login. Please contact administrator": "Something went wrong while login. Please contact administrator.",
+  "Sorry, your username or password is incorrect. Please try again.": "Sorry, your username or password is incorrect. Please try again.",
   "Specify which facility you want to operate from. Order, inventory and other configuration data will be specific to the facility you select.": "Specify which facility you want to operate from. Order, inventory and other configuration data will be specific to the facility you select.",
   "State": "State",
   "Staff": "Staff",
@@ -123,5 +125,6 @@
   "Worn Display": "Worn Display",
   "This order will be removed from your dashboard. This action cannot be undone.": "This order will be removed from your dashboard.{ space } This action cannot be undone.",
   "View shipping orders along with pickup orders.": "View shipping orders along with pickup orders.",
+  "You do not have permission to access this page": "You do not have permission to access this page",
   "Zipcode": "Zipcode"
 }

src/main.ts

@@ -28,14 +28,21 @@ import "@hotwax/apps-theme";
 
 import i18n from './i18n'
 import store from './store'
+import permissionPlugin from '@/authorization';
+import permissionRules from '@/authorization/Rules';
+import permissionActions from '@/authorization/Actions';
 
 const app = createApp(App)
   .use(IonicVue, {
     mode: 'md'
   })
   .use(router)
   .use(i18n)
-  .use(store);
+  .use(store)
+  .use(permissionPlugin, {
+    rules: permissionRules,
+    actions: permissionActions
+  });
 
 // Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters
 app.config.globalProperties.$filters = {