From cea8e0a36ef5bd20be50376fb064fb8c3a2e4f49 Mon Sep 17 00:00:00 2001
From: mattpass <matt@helical-levity.com>
Date: Thu, 8 Apr 2021 15:40:48 +0100
Subject: [PATCH] Enforce same pw rules from settings, cap lock warn too

---
 assets/css/settings-screen.css |   4 +-
 lang/chinese-simplified.php    |   1 -
 lang/chinese-traditional.php   |   1 -
 lang/dutch.php                 |   1 -
 lang/english.php               |   1 -
 lang/french.php                |   1 -
 lang/german.php                |   1 -
 lang/italian.php               |   1 -
 lang/norwegian.php             |   1 -
 lang/persian.php               |   1 -
 lang/portuguese-brazilian.php  |   1 -
 lang/spanish.php               |   1 -
 lib/login.php                  |   2 +-
 lib/settings-screen.php        | 113 +++++++++++++++++++++++++++------
 14 files changed, 96 insertions(+), 34 deletions(-)

diff --git a/assets/css/settings-screen.css b/assets/css/settings-screen.css
index 90d6bc6..8d060cc 100644
--- a/assets/css/settings-screen.css
+++ b/assets/css/settings-screen.css
@@ -27,6 +27,7 @@ body {overflow: hidden;
 h1 {font-size: 36px; font-weight: normal; color: #888; margin-bottom: 20px}
 h2 {font-size: 18px; font-weight: normal; color: #fff}
 
+.icon-tabler {width: 24px; height: 24px; stroke-width: 1.25}
 .settings {font-family: arial, verdana, helvetica, sans-serif; background-color: #1c1c19; color: #fff}
 .settings .infoPane {position: relative; width: 230px; height: 570px; font-size: 10px; color: #888; background-color: #fff; padding: 20px; float: left}
 .settings .infoPane a {color: #06c; text-decoration: none}
@@ -40,6 +41,7 @@ h2 {font-size: 18px; font-weight: normal; color: #fff}
 .settings input, .settings textarea {border: 1px solid #555; background-color: #444; color: #fff}
 .settings input:focus, .settings textarea:focus {outline: none; background: rgba(0,198,255,0.5); color: #fff}
 .settings input[type="text"]:disabled {opacity: 0.5}
+.settings .iconCapsLock {position: absolute; margin-left: 2px; color: #888}
 .settings .info {font-size: 10px; color: rgba(0,198,255,1); cursor: help}
-.settings .info .icon-tabler {width: 18px; height: 18px; margin-top: -2px; stroke-width: 1.25; pointer-events: none}
+.settings .info .icon-tabler {width: 18px; height: 18px; margin-top: -2px; pointer-events: none}
 .settings .update {position: absolute; bottom: 0; right: 20px; padding: 5px 10px; font-size: 18px; background-color: rgba(0,198,255,0.7); opacity: 0.1; cursor: pointer}
diff --git a/lang/chinese-simplified.php b/lang/chinese-simplified.php
index 7dae8d7..63f1d2b 100644
--- a/lang/chinese-simplified.php
+++ b/lang/chinese-simplified.php
@@ -382,7 +382,6 @@ $text = [
         "auto-complete on"                         => "打开自动完成",
         "security"                                 => "安全",
         "new password"                             => "新密码",
-        "8 chars min"                              => "最少8个字符",
         "confirm password"                         => "确认密码",
         "banned files/folders"                     => "禁止文件 / 文件夹",
         "banned paths"                             => "禁止路径",
diff --git a/lang/chinese-traditional.php b/lang/chinese-traditional.php
index 5dc05c7..39f1c0d 100644
--- a/lang/chinese-traditional.php
+++ b/lang/chinese-traditional.php
@@ -381,7 +381,6 @@ $text = [
         "auto-complete on"                         => "打開自動完成",
         "security"                                 => "安全",
         "new password"                             => "新密碼",
-        "8 chars min"                              => "至少8個字符",
         "confirm password"                         => "確認密碼",
         "banned files/folders"                     => "禁止文件 / 文件夾",
         "banned paths"                             => "禁止路徑",
diff --git a/lang/dutch.php b/lang/dutch.php
index 6bb5dcf..42a3d05 100644
--- a/lang/dutch.php
+++ b/lang/dutch.php
@@ -381,7 +381,6 @@ $text = [
         "auto-complete on"                         => "automatisch aanvullen",
         "security"                                 => "beveiliging",
         "new password"                             => "nieuw wachtwoord",
-        "8 chars min"                              => "minimaal 8 tekens",
         "confirm password"                         => "herhaal wachtwoord",
         "banned files/folders"                     => "uitgesloten bestanden/mappen",
         "banned paths"                             => "uitgesloten paden",
diff --git a/lang/english.php b/lang/english.php
index 2ec3645..c01a1ae 100644
--- a/lang/english.php
+++ b/lang/english.php
@@ -381,7 +381,6 @@ $text = [
         "auto-complete on"                         => "auto-complete on",
         "security"                                 => "security",
         "new password"                             => "new password",
-        "8 chars min"                              => "8 chars min",
         "confirm password"                         => "confirm password",
         "banned files/folders"                     => "banned files/folders",
         "banned paths"                             => "banned paths",
diff --git a/lang/french.php b/lang/french.php
index 35b7b17..da19d4e 100644
--- a/lang/french.php
+++ b/lang/french.php
@@ -381,7 +381,6 @@ $text = [
         "auto-complete on"                         => "auto-compl&eacute;tion sur",
         "security"                                 => "s&eacute;curit&eacute;",
         "new password"                             => "nouveau mot de passe",
-        "8 chars min"                              => "8 caract&egrave;res minimum",
         "confirm password"                         => "confirmation du mot de passe",
         "banned files/folders"                     => "fichiers/dossiers bannis",
         "banned paths"                             => "chemins bannis",
diff --git a/lang/german.php b/lang/german.php
index 633b3cd..901365e 100644
--- a/lang/german.php
+++ b/lang/german.php
@@ -381,7 +381,6 @@ $text = [
         "auto-complete on"                         => "Auto-Vervollst&auml;ndigen mit",
         "security"                                 => "Sicherheit",
         "new password"                             => "neues Passwort",
-        "8 chars min"                              => "8 Zeichen mindestens",
         "confirm password"                         => "Passwort best&auml;tigen",
         "banned files/folders"                     => "verbannte Dateien/Verzeichnisse",
         "banned paths"                             => "verbannte Verzeichnisse",
diff --git a/lang/italian.php b/lang/italian.php
index 54802c8..4e3f3c2 100644
--- a/lang/italian.php
+++ b/lang/italian.php
@@ -381,7 +381,6 @@ $text = [
         "auto-complete on"                         => "auto-completamento attivo",
         "security"                                 => "sicurezza",
         "new password"                             => "nuova password",
-        "8 chars min"                              => "8 caratteri minimo",
         "confirm password"                         => "conferma password",
         "banned files/folders"                     => "file e cartelle vietati",
         "banned paths"                             => "percorsi vietati",
diff --git a/lang/norwegian.php b/lang/norwegian.php
index 97384b5..96f02ab 100644
--- a/lang/norwegian.php
+++ b/lang/norwegian.php
@@ -381,7 +381,6 @@ $text = [
         "auto-complete on"                         => "autokompletering på",
         "security"                                 => "sikkerhet",
         "new password"                             => "nytt passord",
-        "8 chars min"                              => "min. 8 tegn",
         "confirm password"                         => "bekreft passord",
         "banned files/folders"                     => "forbudte filer/mapper",
         "banned paths"                             => "forbudte stier",
diff --git a/lang/persian.php b/lang/persian.php
index 55e032a..37eaf62 100644
--- a/lang/persian.php
+++ b/lang/persian.php
@@ -381,7 +381,6 @@ $text = [
         "auto-complete on"                         => "تکمیل خودکار روشن",
         "security"                                 => "امنیت",
         "new password"                             => "پسورد جدید",
-        "8 chars min"                              => "حداقل ۸ کارکتر",
         "confirm password"                         => "تایید پسورد",
         "banned files/folders"                     => "فایل ها / پوشه های مسدود شده",
         "banned paths"                             => "مسیر های مسدود شده",
diff --git a/lang/portuguese-brazilian.php b/lang/portuguese-brazilian.php
index 1210e9d..f154a0e 100644
--- a/lang/portuguese-brazilian.php
+++ b/lang/portuguese-brazilian.php
@@ -381,7 +381,6 @@ $text = [
         "auto-complete on"                         => "hab. auto-completar",
         "security"                                 => "seguran&ccedil;a",
         "new password"                             => "nova senha",
-        "8 chars min"                              => "m&iacute;n. 8 carac.",
         "confirm password"                         => "confirmar senha",
         "banned files/folders"                     => "arquivos/pastas bloqueados",
         "banned paths"                             => "caminhos bloqueados",
diff --git a/lang/spanish.php b/lang/spanish.php
index e5d1411..de7b1a3 100644
--- a/lang/spanish.php
+++ b/lang/spanish.php
@@ -381,7 +381,6 @@ $text = [
         "auto-complete on"                         => "auto-completar encendido",
         "security"                                 => "seguridad",
         "new password"                             => "nueva clave",
-        "8 chars min"                              => "8 caracteres min",
         "confirm password"                         => "confirmar clave",
         "banned files/folders"                     => "archivos/carpetas prohibidos",
         "banned paths"                             => "rutas prohibidas",
diff --git a/lib/login.php b/lib/login.php
index a329bf4..8edf877 100644
--- a/lib/login.php
+++ b/lib/login.php
@@ -36,7 +36,7 @@ echo $settingPW ? "Setup" : "Login";
 	<div class="screenVCenter">
 		<div class="screenCenter">
 		<img src="../assets/images/icecoder.png" alt="ICEcoder">
-		<div class="version" style="margin-bottom: 22px">v<?php echo $ICEcoder["versionNo"];?></div>
+		<div class="version" style="margin-bottom: 22px"><?php echo $ICEcoder["versionNo"];?></div>
 
 		<form name="settingsUpdate" action="login.php" method="POST"<?php if ($settingPW) {?> onsubmit="return checkCanSubmit();"<?php } ?>>
         <?php
diff --git a/lib/settings-screen.php b/lib/settings-screen.php
index 515b43f..374c61d 100644
--- a/lib/settings-screen.php
+++ b/lib/settings-screen.php
@@ -381,12 +381,19 @@ function findSequence(goal) {
 <div id="accountsSection" class="section" style="display: none">
 
 	<h2>password</h2><br>
-	<?php echo $t['new password'];?> <span class="info" title="<?php echo $t['8 chars min'];?>"><?php echo file_get_contents(dirname(__FILE__) . "/../assets/images/icons/info-circle.svg");?></span><br>
-	<input type="password" name="password" style="width: 320px" onkeydown="showButton()">
-	<br><br>
+	<span id="newPasswordText"><?php echo $t['new password'];?></span><br>
+	<input type="password" name="password" style="width: 320px" id="password" onkeydown="showButton()" onkeyup="checkCase(event); pwStrength(this.value)" onchange="pwStrength(this.value)" onpaste="pwStrength(this.value)"><div class="iconCapsLock" style="display: none" id="iconCapsLock" title="Caps lock on"><?php echo file_get_contents(dirname(__FILE__) . "/../assets/images/icons/alert-triangle.svg");?></div>
+	<div id="pwReqs">
+		<div style="display: inline-block" id="pwChars">10+</div> &nbsp;
+		<div style="display: inline-block" id="pwUpper">upper</div> &nbsp;
+		<div style="display: inline-block" id="pwLower">lower</div> &nbsp;
+		<div style="display: inline-block" id="pwNum">number</div> &nbsp;
+		<div style="display: inline-block" id="pwSpecial">special</div>
+	</div>
+	<br>
 
-	<?php echo $t['confirm password'];?><br>
-	<input type="password" name="passwordConfirm" style="width: 320px" onkeydown="showButton()">
+	<span id="passwordConfirmText"><?php echo $t['confirm password'];?></span><br>
+	<input type="password" name="passwordConfirm" style="width: 320px" id="passwordConfirm" onkeydown="showButton()">
 	<br><br>
 
 	<h2><?php echo $t['multi-user'];?> <span class="info" title="<?php echo $t['Make sure you...'];?>"><?php echo file_get_contents(dirname(__FILE__) . "/../assets/images/icons/info-circle.svg");?></span></h2><br>
@@ -427,7 +434,12 @@ function findSequence(goal) {
 </div>
 
 <script>
-var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+// Get any elem by ID
+const get = function(elem) {
+	return document.getElementById(elem);
+};
+
+var editor = CodeMirror.fromTextArea(get("code"), {
 	lineNumbers: parent.ICEcoder.lineNumbers,
 	readOnly: "nocursor",
 	indentUnit: parent.ICEcoder.indentSize,
@@ -438,14 +450,14 @@ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
 });
 
 function selectTheme() {
-    const input = document.getElementById("theme");
+    const input = get("theme");
 	let theme = input.options[input.selectedIndex].value;
 	if ("default" === theme) {theme = "icecoder"}
 	editor.setOption("theme", theme);
 }
 
 function changeIndentSize() {
-	const indentSize = document.getElementById("indentSize").value;
+	const indentSize = get("indentSize").value;
 	editor.setOption("indentUnit", indentSize);
 	editor.setOption("tabSize", indentSize);
 	editor.refresh();
@@ -453,13 +465,13 @@ function changeIndentSize() {
 
 
 function changeLineNumbersToggle() {
-	const lineNumbers = document.getElementById("lineNumbers").checked;
+	const lineNumbers = get("lineNumbers").checked;
 	editor.setOption("lineNumbers", lineNumbers);
 	editor.refresh();
 }
 
 function changeScrollbarStyle() {
-    const scrollbarStyle = document.getElementById("scrollbarStyle").value;
+    const scrollbarStyle = get("scrollbarStyle").value;
     editor.setOption("scrollbarStyle", scrollbarStyle);
     editor.refresh();
 }
@@ -467,20 +479,20 @@ function changeScrollbarStyle() {
 function changeFontSize() {
 	let cMCSS = document.styleSheets[2];
 	let strCSS = cMCSS.rules ? 'rules' : 'cssRules';
-	cMCSS[strCSS][0].style['fontSize'] = document.getElementById("fontSize").value;
+	cMCSS[strCSS][0].style['fontSize'] = get("fontSize").value;
 	editor.refresh();
 }
 
 function changeEnableRegistrationStatus(){
-	document.getElementById('enableRegistration').disabled=!document.getElementById('enableRegistration').disabled;
+	get('enableRegistration').disabled = !get('enableRegistration').disabled;
 }
 
 function changeBackupsDaysStatus(){
-	document.getElementById('backupsDays').disabled=!document.getElementById('backupsDays').disabled;
+	get('backupsDays').disabled = !get('backupsDays').disabled;
 }
 
 function showButton() {
-	document.getElementById('updateButton').style.opacity = 1;
+	get('updateButton').style.opacity = 1;
 }
 
 function showHideTabs() {
@@ -490,24 +502,83 @@ function showHideTabs() {
 	cMCSS[strCSS][2].style['margin-left'] = document.settings.visibleTabs.checked ? '-1px' : '0';
 }
 
+// Check password strength and color requirements not met
+const pwStrength = function(pw) {
+	// Set variables
+    const hlCol = "rgba(0, 198, 255, 0.7)";
+	let chars, upper, lower, num, special;
+
+	// Test password for requirements
+	chars = pw.length >= 10;
+	upper = pw.replace(/[A-Z]/g, "").length < pw.length;
+	lower = pw.replace(/[a-z]/g, "").length < pw.length;
+	num = pw.replace(/[0-9]/g, "").length < pw.length;
+	special = pw.replace(/[A-Za-z0-9]/g, "").length > 0;
+
+	// Set colors based on each requirements
+	get("pwChars").style.color = true === chars ? hlCol : "";
+	get("pwUpper").style.color = true === upper ? hlCol : "";
+	get("pwLower").style.color = true === lower ? hlCol : "";
+	get("pwNum").style.color = true === num ? hlCol : "";
+	get("pwSpecial").style.color = true === special ? hlCol : "";
+
+	// Return a bool based on meeting the requirements
+	return (true === chars && true === upper && true === lower && true === num && true === special);
+};
+
+const checkCase = function(evt) {
+    const key = evt.keyCode ?? evt.which ?? evt.charCode;
+
+    // Not caps lock key
+    if (20 !== key) {
+        get("iconCapsLock").style.display = true === evt.getModifierState("CapsLock")
+            ? "inline-block"
+            : "none";
+    }
+};
+
+// Check if we can submit, else shake requirements
+const checkCanSubmit = function() {
+	// Password isn't strong enough, shake requirements
+	if(false === pwStrength(get("password").value)) {
+		shake("newPasswordText");
+		shake("password");
+		shake("pwReqs");
+		return false;
+	}
+	return true;
+}
+
 function validatePasswords() {
-	if ("" !== document.settings.password.value && 8 > document.settings.password.value.length) {
-        parent.ICEcoder.message('Please use at least 8 chars in the password');
-	} else {
+	if (true === checkCanSubmit()) {
 		if (document.settings.password.value !== document.settings.passwordConfirm.value) {
-            parent.ICEcoder.message('Sorry, your passwords don\'t match')
+            shake("passwordConfirmText");
+            shake("passwordConfirm");
 		} else {
 			document.settings.submit();
 		}
 	}
 }
 
+function shake(elem) {
+	var posArray = [24, -24, 12, -12, 6, -6, 3, -3, 0];
+	var pos = -1;
+	var anim = setInterval(function() {
+		if (pos < posArray.length) {
+			pos++;
+			get(elem).style.marginLeft = posArray[pos] + "px";
+		} else {
+			clearInterval(anim);
+		}
+	}, 50);
+}
+
 tabNames = ['general','style','accounts','security'];
 
 function switchTab(tab) {
 	for (var i = 0; i < tabNames.length; i++) {
-		document.getElementById(tabNames[i] + 'Tab').className = tabNames[i] === tab ? "tab tabActive" : "tab";
-		document.getElementById(tabNames[i] + 'Section').style.display = tabNames[i] === tab ? "block" : "none";
+		get(tabNames[i] + 'Tab').className = tabNames[i] === tab ? "tab tabActive" : "tab";
+		get(tabNames[i] + 'Section').style.display = tabNames[i] === tab ? "block" : "none";
 	}
 	editor.refresh();
 }
@@ -517,7 +588,7 @@ function submitSettings() {
 }
 </script>
 
-<div class="update" id="updateButton" onClick="submitSettings()">update</div>
+<div class="update" id="updateButton" onclick="submitSettings()">update</div>
 <input type="hidden" name="csrf" value="<?php echo $_SESSION["csrf"]; ?>">
 </form>