tazpanel rev 265
installer: use css, make js generic
| author | Dominique Corbex <domcox@slitaz.org> |
|---|---|
| date | Thu Mar 08 10:31:58 2012 +0100 (2012-03-08) |
| parents | b6f8e363b864 |
| children | 20787c1bcc60 |
| files | installer.cgi lib/user.js styles/default/style.css |
line diff
1.1 --- a/installer.cgi Tue Mar 06 13:40:58 2012 +0100 1.2 +++ b/installer.cgi Thu Mar 08 10:31:58 2012 +0100 1.3 @@ -7,7 +7,7 @@ 1.4 # Authors : Dominique Corbex <domcox@slitaz.org> 1.5 # 1.6 1.7 -VERSION=0.26 1.8 +VERSION=0.27 1.9 1.10 # Common functions from libtazpanel 1.11 . lib/libtazpanel 1.12 @@ -100,7 +100,7 @@ 1.13 line=$(echo $line | sed 's/\s/\ /g') 1.14 line=$(echo $line | sed 's/</\</g') 1.15 line=$(echo $line | sed 's/>/\>/g') 1.16 - echo "<font color=\"red\">$line<br /></font>" 1.17 + echo "<span class=\"msg-nok\">$line<br /></span>" 1.18 done 1.19 unset IFS 1.20 else 1.21 @@ -109,15 +109,15 @@ 1.22 tazinst new $INSTFILE 1.23 if [ ! -e "$INSTFILE" ]; then 1.24 cat <<EOT 1.25 -<font color="red">$(gettext "Setup File Error")<br /> 1.26 -$(gettext "The setup file <strong>$INSTFILE</strong> doesn't exist.")</font><br /> 1.27 +<span class="msg-nok">$(gettext "Setup File Error")<br /> 1.28 +$(gettext "The setup file <strong>$INSTFILE</strong> doesn't exist.")</span><br /> 1.29 EOT 1.30 else 1.31 if [ ! -r $INSTFILE ]; then 1.32 cat <<EOT 1.33 -<font color="red">$(gettext "Setup File Error")<br /> 1.34 +<span class="msg-nok">$(gettext "Setup File Error")<br /> 1.35 $(gettext "The setup file <strong>$INSTFILE</strong> is not readable. 1.36 -Check permissions and ownership.")</font><br /> 1.37 +Check permissions and ownership.")</span><br /> 1.38 EOT 1.39 fi 1.40 fi 1.41 @@ -363,167 +363,41 @@ 1.42 select_hostname() 1.43 { 1.44 cat << EOT 1.45 -<script type="text/javascript"> 1.46 - function checkHostname(){ 1.47 - var host = document.getElementById('h1'); 1.48 - var msg = document.getElementById('hostAlert'); 1.49 - var enoughRegex = new RegExp("(?=.{3,}).*", "g"); 1.50 - var incharRegex = new RegExp("^[A-Za-z0-9_]{3,20}$"); 1.51 - if (false == enoughRegex.test(host.value)) { 1.52 - msg.style.color = "tomato"; 1.53 - msg.innerHTML ="✖ Too short"; 1.54 - return false; 1.55 - } else if (false == incharRegex.test(host.value)) { 1.56 - msg.style.color = "tomato"; 1.57 - msg.innerHTML ="✖ Invalid chars"; 1.58 - return false; 1.59 - } else { 1.60 - msg.style.color = "limegreen"; 1.61 - msg.innerHTML = "✔"; 1.62 - } 1.63 - } 1.64 -</script> 1.65 <a name="hostname"></a> 1.66 <h4>$(gettext "Host")</h4> 1.67 $(gettext "Hostname:") 1.68 -<input type="text" id="h1" name="TGT_HOSTNAME" value="$TGT_HOSTNAME" placeholder="$(gettext "Name of your system")" onkeyup="checkHostname(); return false;" /> 1.69 -<span id="hostAlert"></span> 1.70 +<input type="text" id="hostname" name="TGT_HOSTNAME" value="$TGT_HOSTNAME" placeholder="$(gettext "Name of your system")" onkeyup="checkLogin('hostname','msgHostname'); return false;" /> 1.71 +<span id="msgHostname"></span> 1.72 EOT 1.73 } 1.74 1.75 select_root() 1.76 { 1.77 cat << EOT 1.78 -<script type="text/javascript"> 1.79 - function checkRootPwd(){ 1.80 - var pwd1 = document.getElementById('p1'); 1.81 - var pwd2 = document.getElementById('p2'); 1.82 - var msg = document.getElementById('rootPwdAlert'); 1.83 - if(pwd1.value == pwd2.value){ 1.84 - // passwords match. 1.85 - pwd2.style.backgroundColor = "white"; 1.86 - // various checks 1.87 - var enoughRegex = new RegExp("(?=.{4,}).*", "g"); 1.88 - var incharRegex = new RegExp("^[A-Za-z0-9!@#$%^&*()_]{4,20}$"); 1.89 - var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); 1.90 - var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); 1.91 - if (pwd1.value.length==0) { 1.92 - msg.style.color = "tomato"; 1.93 - msg.innerHTML = "✖ Missing Password"; 1.94 - return false; 1.95 - } else if (false == enoughRegex.test(pwd1.value)) { 1.96 - msg.style.color = "tomato"; 1.97 - msg.innerHTML ="✖ Too short"; 1.98 - return false; 1.99 - } else if (false == incharRegex.test(pwd1.value)) { 1.100 - msg.style.color = "tomato"; 1.101 - msg.innerHTML ="✖ Invalid chars"; 1.102 - return false; 1.103 - } else if (strongRegex.test(pwd1.value)) { 1.104 - msg.style.color = "limegreen"; 1.105 - msg.innerHTML = "✔ Strong!"; 1.106 - } else if (mediumRegex.test(pwd1.value)) { 1.107 - msg.style.color = "limegreen"; 1.108 - msg.innerHTML = "✔ Medium!"; 1.109 - } else { 1.110 - msg.style.color = "orange"; 1.111 - msg.innerHTML = "✔ Weak"; 1.112 - } 1.113 - }else{ 1.114 - // passwords do not match. 1.115 - pwd2.style.backgroundColor = "lightsalmon"; 1.116 - msg.style.color = "tomato"; 1.117 - msg.innerHTML = "✖ Do Not Match!" 1.118 - return false; 1.119 - } 1.120 - } 1.121 -</script> 1.122 - 1.123 <a name="root"></a> 1.124 <h4>$(gettext "Root")</h4> 1.125 $(gettext "Root passwd:") 1.126 -<input type="password" id="p1" name="TGT_ROOT_PWD" value="$TGT_ROOT_PWD" placeholder="$(gettext "Password of root")" onkeyup="checkRootPwd(); return false;" /> 1.127 +<input type="password" id="rootPwd1" name="TGT_ROOT_PWD" value="$TGT_ROOT_PWD" placeholder="$(gettext "Password of root")" onkeyup="checkPwd('rootPwd1','rootPwd2','msgRootPwd'); return false;" /> 1.128 $(gettext "Confirm password:") 1.129 -<input type="password" id="p2" value="$TGT_ROOT_PWD" placeholder="$(gettext "Password of root")" onkeyup="checkRootPwd(); return false;" /> 1.130 -<span id="rootPwdAlert"></span> 1.131 +<input type="password" id="rootPwd2" value="$TGT_ROOT_PWD" placeholder="$(gettext "Password of root")" onkeyup="checkPwd('rootPwd1','rootPwd2','msgRootPwd'); return false;" /> 1.132 +<span id="msgRootPwd"></span> 1.133 EOT 1.134 } 1.135 1.136 select_user() 1.137 { 1.138 cat << EOT 1.139 -<script type="text/javascript"> 1.140 - function checkUserLogin(){ 1.141 - var user = document.getElementById('u1'); 1.142 - var msg = document.getElementById('userLoginAlert'); 1.143 - var enoughRegex = new RegExp("(?=.{3,}).*", "g"); 1.144 - var incharRegex = new RegExp("^[A-Za-z0-9_]{3,20}$"); 1.145 - if (false == enoughRegex.test(user.value)) { 1.146 - msg.style.color = "tomato"; 1.147 - msg.innerHTML ="✖ Too short"; 1.148 - return false; 1.149 - } else if (false == incharRegex.test(user.value)) { 1.150 - msg.style.color = "tomato"; 1.151 - msg.innerHTML ="✖ Invalid chars"; 1.152 - return false; 1.153 - } else { 1.154 - msg.style.color = "limegreen"; 1.155 - msg.innerHTML = "✔"; 1.156 - } 1.157 - } 1.158 - function checkUserPwd(){ 1.159 - var pwd1 = document.getElementById('p3'); 1.160 - var pwd2 = document.getElementById('p4'); 1.161 - var msg = document.getElementById('userPwdAlert'); 1.162 - if(pwd1.value == pwd2.value){ 1.163 - // passwords match. 1.164 - pwd2.style.backgroundColor = "white"; 1.165 - // various checks 1.166 - var enoughRegex = new RegExp("(?=.{3,}).*", "g"); 1.167 - var incharRegex = new RegExp("^[A-Za-z0-9!@#$%^&*()_]{3,20}$"); 1.168 - var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); 1.169 - var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); 1.170 - if (pwd1.value.length==0) { 1.171 - msg.style.color = "orange"; 1.172 - msg.innerHTML = "✔ No Password"; 1.173 - } else if (false == enoughRegex.test(pwd1.value)) { 1.174 - msg.style.color = "tomato"; 1.175 - msg.innerHTML ="✖ Too short"; 1.176 - return false; 1.177 - } else if (false == incharRegex.test(pwd1.value)) { 1.178 - msg.style.color = "tomato"; 1.179 - msg.innerHTML ="✖ Invalid chars"; 1.180 - return false; 1.181 - } else if (strongRegex.test(pwd1.value)) { 1.182 - msg.style.color = "limegreen"; 1.183 - msg.innerHTML = "✔ Strong!"; 1.184 - } else if (mediumRegex.test(pwd1.value)) { 1.185 - msg.style.color = "limegreen"; 1.186 - msg.innerHTML = "✔ Medium!"; 1.187 - } else { 1.188 - msg.style.color = "orange"; 1.189 - msg.innerHTML = "✔ Weak"; 1.190 - } 1.191 - }else{ 1.192 - // passwords do not match. 1.193 - pwd2.style.backgroundColor = "lightsalmon"; 1.194 - msg.style.color = "tomato"; 1.195 - msg.innerHTML = "✖ Do Not Match!" 1.196 - return false; 1.197 - } 1.198 - } 1.199 -</script> 1.200 <a name="user"></a> 1.201 <h4>$(gettext "User")</h4> 1.202 $(gettext "User login:") 1.203 -<input type="text" id="u1" name="TGT_USER" value="$TGT_USER" placeholder="$(gettext "Name of the first user")" onkeyup="checkUserLogin(); return false;" /> 1.204 -<span id="userLoginAlert"></span> 1.205 +<input type="text" id="user" name="TGT_USER" value="$TGT_USER" placeholder="$(gettext "Name of the first user")" onkeyup="checkLogin('user','msgUser'); return false;" /> 1.206 +<span id="msgUser"></span> 1.207 <br /><br /> 1.208 $(gettext "User passwd:") 1.209 -<input type="password" id="p3" name="TGT_USER_PWD" value="$TGT_USER_PWD" placeholder="$(gettext "Password of the first user")" onkeyup="checkUserPwd(); return false;" /> 1.210 +<input type="password" id="userPwd1" name="TGT_USER_PWD" value="$TGT_USER_PWD" placeholder="$(gettext "Password of the first user")" onkeyup="checkPwd('userPwd1','userPwd2','msgUserPwd'); return false;" /> 1.211 $(gettext "Confirm password:") 1.212 -<input type="password" id="p4" value="$TGT_USER_PWD" placeholder="$(gettext "Password of the first user")" onkeyup="checkUserPwd(); return false;" /> 1.213 -<span id="userPwdAlert"></span> 1.214 +<input class="confirm" type="password" id="userPwd2" value="$TGT_USER_PWD" placeholder="$(gettext "Password of the first user")" onkeyup="checkPwd('userPwd1','userPwd2','msgUserPwd'); return false;" /> 1.215 +<span id="msgUserPwd"></span> 1.216 EOT 1.217 } 1.218 1.219 @@ -544,15 +418,20 @@ 1.220 case $1 in 1.221 install) 1.222 cat << EOT 1.223 +<script src="lib/user.js"></script> 1.224 <script type="text/javascript"> 1.225 function SubmitForm() { 1.226 - if (false == checkHostname()) { 1.227 + // hostname 1.228 + if (false == checkLogin('hostname','msgHostname')) { 1.229 alert("Hostname error"); 1.230 - } else if (false == checkRootPwd()) { 1.231 + // root pwd 1.232 + } else if (false == checkPwd('rootPwd1','rootPwd2','msgRootPwd')) { 1.233 alert("Root password error"); 1.234 - } else if (false == checkUserLogin()) { 1.235 + // user 1.236 + } else if (false == checkLogin('user','msgUser')) { 1.237 alert("User login error"); 1.238 - } else if (false == checkUserPwd()) { 1.239 + // user pwd 1.240 + } else if (false == checkPwd('userPwd1','userPwd2','msgUserPwd')) { 1.241 alert("User password error"); 1.242 } else { 1.243 var r=confirm("$(gettext "Do you really want to continue?")"); 1.244 @@ -664,6 +543,7 @@ 1.245 tazinst $(GET INST_ACTION) $INSTFILE | \ 1.246 awk '{print "<tr><td><tt>" $0 "</tt></td></tr>"}' 1.247 table_end 1.248 + gettext "Completed." 1.249 return $(grep -c "cancelled on error" $INSTFILE) 1.250 } 1.251
2.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 2.2 +++ b/lib/user.js Thu Mar 08 10:31:58 2012 +0100 2.3 @@ -0,0 +1,72 @@ 2.4 +/* 2.5 + Login and password validation 2.6 + Copyright (C) 2012 SliTaz GNU/linux - GNU gpl v3 2.7 +*/ 2.8 + 2.9 +//// 2.10 +// Login validation - typical use: 2.11 +// <input id="login1" onkeyup="checkLogin('login1','msg1'); return false;" /> 2.12 +// <span id="msg1"></span> 2.13 + 2.14 +function checkLogin(user,message){ 2.15 + var login = document.getElementById(user); 2.16 + var msg = document.getElementById(message); 2.17 + var enoughRegex = new RegExp("(?=.{3,}).*", "g"); 2.18 + var incharRegex = new RegExp("^[A-Za-z0-9_-]{3,32}$"); 2.19 + if (false == enoughRegex.test(login.value)) { 2.20 + msg.innerHTML ="<span class=\"msg-nok\">✖ Too short</span>"; 2.21 + return false; 2.22 + } else if (login.value > 32) { 2.23 + msg.innerHTML ="<span class=\"msg-nok\">✖ Too long</span>"; 2.24 + return false; 2.25 + } else if (false == incharRegex.test(login.value)) { 2.26 + msg.innerHTML ="<span class=\"msg-nok\">✖ Invalid chars</span>"; 2.27 + return false; 2.28 + } else { 2.29 + msg.innerHTML = "<span class=\"msg-ok\">✔</span"; 2.30 + } 2.31 +} 2.32 + 2.33 +//// 2.34 +// Password validation - typical use: 2.35 +// <input type="password" id="pass1" onkeyup="checkLogin('pass1','pass2','msg2'); return false;" /> 2.36 +// <input type="password" id="pass2" onkeyup="checkLogin('pass1','pass2','msg2'); return false;" /> 2.37 +// <span id="msg2"></span> 2.38 + 2.39 +function checkPwd(password,confirm,message){ 2.40 + var pwd1 = document.getElementById(password); 2.41 + var pwd2 = document.getElementById(confirm); 2.42 + var msg = document.getElementById(message); 2.43 + if(pwd1.value == pwd2.value){ 2.44 + // passwords match. 2.45 + pwd2.classList.remove('alert'); 2.46 + // various checks 2.47 + var enoughRegex = new RegExp("(?=.{3,}).*", "g"); 2.48 + var incharRegex = new RegExp("^[A-Za-z0-9!@#$%^&*()_]{3,40}$"); 2.49 + var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); 2.50 + var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); 2.51 + if (pwd1.value.length==0) { 2.52 + msg.innerHTML = "<span class=\"msg-ok\">✔ </span><span class=\"msg-warn\">(No Password!)</span>"; 2.53 + } else if (pwd1.value.length > 40) { 2.54 + msg.innerHTML ="<span class=\"msg-nok\">✖ Too long!</span>"; 2.55 + return false; 2.56 + } else if (false == enoughRegex.test(pwd1.value)) { 2.57 + msg.innerHTML ="<span class=\"msg-nok\">✖ Too short!</span>"; 2.58 + return false; 2.59 + } else if (false == incharRegex.test(pwd1.value)) { 2.60 + msg.innerHTML ="<span class=\"msg-nok\">✖ Invalid chars!</span>"; 2.61 + return false; 2.62 + } else if (strongRegex.test(pwd1.value)) { 2.63 + msg.innerHTML = "<span class=\"msg-ok\">✔ (Strong)</span>"; 2.64 + } else if (mediumRegex.test(pwd1.value)) { 2.65 + msg.innerHTML = "<span class=\"msg-ok\">✔ </span><span class=\"msg-warn\">(Medium!)</span>"; 2.66 + } else { 2.67 + msg.innerHTML = "<span class=\"msg-ok\">✔ </span><span class=\"msg-warn\">(Weak!)</span>"; 2.68 + } 2.69 + } else { 2.70 + // passwords do not match. 2.71 + pwd2.classList.add('alert'); 2.72 + msg.innerHTML = "<span class=\"msg-nok\">✖ Do Not Match!</span>" 2.73 + return false; 2.74 + } 2.75 +} 2.76 \ No newline at end of file
3.1 --- a/styles/default/style.css Tue Mar 06 13:40:58 2012 +0100 3.2 +++ b/styles/default/style.css Thu Mar 08 10:31:58 2012 +0100 3.3 @@ -253,6 +253,10 @@ 3.4 span.diff-at { color: blue; } 3.5 span.top { color: #00c800; font-weight: bold; font-size: 95%; } 3.6 3.7 +/* alert messages */ 3.8 +span.msg-ok { color: limegreen; } 3.9 +span.msg-nok { color: tomato; } 3.10 + 3.11 /* Misc */ 3.12 3.13 pre, .pre-main {