Stutern Housemanship — Handout Documentation by Abodunrin Victoria

Building the Sign up / Create Account Page

A signup page is one of the most common forms on websites . The use of Signup(create account) and Sign in forms are common on websites to collect the details of visitors. These days, every site uses registration and login forms to maintain authentication.

With a Signup form, users can create an account and can enjoy private space on applications, whereas a Login form validates your presence in the system while presenting you with a variety of alternatives to see and process.

In this article, we’ll learn how to code the signup page that has been designed on figma.com.

Setup

This project being a team work, you need to first synchronize to have the last work pushed on the repo on your local environment. Then, install all packages by running the command below in your terminal.

npm i or npm install

Building the form

Step1 — Create the Sign up component

Navigate to the Signup.js file which has been created, this is where we want to create our signup page. Forms are often defined within the <form> tag in both traditional HTML code and in ReactJS. This form component, like any other HTML form, includes the labels, input fields(First name, Last name, Email, Mobile, Password, Re-enter password), submit button (continue button)

Furthermore, all this form attributes also have properties like “htmlfor”, “className (this initially entails our tailwind css styling” , “type (text, email, password”), etc.

Step2 — In the Signup.js

I Created the sign up form which entails the user inputs for Last name, first name, email, mobile, password , confirm password, re-enter password , the continue button and the link to Login.

Step3 : Stying with tailwind css.

I then proceed by styling the page with tailwind css i.e inserting the styling properties in the “ className ”.

A snippet on how to create the signupform page

Step 4 : Creating the password visibility eye icon( show/hide)

The basic idea is to change the input tag’s type attribute to text from password and vice versa on clicking the eye icon button.

import React, { useState } from "react";
// import the svg images from the assests folder (the eye icons)
import showPwd from "../assets/svg/show-password.svg";
import hidePwd from "../assets/svg/hide-password.svg";
// Initialize a boolean state
const [pwd, setPwd] = useState("");
const [pwdConfirm, setPwdconfirm] = useState("");
const [isRevealPwd, setIsRevealPwd] = useState(false);
const [isRevealConfirmPwd, setIsRevealConfirmPwd] = useState(false);

A snippet on how to create the password visibilty functionality

Step 5: Run the command below in your terminal and test the page on your localserver

npm start

Signup/create account page