Added login, logout and other stuff

public/css/style.css

@@ -109,6 +109,30 @@ div#middle_section {
   display: none;
 }
 
+/* Settings */
+#open_login_prompt{
+	margin: 8px 0px;
+}
+#login_input_arl{
+	width: 100%;
+  border: 0px solid black;
+  line-height: 36px;
+  padding: 0px 8px;
+  border-radius: 4px;
+	background-color: var(--secondary-background);
+	color: var(--primary-text);
+}
+#settings_btn_copyArl{
+	min-width: 24px;
+	width: 48px;
+	margin: 0px 0px 0px 8px;
+	padding: 0px 4px;
+}
+#logged_in_info{
+	display: none;
+	margin-bottom: 12px;
+}
+
 /* Main Search Tab */
 
 .search_tablinks{
@@ -309,6 +333,10 @@ span.tag {
 	box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(0, 0, 0, 0.3);
 	background: #333333;
 }
+.inline-flex{
+	display: flex;
+	align-items:center;
+}
 button{
 	font-family : inherit;
 	font-weight: 600;
@@ -323,3 +351,8 @@ button{
 	text-transform: uppercase;
 	color: var(--accent-text);
 }
+button[disabled]{
+	background-color: var(--secondary-background);
+	color: var(--main-text);
+	opacity: 0.75;
+}

public/index.html

@@ -155,7 +155,18 @@ <h1>Home</h1>
 					<div id="analyzer_tab" class="main_tabcontent"><h1>Link Analyzer</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 id="logged_in_info">
+							<img id="settings_picture" src="" alt="Profile Picture" class="circle" style="width: 125px;height:125px; margin-right: 12px;"/>
+							<p>You are logged in as <b id="settings_username"></b></p>
+							<button onclick="logout()" id="settings_btn_logout">Logout</button>
+						</div>
+						<button id="open_login_prompt" type="button" name="button" onclick="openLoginPrompt()" disabled>Login with e-mail</button>
+						<div class="inline-flex">
+							<input autocomplete="off" type="password" id="login_input_arl" placeholder="ARL"/>
+							<button onclick="copyARLtoClipboard()" id="settings_btn_copyArl"><i class="material-icons">assignment</i></button>
+						</div>
+						<p><a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Login+via+userToken" target="_blank">How do I get my own ARL?</a></p>
+						<p><button onclick="loginButton()" style="width:100%;" id="settings_btn_updateArl">Update ARL</button></p>
 					</div>
 					<div id="about_tab" class="main_tabcontent"><h1>About</h1></div>
 				</div></section>

public/js/init.js

@@ -20,7 +20,10 @@ function toast(msg, icon=null, dismiss=true, id=null){
 			toastDOM.find(".toast-icon").html(icon)
 		}
 		if (dismiss !== null && dismiss){
-			setTimeout(function(){ toastObj.hideToast() }, 3000);
+			setTimeout(function(){
+				toastObj.hideToast()
+				delete toastsWithId[id]
+			}, 3000);
 		}
 	}else{
 		if (icon == null)
@@ -54,21 +57,86 @@ function openLoginPrompt(){
 	socket.emit("loginpage")
 }
 
+function loginButton(){
+	let arl = document.querySelector("#login_input_arl").value
+	if (arl != "" && arl != localStorage.getItem("arl")){
+		socket.emit("login", arl, true)
+	}
+}
+
+function copyARLtoClipboard(){
+	$("#login_input_arl").attr("type", "text");
+	let copyText = document.querySelector("#login_input_arl")
+	copyText.select();
+	copyText.setSelectionRange(0, 99999);
+	document.execCommand("copy");
+	$("#login_input_arl").attr("type", "password");
+	toast("ARL copied to clipboard", 'assignment')
+}
+
+function logout(){
+	socket.emit("logout");
+}
+
+window.addEventListener('pywebviewready', function() {
+	$('#open_login_prompt').prop('disabled', false);
+})
+
+$(function(){
 	socket.emit("init");
 	if (localStorage.getItem("arl")){
 		socket.emit("login", localStorage.getItem("arl"));
+		$("#login_input_arl").val(data.arl)
 	}
+})
 
 socket.on("logging_in", function(){
 	toast("Logging in", "loading", false, "login-toast")
 })
 
 socket.on("logged_in", function(data){
-	if (data.status != 0){
 	console.log(data)
+	switch (data.status) {
+		case 1:
+		case 3:
 			toast("Logged in", "done", true, "login-toast")
-		if (data.arl && data.status == 1) localStorage.setItem("arl", data.arl)
+			if (data.arl){
-	}else{
+				localStorage.setItem("arl", data.arl)
+				$("#login_input_arl").val(data.arl)
+			}
+			$('#open_login_prompt').hide()
+			if (data.user){
+				$("#settings_username").text(data.user.name)
+				$("#settings_picture").attr("src",`https://e-cdns-images.dzcdn.net/images/user/${data.user.picture}/125x125-000000-80-0-0.jpg`)
+				$("#logged_in_info").show()
+			}
+		break;
+		case 2:
+			toast("Already logged in", "done", true, "login-toast")
+			if (data.user){
+				$("#settings_username").text(data.user.name)
+				$("#settings_picture").attr("src",`https://e-cdns-images.dzcdn.net/images/user/${data.user.picture}/125x125-000000-80-0-0.jpg`)
+				$("#logged_in_info").show()
+			}
+		break;
+		case 0:
 			toast("Couldn't log in", "close", true, "login-toast")
+			localStorage.removeItem("arl")
+			$("#login_input_arl").val("")
+			$('#open_login_prompt').show()
+			$("#logged_in_info").hide()
+			$("#settings_username").text("Not Logged")
+			$("#settings_picture").attr("src",`https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg`)
+		break;
 	}
 })
+
+socket.on("logged_out", function(){
+	toast("Logged out", "done", true, "login-toast")
+	localStorage.removeItem("arl")
+	$("#login_input_arl").val("")
+	$('#open_login_prompt').show()
+	$("#logged_in_info").hide()
+	$("#settings_username").text("Not Logged")
+	$("#settings_picture").attr("src",`https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg`)
+})

public/test_components.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-	<head>
-		<meta charset="utf-8">
-		<title></title>
-		<link rel="stylesheet" type="text/css" href="css/style.css">
-	</head>
-	<body>
-		<button type="button" name="button">Hello</button>
-	</body>
-</html>