Registration: email, password strength, username JS validation

[SGr33n]

Hi,

May I provide patch and files to implement the real time email validation and the WP built-in password strength meter on the registration page?

Maybe then also the real time username availibility.

[boonebgorges]

Password meter, yes.

By "email validation" do you mean JS checks to see whether your email address is well-formed? If so, yes, please patch it up. If not, please clarify.

Username availability is a whole other can of worms. AJAX calls from non-logged-in users can open the door for performance issues (especially given the spambots that hit registration pages). And it raises the possibility of privacy issues.

If you plan to patch these, please do it in separate patches so they can be reviewed separately. Thanks!

[SGr33n]

Sure :)

So I will work on the password meter and the email validation (well formed). Then maybe we can speak about the other two things, in order to know if they can be made.

[SGr33n]

This is for the password strength meter on the registration page... an explaination:

I created a new function on the buddypress-functions.php that will enqueue scripts just on register page, it may be also expanded in the future to load scripts on other BP pages.

Infact I created the register.js that loads only on the registration page, not to weigh the buddypress.js with functions only used on one single page. I also thought if it was appropriate to create a separate file for the css, but I opted not to create it because in buddypress.css there were already lines about the registration page and because, eventually, the css could be reused later on the settings page.

[SGr33n]

Password strength meter on the register page

[boonebgorges]

5775.patch moves the patch out of the zip into a standalone file for easier review.

[boonebgorges]

Basic approach seems OK to me. Loading a separate 'register.js' is OK, though I wonder if we might do this based on functionality (password-verify.js) rather than based on the current page (register.js). This would mirror WP's organization better, and would make it more modular for use on, eg, the settings page.

I'm not sure I see the need for a separate enqueue_bp_pages_scripts() method. I think this logic can go into the enqueue_scripts() method. In that method, you should be able to use bp_is_register_page() rather than checking the settings directly.

JS could use some formatting cleanup. And I'd say that the checkPassStrength() function can probably go inside the function( $ ) scope, since it requires jQuery. As an aside: I haven't looked, but does WP not have a standalone function that we could use for this purpose?

[SGr33n]

Thanks :)

1) I will move it inside enqueue_scripts();
2) Will be done;
3) wp-admin/js/user-profile.js checks different field ids.

[SGr33n]

Sorry again for the zip file :P

Made modifications according to your requests. The password-verify.js is now more similar to wp-admin/js/user-profile.js

Also enqueue .min version of the js file if not defined('SCRIPT_DEBUG').

[boonebgorges]

Thanks for this, SGr33n. I'm going to make some modifications so that it can be used for the Settings page as well.

Sorry again for the zip file :P

How are you generating them? There must be a setting that allows you to include the new file in the patch.

[boonebgorges]

In 8686:

Add password strength meters to registration and settings panels.

See #5775

Props SGr33n

[SGr33n]

Well! :)

I'm generating them via linux command

svn diff > name.patch

Now, about the email validation (not availability), is it better to act like the WP user-profile.js, renaming password-verify.js in bp-user-profile.js and putting in this all form validations ( email, username min length) or creating a new one?

[imath]

In 8690:

grunt generated rtl css rules see #5775

[boonebgorges]

SGr33n - Try running svn add src/bp-templates/bp-legacy/buddypress/js/whatever.js before generating the patch.

I'd put email validation stuff into its own file, so it's more reusable. BuddyPress should be aiming for more separate files, not fewer; we should have a grunt routine or something like that to combine them if we think that it's valuable to do so.

[SGr33n]

Perfect, thanks :) I'll try your command, I found a command that was not really working.

[SGr33n]

The command worked, so... no zip file :P

In buddypress-function.php I added a whole new condition, since that I don't know how they will be merged. Then I added the new class email-field, like you made for the pass strength meter, both on registration and on settings page.

Then I also added the required attribute for required input fields on the registration page, this will automatically validate required fields.

[DJPaul]

I guess all these new checks are OK but if we don't enforce a minimum complexity, they sound kinda pointless.

[boonebgorges]

Replying to DJPaul:

I guess all these new checks are OK but if we don't enforce a minimum complexity, they sound kinda pointless.

You really think so? AFAIK, WP also doesn't enforce password complexity. The idea behind the client-side check is that it prods the user psychologically into using better passwords. I don't have any data to back it up, but I'd assume that this has a measurable effect on behavior.

[SGr33n]

I'm just realizing that the second part, the email address validation, could be useless Since that new HTML 5 input type=email should automatically check for a valid email address.

[DJPaul]

We're closing this ticket because it has not received any contribution or comments for at least two years. We have decided that it is better to close tickets that are good ideas, which have not gotten (or are unlikely to get) contributions, rather than keep things open indefinitely. This will help us share a more realistic roadmap for BuddyPress with you.

Everyone very much appreciates the time and effort that you spent sharing your idea with us. On behalf of the entire BuddyPress team, thank you.

If you feel strongly that this enhancement should still be added to BuddyPress, and you are able to contribute effort towards it, we encourage you to re-open the ticket, or start a discussion about it in our Slack channel. Please consider that time has proven that good ideas without contributions do not get built.

For more information, see ​https://bpdevel.wordpress.com/2018/01/21/our-awaiting-contributions-milestone-contains/
or find us on Slack, in the #buddypress channel: ​https://make.wordpress.org/chat/