forio · mmrj · Apr 24, 2017 · Apr 24, 2017 · Apr 24, 2017 · Apr 24, 2017
diff --git a/documentation/index.html.md b/documentation/index.html.md
@@ -84,9 +84,7 @@ In addition to the Epicenter.js library itself, the Epicenter JS Libs project al
 
 Provides a login form for team members and end users of your project. Includes a group selector for end users that are members of multiple groups.
 
-* `index.html`: The login form.
-* `login.css`: Provides styling for the group selector pop over dialog.
-* `login.js`: Uses the [Authorization Manager](./generated/auth-manager/) to log in users.
+See [How To: Add a Login Page to your Authenticated Project](../how_to/login/) for a detailed walkthrough.
 
 The login component is available from <a href="https://github.com/forio/epicenter-js-libs/tree/master/dist/components/" target="_blank">GitHub</a>.
 

diff --git a/src/components/login/auth.js b/src/components/login/auth.js
@@ -0,0 +1,76 @@
+
+    'use strict';
+
+    var authManager = new F.manager.AuthManager();
+    /*
+        If you change the file names for the facilitator, student, or login pages,
+        make sure to update the file names here.
+
+        If you change the file name for the login page, 
+        make the corresponding change in logout.js.
+    */
+    var pages = {
+        fac: 'facilitator.html',
+        student: 'index.html',
+        login: 'login.html'
+    };
+
+    function redirectToLogin(error) {
+        console.log('Session not found, redirecting to ' + pages.login);
+        window.location.href = pages.login;
+    }
+
+    function endsWith(str, ending) {
+        return str.indexOf(ending, str.length - ending.length) !== -1;
+    }
+
+    function findCurrentPage() {
+        var pathname = window.location.pathname;
+        pathname = pathname === '/' ? 'index.html' : pathname;
+        var pageKey;
+        Object.keys(pages).forEach(function (key) {
+            var page = pages[key];
+            if (endsWith(pathname, page)) {
+                pageKey = key;
+            }
+        });
+        return pageKey;
+    }
+
+    function checkLoginAndRedirect() {
+        var session = authManager.getCurrentUserSessionInfo();
+        var isFac = session.isFac || session.isTeamMember;
+        if (!session || Object.keys(session).length === 0) {
+            redirectToLogin();
+            return false;
+        }
+
+        var currentPage = findCurrentPage();
+        if (isFac && currentPage !== 'fac') { // Facilitators are always sent to the fac page.
+            window.location.href = pages.fac;
+            return false;
+        } else if (!isFac && currentPage === 'fac') { // Standard end users trying to access the fac page are redirected.
+            window.location.href = pages.student;
+            return false;
+        } else if (!isFac) {
+            /*
+                Optionally, you can redirect standard end users to the student page.
+                However, if you have a multiple pages for standard end users, 
+                you probably want to leave them where they are.
+            */
+            // window.location.href = pages.student;
+            return false;
+        }
+        return true;
+    }
+
+    function logout() {
+        authManager.logout().then(function (token) {
+            console.log('Logged out, redirecting to login page');
+            authManager.sessionManager.getStore().remove('epicenter-scenario');
+            window.location.href = pages.login;
+        });
+    }
+
+    checkLoginAndRedirect();
+
diff --git a/src/components/login/facilitator.html b/src/components/login/facilitator.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title></title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <!-- optionally you can include bootstrap and/or other styling -->
+        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+        <link rel="stylesheet" href="//forio.com/tools/js-libs/<%= version %>/components/login/login.css">
+
+        <!-- make sure to include jquery and epicenter.js -->
+        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+        <script src="//forio.com/tools/js-libs/<%= version %>/epicenter.min.js"></script>
+
+        <!-- for every page you want to protect, include auth.js -->
+        <script src="//forio.com/tools/js-libs/<%= version %>/components/login/auth.js"></script>
+    </head>
+    <body>
+        <!--
+            The facilitator page for your simulation.
+        -->
+        <div class="body">This is the facilitator page for the simulation. Only end users who are facilitators and are logged in will have access to this page.</div>
+
+        <!-- explicitly log out; return to the login page -->
+        <button onclick="logout()">Log out</button>
+
+        <div class="powered-by"></div>
+    </body>
+</html>
diff --git a/src/components/login/index.html b/src/components/login/index.html
@@ -7,51 +7,26 @@
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <!-- the inserted pop over is compatible with bootstrap classes, so optionally you can include bootstrap -->
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+        <!-- optionally you can include bootstrap and/or other styling -->
+        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+        <link rel="stylesheet" href="//forio.com/tools/js-libs/<%= version %>/components/login/login.css">
 
-        <!-- login.css provides styling for the group selector pop over dialog -->
-        <link rel="stylesheet" href="https://forio.com/tools/js-libs/<%= version %>/components/login/login.css">
+        <!-- make sure to include jquery and epicenter.js -->
+        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+        <script src="//forio.com/tools/js-libs/<%= version %>/epicenter.min.js"></script>
 
