Giter VIP home page Giter VIP logo

angular-worldskills-utils's Introduction

WorldSkills AngularJS Utils

Installation

Install with Bower:

bower install angular-worldskills-utils --save

Load the JavaScript in your HTML file:

<script src="bower_components/angular-worldskills-utils/src/angular-worldskills-utils.js"></script>

Usage

Add the dependency to your AngularJS module:

angular.module('yourApp', ['worldskills.utils']);

Define the following constants (don't forget to replace your client id):

angular.module('yourApp').constant('WORLDSKILLS_CLIENT_ID', '<your client id>');
angular.module('yourApp').constant('WORLDSKILLS_API_AUTH', 'https://api.worldskills.org/auth');
angular.module('yourApp').constant('WORLDSKILLS_AUTHORIZE_URL', 'https://auth.worldskills.org/oauth/authorize');
angular.module('yourApp').constant('LOAD_CHILD_ENTITY_ROLES', false);
angular.module('yourApp').constant('FILTER_AUTH_ROLES', [<array of application codes>]);

Authentication

To use any of the following authentication functions, make sure to use the auth object in at least one controller, e.g.:

angular.module('yourApp').controller('ContainerCtrl', function($scope, auth) {
    $scope.auth = auth;
});

Return to state

To load the previous state after the user has logged in on WorldSkills Auth, you can use sessionStorage.getItem('redirect_to_state'). Configure the $urlRouterProvider as following:

angular.module('yourApp').config(function($urlRouterProvider) {
    $urlRouterProvider.otherwise(function ($injector, $location) {
        // check for existing redirect
        var $state = $injector.get('$state');
        var redirectToState = sessionStorage.getItem('redirect_to_state');
        var redirectToParams = sessionStorage.getItem('redirect_to_params');
        sessionStorage.removeItem('redirect_to_state');
        sessionStorage.removeItem('redirect_to_params');
        if (redirectToState) {
            if (redirectToParams) {
                redirectToParams = angular.fromJson(redirectToParams);
            } else {
                redirectToParams = {};
            }
            $state.go(redirectToState, redirectToParams);
        } else {
            $state.go('your.home.state');
        }
    });
});

Require authenticated user

To require an authenticated user for certain states, add requireLoggedIn: true in the state data:

.state('your.state', {
    url: '/your/url',
    templateUrl: 'views/template.html',
    controller: 'YourCtrl',
    data: {
        requireLoggedIn: true
    }
})

You can also require specific roles for a state with requiredRoles:

.state('your.state', {
    url: '/your/url',
    templateUrl: 'views/template.html',
    controller: 'YourCtrl',
    data: {
        requireLoggedIn: true,
        requiredRoles: [
            {code: 100, role: 'Admin'}
        ]
    }
})

Custom fallbacks for forbidden state

Custom fallback in order to handle forbidden redirect manually rather than to redirect to login url automatically. Add forbiddenFallbad: function to app.js

.state('people', {
  url: '/people?search',
  templateUrl: 'views/people.html',
  controller: 'PersonnelCtrl',
  data:{
    requireLoggedIn: true,        
    forbiddenCallback: function(auth, $state){
      //state passed from $rootScope.$state
      $state.go('person.view', {'pid': auth.user.person_id});          
    },
    requiredRoles: [
      {code: 600, role: APP_ROLES.ADMIN},
      {code: 600, role: APP_ROLES.MANAGER}
    ]
  }
})

Also now allows custom fallbacks for login error state, use case: redirect to a signup page instead of auth.loginUrl

   .state('restrictedState', {
     url: '/needsLogin',
     templateUrl: 'views/restricted.html',
     controller: 'RestrictedCtrl',     
     data: {
      requireLoggedIn: true,
      unAuthenticatedCallback: function(auth, $state){
        $state.go('signup');
      },
       requiredRoles: [
         {code: 1800, role: APP_ROLES.ADMIN},
         {code: 1800, role: APP_ROLES.MANAGER},
         {code: 1800, role: APP_ROLES.USER}
       ]
     }
   })

   .state('signup', {
    url: '/signup',
    controller: 'SignupCtrl',
    templateUrl: 'views/signup.html',
    data: {
      requireLoggedIn: false
    }
   })

Spinner directive

Show an animated loading indicator graphic.

<ws-spinner ng=show="loading"></ws-spinner>

TextSpinner directive

Show a loading indicator on a button.

<button type="submit" class="btn btn-success">
	Save
	<ws-text-spinner ng-show="loading" class="ng-hide"></ws-text-spinner>
</button>

Spinner sizes

Added small and big versions

<ws-spinner class='bigSpinner'></ws-spinner>
<ws-spinner class='smallSpinner'></ws-spinner>

angular-worldskills-utils's People

Contributors

fabian avatar Joni-Aaltonen avatar gbervik avatar

Watchers

Fabian Vogler avatar Joni Aaltonen avatar Antony Zanetti avatar James Cloos avatar John Cox avatar Adam Walsh avatar Pierre Anctil avatar Waseem avatar

Forkers

Koffitony

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.