Code snippet for
Signup Form

Simple signup form in HTML5 , styled with CSS3 , using express.js framework of node.js for backend and MongoDb database for Storage.



Contents

  1. Login / Signup form using HTML5
  2. Styling the html with CSS3 and bootstrap
  3. Creating a nodejs app in express.js framework for the backend
  4. Connecting the nodejs app to mongodb
  5. Perform HMAC operation on password using crypto module of node.js for storing password securely.
  6. Celebrating the success with screenshots from working app

Directory Structure

Frontend using static html

  1. index.html :
    										
    <html>
    	<head>
    		<title> Signup Form | nodejsera </title>
    		
    		<!-- Including bootstrap v3.3.7 -->
    		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    		
    		<!-- Including Custom css -->
    		<link rel="stylesheet" type="text/css" href="style.css">
    		
    	</head>
    	<body>
    	
    		<br>
    		<br>
    		<br>
    		<div class="container" >
    			<div class="row">
    				<div class="col-md-3">
    					<!-- Blank DIV -->
    				</div>
    				
    				<div class="col-md-6 main">
    					<!-- Form Tag starts here -->
    					<!-- Action attribute is the route on backend. Method is POST -->
    					<form action="/sign_up" method="post">
    					
    						<h1> Signup form </h1>
    							
    						<input class="box" type="text" name="name" id="name" placeholder="Enter your Name"  required /><br>
    							
    						<input class="box" type="email" name="email" id="email" placeholder="Enter your E-Mail " required /><br>
    							
    						<input class="box" type="password" name="password" id="password"  placeholder="Enter your Password " required/><br>
    							
    						<input class="box" type="text" name="phone" id="phone"  placeholder="Enter your Phone Number " required/><br>
    						<br>
    						<input type="submit" id="submitDetails"  name="submitDetails" value="Submit Your Details" /><br>
    					
    					</form>
    					
    				</div>
    				
    				
    				<div class="col-md-3">
    					<!-- Blank DIV -->
    				</div>
    				
    			</div>
    		</div>
    	</body>
    </html>										
    										
    									

  2. success.html :
    									
    <html>
    	<head>
    		<title> Signup Form | nodejsera </title>
    		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    		
    		<link rel="stylesheet" type="text/css" href="style.css">
    	</head>
    	<body>
    		<br>
    				<br>
    				<br>
    		<div class="container" >
    			<div class="row">
    				<div class="col-md-3">
    				</div>
    				
    				<div class="col-md-6 main">
    					
    					<h1> Signup Successful <br> Congratulations!!</h1>
    					
    				</div>
    				
    				
    				<div class="col-md-3">
    				</div>
    				
    			</div>
    		</div>
    	</body>
    </html>
    
    									
    								

Style.css


								
@import url('https://fonts.googleapis.com/css?family=Josefin+Slab');

.main{
	padding:20px;
	font-family: 'Josefin Slab', serif;
	border : 2px solid #50d8a4;
	border-radius: 15px;
	
}
.main h1{
	font-size: 50px;
	text-align:center;
	font-family: 'Josefin Slab', serif;
	color: #549978;
}
input{
	font-family: 'Josefin Slab', serif;
    width: 100%;
	font-size: 30px;
    padding: 12px 20px;
    margin: 8px 0;
    border: none;
    border-bottom: 2px solid #50d8a4;
}
input[type=submit] {
	font-family: 'Josefin Slab', serif;
	width: 100%;
    background-color: #549978;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
	border-radius: 15px;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

input:hover {
	font-family: 'Josefin Slab', serif;
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
	border: none;
    border-bottom: 2px solid #549978;
}

input[type=submit]:hover {
	font-family: 'Josefin Slab', serif;
	width: 100%;
    background-color: #549978;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
	border-radius: 15px;
}
								
							

server.js


													
var express = require('express');
var path = require('path'); 
var mongo = require('mongodb');
var bodyParser = require('body-parser');
var crypto = require('crypto');
var app = express();
//enter the name of the database in the end 
var new_db = "mongodb://localhost:27017/database_name";
app.get('/',function(req,res){
	res.set({
		'Access-Control-Allow-Origin' : '*'
	});
	return res.redirect('/public/index.html');
}).listen(3000);

console.log("Server listening at : 3000");
app.use('/public', express.static(__dirname + '/public'));
app.use( bodyParser.json() );
app.use(bodyParser.urlencoded({ // to support URL-encoded bodies
	extended: true
}));
var getHash = ( pass , phone ) => {
				
				var hmac = crypto.createHmac('sha512', phone);
				
				//passing the data to be hashed
				data = hmac.update(pass);
				//Creating the hmac in the required format
				gen_hmac= data.digest('hex');
				//Printing the output on the console
				console.log("hmac : " + gen_hmac);
				return gen_hmac;
}

// Sign-up function starts here. . .
app.post('/sign_up' ,function(req,res){
	var name = req.body.name;
	var email= req.body.email;
	var pass = req.body.password;
		var phone = req.body.phone;
	var password = getHash( pass , phone ); 				

	
	var data = {
		"name":name,
		"email":email,
		"password": password, 
		"phone" : phone
	}
	
	mongo.connect(new_db , function(error , db){
		if (error){
			throw error;
		}
		console.log("connected to database successfully");
		//CREATING A COLLECTION IN MONGODB USING NODE.JS
		db.collection("details").insertOne(data, (err , collection) => {
			if(err) throw err;
			console.log("Record inserted successfully");
			console.log(collection);
		});
	});
	
	console.log("DATA is " + JSON.stringify(data) );
	res.set({
		'Access-Control-Allow-Origin' : '*'
	});
	return res.redirect('/public/success.html');  

});
													
												

Run

Run : We can run this code

  • Start the mongodb.To start MongoDB, run the command specific to your system configurations.
  • Now run the server.js using the following command :
    													
    > node server.js
    													
    												

Screenshots

  1. index.html
    URL is : http://127.0.0.1:3000/public/index.html

    Signup using html

  2. Success.html :
    URL is : http://127.0.0.1:3000/public/success.html

    Signup success using html

  3. SnapShot of the backend up and running :


    signup server

Summary

We started with creating a simple static form with HTML5 and then styling that html form using css. After that we created our backend by using the express.js framework of node. Lastly, we stored all the data in the nosql database MongoDB.