Rhr-core-shell NPM

rhr-core-shell

Installation

Create .env file in root

VUE_APP_AXIOS_BASE_URL = http://localhost:8000

yarn add sass-loader sass node-sass vue-cli-plugin-vuetify -D
yarn add rhr-core-shell

Add check_session_iframe.html in root public folder with this content

<html>
<script>

    function getCookie(name) {
        var cookieValue = '';
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    var OP_IN__RP_OUT = 'op:loggedIn-rp:loggedOut'

    var OP_IN__RP_IN__BAD = 'op:loggedIn-rp:loggedIn-bad'

    var OP_OUT__RP_IN = 'op:loggedOut-rp:loggedIn'

    var OP_OUT__RP_OUT = 'op:loggedOut-rp:loggedOut'

    function check_session() {
        var clientId = getCookie('auth.client_id');
        var sessionState = getCookie('auth.oidc_session_state');
        var identityProvider = getCookie('auth.identity_provider');
        var targetOrigin = identityProvider.split('/').slice(0,3).join('/')

        var mes = clientId + " " + sessionState;            
        
        var win = window.parent.document.getElementById("op_iframe").
            contentWindow;
        
        if ((window.parent.$auth.strategy.constructor === window.parent.oidcSchemeClass) || !window.parent.$auth.loggedIn){
            win.postMessage(mes, targetOrigin);
        }    

    }

    function setTimer() {
        check_session();
        timerID = setInterval(check_session, 1000);
    }

    function receiveMessage(e) {
        var $auth = window.parent.$auth
        var identityProvider = getCookie('auth.identity_provider');
        var targetOrigin = identityProvider.split('/').slice(0,3).join('/')

        if (e.origin !== targetOrigin) { return; }
        stat = e.data;
        
        if($auth.$state.OIDCStatus !== stat){
            $auth.$storage.setState('OIDCStatus', stat)
        }

        if(stat === OP_IN__RP_OUT && $auth.options.autoLoginOIDCStrategy){
            $auth.strategies[$auth.options.autoLoginOIDCStrategy].silentLogin()
        }

        if ([OP_IN__RP_IN__BAD, OP_OUT__RP_IN, OP_OUT__RP_OUT].includes(stat)){
            if($auth.strategy.constructor === window.parent.oidcSchemeClass){
                $auth.strategy.rpLogout()   
            }
        }   
    }

    window.addEventListener("message", receiveMessage, false);

    setTimer();
</script>

</html>

Configure vuetify-loader

Installation

yarn remove vuetify-loader
yarn add Wrufesh/vuetify-loader.git#svgIcon -D

Configure

// vue.config.js

const VuetifyLoaderPlugin = require("vuetify-loader/lib/plugin");
module.exports = {
  configureWebpack: {
    plugins: [
      new VuetifyLoaderPluginPatched({
        iconsMatch(_, { camelIcon: icon }) {
          return [icon, `import { ${icon} } from '@mdi/js';`];
        }
      })
    ]
  }
};

// OR

module.exports = {
  chainWebpack: config => {
    config.plugin("VuetifyLoaderPlugin").tap(args => [
      {
        iconsMatch(_, { camelIcon: icon }) {
          return [icon, `import { ${icon} } from '@mdi/js';`];
        }
      }
    ]);
  }
};

// Usage
<v-icon v-text="$getIcon('mdiHead')"></v-icon>
<v-icon v-text="$getIcon('mdiHeadAlert')"></v-icon>

Usage

// main.js

import rhrCoreShell from "rhr-core-shell";

const options = {}

rhrCoreShell(options);

Available options with sample value

__ layouts

layouts: {
  ErrorLayout: require("./layouts/ErrorLayout.vue").default, // Default
  EmptyLayout: require("./layouts/EmptyRouterView.vue").default, // Default
  DefaultLayout: require("./layouts/Default.vue").default, // Default
  AccountLayout: require("./layouts/Account.vue").default, // Default
  //...
}

// Layout can be added in route configuration

routes = [{
    path: "/",
    name: "home",
    component: Home,
    meta: {
      layout: "EmptyLayout"
    }
}
//...
]

authOptions

// see nuxt auth options for other auth options except realHrSoft scheme
options.authOptions = {
  strategies: {
    local: {
      endpoints: {
        login: {
          url: "/api/v1/auth/obtain/",
          method: "post",
          propertyName: "access"
        },
        user: { url: "/api/v1/users/me/", method: "get", propertyName: false },
        logout: false
      },
      tokenType: "Bearer"
    },
    realHrSoft: {
      _scheme: "oidc",
      issuer: "https://core.realhrsoft.com/o",
      client_id: "4rZ3Pq87xRAZUD9f70STMwLmbxZ78pHk56zxS3YU",
      token_key: "id_token",
      scope: ["openid", "profile", "application_groups"],
      callback: "/oidc/authorize/callback/",
      userinfo_endpoint: "/api/v1/users/me/"
    },
    google: {
      _scheme: "oidc",
      issuer: "https://accounts.google.com",
      client_id:
        "734965342250-0evepiepn69sqsoiruo0834uq85nk8pq.apps.googleusercontent.com",
      token_key: "id_token"
    }
  },
  redirect: {
    login: "/account/login/",
    logout: "/account/login/",
    callback: "/oidc/authorize/callback/",
    home: "/"
  },
  rewriteRedirects: false,
  fullPathRedirect: false,
  autoLoginOIDCStrategy: "realHrSoft"
};

sidebarItems

options.sidebarItems = [
  {
    title: "Noticeboard",
    icon: mdiMonitorDashboard,
    to: { name: "noticeboard" }
  },
  {
    title: "Calendar & Events",
    icon: mdiCalendarMonthOutline,
    children: [
      {
        title: "Calendar",
        icon: mdiCalendarTextOutline,
        to: { name: "user-calendar" }
      },
      {
        title: "Events",
        icon: mdiCalendarStar,
        to: { name: "user-events" }
      }
    ]
  },
  // ...
]

permissionGetterName Your custom store module getter name. This getter takes vue-router $route as an argument and returns true or false

// Example
options.permissionGetterName = 'permission/hasPermission'

logo

options.logo = require("./assets/logo.svg")

name

options.name = "RealHrSoft"

slogan

options.slogan = "Complete HR Technology" // can be html string

loginUserLabel

options.loginUserLabel = "Email"

loginUserFieldName

options.loginUserFieldName = "email"

loginUserAppendIcon

import { mdiEmail } from "@mdi/js";
options.loginUserAppendIcon = mdiEmail

appBarAfterSpacer

options.appBarAfterSpacer = require("./layouts/AppBarAfterSpacer.vue").default

vuetifyOptions

// see vuetify documents for detail
options.vuetifyOptions = { //Default
  icons: {
    iconfont: "mdiSvg"
  }
}

routes

// only the list of routes and components
// see vue-router documentation for this option
// this will extend shell existing routes
options.routes = []

beforeRouteCallback This function accepts store as an arugument

options.beforeRouteCallback = function(store){
  //....
}

storeModules

options.storeModules = {}

userData

options.userData = {
  manageShellState(isLoggedIn, commit, user, axios) {
  /*
    This method will be called in every login and logout.
    Host of this module must apply these mutations
    Available mutations ( <mutation_name>, <payload> )
    if(isLoggedIn){
      'shell/SET_FULL_NAME', <str:full_name>
      'shell/SET_EMAIL', <str:email>
      'shell/SET_PICTURE', <str:url>
      'shell/SET_SWITCHABLE_ORGANIZATIONS', <Array: organization_array>
      'shell/SET_CURRENT_ORGANIZATION_NAME', <str:name>
      'shell/SET_CURRENT_ORGANIZATION_ID', <str/number:id>
      'shell/SET_CURRENT_ORGANIZATION_PERMISSIONS' <Array: permission_string>
      'shell/SET_USER_ORGANIZATION_NAME' <str: name>
      'shell/SET_USER_ORGANIZATION_ID' <str/number:id>
    } else {
      'shell/CLEAR_ORGANIZATION_DATA>', <NO PAYLOAD>
    }
  */
};
}

rhr-core-shell

axios core-js dayjs dotprop nanoid register-service-worker vue vue-router vuetify vuex

@infinitebrahmanuniverse/nolb-rh @everything-registry/sub-chunk-2667

5 years ago

5 years ago

5 years ago

5 years ago