10 changed files with 133 additions and 102 deletions
After Width: | Height: | Size: 80 KiB |
After Width: | Height: | Size: 175 KiB |
Before Width: | Height: | Size: 12 KiB |
@ -1,140 +1,150 @@ |
|||||
odoo.define('user_password_strength.signup_user', function (require) { |
odoo.define('user_password_strength.reset_user', function (require) { |
||||
"use strict"; |
"use strict"; |
||||
// Extending the public widget of the signup form for checking the user
|
|
||||
// password strength conditions on key up function of the password field in
|
|
||||
// the sign up form,Based on the conditions from configuration settings.
|
|
||||
var PublicWidget = require('web.public.widget'); |
var PublicWidget = require('web.public.widget'); |
||||
var ajax = require("web.ajax"); |
var ajax = require("web.ajax"); |
||||
var password = document.getElementById("password"); |
|
||||
|
|
||||
var MySignUpForm = PublicWidget.registry.SignUpForm.extend({ |
var ResetForm = PublicWidget.Widget.extend({ |
||||
selector: '.oe_signup_form', |
selector: '.oe_website_login_container', |
||||
events: { |
events: { |
||||
'keyup': '_onKeyup', |
'input input[type="password"]': '_onPasswordInput', |
||||
|
}, |
||||
|
|
||||
|
_onPasswordInput: function () { |
||||
|
var passwordField = document.getElementById("password"); |
||||
|
var confirmPasswordField = document.getElementById("confirm_password"); |
||||
|
|
||||
|
// Call function to update password strength progress for both password and confirm password fields
|
||||
|
this._updateProgress(passwordField); |
||||
|
this._updateProgress(confirmPasswordField); |
||||
}, |
}, |
||||
_onKeyup: function () { |
|
||||
// Rendering ajax Rpc call from controller through route
|
_updateProgress: function (passwordField) { |
||||
ajax.jsonRpc('/web/config_params', 'call', { |
var current_pwd = passwordField ? passwordField.value : ""; |
||||
}).then(function (data) { |
|
||||
var list=[] |
// Reset if password length is zero
|
||||
|
if (current_pwd.length === 0) { |
||||
|
var progressBar = document.getElementById("progress"); |
||||
|
if (progressBar) { |
||||
|
progressBar.value = "0"; |
||||
|
progressBar.style.backgroundColor = "#FF0000"; // Red for no input
|
||||
|
} |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// AJAX call to get configuration settings
|
||||
|
ajax.jsonRpc('/web/config_params', 'call', {}).then(function (data) { |
||||
|
var list = []; |
||||
for (let x in data) { |
for (let x in data) { |
||||
list.push(data[x]); |
list.push(data[x]); |
||||
} |
} |
||||
var flag = 0 |
|
||||
for(var i=0;i<=list.length;i++){ |
// Count the number of enabled password conditions
|
||||
if(list[i] == 'True'){ |
var flag = 0; |
||||
flag +=1 |
for (var i = 0; i < list.length; i++) { |
||||
|
if (list[i] === 'True') { |
||||
|
flag++; |
||||
} |
} |
||||
} |
} |
||||
|
// Check how many conditions the current password satisfies
|
||||
var prog = [/[$@$!%*#?&]/, /[A-Z]/, /[0-9]/, /[a-z]/] |
var prog = [/[$@$!%*#?&]/, /[A-Z]/, /[0-9]/, /[a-z]/] |
||||
.reduce((memo, test) => memo + test.test(current_pwd), |
.reduce((memo, test) => memo + test.test(current_pwd), 0); |
||||
0); |
|
||||
if(prog > 2 && current_pwd.length > 7){ |
// Increase progress if password length is greater than 7 characters
|
||||
|
if (prog > 2 && current_pwd.length > 7) { |
||||
prog++; |
prog++; |
||||
} |
} |
||||
|
|
||||
var progress = ""; |
var progress = ""; |
||||
var colors = ['#FF0000', '#00FF00','#0000FF']; |
var colors = ['#FF0000', '#00FF00', '#0000FF']; |
||||
var currentColor = 0; |
var currentColor = colors[0]; // Default to red
|
||||
//When 5 conditions are enabled in config settings
|
|
||||
if (flag == 5){ |
// Update progress and color based on the number of conditions (flag)
|
||||
|
if (flag === 5) { |
||||
switch (prog) { |
switch (prog) { |
||||
case 0: |
case 0: |
||||
case 1: |
case 1: |
||||
progress = "20"; |
progress = "20"; |
||||
currentColor = colors[0]; |
currentColor = colors[0]; |
||||
break; |
break; |
||||
case 2: |
case 2: |
||||
progress = "25"; |
progress = "25"; |
||||
currentColor = colors[0]; |
currentColor = colors[0]; |
||||
break; |
break; |
||||
case 3: |
case 3: |
||||
progress = "50"; |
progress = "50"; |
||||
currentColor = colors[1]; |
currentColor = colors[1]; // Green
|
||||
break; |
break; |
||||
case 4: |
case 4: |
||||
progress = "75"; |
progress = "75"; |
||||
currentColor = colors[1]; |
currentColor = colors[1]; |
||||
break; |
break; |
||||
case 5: |
case 5: |
||||
progress = "100"; |
progress = "100"; |
||||
currentColor = colors[1]; |
currentColor = colors[1]; |
||||
break; |
break; |
||||
} |
} |
||||
} |
} else if (flag === 4) { |
||||
//When 4 conditions are enabled in config settings
|
|
||||
if (flag == 4){ |
|
||||
switch (prog) { |
switch (prog) { |
||||
case 0: |
case 0: |
||||
case 1: |
case 1: |
||||
case 2: |
case 2: |
||||
progress = "25"; |
progress = "25"; |
||||
currentColor = colors[0]; |
currentColor = colors[0]; |
||||
break; |
break; |
||||
case 3: |
case 3: |
||||
progress = "50"; |
progress = "50"; |
||||
currentColor = colors[0]; |
currentColor = colors[0]; |
||||
break; |
break; |
||||
case 4: |
case 4: |
||||
progress = "75"; |
progress = "75"; |
||||
currentColor = colors[1]; |
currentColor = colors[1]; |
||||
break; |
break; |
||||
case 5: |
case 5: |
||||
progress = "100"; |
progress = "100"; |
||||
currentColor = colors[1]; |
currentColor = colors[1]; |
||||
break; |
break; |
||||
} |
} |
||||
} |
} else if (flag === 3) { |
||||
//When 3 conditions are enabled in config settings
|
|
||||
if (flag == 3){ |
|
||||
switch (prog) { |
switch (prog) { |
||||
case 0: |
case 0: |
||||
case 1: |
case 1: |
||||
case 2: |
case 2: |
||||
case 3: |
case 3: |
||||
progress = "33.33"; |
progress = "33.33"; |
||||
currentColor = colors[0]; |
currentColor = colors[0]; |
||||
break; |
break; |
||||
case 4: |
case 4: |
||||
progress = "66.66"; |
progress = "66.66"; |
||||
currentColor = colors[1]; |
currentColor = colors[1]; |
||||
break; |
break; |
||||
case 5: |
case 5: |
||||
progress = "100"; |
progress = "100"; |
||||
currentColor = colors[1]; |
currentColor = colors[1]; |
||||
break; |
break; |
||||
} |
} |
||||
} |
} else if (flag === 2) { |
||||
//When 2 conditions are enabled in config settings
|
if (prog !== 5) { |
||||
if (flag == 2) { |
|
||||
if (prog != 5) { |
|
||||
progress = "50"; |
progress = "50"; |
||||
currentColor = colors[0]; |
currentColor = colors[0]; |
||||
} else{ |
} else { |
||||
progress = "100"; |
progress = "100"; |
||||
currentColor = colors[1]; |
currentColor = colors[1]; |
||||
} |
} |
||||
} |
} else if (flag === 1) { |
||||
//When only 1 condition is enabled in config settings
|
|
||||
if (flag == 1){ |
|
||||
progress = "100"; |
progress = "100"; |
||||
currentColor = colors[1]; |
currentColor = colors[1]; // Green for fully satisfied
|
||||
} |
} |
||||
var val = document.getElementById("progress") |
// Update the progress bar
|
||||
if(val!== null){ |
var progressBar = document.getElementById("progress"); |
||||
document.getElementById("progress").value = progress; |
if (progressBar) { |
||||
document.getElementById("progress").style |
progressBar.value = progress; |
||||
.backgroundColor = currentColor; |
progressBar.style.backgroundColor = currentColor; |
||||
} |
|
||||
}); |
|
||||
// Reset if password length is zero
|
|
||||
var current_pwd = password.value |
|
||||
if (current_pwd.length === 0) { |
|
||||
document.getElementById("progress").value = "0"; |
|
||||
return; |
|
||||
} |
} |
||||
}, |
}); |
||||
|
}, |
||||
}); |
}); |
||||
|
|
||||
PublicWidget.registry.MySignUpForm = MySignUpForm; |
PublicWidget.registry.ResetForm = ResetForm; |
||||
return MySignUpForm; |
return ResetForm; |
||||
}); |
}); |
||||
|
@ -1,11 +1,15 @@ |
|||||
<?xml version="1.0" encoding="UTF-8" ?> |
<?xml version="1.0" encoding="UTF-8" ?> |
||||
<odoo> |
<odoo> |
||||
<template id="document_fields" inherit_id="auth_signup.fields"> |
<template id="document_fields" inherit_id="auth_signup.fields"> |
||||
|
<!-- Inherit and Extend the Standard Auth Signup Fields Template --> |
||||
<xpath expr="//input[@name='password']" position="after"> |
<xpath expr="//input[@name='password']" position="after"> |
||||
|
<br> |
||||
|
</br> |
||||
<div> |
<div> |
||||
<progress id="progress" value="0" max="100" |
<progress id="progress" value="0" max="100" style="color: red;">70</progress> |
||||
style="color: red;">70</progress> |
|
||||
</div> |
</div> |
||||
</xpath> |
</xpath> |
||||
</template> |
</template> |
||||
|
|
||||
|
|
||||
</odoo> |
</odoo> |
Loading…
Reference in new issue