AngularJS SPA Controller Claims Authorization

created by ozkary.com

by ozkary

HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<div ng-app="app">
  <div class="body-content panel-body">
    <div class="container-fluid">
    <div class="row">
                <div class="col-lg-12">
                    <h4 class="page-header">Controller Claims Authorization - ozkary.com</h4>
                </div>
                <!-- /.col-lg-12 -->
    </div>
     <div class="row" ng-controller="app.ctrl.grid as ctrl">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                           My Claims
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body text-center" >      
                       
                            <ul class="list-group text-left">
                                <li ng-repeat="(key,value) in ctrl.claims" class="list-group-item">
                                    <label style="width:150px;">{{key}}</label>
                                    <input type="text" class="form-control-static form-input" maxlength="25" ng-disabled="key !== ctrl.selected" ng-model="ctrl.claims[key]" />
                                    <span class="pull-right">
                       ...

JavaScript

(function() {
        'use strict';
        
        var app = angular.module('app', []);
        app.factory('app.svc.auth', [svcAuth]);   
        app.controller('app.ctrl.grid', ['app.svc.auth','$scope', ctrlGrid]);
               
        function svcAuth() {

            //simple claims container for demo purposes
            var claims = { 'Name': 'Ozkary', 'Title': 'Tech', 'app.delete': true, 'app.edit': true, 'app.create': true };

            function hasClaim(key) {
                return claims[key];//todo  handle multiple claims
            }

            return {
                claims: claims,
                hasClaim:hasClaim
            };
        }            

       function ctrlGrid($svcAuth, $scope) {
           var ctrl = this;         
           ctrl.claims = $svcAuth.claims;
           
           ctrl.edit = function(key) {

               if (ctrl.selected === key) {
                   ctrl.selected = null;
               } else {
                   ctrl.selected = key;
               }               
           }

           ctrl.remove = function(key){
               delete ctrl.claims[key];
           }

           /*
           *  creates the mapping between controller variables to claim tag.
           */
           ctrl.claimMapping = function () {
               ctrl.editAccess = false;
               ctrl.deleteAccess = false;
               var mapping = {};
               mapping['editAccess'] = 'app.edit';
               mapping['deleteAccess'] = 'app.delete';
               //add other var/tag map
               return mapping;
           }


           /*
           *  sets the controller variables to true/false
           */
           ctrl.claimResults = function (claims) {
               ctrl.editAccess = claims['editAccess'];//set to true/false
               ctrl.deleteAccess = claims['deleteAccess'];
           }
           
             /*
           *  initialize the claim validation to set the controller variable...