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) { | |||
| "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.
 | |||
| odoo.define('user_password_strength.reset_user', function (require) { | |||
|     "use strict"; | |||
| 
 | |||
|     var PublicWidget = require('web.public.widget'); | |||
|     var ajax = require("web.ajax"); | |||
|     var password = document.getElementById("password"); | |||
| 
 | |||
|     var MySignUpForm = PublicWidget.registry.SignUpForm.extend({ | |||
|         selector: '.oe_signup_form', | |||
|     var ResetForm = PublicWidget.Widget.extend({ | |||
|         selector: '.oe_website_login_container', | |||
|         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
 | |||
|             ajax.jsonRpc('/web/config_params', 'call', { | |||
|             }).then(function (data) { | |||
|                 var list=[] | |||
| 
 | |||
|         _updateProgress: function (passwordField) { | |||
|             var current_pwd = passwordField ? passwordField.value : ""; | |||
| 
 | |||
|             // 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) { | |||
|                 list.push(data[x]); | |||
|                     list.push(data[x]); | |||
|                 } | |||
|                 var flag = 0 | |||
|                 for(var i=0;i<=list.length;i++){ | |||
|                     if(list[i] == 'True'){ | |||
|                      flag +=1 | |||
| 
 | |||
|                 // Count the number of enabled password conditions
 | |||
|                 var flag = 0; | |||
|                 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]/] | |||
|                         .reduce((memo, test) => memo + test.test(current_pwd), | |||
|                          0); | |||
|                 if(prog > 2 && current_pwd.length > 7){ | |||
|                     .reduce((memo, test) => memo + test.test(current_pwd), 0); | |||
| 
 | |||
|                 // Increase progress if password length is greater than 7 characters
 | |||
|                 if (prog > 2 && current_pwd.length > 7) { | |||
|                     prog++; | |||
|                 } | |||
| 
 | |||
|                 var progress = ""; | |||
|                 var colors = ['#FF0000', '#00FF00','#0000FF']; | |||
|                 var currentColor = 0; | |||
|                 //When 5 conditions are enabled in config settings
 | |||
|                 if (flag == 5){ | |||
|                 var colors = ['#FF0000', '#00FF00', '#0000FF']; | |||
|                 var currentColor = colors[0]; // Default to red
 | |||
| 
 | |||
|                 // Update progress and color based on the number of conditions (flag)
 | |||
|                 if (flag === 5) { | |||
|                     switch (prog) { | |||
|                         case 0: | |||
|                         case 1: | |||
|                           progress = "20"; | |||
|                           currentColor = colors[0]; | |||
|                           break; | |||
|                             progress = "20"; | |||
|                             currentColor = colors[0]; | |||
|                             break; | |||
|                         case 2: | |||
|                           progress = "25"; | |||
|                           currentColor = colors[0]; | |||
|                           break; | |||
|                             progress = "25"; | |||
|                             currentColor = colors[0]; | |||
|                             break; | |||
|                         case 3: | |||
|                           progress = "50"; | |||
|                           currentColor = colors[1]; | |||
|                           break; | |||
|                             progress = "50"; | |||
|                             currentColor = colors[1]; // Green
 | |||
|                             break; | |||
|                         case 4: | |||
|                           progress = "75"; | |||
|                           currentColor = colors[1]; | |||
|                           break; | |||
|                             progress = "75"; | |||
|                             currentColor = colors[1]; | |||
|                             break; | |||
|                         case 5: | |||
|                           progress = "100"; | |||
|                           currentColor = colors[1]; | |||
|                           break; | |||
|                             progress = "100"; | |||
|                             currentColor = colors[1]; | |||
|                             break; | |||
|                     } | |||
|                 } | |||
|                 //When 4 conditions are enabled in config settings
 | |||
|                 if (flag == 4){ | |||
|                 } else if (flag === 4) { | |||
|                     switch (prog) { | |||
|                         case 0: | |||
|                         case 1: | |||
|                         case 2: | |||
|                           progress = "25"; | |||
|                           currentColor = colors[0]; | |||
|                           break; | |||
|                             progress = "25"; | |||
|                             currentColor = colors[0]; | |||
|                             break; | |||
|                         case 3: | |||
|                           progress = "50"; | |||
|                           currentColor = colors[0]; | |||
|                           break; | |||
|                             progress = "50"; | |||
|                             currentColor = colors[0]; | |||
|                             break; | |||
|                         case 4: | |||
|                           progress = "75"; | |||
|                           currentColor = colors[1]; | |||
|                           break; | |||
|                             progress = "75"; | |||
|                             currentColor = colors[1]; | |||
|                             break; | |||
|                         case 5: | |||
|                           progress = "100"; | |||
|                           currentColor = colors[1]; | |||
|                           break; | |||
|                             progress = "100"; | |||
|                             currentColor = colors[1]; | |||
|                             break; | |||
|                     } | |||
|                 } | |||
|                 //When 3 conditions are enabled in config settings
 | |||
|                 if (flag == 3){ | |||
|                 } else if (flag === 3) { | |||
|                     switch (prog) { | |||
|                         case 0: | |||
|                         case 1: | |||
|                         case 2: | |||
|                         case 3: | |||
|                           progress = "33.33"; | |||
|                           currentColor = colors[0]; | |||
|                           break; | |||
|                             progress = "33.33"; | |||
|                             currentColor = colors[0]; | |||
|                             break; | |||
|                         case 4: | |||
|                           progress = "66.66"; | |||
|                           currentColor = colors[1]; | |||
|                           break; | |||
|                             progress = "66.66"; | |||
|                             currentColor = colors[1]; | |||
|                             break; | |||
|                         case 5: | |||
|                           progress = "100"; | |||
|                           currentColor = colors[1]; | |||
|                           break; | |||
|                             progress = "100"; | |||
|                             currentColor = colors[1]; | |||
|                             break; | |||
|                     } | |||
|                 } | |||
|                 //When 2 conditions are enabled in config settings
 | |||
|                 if (flag == 2) { | |||
|                     if (prog != 5) { | |||
|                 } else if (flag === 2) { | |||
|                     if (prog !== 5) { | |||
|                         progress = "50"; | |||
|                         currentColor = colors[0]; | |||
|                     } else{ | |||
|                     } else { | |||
|                         progress = "100"; | |||
|                             currentColor = colors[1]; | |||
|                         currentColor = colors[1]; | |||
|                     } | |||
|                 } | |||
|                 //When only 1 condition is enabled in config settings
 | |||
|                 if (flag == 1){ | |||
|                 } else if (flag === 1) { | |||
|                     progress = "100"; | |||
|                     currentColor = colors[1]; | |||
|                     currentColor = colors[1]; // Green for fully satisfied
 | |||
|                 } | |||
|                 var val = document.getElementById("progress") | |||
|                     if(val!== null){ | |||
|                         document.getElementById("progress").value = progress; | |||
|                         document.getElementById("progress").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; | |||
|                 // Update the progress bar
 | |||
|                 var progressBar = document.getElementById("progress"); | |||
|                 if (progressBar) { | |||
|                     progressBar.value = progress; | |||
|                     progressBar.style.backgroundColor = currentColor; | |||
|                 } | |||
|             }, | |||
|             }); | |||
|         }, | |||
|     }); | |||
| 
 | |||
|     PublicWidget.registry.MySignUpForm = MySignUpForm; | |||
|     return MySignUpForm; | |||
|     PublicWidget.registry.ResetForm = ResetForm; | |||
|     return ResetForm; | |||
| }); | |||
|  | |||
| @ -1,11 +1,15 @@ | |||
| <?xml version="1.0" encoding="UTF-8" ?> | |||
| <odoo> | |||
|     <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"> | |||
|             <br> | |||
|             </br> | |||
|             <div> | |||
|                 <progress id="progress" value="0" max="100" | |||
|                           style="color: red;">70</progress> | |||
|                 <progress id="progress" value="0" max="100" style="color: red;">70</progress> | |||
|             </div> | |||
|         </xpath> | |||
|     </template> | |||
| </odoo> | |||
| 
 | |||
| 
 | |||
| </odoo> | |||
|  | |||
					Loading…
					
					
				
		Reference in new issue