Login Registration Form Using Spring Boot Angular

Posted on 4 weeks ago

20 min read

506

In this Article explains how to create the login and registration using Spring Boot and Angular and how to set the hash password for the Security .Spring boot as backend front end angular.

Lets follow the following step

First you have add the following dependencies while you configuring the spring initializr

spring jpa
spring web
spring security
mysql

Open the project on the pom.xml

<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>com.mysql</groupId>
			<artifactId>mysql-connector-j</artifactId>
			<scope>runtime</scope>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-security -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-security</artifactId>
			<version>2.7.8</version>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-data-jpa</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

<groupId>com.mysql</groupId>

<artifactId>mysql-connector-j</artifactId>

<scope>runtime</scope>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-security</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-test</artifactId>

</dependency>

you see the dependencies what you added.

Create the Mysql Database and Configure the database connection in the application.properties. this place where connect to Spring boot to Mysql.

application.properties

spring.application.name=Registation
server.port=8085

spring.jpa.hibernate.ddl-auto=create
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver


spring.datasource.url=jdbc:mysql://localhost:3306/dbkms?createDatabaseIfNotExist=true
spring.datasource.username=root
spring.datasource.password=root123

#jpa vendor adapter configuration
spring.jpa.database-platform=org.hibernate.dialect.MySQL57Dialect
spring.jpa.generate-ddl=true
spring.jpa.show-sql=true

spring.application.name=Registation

server.port=8085

spring.jpa.hibernate.ddl-auto=create

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

spring.datasource.url=jdbc:mysql://localhost:3306/dbkms?createDatabaseIfNotExist=true

spring.datasource.username=root

spring.datasource.password=root123

#jpa vendor adapter configuration

spring.jpa.database-platform=org.hibernate.dialect.MySQL57Dialect

spring.jpa.generate-ddl=true

spring.jpa.show-sql=true

Create the Entity Employee for represent the employee data in the database.

Employee

package com.example.Registation.Entity;


import javax.persistence.*;

@Entity
@Table(name="employee")
public class Employee {

    @Id
    @Column(name="employee_id", length = 45)
    @GeneratedValue(strategy = GenerationType.AUTO)
    private int employeeid;

    @Column(name="employee_name", length = 255)
    private String employeename;

    @Column(name="email", length = 255)
    private String email;

    @Column(name="password", length = 255)
    private String password;


    public Employee() {
    }

    public Employee(int employeeid, String employeename, String email, String password) {
        this.employeeid = employeeid;
        this.employeename = employeename;
        this.email = email;
        this.password = password;
    }

//create getters and setters

package com.example.Registation.Entity;

import javax.persistence.*;

@Entity

@Table(name="employee")

public class Employee {

@Id

@Column(name="employee_id", length = 45)

@GeneratedValue(strategy = GenerationType.AUTO)

private int employeeid;

@Column(name="employee_name", length = 255)

private String employeename;

@Column(name="email", length = 255)

private String email;

@Column(name="password", length = 255)

private String password;

public Employee() {

}

public Employee(int employeeid, String employeename, String email, String password) {

this.employeeid = employeeid;

this.employeename = employeename;

this.email = email;

this.password = password;

}

//create getters and setters

EmployeeDTO

public class EmployeeDTO {

    private int employeeid;
    private String employeename;
    private String email;
    private String password;

    public EmployeeDTO() {
    }

