Twitter API Question posted in
The official Twitter API documentation can be found here.

Best way to change html header on User Login AngularJS – Twitter-api

I’m working on an Angular Application in which the main page (where the angular module is initialize) has a header where I want to show different divs if the user is logged or not.

Here is the header code fragment of the index.html:

<header ng-controller="HeaderController">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-xs-12">
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 none">
                    <a class="navbar-brand" href="#page-top"><img src="Content/img/logo.png" class="img-responsive" alt="logo"></a>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-4 col-lg-offset-6 col-md-offset-6 col-sm-offset-9" ng-if="showloginheader">
                    <!--ng-if="showloginheader"-->
                    <span href="#" class="button-login" id="toggle-login" ng-click="OnLoginClick()">Ingresar</span><img src="Content/img/logo.png" id="logo_min" alt="logo">
                    <div id="login" ng-controller="LoginController">
                        <form name="loginForm" ng-submit="login()" role="form">
                            <input type="text" placeholder="Ingresá el usuario" required ng-model="username" />
                            <input type="password" placeholder="Ingresá la contraseña" required ng-model="password" />
                            <!--<input type="submit" class="login" value="Ingresar" />-->
                            <input type="checkbox" id="checkbox" checked><div class="reco-contra">Recordar contraseña</div>
                            <div class="olvi-contra"><a>Olvidaste la contraseña?</a></div>
                            <!--<div class="form-actions">-->
                            <input type="submit" class="login" value="Ingresar" /> <!-- ng-disabled="form.$invalid || vm.dataLoading" -->
                            <input type="submit" id="clase-fb" value="Ingresar con Facebook" />
                            <input type="submit" id="clase-tw" value="Ingresar con Twitter" />
                            <input type="submit" id="clase-goo" value="Ingresar con Google" />
                            <div class="olvi-contra"><a>Olvidaste la contraseña?</a></div>
                        </form>
                        <a href="#/register"><input type="submit" value="&iexcl;Registrate ahora!" /></a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-4 col-lg-offset-6 col-md-offset-6 col-sm-offset-9" ng-if="showcurrentuserheader"><!--ng-if="showcurrentuserheader"-->
                    <span href="#" class="log-img" id="toggle-login"><img src="img/fefe.png" alt="logo">Pablo</span>
                    <div id="login">
                        <div id="login-ok">
                            <div class="opcion-log">
                                <a href="recetas_obtenidas.html"><strong>RECETAS OBTENIDAS</a></strong>
                            </div>
                            <div class="opcion-log">
                                <a href="perfil.html"><i class="fa fa-cog fa-spin"></i>  PERFIL</a>
                            </div>
                            <div class="opcion-log">
                                <a href="#">CERRAR SESION</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

You can notice that there are two divs below the logo, what I want to achieve is to show the first div (the one that has a “ng-if=showloginheader”) meanwhile the user isn’t logged in and then show the other one when the user gets into the application (has a “ng-if=showcurrentuserheader”).

I would like to know which would be the best option to do this, until now I have tried to do it with the ng-if directive.

First I initialize the variables throw a service (to make it accesible by several controllers):

(function () {
    'use strict';

    angular
        .module('iziCooker')
        .factory('UserService', UserService);

    UserService.$inject = ['$http'];
    function UserService($http) {
        var service = {};
        var showloginheader = true;
        var showcurrentuserheader = false;

        service.GetLoginHeaderState = GetLoginHeaderState;
        service.GetCurrentUserHeaderState = GetCurrentUserHeaderState;
        service.ChangeHeadersVisibility = ChangeHeadersVisibility;

        return service;

                function GetLoginHeaderState() {
                return showloginheader;
            }

            function GetCurrentUserHeaderState() {
                return showcurrentuserheader;
            }

            function ChangeHeadersVisibility() {
                showloginheader = false;
                showcurrentuserheader = true;
            }

    }
})();

Then I assign those values in the HeaderController:

    (function () {
    'use strict';

    angular
        .module('iziCooker')
        .controller('HeaderController', HeaderController);

    HeaderController.$inject = ['$scope', 'UserService'];
    function HeaderController($scope, UserService) {
        $scope.showloginheader = UserService.GetLoginHeaderState();
        $scope.showcurrentuserheader = UserService.GetCurrentUserHeaderState();

    }

})();

Up to this point, this works properly because the HeaderController is injected when the application starts (it’s in the “master page” of Angular, index.html).

But then I tried to change the variables values in the login controller after you got a successful response from the DB to get into the application.

    (function () {
    'use strict';

    angular
        .module('iziCooker')
        .controller('LoginController', LoginController);

    LoginController.$inject = ['$location', 'AuthenticationService', 'FlashService', '$scope', 'UserService'];
    function LoginController($location, AuthenticationService, FlashService, $scope, UserService) {
        $scope.dataLoading = false;
        $scope.username = "";
        $scope.password = "";

        console.log("Login Controller Loaded!");

        //vm.login = login;

        (function initController() {
            // reset login status
            AuthenticationService.ClearCredentials();
        })();

      $scope.login =  function login() {
          $scope.dataLoading = true;
          AuthenticationService.Login($scope.username, $scope.password, function (response) {
                if (response.success) {
                    AuthenticationService.SetCredentials($scope.username, $scope.username);
                    UserService.ChangeHeadersVisibility();
                    $location.path('/map');
                } else {
                    FlashService.Error(response.message);
                    $scope.dataLoading = false;
                }
            });
      };

    }

})();

