From 780c08ab8b8a33ec8d08821f839f0d5dc034931b Mon Sep 17 00:00:00 2001 From: Georgios Andreadis Date: Mon, 3 Apr 2017 10:04:21 +0200 Subject: Rename user.ts to user-authentication.ts --- README.md | 4 ++- src/scripts/main.entry.ts | 2 +- src/scripts/profile.entry.ts | 2 +- src/scripts/projects.entry.ts | 2 +- src/scripts/user-authentication.ts | 65 ++++++++++++++++++++++++++++++++++++++ src/scripts/user.ts | 65 -------------------------------------- tsconfig.json | 2 +- 7 files changed, 72 insertions(+), 70 deletions(-) create mode 100644 src/scripts/user-authentication.ts delete mode 100644 src/scripts/user.ts diff --git a/README.md b/README.md index 1717fb12..1531b46e 100644 --- a/README.md +++ b/README.md @@ -13,11 +13,13 @@ Let's first take a look at how the user interacts with the frontend. The user starts at the splashpage (`index.html`) where he/she gets a first impression of OpenDC, including screenshots and features. After signing in with Google Authentication, the user is redirected to the page listing all projects (`projects.html`) shared or owned by that user. Here the user also has the possibility to open a particular project, redirecting to the main application page (`app.html`). #### Main Application -The main application allows the user to construct and simulate a datacenter. To understand how the user can do this, have a look at the state diagram below. It visualizes the main interactions a user can make with the application, as well as under which conditions. +The main application allows the user to construct and simulate a datacenter. To understand how the user can do this, have a look at the state diagram below. It visualizes the main interactions a user can make with the application, as well as under which conditions those can happen. ![OpenDC Frontend Interaction State Diagram](https://raw.githubusercontent.com/atlarge-research/opendc-frontend/master/images/opendc-frontend-interaction-state-diagram.png) ### Components +Under the hood, this looks as follows: + [TODO] ## Setup for Local Development diff --git a/src/scripts/main.entry.ts b/src/scripts/main.entry.ts index 48ab7f37..84726ed4 100644 --- a/src/scripts/main.entry.ts +++ b/src/scripts/main.entry.ts @@ -7,7 +7,7 @@ window["$"] = $; require("jquery-mousewheel"); window["jQuery"] = $; -require("./user"); +require("./user-authentication"); $(document).ready(function () { diff --git a/src/scripts/profile.entry.ts b/src/scripts/profile.entry.ts index b194e3a9..0cb77f50 100644 --- a/src/scripts/profile.entry.ts +++ b/src/scripts/profile.entry.ts @@ -1,7 +1,7 @@ /// import * as $ from "jquery"; import {APIController} from "./controllers/connection/api"; -import {removeUserInfo} from "./user"; +import {removeUserInfo} from "./user-authentication"; window["jQuery"] = $; diff --git a/src/scripts/projects.entry.ts b/src/scripts/projects.entry.ts index 9ae78586..d0ddb8b9 100644 --- a/src/scripts/projects.entry.ts +++ b/src/scripts/projects.entry.ts @@ -4,7 +4,7 @@ import {APIController} from "./controllers/connection/api"; import {Util} from "./util"; window["jQuery"] = $; -require("./user"); +require("./user-authentication"); $(document).ready(() => { diff --git a/src/scripts/user-authentication.ts b/src/scripts/user-authentication.ts new file mode 100644 index 00000000..e9d13091 --- /dev/null +++ b/src/scripts/user-authentication.ts @@ -0,0 +1,65 @@ +/// +import * as $ from "jquery"; + + +// Redirect the user to the splash page, if not signed in +if (localStorage.getItem("googleToken") === null) { + window.location.replace("/"); +} + +// Set the username in the navbar +$("nav .user .username").text(localStorage.getItem("googleName")); + + +// Set the language of the GAuth button to be English +window["___gcfg"] = { + lang: 'en' +}; + +/** + * Google signin button. + */ +window["gapiSigninButton"] = () => { + gapi.signin2.render('google-signin', { + 'scope': 'profile email', + 'onsuccess': (googleUser) => { + const auth2 = gapi.auth2.getAuthInstance(); + + // Handle signout click + $("nav .user .sign-out").click(() => { + removeUserInfo(); + auth2.signOut().then(() => { + window.location.href = "/"; + }); + }); + + // Check if the token has expired + const currentTime = (new Date()).getTime() / 1000; + + if (parseInt(localStorage.getItem("googleTokenExpiration")) - currentTime <= 0) { + auth2.signIn().then(() => { + localStorage.setItem("googleToken", googleUser.getAuthResponse().id_token); + const expirationTime = (new Date()).getTime() / 1000 + parseInt(googleUser.getAuthResponse().expires_in) - 5; + localStorage.setItem("googleTokenExpiration", expirationTime.toString()); + }); + } + }, + 'onfailure': () => { + window.location.href = "/"; + console.log("Oops, something went wrong with your Google signin... Try again?"); + } + }); +}; + + +/** + * Removes session storage items. + */ +export function removeUserInfo() { + localStorage.removeItem("googleToken"); + localStorage.removeItem("googleTokenExpiration"); + localStorage.removeItem("googleName"); + localStorage.removeItem("googleEmail"); + localStorage.removeItem("userId"); + localStorage.removeItem("simulationId"); +} diff --git a/src/scripts/user.ts b/src/scripts/user.ts deleted file mode 100644 index e9d13091..00000000 --- a/src/scripts/user.ts +++ /dev/null @@ -1,65 +0,0 @@ -/// -import * as $ from "jquery"; - - -// Redirect the user to the splash page, if not signed in -if (localStorage.getItem("googleToken") === null) { - window.location.replace("/"); -} - -// Set the username in the navbar -$("nav .user .username").text(localStorage.getItem("googleName")); - - -// Set the language of the GAuth button to be English -window["___gcfg"] = { - lang: 'en' -}; - -/** - * Google signin button. - */ -window["gapiSigninButton"] = () => { - gapi.signin2.render('google-signin', { - 'scope': 'profile email', - 'onsuccess': (googleUser) => { - const auth2 = gapi.auth2.getAuthInstance(); - - // Handle signout click - $("nav .user .sign-out").click(() => { - removeUserInfo(); - auth2.signOut().then(() => { - window.location.href = "/"; - }); - }); - - // Check if the token has expired - const currentTime = (new Date()).getTime() / 1000; - - if (parseInt(localStorage.getItem("googleTokenExpiration")) - currentTime <= 0) { - auth2.signIn().then(() => { - localStorage.setItem("googleToken", googleUser.getAuthResponse().id_token); - const expirationTime = (new Date()).getTime() / 1000 + parseInt(googleUser.getAuthResponse().expires_in) - 5; - localStorage.setItem("googleTokenExpiration", expirationTime.toString()); - }); - } - }, - 'onfailure': () => { - window.location.href = "/"; - console.log("Oops, something went wrong with your Google signin... Try again?"); - } - }); -}; - - -/** - * Removes session storage items. - */ -export function removeUserInfo() { - localStorage.removeItem("googleToken"); - localStorage.removeItem("googleTokenExpiration"); - localStorage.removeItem("googleName"); - localStorage.removeItem("googleEmail"); - localStorage.removeItem("userId"); - localStorage.removeItem("simulationId"); -} diff --git a/tsconfig.json b/tsconfig.json index b6966990..436c6181 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,7 +10,7 @@ "src/scripts/colors.ts", "src/scripts/definitions.ts", "src/scripts/serverconnection.ts", - "src/scripts/user.ts", + "src/scripts/user-authentication.ts", "src/scripts/util.ts", "src/scripts/controllers/mapcontroller.ts", "src/scripts/controllers/simulationcontroller.ts", -- cgit v1.2.3