9097 add contextual password helper

[mikecp]

Prerequisites

• [X ] I have added steps to test this contribution in the description below

This PR is a first fix for issue #9097

Description

I have added a "password tip" text mentioning the minimum number of characters remaining to type, as well as a reminder of the number of non-alphanumeric characters required (cf screenshot)

I have been able to do this for the password changes in the backoffice: members, users, and own profile.

I have not been able to do this on the password change on the login form (this is the one in the "forgot password" mails) because I need to call the following method to get the info, and you need to be authenticated to have access to that (got 401 error when calling this from login page)

                authResource.getMembershipProviderConfig().then(function(data) {
                    vm.invitedUserPasswordModel.passwordPolicies = data;
                });

If somebody can point me on how to get that info for that screen, that would be great :-)

Steps to test:

• adapt the values of the minRequiredNonalphanumericCharacters and minRequiredPasswordLength attributes on the MembershipProviders registration in the web.config file (both UmbracoMembershipProvider and UsersMembershipProvider to test all sections)
• go to any of the "change password" sections/screesn in the backoffice

Next steps;

• try to get this working in the loin screen for the "forgot password emails"
• integrate the Pwnd Passwords API as bonus, as suggested in the issue

[protherj]

Hey @mikecp! We may take this PR and try to help move the needle on it during our Hackathon. Sound OK?

[mikecp]

Hey @protherj Sure no problem. I was planning on having a look at it tonight as well, so maybe just drop a comment here to let me know if you start working on it, then I'll keep my hands off it ;-)

[protherj]

You could join our Zoom :)

[mikecp]

In fact I could, I'll try to drop by :-)

[mikecp]

And now with display on the password reset screen as well ;-)

[protherj]

Hey, we tried to convert the validation to a directive, but ran out of time as it was more complex than we expected. Sorry!

[mikecp]

Hey @protherj, no problem ;-)
I thought about that as well, but indeed more complex than I thought. Currently copy-pasted, so I'll give another try at directive if I find time :-)

[TimGeyssens]

any update on merge @nul800sebastiaan ?

[mikecp]

Haven't done the check with Pwnd Passwords API yet but I guess this can be taken over later on?

[TimGeyssens]

is copy paste ok? Or does it need to be directive?

[TimGeyssens]

is copy paste ok? Or does it need to be directive?

[TimGeyssens]

@mikecp yeah would agree, merge now and then it can be added later

[mikecp]

@TimGeyssens Indeed copy-pasted, i will have a look to move to directive.

[suedeapple]

Hmmm.. I'm not too sure if it's safe to disclose how long a password needs to be on the "Public" side of the site. It opens itself to a hacker to determine the min length of other users passwords.

[TimGeyssens]

It's for pw change and set ... Not when logging in

[umbrabot]

Hi there @mikecp,

First of all: A big #H5YR for making an Umbraco related contribution during Hacktoberfest! We are very thankful for the huge amount of PRs submitted, and all the amazing work you've been doing 🥇

Due to the amazing work you and others in the community have been doing, we've had a bit of a hard time keeping up. 😅 While all of the PRs for Hacktoberfest might not have been merged yet, you still qualify for receiving some Umbraco swag, congratulations! 🎉

In the spirit of Hacktoberfest we've prepared some exclusive Umbraco swag for all our contributors - including you!

As a new choice this year, you can opt-out of receiving anything and ask us to improve the planet instead by planting a tree on your behalf. 🌳

Receive your swag or plant a tree! 👈 Please follow this link to fill out and submit the form, before February 26, 2021.

Following this date we'll be sending out all the swag, which also means that it might not reach your doorstep before April, so please bear with us and be patient 🙏

The only thing left to say is thank you so much for participating in Hacktoberfest! We really appreciate the help!

Kind regards,
The various Umbraco Teams

[TimGeyssens]

@nathanwoulfe how about this one? Simple one to avoid some frustration...

[nathanwoulfe]

@mikecp @TimGeyssens @protherj this looks great - I'm going to have a look at creating a directive to avoid the duplication. Otherwise, this is a valuable UX addition

[mikecp]

Thanks @nathanwoulfe , much appreciated.
I kept that directive stuff on my todo list but somehow did not find the time to actually do it yet...
Would indeed be better to avoid code duplication!

[nathanwoulfe]

@mikecp directive is in my last commit - I've implemented it the user password change overlay only, but if we're happy with the approach it's easy enough to update the other locations.

Only bit that's potentially a bit messy is having to pass a reference to the password input element, rather than a scoped variable - this is because the password fields have a min-length attribute set, and potentially some logic implemented too, which prevents the scoped variable from being set until the min-length is met. That then means the helper text isn't displayed until the password is n characters long, which defeats the purpose (I'm guessing that's why you have the key-up event?). By passing a selector for the password input, the directive can then watch the value, and show the helper as needed.

[mikecp]

Hey @nathanwoulfe ,
I was just having a look at it, it looks great! Thanks! I would probably never have thought of that "element-selector-attribute" to get the password textbox through 👍

Indeed, the "key-up" event was my workaround for that RawValue not being passed until the password had actually met the criteria's 😂
And I don't see how we could go without some level of "messiness" since we cannot really change the behavior of that password textbox...

So for me it is good to go with the directive as you wrote it.
I can change the rest myself, but then tomorrow because it's getting late for me here 😴 But feel free to do it yourself if you feel like it.
Cheers!

[mikecp]

@nathanwoulfe still needs some cleaning up, I'll finish tonight 😀

[nathanwoulfe]

Legendary, thanks @mikecp. I had intended coming back to finish up, but Monday got away from me

I'm not sure that the passing the element selector as the directive binding is necessarily the best idea, but it works, and saves the repeated code.

[mikecp]

Hey @nathanwoulfe ,
I think this time we're there 😅
There was one major issue that I identified by testing, due to the fact that we have separate Members and Users Manager, which can each have their own settings for min length and non alpha-num.

This was handled "behind the scenes" in my "duplicate code" version because the appropriate values were passed during the binding to the component, but with the separate directive, we always used the Users settings via the two constants, and therefore this could display misleading information when changing a Member password.

Anyway, there are a bunch of changes that I made so that specific min length and non alpha-num values can now be bound to the password tip component.
Also, doing these changes brought me to an alternative solution for the "watcher", by using the "onchanges" event.
Yes, the ng-keyup is back on the password inputs, so if you think that the "watcher" remains better, we can revert to it 😉

Cheers!

[nathanwoulfe]

@mikecp looks good to me - there's a tradeoff with the keyup vs watch, where the former is potentially more efficient and avoids the angularjs coupling, but it does mean the component is more involved since it needs to manage the keyup. The way I'd done the watch though was a bit dodgy as it meant the directive was operating outside it's own scope, so probably best to not be doing that...

Otherwise, all works nicely, it's a really useful addition 👍

[mikecp]

Thx @nathanwoulfe !
As you said, none of the options was optimal, but in the end I thought it made a little more sense to let the component be responsible to send its "state change" to the directive.

Cheers!