Notes

ts-------------

import { Component, OnInit } from '@angular/core';
import {
AbstractControl,
FormBuilder,
FormGroup,
Validators,
} from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from 'src/app/services/auth.service';
import { response } from 'src/app/shared/idata';

@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
})
export class LoginComponent implements OnInit {
title = 'loginForm';
'loginForm': FormGroup;
isSubmitted = false;

frm: any;

public response: any;
public reg: any;

constructor(
private formBuilder: FormBuilder,
public service: AuthService,
public route: Router
) {}

ngOnInit(): void {
this.loginForm = this.formBuilder.group({
username: ['', Validators.required],
password: [
'',
[
Validators.required,
Validators.pattern(
'^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,12}$'
),
],
],
});

this.service.getData().subscribe((data) => {
this.response = data;
});
}

get formControls() {
return this.loginForm.controls;
}

login() {
console.log(this.loginForm.value);
this.isSubmitted = true;
if (this.loginForm.invalid) {
return;
}
}

temp = new response();

public getLogin() {
this.service.postLogin(this.loginForm.value).subscribe((data) => {
console.log(data);
this.temp = data;
if (this.temp.message == 'success') {
sessionStorage.setItem('userId', this.temp.id);

console.log(this.temp.id);

this.route.navigate(['/customer-home']);
}
});
}

onReset(): void {
this.isSubmitted = false;
this.loginForm.reset();
}
}


html-----------------

<div class="header">
<div class="top">
<button routerLink="/home" class="btn btn-light">Back</button>
</div>
</div>

<div class="row">
<div class="col-sm-6">
<img src="../../../assets/images/register.jpg" width="100%" alt="img" />
<h1>New User?</h1>
<div class="button">
<button
class="btn btn-primary"
routerLink="/register"
style="align-items: center"
>
Register now
</button>
</div>
</div>
<!-- LOGIN -->
<div class="col-sm-6">
<div class="login">
<h2 class="login-header">LOG IN</h2>
<form
[formGroup]="loginForm"
class="login-container"
(ngSubmit)="login()"
>
<div class="form-group mb-3">
<label for="username">Username</label>
<p
[ngClass]="{
'has-error': isSubmitted && formControls['username'].errors
}"
>
<input
type="username"
placeholder="Username"
class="form-control"
formControlName="username"
/>
</p>
<div
*ngIf="isSubmitted && formControls['username'].errors"
class="help-block"
>
<div *ngIf="formControls['username'].errors['required']">
Username is required
</div>
</div>
</div>

<div class="form-group mb-3">
<label for="password">Password</label>
<p
[ngClass]="{
'has-error': isSubmitted && formControls['password'].errors
}"
>
<input
type="password"
placeholder="Password"
class="form-control"
formControlName="password"
/>
</p>

<div
*ngIf="isSubmitted && formControls['password'].errors"
class="help-block"
>
<div *ngIf="formControls['password'].errors['required']">
Password is required
</div>

<div *ngIf="formControls['password'].errors['pattern']">
Password should have at least 1 number, 1 special character 1
capital letter and minimum length 8
</div>
</div>
</div>

<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" title="b" />
<label class="form-check-label">Remember me</label>
</div>

<div class="button">
<p *ngIf="!temp.success">{{ temp.message }}</p>
<button (click)="getLogin()" class="btn btn-success">Log in</button>
&nbsp;
<button
type="reset"
(click)="onReset()"
class="btn btn-danger float-right"
>
Reset
</button>
</div>
</form>
</div>
</div>
</div>

css-------------------

* {
font-family: cursive;
font-weight: bold;
}

h1 {
font-family: cursive;
font-weight: bold;
text-align: center;
}

img {
padding: 20px;
}
.header .top {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
background-color: brown;
width: 100%;
}

.header button:hover {
background-color: gray;
}

.row {
width: 90%;
margin: 0 auto;
margin-top: 20px;
}

.login-header,
.register-header {
text-align: center;
background: brown;
padding: 20px;
font-size: 1.4em;
font-weight: normal;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
}

.button {
text-align: center;
}

.login,
.register {
width: 100%;
margin: 16px auto;
font-size: 16px;
background: #ebebeb;
padding: 20px;
}

.login-header,
.login p,
.login label,
.register-header,
.register p,
.register label {
margin-bottom: 10px;
}

.help-block {
color: red;
}