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 {
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>
{{ 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 }}
<input class="input hide" id="id_password1_show" name="password1_show" type="text">
<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>
<div id="pwd_strength"></div>
<label for="id_password2">{% trans "Confirm Password" %}</label>
{{ 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 %}
<label for="id_department">{% trans "Department" %}</label>
{{ form.department }} {{ form.department.errors }}
@@ -44,85 +40,41 @@
{% block extra_script %}
<script type="text/javascript">
$('#show-passwd-switch').click(function () {
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);
$("#id_password1").keyup(function() {
var level = getStrengthLevel($(this).val());
showStrength(level);
});
function getStrengthLevel(pwd_string) {
var num = 0, min_passwd_len = 6;
function getStrengthLevel(pwd) {
var num = 0,
min_passwd_len = 6;
if (pwd_string.length < min_passwd_len) {
if (pwd.length < min_passwd_len) {
return 0;
} else {
for (i = 0; i < pwd_string.length; i++) {
for (var i = 0; i < pwd.length; i++) {
// return the unicode
// bitwise OR
num |= getCharMode(pwd_string.charCodeAt(i));
num |= getCharMode(pwd.charCodeAt(i));
};
return caculateBitwise(num);
return calculateBitwise(num);
};
}
function getCharMode(n) {
if (n >= 48 && n <= 57) //nums
if (n >= 48 && n <= 57) // nums
return 1;
if (n >= 65 && n <= 90) //uppers
if (n >= 65 && n <= 90) // uppers
return 2;
if (n >= 97 && n <= 122) //lowers
if (n >= 97 && n <= 122) // lowers
return 4;
else
return 8;
}
function caculateBitwise(num) {
level = 0;
for (i = 0; i < 4; i++){
function calculateBitwise(num) {
var level = 0;
for (var i = 0; i < 4; i++){
// bitwise AND
if (num&1) level++;
// Right logical shift
@@ -132,24 +84,28 @@ function caculateBitwise(num) {
}
function showStrength(level) {
var color= new Array(5),
strength= new Array(5);
color[0] = "#F00000";
color[1] = "#aa0033";
color[2] = "#ffcc33";
color[3] = "#6699cc";
color[4] = "#008000";
color[5] = "#676767";
strength[0] = "Too Short";
strength[1] = "Weak";
strength[2] = "Medium";
strength[3] = "Strong";
strength[4] = "Very Strong";
$("#pwd_strength").html(strength[level]);
$("#pwd_strength").css("color", color[level]);
var strength_ct = $("#pwd_strength");
var strength = [
"{% trans "too weak" %}",
"{% trans "weak" %}",
"{% trans "medium" %}",
"{% trans "strong" %}"
];
switch (level) {
case 0:
strength_ct.html(strength[0]).css("color", '#F00000');
break;
case 1:
strength_ct.html('<span style="background:#db4747;">' + strength[1] + '</span><span>' + strength[2] + '</span><span>' + strength[3] + '</span>');
break;
case 2:
strength_ct.html('<span>' + strength[1] + '</span><span style="background:#fdd64d;">' + strength[2] + '</span><span>' + strength[3] + '</span>');
break;
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(){