In this video, I will show you how to install and enable the LoginToboggan module. We'll customize Drupal's standard log in system to display the "Login" and "Create new account" links on the same page. And we'll allow users to choose to log in using either their username or their e-mail address.

Drupal's Default Login System

Before we modify Drupal's login system with LoginToboggan, let's make sure we understand how Drupal works out of the box.

  • As an anonymous user, go to the home page

Here we'll see the login block, by default. You can enter your username and password to login. Or, you can click one of the links: "Create new account" or "Request new password". Clicking either of these will take us to a new page.

  • Click "Create new account"

You'll see that we are taken to the page "/user/register" and we have two other tabs for "Log in" and "Request new password". Clicking either of these will take us to entirely new pages as well ("/user" and "/user/password" respectively). We can configure LoginToboggan to present the "Log in" and "Create new account" options as tabs on a single page, that don't need to refresh the entire page when clicked.

Finally, you'll notice that when logging in, we're asked for a username and password. To make it easier for the visitors to login, we can configure LoginToboggan to allow either a username or and email address in the first field.

Let's go ahead and install the LoginToboggan module, and configure those two options.

Install modules

Enable modules

  • Go to "Modules" (admin/modules) and enable:
    • LoginToBoggan

  • (Save configuration)

  • Go to "Configuration => System => LoginToboggan" (admin/config/system/logintoboggan)

Both options I've mentioned so far are in the "Log in" section.

Log in

  • Allow users to login using their e-mail address
    • [x] Enabled (This will allow the user to log in using either their username or their e-mail address.)
  • [x] Present a unified login/registration page (This will give us one page with tabs for login and registration.)
  • (Save configuration)

On the homepage, the "User login" block now asks for "Username or e-mail". And when we click the "Create new account" link, we'll see the unified log in page and can switch between the two options without having to reload the page.

  • Select "I have an account" to log in
  • Username or e-mail: (enter your email address)
  • Password: (enter your password)
  • (Log in)

I have successfully logged in using my e-mail account.

In the next video, We'll add additional validation for the user's email addresss to prevent them from mistyping it, and we'll allow users to create their passwords during the registration process.