-        <!-- make sure to include jquery, epicenter.js and login.js -->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
-        <script src="https://forio.com/tools/js-libs/<%= version %>/epicenter.min.js"></script>
-        <script src="https://forio.com/tools/js-libs/<%= version %>/components/login/login.js"></script>
+        <!-- for every page you want to protect, include auth.js -->
+        <script src="//forio.com/tools/js-libs/<%= version %>/components/login/auth.js"></script>
     </head>
     <body>
         <!--
-            The main login form. Make sure you make the id="login". Also you can specify a
-            page to redirect to after logging in using the action property.
-
-            Inside the form, specify the username and password fields that the JavaScript
-            will use as credentials to login. Optionally you can specify an account
-            and project to override the url.
-
-            The login action happens on the submit event for the form.
+            The main page for your simulation.
         -->
-        <form id="login" action="simulation.html">
-            <div>
-                <h4 class="text-center">Please Login to this Simulation</h4>
-                <hr>
-                <div class="form-group control">
-                    <label for="">Username</label>
-                    <input id="username" type="text" class="form-control">
-                </div>
-                <div class="form-group control">
-                    <label for="">Password</label>
-                    <input id="password" type="password" class="form-control">
-                </div>
-                <!-- account and project fields are optional, normally account/project are extracted from the url -->
-                <input type="hidden" id="account">
-                <input type="hidden" id="project">
+        <div class="body">This is the main page for the simulation. Only standard (non-facilitator) end users who are logged in will have access to this page.</div>
+
+        <!-- explicitly log out; return to the login page -->
+        <button onclick="logout()">Log out</button>
 
-                <div class="control">
-                    <label for="">&nbsp;</label><button class="btn btn-signin pull-right" type="submit">Login</button>
-                </div>
-                <!-- add a login-message div if you want to display login failed errors (e.g. wrong username or password) -->
-                <div id="login-message" class="alert alert-danger" style="display:none;"></div>
-            </div>
-        </form>
         <div class="powered-by"></div>
     </body>
 </html>
diff --git a/src/components/login/login.html b/src/components/login/login.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title></title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <!-- the inserted pop over is compatible with bootstrap classes, so optionally you can include bootstrap -->
+        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+
+        <!-- login.css provides styling for the group selector pop over dialog -->
+        <link rel="stylesheet" href="//forio.com/tools/js-libs/<%= version %>/components/login/login.css">
+
+        <!-- make sure to include jquery, epicenter.js, and login.js -->
+        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+        <script src="//forio.com/tools/js-libs/<%= version %>/epicenter.min.js"></script>
+        <script src="//forio.com/tools/js-libs/<%= version %>/components/login/login.js"></script>
+    </head>
+    <body>
+        <!--
+            The main login form.
+            The form id must be "login". 
+            The form action is the page where standard end users are directed after successfully logging in.
+            If you change the form action, make the corresponding change in auth.js (pages.student).
+
+            Inside the form, specify the username and password fields that the JavaScript
+            will use as credentials to login. Optionally you can specify an account
+            and project to override the url.
+
+            The login action happens on the submit event for the form.
+        -->
+        <form id="login" action="index.html">
+            <div>
+                <h4 class="text-center">Please Login to this Simulation</h4>
+                <hr>
+                <div class="form-group control">
+                    <label for="">Username</label>
+                    <input id="username" type="text" class="form-control">
+                </div>
+                <div class="form-group control">
+                    <label for="">Password</label>
+                    <input id="password" type="password" class="form-control">
+                </div>
+                <!-- account and project fields are optional, normally account/project are extracted from the url -->
+                <input type="hidden" id="account">
+                <input type="hidden" id="project">
+
+                <div class="control">
+                    <label for="">&nbsp;</label><button class="btn btn-signin pull-right" type="submit">Login</button>
+                </div>
+                <!-- add a login-message div if you want to display login failed errors (e.g. wrong username or password) -->
+                <div id="login-message" class="alert alert-danger" style="display:none;"></div>
+            </div>
+        </form>
+        <div class="powered-by"></div>
+    </body>
+</html>
diff --git a/src/components/readme.md b/src/components/readme.md
@@ -6,9 +6,12 @@ In addition to the epicenter.js library itself, the Epicenter JS Libs project al
 
 Provides a login form for team members and end users of your project. Includes a group selector for end users that are members of multiple groups.
 
-* `index.html`: The login form.
-* `login.css`: Provides styling for the group selector pop over dialog.
+* `login.html`: The login form.
+* `index.html`: The main page of the simulation.
+* `facilitator.html`: A page in the simulation for end users who are facilitators.
 * `login.js`: Uses the [Authorization Manager](./generated/auth-manager/) to log in users.
+* `auth.js`: Checks whether visitors to each page are logged in or not, and whether they are standard end users or facilitators. Anyone not logged in is redirected to the login form.
+* `login.css`: Provides styling.
 
 
 **Assignment Component**