    public EmployeeDTO(int employeeid, String employeename, String email, String password) {
        this.employeeid = employeeid;
        this.employeename = employeename;
        this.email = email;
        this.password = password;
    }

} //create getters and setters

public class EmployeeDTO {

private int employeeid;

private String employeename;

private String email;

private String password;

public EmployeeDTO() {

}

public EmployeeDTO(int employeeid, String employeename, String email, String password) {

this.employeeid = employeeid;

this.employeename = employeename;

this.email = email;

this.password = password;

}

} //create getters and setters

LoginDTO

public class LoginDTO {
private String email;
private String password;

public LoginDTO() {
}

public LoginDTO(String email, String password) {
this.email = email;
this.password = password;
} //create getters and setters

public class LoginDTO {

private String email;

private String password;

public LoginDTO() {

}

public LoginDTO(String email, String password) {

this.email = email;

this.password = password;

} //create getters and setters

Create a EmployeeRepository interface which extends JpaRepository

EmployeeRepo

package com.example.Registation.Repo;

import com.example.Registation.Entity.Employee;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.config.EnableJpaRepositories;
import org.springframework.stereotype.Repository;

import java.util.Optional;

@EnableJpaRepositories
@Repository
public interface EmployeeRepo extends JpaRepository<Employee,Integer>
{
      Optional<Employee> findOneByEmailAndPassword(String email, String password);

    Employee findByEmail(String email);
}

package com.example.Registation.Repo;

import com.example.Registation.Entity.Employee;

import org.springframework.data.jpa.repository.JpaRepository;

import org.springframework.data.jpa.repository.config.EnableJpaRepositories;

import org.springframework.stereotype.Repository;

import java.util.Optional;

@EnableJpaRepositories

@Repository

public interface EmployeeRepo extends JpaRepository<Employee,Integer>

{

Optional<Employee> findOneByEmailAndPassword(String email, String password);

Employee findByEmail(String email);

}

Create the Employee Service

EmployeeService

package com.example.Registation.Service;

import com.example.Registation.Dto.EmployeeDTO;
import com.example.Registation.Dto.LoginDTO;
import com.example.Registation.payload.response.LoginMesage;

public interface EmployeeService {
    String addEmployee(EmployeeDTO employeeDTO);

    LoginMesage loginEmployee(LoginDTO loginDTO);

}

package com.example.Registation.Service;

import com.example.Registation.Dto.EmployeeDTO;

import com.example.Registation.Dto.LoginDTO;

import com.example.Registation.payload.response.LoginMesage;

public interface EmployeeService {

String addEmployee(EmployeeDTO employeeDTO);

LoginMesage loginEmployee(LoginDTO loginDTO);

}

Create the EmployeeImpl which implements from EmployeeService

EmployeeImpl

package com.example.Registation.Service.impl;

import com.example.Registation.Dto.EmployeeDTO;
import com.example.Registation.Dto.LoginDTO;
import com.example.Registation.Entity.Employee;
import com.example.Registation.Repo.EmployeeRepo;
import com.example.Registation.Service.EmployeeService;
import com.example.Registation.payload.response.LoginMesage;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.Optional;

@Service

public class EmployeeIMPL implements EmployeeService {

    @Autowired
    private EmployeeRepo employeeRepo;

    @Autowired
    private PasswordEncoder passwordEncoder;


    @Override
    public String addEmployee(EmployeeDTO employeeDTO) {

        Employee employee = new Employee(

                employeeDTO.getEmployeeid(),
                employeeDTO.getEmployeename(),
                employeeDTO.getEmail(),

               this.passwordEncoder.encode(employeeDTO.getPassword())
        );

        employeeRepo.save(employee);

        return employee.getEmployeename();
    }
    EmployeeDTO employeeDTO;

