Show logged in email and logout option - fix fossasia#71 (fossasia#78)

src/chatbot.html

@@ -23,6 +23,9 @@
         	<img class="logo" src="images/susi_logo_white.png">
         </a>
         <img class="settings-icon" id="settingsIcon" src="images/settings.svg">
+		<div class="logged-info">
+			<span class="logged-email" id="loggedEmail"></span>
+		</div>
 		</div>
 		<section class="messages-history" id="messagesHistory">
 

src/index.css

@@ -31,8 +31,16 @@ body{
 .top-bar{
   background-color: #4285f4;
   height: 12%;
+  padding-bottom: 10px;
+}
+.logged-info{
+  text-align: center;
+  color: #fff;
+  font-size: 14px;
+}
+.logged-email{
+  display: none;
 }
-
 .logo{
   display: relative;
   margin-left: 35%;

src/scripts/main.js

@@ -2,6 +2,7 @@
 var messageFormElement = document.getElementById("messageForm");
 var inputMessageElement = document.getElementById("inputMessage");
 var messagesHistoryElement = document.getElementById("messagesHistory");
+var loggedEmail = document.getElementById("loggedEmail");
 var topBar = document.getElementById("nav");
 var messageCount=0;
 var messagesHistory=[];
@@ -14,7 +15,22 @@ messageFormElement.addEventListener("submit", function (event) {
 	event.preventDefault();
 	handleMessageInputSubmit();
 });
-
+// initialization based on cache status
+var buffer = browser.storage.sync.get(null);
+buffer.then(function(res){
+	if(res["loggedUser"]){
+		topBar.style.height="14%";
+		messagesHistoryElement.style.height="73%";
+		loggedEmail.style.display="inline";
+		loggedEmail.innerText=res["loggedUser"].email;
+	}
+	else{
+		topBar.style.height="12%";
+		messagesHistoryElement.style.height="75%";
+		loggedEmail.style.display="none";
+		loggedEmail.innerText="";
+	}
+});
 if(enableSync){
 //browser.storage.sync.clear(); //Uncomment the line and run the extension to clear the storage.
 	document.addEventListener("DOMContentLoaded", restoreMessages);

src/scripts/options.js

@@ -2,6 +2,8 @@
 /*global messagesHistory, enableSync, applyTheme, userMapObj, htmlMsg*/
 var settings = document.getElementById("settings");
 var clearMessageHistoryButton = document.getElementById("clearMessageHistory");
+var loginForm = document.getElementById("login");
+var logoutButton = document.getElementById("logout");
 var loginButton = document.getElementById("login");
 var accessToken = "";
 var time = "" ;
@@ -11,14 +13,16 @@ var userMapObj={latitude:null,longitude:null,status:null,mapids:[]};
 
 settings.addEventListener("submit", saveOptions);
 loginButton.addEventListener("submit", login);
+logoutButton.addEventListener("click", logout);
 clearMessageHistoryButton.addEventListener("click", clearMessageHistory);
 
 document.addEventListener("DOMContentLoaded", persistSettings);
 
 function login(event){
 	event.preventDefault();
+	var email=document.getElementById("username").value;
 	var loginEndPoint = BASE_URL+"/aaa/login.json?type=access-token&login="
-			+ encodeURIComponent(document.getElementById("username").value)
+			+ encodeURIComponent(email)
 			+ "&password="
 			+ encodeURIComponent(document.getElementById("password").value);
 	$.ajax({
@@ -30,10 +34,17 @@ function login(event){
 		success: function (response) {
 			if(response.accepted){
 				accessToken = response.access_token;
+				browser.storage.sync.set({
+					loggedUser:{
+						email:email
+					}
+				});
 				time = response.valid_seconds;
 				alert(response.message);
 				applyUserSettings();
 				retrieveUserChatHistory();
+				loginForm.style.display="none";
+				logoutButton.style.display="block";
 			}
 			else {
 				alert("Login Failed. Try Again");
@@ -56,7 +67,13 @@ function login(event){
 	});
 
 }
-
+function logout(){
+	browser.storage.sync.remove("messagesHistory");
+	browser.storage.sync.remove("userMapObj");
+	browser.storage.sync.remove("loggedUser");
+	loginForm.style.display="block";
+	logoutButton.style.display="none";
+}
 function applyUserSettings(){
 	var userSettings = BASE_URL+"/aaa/listUserSettings.json?access_token="+accessToken;
 	$.ajax({
@@ -72,7 +89,7 @@ function applyUserSettings(){
 					theme: response.settings.theme
 				});
 			}
-					
+
 		}
 	});
 
@@ -115,7 +132,6 @@ function clearMessageHistory(){
 function persistSettings(){
 	var buffer = browser.storage.sync.get(null);
 	buffer.then(function(res){
-
 		if(res["theme"]){
 			if(res["theme"]=="dark"){
 				$("#theme").val("dark");
@@ -124,6 +140,14 @@ function persistSettings(){
 				$("#theme").val("light");
 			}
 		}
+		if(res["loggedUser"]){
+			loginForm.style.display="none";
+			logoutButton.style.display="block";
+		}
+		else{
+			loginForm.style.display="block";
+			logoutButton.style.display="none";
+		}
 
 	});
 }
@@ -134,7 +158,7 @@ function saveOptions(e) {
 	browser.storage.sync.set({
 		theme: document.querySelector("#theme").value
 	});
-  
+
 }
 
 function createMyMessageHistory(message,timeString,msgId){
@@ -347,4 +371,4 @@ function urlDomain(data) {
 	var a = document.createElement("a");
 	a.href = data;
 	return a.hostname;
-}
+}

src/settings.css

@@ -47,4 +47,8 @@ button{
     cursor: pointer;
     font-size: 16px;
     background-color: #4285f4;
-}
+}
+
+.hide{
+    display: none;
+}

src/settings.html

@@ -5,9 +5,8 @@
 <link rel="stylesheet" type="text/css" href="settings.css">
 </head>
 <body>
-<h3>Login</h3>
-<hr>
 <form id="login" >
+  <h3>Login</h3>
 <input type="email" id="username" placeholder="email">
 <br>
 <input type="password" id="password" placeholder="password">
@@ -17,6 +16,7 @@ <h3>Login</h3>
 <br>
 <a href="https://chat.susi.ai/">New User? Visit our website to sign up for free.</a>
 </form>
+<input type="button" id="logout" class="hide" value="Logout" />
 <br>
 <h3>Settings</h3>
 <hr>
@@ -37,4 +37,4 @@ <h4>Theme</h4>
 <script src="scripts/main.js"></script>
 <script src="scripts/options.js"></script>
 </body>
-</html>
+</html>