diff --git a/documentation/index.html.md b/documentation/index.html.md
index f13c6a82..9292ce18 100644
--- 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 GitHub.
diff --git a/src/components/login/auth.js b/src/components/login/auth.js
new file mode 100755
index 00000000..0d4e1a87
--- /dev/null
+++ 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
new file mode 100644
index 00000000..7c893492
--- /dev/null
+++ b/src/components/login/facilitator.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
This is the facilitator page for the simulation. Only end users who are facilitators and are logged in will have access to this page.