When I am redirected to the “/map” view, it still shows the first div. It seems that those ng-if variables aren’t updated or something like that. Perhaps I’m missing something.

I’m almost sure that this isn’t the way to do this, so I would to know if I must change something or change completely the code.

Thank you.

Edit:

Authentication Service

    (function () {
    'use strict';

    angular
        .module('iziCooker')
        .factory('AuthenticationService', AuthenticationService);

    AuthenticationService.$inject = ['$http', '$cookieStore', '$rootScope', '$timeout', 'UserService'];
    function AuthenticationService($http, $cookieStore, $rootScope, $timeout, UserService) {
        var service = {};

        service.Login = Login;
        service.SetCredentials = SetCredentials;
        service.ClearCredentials = ClearCredentials;

        return service;

        function Login(username, password, callback) {

            /* Dummy authentication for testing, uses $timeout to simulate api call
             ----------------------------------------------*/
            //$timeout(function () {
            //    var response;
            //    UserService.GetByUsername(username)
            //        .then(function (user) {
            //            if (user !== null && user.password === password) {
            //                response = { success: true };
            //            } else {
            //                response = { success: false, message: 'Username or password is incorrect' };
            //            }
            //            callback(response);
            //        });
            //}, 1000);

            /* Use this for real authentication
             ----------------------------------------------*/
            $http.post('ws/api/Usuario/Login', { username: username, password: password })
                .success(function (response) {
                    callback(response);
                });

        }

        function SetCredentials(username, password) {
            var authdata = Base64.encode(username + ':' + password);

            $rootScope.globals = {
                currentUser: {
                    username: username,
                    authdata: authdata
                }
            };

            $http.defaults.headers.common['Authorization'] = 'Basic ' + authdata; // jshint ignore:line
            $cookieStore.put('globals', $rootScope.globals);
        }

        function ClearCredentials() {
            $rootScope.globals = {};
            $cookieStore.remove('globals');
            $http.defaults.headers.common.Authorization = 'Basic';
        }
    }

    // Base64 encoding service used by AuthenticationService
    var Base64 = {

        keyStr: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',

        encode: function (input) {
            var output = "";
            var chr1, chr2, chr3 = "";
            var enc1, enc2, enc3, enc4 = "";
            var i = 0;

            do {
                chr1 = input.charCodeAt(i++);
                chr2 = input.charCodeAt(i++);
                chr3 = input.charCodeAt(i++);

                enc1 = chr1 >> 2;
                enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                enc4 = chr3 & 63;

                if (isNaN(chr2)) {
                    enc3 = enc4 = 64;
                } else if (isNaN(chr3)) {
                    enc4 = 64;
                }

                output = output +
                    this.keyStr.charAt(enc1) +
                    this.keyStr.charAt(enc2) +
                    this.keyStr.charAt(enc3) +
                    this.keyStr.charAt(enc4);
                chr1 = chr2 = chr3 = "";
                enc1 = enc2 = enc3 = enc4 = "";
            } while (i < input.length);

            return output;
        },

        decode: function (input) {
            var output = "";
            var chr1, chr2, chr3 = "";
            var enc1, enc2, enc3, enc4 = "";
            var i = 0;

            // remove all characters that are not A-Z, a-z, 0-9, +, /, or =
            var base64test = /[^A-Za-z0-9+/=]/g;
            if (base64test.exec(input)) {
                window.alert("There were invalid base64 characters in the input text.n" +
                    "Valid base64 characters are A-Z, a-z, 0-9, '+', '/',and '='n" +
                    "Expect errors in decoding.");
            }
            input = input.replace(/[^A-Za-z0-9+/=]/g, "");

            do {
                enc1 = this.keyStr.indexOf(input.charAt(i++));
                enc2 = this.keyStr.indexOf(input.charAt(i++));
                enc3 = this.keyStr.indexOf(input.charAt(i++));
                enc4 = this.keyStr.indexOf(input.charAt(i++));

                chr1 = (enc1 << 2) | (enc2 >> 4);
                chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
                chr3 = ((enc3 & 3) << 6) | enc4;

                output = output + String.fromCharCode(chr1);

                if (enc3 != 64) {
                    output = output + String.fromCharCode(chr2);
                }
                if (enc4 != 64) {
                    output = output + String.fromCharCode(chr3);
                }

                chr1 = chr2 = chr3 = "";
                enc1 = enc2 = enc3 = enc4 = "";

            } while (i < input.length);

            return output;
        }
    };

})();
Tags:

2

Answers


  1. 0

    The best way to implement something like this would be to set/unset a user object in your AuthenticationService. Then you can set a scope variable like $scope.authentication and make ng-if (or ng-show) dependent on the user object.

    Since it looks like you are setting up a user model in $rootScope you can use it anywhere. 

    $rootScope.globals = {
  currentUser: {
    username: username,
    authdata: authdata
  }
};

    So in your markup you will have this for the not logged in header:

    <div ... ng-hide="$root.globals.currentUser">

    And for the logged in header:

    <div ... ng-show="$root.globals.currentUser">
    Login or Signup to reply.
  2. 0

    You can also try ng-show and ng-hide:

    HTML

    <h1 ng-show="toggleHeader">First header</h1>
    <h1 ng-hide="toggleHeader">Second header</h1>

    JavaScript 

    $scope.toggleHeader = true; //false to switch header.

    Although the problem is elsewhere. Try writing {{showloginheader}} in your HTML to see if it really does change between true/false.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search