Testing login feature on app

public/index.html

@@ -152,7 +152,10 @@ <h1>Home</h1>
 					<div id="charts_tab" class="main_tabcontent"><h1>Charts</h1></div>
 					<div id="favorites_tab" class="main_tabcontent"><h1>Favorites</h1></div>
 					<div id="analyzer_tab" class="main_tabcontent"><h1>Link Analyzer</h1></div>
-					<div id="settings_tab" class="main_tabcontent"><h1>Settings</h1></div>
+					<div id="settings_tab" class="main_tabcontent">
+						<h1>Settings</h1>
+						<button type="button" name="button" onclick="openLoginPrompt()">Login with Email and Password</button>
+					</div>
 					<div id="about_tab" class="main_tabcontent"><h1>About</h1></div>
 				</div></section>
 			</div>

public/js/app.js

@@ -1,5 +1,4 @@
 // Debug messages for socketio
-socket.emit("init");
 socket.on("message", function(msg){
 	console.log(msg)
 })

public/js/init.js

@@ -6,23 +6,39 @@ main_selected=""
 toastsWithId = {}
 
 function toast(msg, icon=null, dismiss=true, id=null){
-	if (id && $(`div.toastify[toast_id=${id}]`).length)
+	if (toastsWithId[id]){
-		return
+		toastObj = toastsWithId[id]
-	if (icon == null)
+		toastDOM = $(`div.toastify[toast_id=${id}]`)
-		icon = ""
+		if (msg){
-	else if (icon=='loading')
+			toastDOM.find(".toast-message").html(msg)
-		icon = `<div class="circle-loader"></div>`
+		}
-	else
+		if (icon){
-		icon = `<i class="material-icons">${icon}</i>`
+			if (icon=='loading')
-	toastObj = Toastify({
+				icon = `<div class="circle-loader"></div>`
-		text: `<span class="toast-icon">${icon}</span><span class="toast-message">${msg}</toast>`,
+			else
-		duration: dismiss ? 3000 : 0,
+				icon = `<i class="material-icons">${icon}</i>`
-		gravity: 'bottom',
+			toastDOM.find(".toast-icon").html(icon)
-		position: 'left'
+		}
-	}).showToast()
+		if (dismiss !== null && dismiss){
-	if (id){
+			setTimeout(function(){ toastObj.hideToast() }, 3000);
-		toastsWithId[id] = toastObj
+		}
-		$(toastObj.toastElement).attr('toast_id', id)
+	}else{
+		if (icon == null)
+			icon = ""
+		else if (icon=='loading')
+			icon = `<div class="circle-loader"></div>`
+		else
+			icon = `<i class="material-icons">${icon}</i>`
+		toastObj = Toastify({
+			text: `<span class="toast-icon">${icon}</span><span class="toast-message">${msg}</toast>`,
+			duration: dismiss ? 3000 : 0,
+			gravity: 'bottom',
+			position: 'left'
+		}).showToast()
+		if (id){
+			toastsWithId[id] = toastObj
+			$(toastObj.toastElement).attr('toast_id', id)
+		}
 	}
 }
 
@@ -31,23 +47,28 @@ socket.on("toast", (data)=>{
 })
 
 socket.on("updateToast", (data)=>{
-	if (toastsWithId[data.id]){
+	toast(data.msg, data.icon || null, data.dismiss !== undefined ? data.dismiss : true, data.id || null)
-		toastObj = toastsWithId[data.id]
+})
-		toastDOM = $(`div.toastify[toast_id=${data.id}]`)
+
-		if (data.msg){
+function openLoginPrompt(){
-			toastDOM.find(".toast-message").html(data.msg)
+	socket.emit("loginpage")
-		}
+}
-		if (data.icon){
+
-			if (data.icon=='loading')
+socket.emit("init");
-				icon = `<div class="circle-loader"></div>`
+if (localStorage.getItem("arl")){
-			else
+	socket.emit("login", localStorage.getItem("arl"));
-				icon = `<i class="material-icons">${data.icon}</i>`
+}
-			toastDOM.find(".toast-icon").html(icon)
+
-		}
+socket.on("logging_in", function(){
-		if (data.dismiss !== null && data.dismiss){
+	toast("Logging in", "loading", false, "login-toast")
-			setTimeout(function(){ toastObj.hideToast() }, 3000);
+})
-		}
+
+socket.on("logged_in", function(data){
+	if (data.status != 0){
+		console.log(data)
+		toast("Logged in", "done", true, "login-toast")
+		if (data.arl && data.status == 1) localStorage.setItem("arl", data.arl)
 	}else{
-		toast(data.msg, data.icon || null, data.dismiss !== null ? data.dismiss : true, data.id || null)
+		toast("Couldn't log in", "close", true, "login-toast")
 	}
 })