haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-10-22 11:43:33 +00:00
Code Issues Releases Wiki Activity

[passwd strength] improved passwd tip & strength display, removed 'show passwd', fixed bugs

Browse Source
This commit is contained in:
llj
2014-07-18 19:58:29 +08:00
committed by imwhatiam
parent 8988702ada
commit c8cf757191
2 changed files with 55 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
media/css/seahub.css
View File

@@ -3144,3 +3144,19 @@ textarea:-moz-placeholder {/* for FF */
#notices-table a { #notices-table a {
font-weight:normal; font-weight:normal;
} }
/* pwd strength */
#pwd_strength {
margin:-15px 0 20px;
}
#pwd_strength span {
display:inline-block;
width:70px;
height:16px;
border:1px solid #fff;
background:#e4e4e4;
color:#cecece;
text-align:center;
vertical-align:middle;
line-height:16px;
}

122
seahub/templates/registration/registration_form.html
View File

@@ -16,15 +16,11 @@
<label for="id_email">{% trans "Email" %}</label> <label for="id_email">{% trans "Email" %}</label>
{{ form.email }} {{ form.email.errors }} {{ form.email }} {{ form.email.errors }}
<label for="id_password1">{% trans "Password" %}</label> <font id="pwd_strength"></font> <label for="id_password1">{% trans "Password" %}</label> <span class="icon-question-sign" title="{% trans "6 characters or more, include 2 types or more of these: letters(case sensitive), numbers, and symbols" %}"></span>
{{ form.password1 }} {{ form.password1.errors }} {{ form.password1 }} {{ form.password1.errors }}
<input class="input hide" id="id_password1_show" name="password1_show" type="text"> <div id="pwd_strength"></div>
<div id="pwd_tips" class="hide">{% trans "Passwords must have at least 6 characters and contain at least two of the following: uppercase letters, lowercase letters, numbers, and symbols" %}</div>
<label for="id_password2">{% trans "Confirm Password" %}</label> <label for="id_password2">{% trans "Confirm Password" %}</label>
{{ form.password2 }} {{ form.password2.errors }} {{ form.password2 }} {{ form.password2.errors }}
<input class="input hide" id="id_password2_show" name="password2_show" type="text">
<span class="checkbox"><input type="checkbox" name="show-passwd" id="show-passwd-switch" class="checkbox-orig" /></span>
<span class="checkbox-option">{% trans "Show password"%}</span><br />
{% if form.department and form.telephone %} {% if form.department and form.telephone %}
<label for="id_department">{% trans "Department" %}</label> <label for="id_department">{% trans "Department" %}</label>
{{ form.department }} {{ form.department.errors }} {{ form.department }} {{ form.department.errors }}
@@ -44,85 +40,41 @@
{% block extra_script %} {% block extra_script %}
<script type="text/javascript"> <script type="text/javascript">
$("#id_password1").keyup(function() {
$('#show-passwd-switch').click(function () { var level = getStrengthLevel($(this).val());
var pwd_hide_1 = $('#id_password1'),
pwd_show_1 = $('#id_password1_show'),
pwd_hide_2 = $('#id_password2'),
pwd_show_2 = $('#id_password2_show');
if ($(this).attr('checked')) {
pwd_hide_1.addClass('hide');
pwd_show_1.removeClass('hide');
pwd_show_1.attr('value', pwd_hide_1.attr('value'));
pwd_hide_2.addClass('hide');
pwd_show_2.removeClass('hide');
pwd_show_2.attr('value', pwd_hide_2.attr('value'));
} else {
pwd_hide_1.removeClass('hide');
pwd_show_1.addClass('hide');
pwd_hide_1.attr('value', pwd_show_1.attr('value'));
pwd_hide_2.removeClass('hide');
pwd_show_2.addClass('hide');
pwd_hide_2.attr('value', pwd_show_2.attr('value'));
}
});
$("#id_password1_show").keyup(function() {
$('#id_password1').attr('value', $(this).attr('value'));
});
$("#id_password2_show").keyup(function() {
$('#id_password2').attr('value', $(this).attr('value'));
});
$("#id_password1, #id_password1_show").click(function() {
$("#pwd_tips").removeClass("hide");
});
$(document).click(function(e) {
var target = e.target || event.srcElement;
if (!$("#id_password1, #id_password1_show").is(target)) {
$("#pwd_tips").addClass("hide");
}
});
$("#id_password1, #id_password1_show").keyup(function() {
var pwd = $(this),
pwd_string = pwd.attr('value');
var level = getStrengthLevel(pwd_string);
showStrength(level); showStrength(level);
}); });
function getStrengthLevel(pwd_string) { function getStrengthLevel(pwd) {
var num = 0, min_passwd_len = 6; var num = 0,
min_passwd_len = 6;
if (pwd_string.length < min_passwd_len) { if (pwd.length < min_passwd_len) {
return 0; return 0;
} else { } else {
for (i = 0; i < pwd_string.length; i++) { for (var i = 0; i < pwd.length; i++) {
// return the unicode // return the unicode
// bitwise OR // bitwise OR
num |= getCharMode(pwd_string.charCodeAt(i)); num |= getCharMode(pwd.charCodeAt(i));
}; };
return caculateBitwise(num); return calculateBitwise(num);
}; };
} }
function getCharMode(n) { function getCharMode(n) {
if (n >= 48 && n <= 57) //nums if (n >= 48 && n <= 57) // nums
return 1; return 1;
if (n >= 65 && n <= 90) //uppers if (n >= 65 && n <= 90) // uppers
return 2; return 2;
if (n >= 97 && n <= 122) //lowers if (n >= 97 && n <= 122) // lowers
return 4; return 4;
else else
return 8; return 8;
} }
function caculateBitwise(num) { function calculateBitwise(num) {
level = 0; var level = 0;
for (i = 0; i < 4; i++){ for (var i = 0; i < 4; i++){
// bitwise AND // bitwise AND
if (num&1) level++; if (num&1) level++;
// Right logical shift // Right logical shift
@@ -132,24 +84,28 @@ function caculateBitwise(num) {
} }
function showStrength(level) { function showStrength(level) {
var color= new Array(5), var strength_ct = $("#pwd_strength");
strength= new Array(5); var strength = [
"{% trans "too weak" %}",
color[0] = "#F00000"; "{% trans "weak" %}",
color[1] = "#aa0033"; "{% trans "medium" %}",
color[2] = "#ffcc33"; "{% trans "strong" %}"
color[3] = "#6699cc"; ];
color[4] = "#008000"; switch (level) {
color[5] = "#676767"; case 0:
strength_ct.html(strength[0]).css("color", '#F00000');
strength[0] = "Too Short"; break;
strength[1] = "Weak"; case 1:
strength[2] = "Medium"; strength_ct.html('<span style="background:#db4747;">' + strength[1] + '</span><span>' + strength[2] + '</span><span>' + strength[3] + '</span>');
strength[3] = "Strong"; break;
strength[4] = "Very Strong"; case 2:
strength_ct.html('<span>' + strength[1] + '</span><span style="background:#fdd64d;">' + strength[2] + '</span><span>' + strength[3] + '</span>');
$("#pwd_strength").html(strength[level]); break;
$("#pwd_strength").css("color", color[level]); case 3:
case 4:
strength_ct.html('<span>' + strength[1] + '</span><span>' + strength[2] + '</span><span style="background:#4aa323;">' + strength[3] + '</span>');
break;
}
} }
$('form').submit(function(){ $('form').submit(function(){