54.Adding signup feature

Features

Let's implement user sign-up functionality to our application. With this feature, new users can sign-up via UI and they will be able to handle their tasks via Dashboard.

These are the goals we are trying to achieve in this chapter:

We need an API for creating users with details such as name, email, and password.
We need a new page showing a form having fields: name, email, password, and password confirmation. The form should call the user creation API with the input data upon submission.

Users should be able to see a toast message when the form submission is successful.

Technical design

To implement user sign-up, we will have to do the following:

From the create action in UsersController, we will create an instance of User from the request data and save it to the database.
If saving is successful, we will respond with JSON data containing the key called notice. Since we had already implemented the Axios interceptors, it will take care of showing the contents from the notice key in response as a Toastr notification.
We will create a new API connector, auth.js for calling sign-up and other authentication-related APIs.
We will create a new frontend page Signup for taking user credentials and sending them via API. We will use the /signup route to display that page.
To make things more modular, we can accept these credentials from a separate component called Signup inside Form folder.

Adding create action

Open app/controllers/users_controller.rb file and add the following content:

Now we need to update routes.rb:

Moving response messages to i18n en.locales

Let's move our response message to locales/en.yml but this time with even more modularization. Since, the response message for User and Task are same, we can combine them using variable interpolation.

To create abstraction, the i18n provides a feature called variable interpolation that allows you to use variables in translation definitions and pass the values for these variables to the translation method.

Let's modify our response messages in en.yml to use variable interpolation:

Now, successfully_created, in en.yml, will expect a variable named, entity. So let's go through our JSON responses and pass that variable with appropriate entity name, wherever we are using successfully_created key.

In users_controller.rb:

And in tasks_controller.rb:

And hence, by doing this we don't have to write two separate messages.

API connector for authentication

We can create a new API connector, auth.js, which exports all authentication related API calls as functions.

Create a the file app/javascript/src/apis/auth.js and add the following lines to it:

We need to create a Signup component to allow users to signup.

We will be keeping all of our auth based components inside Authentication folder. To do so, run the following command:

Inside the directory, create a new component by running the command:

As discussed in the technical design, we will be abstracting signup form logic to a different component called Signup inside Form folder. To create the component that contains the form logic, run the following command:

In Form/Signup.jsx, paste the following contents:

Now open Signup.jsx and add the following contents.

We have created a Signup component and we have abstracted form logic to Signup.jsx and form components to Form/Signup.jsx.

Now, we will be adding a route inside of App.jsx that renders our newly created Signup component.

To do so, open App.jsx and add the highlighted lines:

Now let's run Rails server and visit http://localhost:3000/signup and input the details of the new user.

After filling in the details click on submit button and you will be notified whether the request was successful or not by the previously added Toastr component.

In the following chapters we will implement the feature to redirect the user to login page on successful registration.

Now, let's commit the changes:

Previous Next