How to automatically throw up a message when "Angular" {{variable}} disappears after Session DIES

Question

I have an Angular app, the problem is, that when the {{controllername.name}} disappears for displaying the username, after session timeout, even though the warning for ngIdle comes up, the user can still refresh the screen and it keeps you on the page not taking you BACK to the login page.

The {{ctrlDash.userinfo.name}} disappears after 20 min. (See Below)

<ul class='nav'>
    <li class='dropdown dark user-menu'>
        <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
            <img width="23" height="23" alt="" src="assets/images/avatar.jpg" />
            <span class='user-name'>{{ctrlDash.userInfo.name}}</span>
            <b class='caret'></b>
        </a>
        <ul class='dropdown-menu'>
            <li>
                <a href='user_profile.html'>
                    <i class='icon-user'></i>
                    Profile
                </a>
            </li>
            <li>
                <a href='user_profile.html'>
                    <i class='icon-cog'></i>
                    Settings
                </a>
            </li>
            <li class='divider'></li>
            <li>
                <a href='sign_in.html' target="_self">
                    <i class='icon-signout'></i>
                    Sign out
                </a>
            </li>
        </ul>
    </li>
</ul>

So, now, I want this feature in an template to "DETECT" when that happens and force the user to login again;

This is the ng-template on the same page at the bottom:

<!-- Templates for Modals -->
    <script type="text/ng-template" id="warning-dialog.html">
        <div class="modal-header">
            <h3>You're Idle. Do Something!</h3>
        </div>
        <div class="modal-body" idle-countdown="countdown" ng-init="countdown=5">
            <p>You'll be logged out in <span class="label label-warning">{{countdown}}</span> <span ng-pluralize="" count="countdown" when="{'one': 'second', 'other': 'seconds' }"></span>.</p>
            <progressbar max="20" value="countdown" animate="true" class="progress-striped active" type="warning"></progressbar>
        </div>
        <div class="modal-footer">
            Quick! Move your mouse and your session will reset...
        </div>

    </script>
    <script type="text/ng-template" id="timedout-dialog.html">
        <div class="modal-header">
            <h3>Oh, Snap! You've Timed Out!</h3>
        </div>
        <div class="modal-body">
            <p>
            You were idle too long.  Click the button below to be redirected to the login page and begin again.
            </p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger btn-small" data-ng-click="goBack()">Back To Login</button>
        </div>
    </script>
    <!-- End Templates for Modals -->

First the TIMER detects IDLE and then the WARNING pops up and tells the user, OOPS, you need to login. But, when I hit refresh, it refreshes the page, but the {{ctrlDash.userInfo.name}} is now empty.

This is the code for ngIdle

//This is the IDLE function
            $scope.started = false;
            $scope.ended = false;

            $scope.events = [];
            $scope.idle = 20; //this is in ACTUAL seconds
            $scope.timeout = 20; //this is in ACTUAL seconds

            function closeModals() {
                if ($scope.warning) {
                    $scope.warning.close();
                    $scope.warning = null;
                }

                if ($scope.timedout) {
                    $scope.timedout.close();
                    $scope.timedout = null;
                }
            }

            $scope.$on('IdleStart', function () {
                closeModals();

                $scope.warning = $modal.open({
                    templateUrl: 'warning-dialog.html',
                    windowClass: 'modal-danger'
                });
            });

            $scope.$on('IdleEnd', function () {
                closeModals();
            });

            $scope.$on('IdleTimeout', function () {
                closeModals();
                $scope.timedout = $modal.open({
                    templateUrl: 'timedout-dialog.html',
                    windowClass: 'modal-danger'
                });
            });

            $scope.start = function () {
                closeModals();
                Idle.watch();
                $scope.started = true;
            };

            $scope.stop = function () {
                closeModals();
                Idle.unwatch();
                $scope.started = false;

            };
            if(!angular.isDefined($scope.goBack)) {

                console.log("I\'m not defined...");

                if(!angular.isFunction($scope.goBack)) {

                    console.log("I\'m not a function...")
                }
            }

            $scope.goBack = function _goBack() {
                closeModals();
                Idle.unwatch();
                $window.location.href = $scope.templateViews.logout;
            };

Finally: The goBack() function, within the controller = dashboardController, throws an error

Unreferenced error, goBack is NOT DEFINED.

Those are my issues. Would love to assistance, please. Thanks everyone.

Tonia · Answer 1 · 2015-05-12T18:52:22.880

I'm developing my first angular app, so not a master by any means.. I implemented a logout functionality. When the user attempts to go to any page after logging out, the controller checks for the presence of credentials, if none present, they get sent back to the login page with:

`$location.path('/login');`

--Updated from comment

I have 2 service modules (with factories). 1 - communicates with REST endpoints, 2 - deals with all my business stuff. When a user logs in, on success, I pass along the user's info to the setCreds function.

var businessService = angular.module('businessService, ['ngCookies' ]);
businessService.factory('setCreds', ['$cookies', function ($cookies) {
    return function(un, pw, userRole) {
        var token = un.concat(":", pw);
        $cookies.creds = token;
        $cookies.usersRole = userRole;

Then, the first thing I check on all my controllers, before getting any info needed for a view, is checkCreds.

if (!checkCreds()) {       
    $location.path('/login');
} else { ..proceed with getting stuff

My checkCreds looks like:

businessService.factory('checkCreds', ['$cookies', function ($cookies) {
    return function () {
        var returnVal = false;
        var creds = $cookies.creds;
        if (creds !== undefined && creds !== "") {
            returnVal = true;
        }
        return returnVal;
    };}]);

Be sure to inject your businessService into your app, and the service factory you want to use into your controller.

Tonia, thank you. Now I will ask you, do you have a wee bit more code to show "how you check" for the presence credentials? My problem is I have a Login Screen, the goes to the SPA (Single Page Application), the dashboard and other stuff.... so, when the timeout occurs (of the session I mean, and the {{dashCtrl.userInfo.name}} dies, the name where that is on the page, DISAPPEARS, hence, I simply need to check the "validity" of that $scope.userInfo.name <-- Which is part of the array object, correct? And inside the timeout, check for that being "GONE" and wala, implement your logic, right? Thx — Peter The Angular Dude, May 12 '15 at 00:52

How to automatically throw up a message when "Angular" {{variable}} disappears after Session DIES

1 Answers1