    @Override
    public LoginMesage  loginEmployee(LoginDTO loginDTO) {
        String msg = "";
        Employee employee1 = employeeRepo.findByEmail(loginDTO.getEmail());
        if (employee1 != null) {
            String password = loginDTO.getPassword();
            String encodedPassword = employee1.getPassword();
            Boolean isPwdRight = passwordEncoder.matches(password, encodedPassword);
            if (isPwdRight) {
                Optional<Employee> employee = employeeRepo.findOneByEmailAndPassword(loginDTO.getEmail(), encodedPassword);
                if (employee.isPresent()) {
                    return new LoginMesage("Login Success", true);
                } else {
                    return new LoginMesage("Login Failed", false);
                }
            } else {

                return new LoginMesage("password Not Match", false);
            }
        }else {
            return new LoginMesage("Email not exits", false);
        }


    }

}

package com.example.Registation.Service.impl;

import com.example.Registation.Dto.EmployeeDTO;

import com.example.Registation.Dto.LoginDTO;

import com.example.Registation.Entity.Employee;

import com.example.Registation.Repo.EmployeeRepo;

import com.example.Registation.Service.EmployeeService;

import com.example.Registation.payload.response.LoginMesage;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;

import org.springframework.security.crypto.password.PasswordEncoder;

import org.springframework.stereotype.Service;

import javax.annotation.Resource;

import java.util.Optional;

@Service

public class EmployeeIMPL implements EmployeeService {

@Autowired

private EmployeeRepo employeeRepo;

@Autowired

private PasswordEncoder passwordEncoder;

@Override

public String addEmployee(EmployeeDTO employeeDTO) {

Employee employee = new Employee(

employeeDTO.getEmployeeid(),

employeeDTO.getEmployeename(),

employeeDTO.getEmail(),

this.passwordEncoder.encode(employeeDTO.getPassword())

);

employeeRepo.save(employee);

return employee.getEmployeename();

}

EmployeeDTO employeeDTO;

@Override

public LoginMesage loginEmployee(LoginDTO loginDTO) {

String msg = "";

Employee employee1 = employeeRepo.findByEmail(loginDTO.getEmail());

if (employee1 != null) {

String password = loginDTO.getPassword();

String encodedPassword = employee1.getPassword();

Boolean isPwdRight = passwordEncoder.matches(password, encodedPassword);

if (isPwdRight) {

Optional<Employee> employee = employeeRepo.findOneByEmailAndPassword(loginDTO.getEmail(), encodedPassword);

if (employee.isPresent()) {

return new LoginMesage("Login Success", true);

} else {

return new LoginMesage("Login Failed", false);

}

} else {

return new LoginMesage("password Not Match", false);

}

}else {

return new LoginMesage("Email not exits", false);

}

Create a EmployeeController to manage the Restful api requests related to employee login and registration.

package com.example.Registation.Dto;

public class EmployeeDTO {

    private int employeeid;
    private String employeename;
    private String email;
    private String password;

    public EmployeeDTO() {
    }

    public EmployeeDTO(int employeeid, String employeename, String email, String password) {
        this.employeeid = employeeid;
        this.employeename = employeename;
        this.email = email;
        this.password = password;
    }

    public int getEmployeeid() {
        return employeeid;
    }

    public void setEmployeeid(int employeeid) {
        this.employeeid = employeeid;
    }

    public String getEmployeename() {
        return employeename;
    }

    public void setEmployeename(String employeename) {
        this.employeename = employeename;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "EmployeeDTO{" +
                "employeeid=" + employeeid +
                ", employeename='" + employeename + '\'' +
                ", email='" + email + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

package com.example.Registation.Dto;

public class EmployeeDTO {

private int employeeid;

private String employeename;

private String email;

private String password;

public EmployeeDTO() {

}

public EmployeeDTO(int employeeid, String employeename, String email, String password) {

this.employeeid = employeeid;

this.employeename = employeename;

this.email = email;

this.password = password;

}

public int getEmployeeid() {

return employeeid;

}

public void setEmployeeid(int employeeid) {

this.employeeid = employeeid;

}

public String getEmployeename() {

return employeename;

}

public void setEmployeename(String employeename) {

this.employeename = employeename;

}

public String getEmail() {

return email;

}

public void setEmail(String email) {

this.email = email;

}

public String getPassword() {

return password;

}

public void setPassword(String password) {

this.password = password;

}

@Override

public String toString() {

return "EmployeeDTO{" +

"employeeid=" + employeeid +

", employeename='" + employeename + '\'' +

", email='" + email + '\'' +

", password='" + password + '\'' +

'}';

}

Security measures need to implemented

Create a file SecurityConfig for managing the Security password

package com.example.Registation.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;

@Configuration
public class SecurityConfig {
    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
}

package com.example.Registation.config;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.Configuration;

import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;

import org.springframework.security.crypto.password.PasswordEncoder;

@Configuration

public class SecurityConfig {

@Bean

public PasswordEncoder passwordEncoder() {

return new BCryptPasswordEncoder();

}

Create LoginResponse Page for displaying Messages while testing

LoginResponse

public class LoginMesage {
    String message;
    Boolean status;

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public Boolean getStatus() {
        return status;
    }

    public void setStatus(Boolean status) {
        this.status = status;
    }

    public LoginMesage(String message, Boolean status) {
        this.message = message;
        this.status = status;
    }
}

public class LoginMesage {

String message;

Boolean status;

public String getMessage() {

return message;

}

public void setMessage(String message) {

this.message = message;

}

public Boolean getStatus() {

return status;

}

public void setStatus(Boolean status) {

this.status = status;

}

public LoginMesage(String message, Boolean status) {

this.message = message;

this.status = status;

}

Angular

Angular is a front-end application we have already created the folder front end inside the folder open the command prompt and type the commands.

Installing Angular CLI

npm install -g @angular/cli

1	npm install -g @angular/cli

After that create the new Project of Angular running by the following command

ng new front-endapp-project

1	ng new front-endapp-project

After complete the installation then run the project using following command.

ng serve

it will generate the url link to run the angular application.paste the url in to the browser

Now you see the Angular Welcome Page.

After that open the Angular project into VS code editor.

now you can see the following file structure

then you have create the following components by typing the command

ng g c login

ng g c register

ng g c home

ng g c login

ng g c register

ng g c home

After components has been created you have to visit the bootstrap site and copy the css
file and paste inside the index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>FrondEnd</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
  <app-root></app-root>
</body>
</html>

<!doctype html>

<head>

<title>FrondEnd</title>

</head>

<body>

<app-root></app-root>

</body>

</html>

After that add module inside app.module.ts
inside the imports section add the FormsModule and HttpClientModule

if the path is not get automatically copy and paste it

import { HttpClientModule } from ‘@angular/common/http’;

imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ]

imports: [

BrowserModule,

AppRoutingModule,

FormsModule,

HttpClientModule

]

add these module into the app.module.ts file then only we will manage the forms and Http requests

register.component.html

<div class="container mt-4" >
    <div class="card">
        <h1>Employee Registation</h1>
<form>
    <div class="form-group">
      <label>Name</label>
      <input type="text" [(ngModel)]="employeename" [ngModelOptions]="{standalone: true}"  class="form-control" id="name" class="form-control" placeholder="Enter Name">
    </div>

    <div class="form-group">
        <label>Email</label>
        <input type="email" [(ngModel)]="email" [ngModelOptions]="{standalone: true}" class="form-control" id="email"  placeholder="Enter Email">
      </div>

      <div class="form-group">
        <label>Paaword</label>
        <input type="password" [(ngModel)]="password" [ngModelOptions]="{standalone: true}" class="form-control" id="password" class="form-control" placeholder="Enter Password">
      </div>

     <button type="submit" class="btn btn-primary" (click)="save()">Register</button>


  </form>
</div>

</div>

<h1>Employee Registation</h1>

<form>

</div>

<label>Email</label>

</div>

<label>Paaword</label>

</div>

<button type="submit" class="btn btn-primary" (click)="save()">Register</button>

</form>

</div>

register.component.ts

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent {
  employeename: string ="";
  email: string ="";
  password: string ="";


  constructor(private http: HttpClient )
  {

  }
  save()
  {
  
    let bodyData = {
      "employeename" : this.employeename,
      "email" : this.email,
      "password" : this.password
    };
    this.http.post("http://localhost:8085/api/v1/employee/save",bodyData,{responseType: 'text'}).subscribe((resultData: any)=>
    {
        console.log(resultData);
        alert("Employee Registered Successfully");

    });
  }

}

import { HttpClient } from '@angular/common/http';

import { Component } from '@angular/core';

@Component({

selector: 'app-register',

templateUrl: './register.component.html',

styleUrls: ['./register.component.scss']

})

export class RegisterComponent {

employeename: string ="";

email: string ="";

password: string ="";

constructor(private http: HttpClient )

{

}

save()

{

let bodyData = {

"employeename" : this.employeename,

"email" : this.email,

"password" : this.password

};

this.http.post("http://localhost:8085/api/v1/employee/save",bodyData,{responseType: 'text'}).subscribe((resultData: any)=>

{

console.log(resultData);

alert("Employee Registered Successfully");

});

}

login.component.html

<div class="container mt-4" >
    <div class="card">
        <h1>Employee Login</h1>
<form>

    <div class="form-group">
        <label>Email</label>
        <input type="email" [(ngModel)]="email" [ngModelOptions]="{standalone: true}" class="form-control" id="email"  placeholder="Enter Email">
      </div>

      <div class="form-group">
        <label>Paaword</label>
        <input type="password" [(ngModel)]="password" [ngModelOptions]="{standalone: true}" class="form-control" id="password" class="form-control" placeholder="Enter Password">
      </div>

     <button type="submit" class="btn btn-primary" (click)="Login()">Login</button>


  </form>
</div>

</div>

<h1>Employee Login</h1>

<form>

<label>Email</label>

</div>

<label>Paaword</label>

</div>

<button type="submit" class="btn btn-primary" (click)="Login()">Login</button>

</form>

</div>

login.component.ts

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent {
 

  email: string ="";
  password: string ="";


  constructor(private router: Router,private http: HttpClient) {}
 


  Login() {
    console.log(this.email);
    console.log(this.password);
 
    let bodyData = {
      email: this.email,
      password: this.password,
    };
 
        this.http.post("http://localhost:8085/api/v1/employee/login", bodyData).subscribe(  (resultData: any) => {
        console.log(resultData);
 
        if (resultData.message == "Email not exits")
        {
      
          alert("Email not exits");
    
 
        }
        else if(resultData.message == "Login Success")
    
         {
          this.router.navigateByUrl('/home');
        }
        else
        {
          alert("Incorrect Email and Password not match");
        }

      });
    }

}

import { HttpClient } from '@angular/common/http';

import { Component } from '@angular/core';

import { Router } from '@angular/router';

@Component({

selector: 'app-login',

templateUrl: './login.component.html',

styleUrls: ['./login.component.scss']

})

export class LoginComponent {

email: string ="";

password: string ="";

constructor(private router: Router,private http: HttpClient) {}

console.log(this.email);

console.log(this.password);

let bodyData = {

email: this.email,

password: this.password,

};

this.http.post("http://localhost:8085/api/v1/employee/login", bodyData).subscribe( (resultData: any) => {

console.log(resultData);

if (resultData.message == "Email not exits")

{

alert("Email not exits");

}

else if(resultData.message == "Login Success")

{

this.router.navigateByUrl('/home');

}

else

{

alert("Incorrect Email and Password not match");

}

});

}

app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: LoginComponent
  },
  
  {
  path: 'home',
  component: HomeComponent,
  
  },
  {
  
  path: 'register',
  component: RegisterComponent,
  }

];

const routes: Routes = [

{

path: '',

component: LoginComponent

{

path: 'home',

component: HomeComponent,

{

path: 'register',

component: RegisterComponent,

}

];

Node js React Mongodb Search Functionality

Node js Angular Mongodb Search Functionality

How to Search Records Node js Express Mongodb

Node js Angular Mongodb Search Functionality

Registration Form using Node js Angular Mongodb

Login Registration Form Using Node js Angular, Express js,MongoDB

Leave a Reply Cancel reply

Check Also

Node js React Mongodb Search Functionality

Recent Posts

Lets follow the following step

First you have add the following dependencies while you configuring the spring initializr

application.properties

Employee

EmployeeDTO

LoginDTO

EmployeeRepo

EmployeeService

EmployeeImpl

LoginResponse

Angular

register.component.html

register.component.ts

login.component.html

login.component.ts

app-routing.module.ts

i have attached the video link below. which will do this tutorials step by step.

Leave a Reply Cancel reply

Check Also

Recent Posts