Remove username from registration

Question

I want to keep the registration process as simple as possible for my users, like a lot of modern websites do. I want there to be only 3 fields to fill out when creating new accounts: Email, Password, Repeat password.

It seems to me there is no option to remove the mandatory username field from the registration form though, is there any workaround?

Answer 1

You can achieve this behavior writing a User plugin for joomla and handling the right Events on your needs.

On the event BeforeSave, copy the value of the email into the username

function onUserBeforeSave($oldUser, $isnew, $newUser){
 //email2 is the "repeated email" field
 $newUser["email2"] = $newUser['email1'];
 $oldUser["email2"] = $newUser['email1'];
 //Fill username with email
 $newUser["username"] = $newUser['email1'];
 $oldUser["username"] = $newUser['email1'];
}

On the event that create the subscription form, unset the fields you don't want to show:

function onContentPrepareForm($form, $data){
 //fields to remove (example)
 $form->removeField('email2');
 $form->removeField('spacer');
}

This is just an example, here some Joomla reference to the Events: https://docs.joomla.org/Plugin/Events/User

If in doubt, take a look at the default joomla user plugins

Answer 2

I went through the trouble to do this once, and learned that it wasn't worth it. Not that it was too hard - I did it, but it required constant maintenance.

First, when a user registers, you must alter the login form to remove the username field, and when the registration form is submitted, you must INSERT a username, which where it starts getting difficult. The way I did it, was to give it a temporary name and then change the name when the user ID is known.

Then you must override the output of your login modules, the output of the reset password form, the login view of the component, the user account default and edit views....

And when Joomla releases an update that changes any of these things - you get to rewrite the overrides.

Maybe instead, you might consider giving them a "generate username" option....make it fun, or base it on their name, or whatever.

It isn't worth it.

Answer 3

You can add JavaScript code to the registration page to

1. hide the "Username" input element and
2. assign the entered "email address" to "username"

If you don't have an override to the registration script, you need to create one by copying the original script to the override folder. For Joomla 4 on MS Windows:

copy <proj_folder>\components\com_users\tmpl\registration\default.php <proj_folder>\<Your_Template_Name>\html\com_users\registration\default.php

Then, you need to apply the following changes to the new script (above).

<?php
   defined('_JEXEC') or die;
   // more statements...
?>

<div class="com-users-registration registration">
    <!-- more statements --> 
</div>

<!-- Add the following JavaScript code to the end of the script -->
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
   // Find the email and username input fields
    var emailField = document.getElementById('jform_email1');
    var usernameField = document.getElementById('jform_username');
    var usernameLabel = document.getElementById('jform_username-lbl');

    // Uncomment the following to make sure the correct elements are selected. If any of the following is null, check the IDs used above.
   // alert("all of the following should have values (NOT null)"
    //  + "\n - usernameField: " + usernameField
    //  + "\n - emailField: " + emailField
    //  + "\n - usernameLabel: " + usernameLabel);

    // Hide the username "input elemnet" and its "label"
    usernameField.parentElement.style.display = 'none';
    usernameLabel.parentElement.style.display = 'none';

   // Make sure the emailField exists
    if (emailField) {
        // Assign the value of the email field to the username field
        emailField.addEventListener('blur', function () {
            // Trim spaces
            var emailValue = emailField.value.trim();

            // Assign the email as the username
            usernameField.value = emailValue;
        });
    }
});
</script>