How to Make a Angular Login and Signup using JSON-Server
Hello viewers, welcome to m-softtech. today I will teach you how to make angular login and signup using JSON Server. first thing we need know what is JSON server. JSON Server is an NPM package that allows you to create REST JSON web service, backed by a simple database.
Steps to follow.
Step-1
We create a new project
Ng new project name
Step-2
Create component according to your need I will three component one is dashboard component and second one is login component and third one is signup component
Ng generate component component Name
Step-3
Install JSON server
npm install Json-server
Create a db.json file with some data
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
Start JSON Server
json-server --watch db.json
I will edit and change db.json file
{
"signup": [
{
"fname": "Manoj",
"lname": "Adhikari",
"email": "manojadhikari@gmail.com",
"phone": "234324234",
"password": "asdasdf",
"id": 1
},
{
"fname": "shivam",
"lname": "adhikari",
"email": "shivamadhikari@gmail.com",
"phone": "32432",
"password": "asdf",
"id": 2
}
]
}Then I will make a login form in our login component inside.
Login.component.html
<div class="container">
<form [formGroup]="login" (ngSubmit)="logindata(login)" class="form-box">
<h3>Login</h3>
<div class="form-group">
<label>User Name</label>
<input type="text" formControlName="fname" class="form-control mb-3 mt-3" placeholder="Enter Email"/>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" formControlName="password" class="form-control mb-3 mt-3" placeholder="Enter Password"/>
</div>
<span>Create New Account </span>
<a routerLink="singup" (click)="sbtn1()">Singup</a>
<br/>
<button type="submit" class="btn btn-success">Login</button>
</form>
</div>
<router-outlet></router-outlet>
Login.component.ts
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
declare var $:any;
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
login:FormGroup|any;
constructor(private _http:HttpClient, private _route:Router) { }
ngOnInit(): void {
this.login = new FormGroup({
'fname': new FormControl(),
'password': new FormControl()
})
}
logindata(login:FormGroup){
// console.log(this.login.value);
this._http.get<any>("http://localhost:3000/signup")
.subscribe(res=>{
const user = res.find((a:any)=>{
return a.fname === this.login.value.fname && a.password === this.login.value.password
});
if(user){
alert('you are successfully login');
this.login.reset();
$('.form-box').css('display','none');
this._route.navigate(['dashboard']);
}else{
alert('User Not Found');
this._route.navigate(['login']);
}
}, err=>{
alert('Something was wrong');
})
}
sbtn1(){
$('.form-box').css('display','none');
$('.form-box1').css('display','block');
}
}
This is my JSON SERVER Api URL
http://localhost:3000/singup
How to Use Subject and Behavior Subject in Angular-13
Then I will create signup form
Sinup.component.html
<div class="container">
<form [formGroup]="singup" (ngSubmit)="singupdata(singup)" class="form-box1">
<h3>Signup </h3>
<div class="form-group">
<label>First Name</label>
<input type="text" formControlName="fname" class="form-control mb-3 mt-3" placeholder="Enter First Name"/>
</div>
<div class="form-group">
<label>Last name</label>
<input type="text" formControlName="lname" class="form-control mb-3 mt-3" placeholder="Enter Last Name"/>
</div>
<div class="form-group">
<label>Email</label>
<input type="eamil" formControlName="email" class="form-control mb-3 mt-3" placeholder="Enter Email"/>
</div>
<div class="form-group">
<label>Phone No</label>
<input type="text" formControlName="phone" class="form-control mb-3 mt-3" placeholder="Enter Phone Number"/>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" formControlName="password" class="form-control mb-3 mt-3" placeholder="Enter Password"/>
</div>
<span>You Have Already Account </span>
<a routerLink="login" (click)="sbtn()">singin</a>
<br/>
<button type="submit" class="btn btn-success">signup</button>
</form>
</div>
<router-outlet></router-outlet>signup.component.ts
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
declare var $:any;
@Component({
selector: 'app-singup',
templateUrl: './singup.component.html',
styleUrls: ['./singup.component.css']
})
export class SingupComponent implements OnInit {
constructor( private _route:Router, private _http:HttpClient) { }
singup:FormGroup|any;
signuser:any;
ngOnInit(): void {
this.singup = new FormGroup({
'fname': new FormControl(),
'lname':new FormControl(),
'email':new FormControl(),
'phone':new FormControl(),
'password': new FormControl()
})
}
singupdata(singup:FormGroup){
//console.log(this.singup.value);
this.signuser = this.singup.value.fname
this._http.post<any>("http://localhost:3000/signup", this.singup.value)
.subscribe(res=>{
alert('data added successfully');
this.singup.reset();
this._route.navigate(['login']);
}, err=>{
alert('Somthing went wrong');
})
}
sbtn(){
this._route.navigate(['login']);
//$('.form-box1').css('z-index', '99');
$('.form-box').css('display','block');
$('.form-box1').css('display','none');
}
}
How to Make Reusable Components in Angular | Reusable Components
when we submit my signup data then the data store in our JSON server API and redirect user in login form. then user fill login credential then we matched this login credential to our signup credential. if they are matched then we show dashboard page otherwise we redirect login page.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { LoginComponent } from './login/login.component';
import { SingupComponent } from './singup/singup.component';
const routes: Routes = [
{redirectTo:'', path:'login', pathMatch:'full'},
{path:'login',component:LoginComponent},
{path:'singup',component:SingupComponent},
{path:'dashboard',component:DashboardComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
If you have any problem to understand this code you can watch also video tutorial
