JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Text Boxes & Inputs › password minimum complexity validation
Tagged: customStrength, minimum complexity, password
- This topic has 1 reply, 1 voice, and was last updated 1 year, 9 months ago by
Patrick Hume.
-
AuthorPosts
-
November 16, 2022 at 1:27 am #103990
Patrick Hume
ParticipantI’m using the customStrength to check that the user password strength is based on is the password has at least 1 symbol, 1 numerical value, 1 lower case, 1 upper case and is at least 8 characters long. I need to be able to tell if the field is valid, the problem is this method is called by 2 password fields (a primary & a confirm password field), and given the user can switch between them and change them at will, I need to work out which field was changed so I can set some sort of flag to indicate if the changed field meets the minimum complexity requirement and thusly is valid or not, it’s only when both fields the minimum strength requirement that I want to enable the submit button. I thought about using the OnChanging method but that is fine for setting a message but you cannot tailor the tooltip template messages using that method. I can pass prams to the below function using
await JSRuntime.InvokeAsync<string[]>("customStrength", new string[] { "passwordFeildId", "confirmationPasswordFeildId", "submitButtonId" });
This will allow me to use document.getElementById to reference the controls in question but I am unsure of how to tell which was the calling control i.e was it the first password field of the second. There isn’t a flag on the control or something in the controls API that I could use or that looks reliable enough to check for. I thought about testing for the tooltip message but that seems messy, any suggestions are welcome, the end goal is to tweak the password strength to ensure a given password meets the complexity requirement and only enable the submit button when both password fields match and meet this complexity requirement
(function (global) { global.customStrength = function (passwordFeild, confrimFeild, submitBtn) { console.log(passwordFeild + ',' + confrimFeild + ',' + submitBtn) debugger; setTimeout(function () { debugger; document.querySelector("smart-password-text-box").passwordStrength = function (password, allowedSymbols) { validPasswordFeild = document.getElementById(passwordFeild); validConfrimFeild = document.getElementById(confrimFeild); enableSubmit = document.getElementById(submitBtn); const passwordLength = password.length; debugger; if (passwordLength < 3) { return 'short'; } else if (passwordLength < 7) { return 'weak'; } else if (new RegExp(symbols).exec(password)) { return 'not strong enough - missing art least 1 symbol'; } else if (new RegExp(numerical).exec(password)) { return 'not strong enough - missing at least 1 numerical value, 0 - 9'; } else if (new RegExp(upperCase).exec(password)) { return 'not strong enough - missing at least 1 upper case characture'; } else if (new RegExp(lowerCase).exec(password)) { return 'not strong enough -missing at least 1 lower case characture'; } }; }, 0); } })(window);
hopefully that all makes sense, there may be a better way of doing this so if there is please let me know
thanks
-
This topic was modified 1 year, 9 months ago by
Patrick Hume. Reason: readability
-
This topic was modified 1 year, 9 months ago by
Patrick Hume. Reason: formate code
November 16, 2022 at 3:22 am #103993Patrick Hume
Participantnever mind I worked it out, I was just been a total idiot and just had to take a step back, id delete this redundant post but seems I can’t …how annoying, any way please disregard the above
-
This topic was modified 1 year, 9 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.