###Relution Client Security

A Login/Logout Module for Relution LiveData. Works well with generator-m Installation

bower install --save relution-client-security

###Docs

Scripts

<script src="bower_components/relution-client-login/dist/relution-client-security.js"></script>
<script src="bower_components/relution-client-login/dist/templates.js"></script>

Inject

angular.module('relutionApp', [
  'relutionClientSecurity'
])

Configuration

#####Forms Available Layout Styles (based on Ionic Framework):

• PLACEHOLDER_LABELS
• INLINE_LABELS
• STACKED_LABELS
• FLOATING_LABELS
• INSET_LABELS
• INPUT_ICONS

default is PLACEHOLDER_LABELS

$relutionSecurityConfigProvider.setLayoutStyle();

example:

$relutionSecurityConfigProvider.setLayoutStyle('INPUT_ICONS');

#####Icons default icons check ionic Icons

  android: {
    login: 'ion-log-in',
    username: 'ion-android-person',
    password: 'ion-lock-combination',
    organization: 'ion-briefcase',
    logout: 'ion-log-out'
  },
  ios: {
    login: 'ion-log-in',
    username: 'ion-ios-person',
    password: 'ion-lock-combination',
    organization: 'ion-briefcase',
    logout: 'ion-log-out'
  }

example

$relutionSecurityConfigProvider.setIcons();
//or
$relutionSecurityConfigProvider.setIcons('android', {
	login: 'my custom icon' ...
});
$relutionSecurityConfigProvider.setIcons('ios', {
	login: 'my custom icon' ...
});

#####Redirect after add your $state

After Login redirect:

$relutionSecurityConfigProvider.forwardStateAfterLogin = 'tab.messenger';

After Logout redirect:

$relutionSecurityConfigProvider.forwardStateAfterLogout = 'auth.login';

#####Server Urls Login

$relutionSecurityConfigProvider.loginUrl = 'http://coredev.mwaysolutions.com/rest/....';

Logout

$relutionSecurityConfigProvider.logoutUrl = 'http://coredev.mwaysolutions.com/rest/....';

Full example

angular.module('app', [])
.config(function ($relutionSecurityConfigProvider) {
    //$relutionSecurityConfigProvider.setLayoutStyle('STACKED_LABELS');
    //$relutionSecurityConfigProvider.setLayoutStyle('PLACEHOLDER_LABELS');
    //$relutionSecurityConfigProvider.setLayoutStyle('INLINE_LABELS');
    //$relutionSecurityConfigProvider.setLayoutStyle('FLOATING_LABELS');
    //$relutionSecurityConfigProvider.setLayoutStyle('INSET_LABELS');
    $relutionSecurityConfigProvider.setLayoutStyle('INPUT_ICONS');
    $relutionSecurityConfigProvider.setIcons();
    $relutionSecurityConfigProvider.forwardStateAfterLogin = 'tab.messenger';
    $relutionSecurityConfigProvider.forwardStateAfterLogout = 'auth.login';
    $relutionSecurityConfigProvider.loginUrl = 'myloginOnServer';
    $relutionSecurityConfigProvider.logoutUrl = 'mylogoutOnServer';

#Login #####Controller Please notice you have to use your Controller in 'as' mode and name it 'loginC' example:

ng-controller="LoginCtrl as loginC"

or in $stateProvider :

angular.module('auth', ['relutionClientSecurity'])
  .config(function ($stateProvider) {
    debugger;
    $stateProvider
      .state('auth', {
        url: '/auth',
        abstract: true,
        template: '<ion-nav-view name="auth"></ion-nav-view>'
      })
      .state('auth.login', {
        parent: 'auth',
        url: '/login',
        views: {
          'auth': {
            templateUrl: 'auth/templates/login/index.html',
            controller: 'LoginCtrl as loginC'
          }
        }
      });
  });

full controller

'use strict';
/**
 * @ngdoc controller
 * @name auth:LoginCtrl
 * @requires $scope
 * @description add your description
 */
angular.module('auth')
  .controller('LoginCtrl', function LoginCtrl($scope, $state, $filter, LoginService, AlertService, $relutionSecurityConfig) {
    var self = this;
    this.service = LoginService;
    
    //error handling form not valid
    this.getMessage = function (errors) {
      var message = 'Please check following Fields: ';
      angular.forEach(errors, function (error) {
        message += error.$name + ' ';
      });
      return message;
    };
    
    //submit form you get the form
    this.submit = function (loginform) {
      if (loginform.$valid) {
        this.service.logon();
      } else {
        //form not valid
        alert(self.getMessage(loginform.$error.required));
      }
    };
    
    //set view set icons
    $scope.$on('$ionicView.afterEnter', function () {
      self.icons = $relutionSecurityConfig.iconSet;
      self.include = $relutionSecurityConfig.view;
    });
  });

View

<div ng-if="!loginC.service.isLoggedIn" ng-include="loginC.include"></div>

ion view example:

<ion-view hide-nav-bar="true">
  <ion-content>
    <div ng-if="!loginC.service.isLoggedIn" ng-include="loginC.include"></div>
    <ion-list ng-if="loginC.service.isLoggedIn">
      <ion-item class="item-text-wrap">
        <p>You are already Logged in!</p>
      </ion-item>
      <ion-item ui-sref="tab.movies">
        Movies
      </ion-item>
      <ion-item ui-sref="tab.messenger">
        Chat
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

#Logout Directive

<relution-log-out-button></relution-log-out-button>

navbar example:

<ion-nav-bar class="bar-dark">
  <ion-nav-back-button>
  </ion-nav-back-button>
  <ion-nav-buttons side="secondary">
    <relution-log-out-button></relution-log-out-button>
  </ion-nav-buttons>
</ion-nav-bar>

###User Information The user service will be filled in after succesfully login available methods. Check the documentation.

###Header Information the HeaderService will be filled in after succesfully Login available Variables are - HeaderService.XGoferUser - HeaderService.XServer - HeaderService.XRelutionVersion

###Available Translation Keys

{{Username}}
{{Password}}
{{Login}}