Enforce same pw rules from settings, cap lock warn too

This commit is contained in:
mattpass
2021-04-08 15:40:48 +01:00
parent 4a08853605
commit cea8e0a36e
14 changed files with 96 additions and 34 deletions

View File

@@ -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}

View File

@@ -382,7 +382,6 @@ $text = [
"auto-complete on" => "打开自动完成",
"security" => "安全",
"new password" => "新密码",
"8 chars min" => "最少8个字符",
"confirm password" => "确认密码",
"banned files/folders" => "禁止文件 / 文件夹",
"banned paths" => "禁止路径",

View File

@@ -381,7 +381,6 @@ $text = [
"auto-complete on" => "打開自動完成",
"security" => "安全",
"new password" => "新密碼",
"8 chars min" => "至少8個字符",
"confirm password" => "確認密碼",
"banned files/folders" => "禁止文件 / 文件夾",
"banned paths" => "禁止路徑",

View File

@@ -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",

View File

@@ -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",

View File

@@ -381,7 +381,6 @@ $text = [
"auto-complete on" => "auto-complétion sur",
"security" => "sécurité",
"new password" => "nouveau mot de passe",
"8 chars min" => "8 caractères minimum",
"confirm password" => "confirmation du mot de passe",
"banned files/folders" => "fichiers/dossiers bannis",
"banned paths" => "chemins bannis",

View File

@@ -381,7 +381,6 @@ $text = [
"auto-complete on" => "Auto-Vervollständigen mit",
"security" => "Sicherheit",
"new password" => "neues Passwort",
"8 chars min" => "8 Zeichen mindestens",
"confirm password" => "Passwort bestätigen",
"banned files/folders" => "verbannte Dateien/Verzeichnisse",
"banned paths" => "verbannte Verzeichnisse",

View File

@@ -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",

View File

@@ -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",

View File

@@ -381,7 +381,6 @@ $text = [
"auto-complete on" => "تکمیل خودکار روشن",
"security" => "امنیت",
"new password" => "پسورد جدید",
"8 chars min" => "حداقل ۸ کارکتر",
"confirm password" => "تایید پسورد",
"banned files/folders" => "فایل ها / پوشه های مسدود شده",
"banned paths" => "مسیر های مسدود شده",

View File

@@ -381,7 +381,6 @@ $text = [
"auto-complete on" => "hab. auto-completar",
"security" => "segurança",
"new password" => "nova senha",
"8 chars min" => "mín. 8 carac.",
"confirm password" => "confirmar senha",
"banned files/folders" => "arquivos/pastas bloqueados",
"banned paths" => "caminhos bloqueados",

View File

@@ -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",

View File

@@ -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

View File

@@ -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>