README.md

 # TpUser
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.4.
+lien de la page web : http://webpage-p2100284-c50744b0388012df24adfb8a01ca8780767032272779dc.pages.univ-lyon1.fr/
 
-## Development server
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+## Login
 
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+login : `admin`
+password : `Passpass2@`
 
-## Running unit tests
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+## Development server
 
-## Running end-to-end tests
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
 
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
 
-## Further help
+## Build
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+Run `ng build` to build the project. The build artifacts will be stored in the `public/` directory.

src/app/app-routing.module.ts

@@ -4,6 +4,7 @@ import { UserListComponent } from './user-list/user-list.component';
 import { UserDetailComponent } from './user-detail/user-detail.component';
 import { AddUserComponent } from './edit-user/add-user/add-user.component';
 import { UpdateUserComponent } from './edit-user/update-user/update-user.component';
+import { LoginPageComponent } from './login-page/login-page.component';
 
 const routes: Routes = [
   {
@@ -14,7 +15,8 @@ const routes: Routes = [
 
   { path: "user/:id", component: UserDetailComponent },
   { path: "edit/:id", component: UpdateUserComponent },
-  { path: "add", component: AddUserComponent }
+  { path: "add", component: AddUserComponent },
+  { path: "login", component: LoginPageComponent }
 
 ];
 

src/app/app.component.html

 <!-- Toolbar -->
 <div class="toolbar" role="banner">
   <h1 style="margin: auto;">UserList</h1>
+  <button mat-raised-button color="primary" (click)="goLogin()" *ngIf="!isConnected">Login</button>
+  <button mat-raised-button color="warn" (click)="disconnected()" *ngIf="isConnected">Logout</button>
 </div>
 <router-outlet></router-outlet>
\ No newline at end of file

src/app/app.component.ts

 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { UserAuthentifactionService } from './shared/user-authentifaction.service';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +9,20 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'tp_user';
+
+  isConnected = false;
+
+  constructor(private router: Router, private authService: UserAuthentifactionService) {
+    authService.isConnected.subscribe(connected => this.isConnected = connected);
+
+  }
+
+  goLogin() {
+    this.router.navigate(["login"]);
+  }
+
+  disconnected() {
+    this.authService.disconnect();
+  }
+
 }

src/app/app.module.ts

@@ -21,6 +21,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { AddUserComponent } from './edit-user/add-user/add-user.component';
 import { UpdateUserComponent } from './edit-user/update-user/update-user.component';
+import { LoginPageComponent } from './login-page/login-page.component';
 
 
 @NgModule({
@@ -29,7 +30,8 @@ import { UpdateUserComponent } from './edit-user/update-user/update-user.compone
     UserListComponent,
     UserDetailComponent,
     AddUserComponent,
-    UpdateUserComponent
+    UpdateUserComponent,
+    LoginPageComponent
   ],
   imports: [
     BrowserModule,

src/app/login-page/login-page.component.html

+<form (onsubmit)="onSubmit()">
+
+
+	<mat-form-field>
+		<label for="name">Login</label>
+		<input matInput [(ngModel)]="loginInfo.login" name="name" [formControl]="loginControl" required>
+		<mat-error *ngIf="loginControl.invalid">{{getErrorNameMessage()}}</mat-error>
+
+	</mat-form-field>
+
+	<mat-form-field>
+		<label for="password">Password</label>
+		<input matInput [type]="hidePassword ? 'password' : 'text'" [(ngModel)]="loginInfo.password" name="password" [formControl]="passwordControl" required>
+		<mat-error *ngIf="passwordControl.invalid">{{getErrorPasswordMessage()}}</mat-error>
+		<mat-icon class="hover-pointer" matSuffix (click)="hidePassword = !hidePassword">{{hidePassword ? '☐' : '☒'}}</mat-icon>
+	</mat-form-field>
+
+
+	<div>
+		<button mat-raised-button color="primary" type="submit" (click)="onSubmit()">Login</button>
+		<button mat-raised-button (click)="onClickBack($event)">Go back to list</button>
+
+	</div>
+
+</form>
\ No newline at end of file

src/app/login-page/login-page.component.scss

+form{
+	margin: 2rem auto;
+	max-width: 600px;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
\ No newline at end of file

src/app/login-page/login-page.component.ts

+import { Component } from '@angular/core';
+import { LoginInfo } from '../models/login-info.model';
+import { FormControl, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { UserAuthentifactionService } from '../shared/user-authentifaction.service';
+
+@Component({
+  selector: 'app-login-page',
+  templateUrl: './login-page.component.html',
+  styleUrl: './login-page.component.scss'
+})
+export class LoginPageComponent {
+  loginInfo: LoginInfo = new LoginInfo("", "");
+  hidePassword: boolean = true;
+
+
+  constructor(private router: Router, private snackBar: MatSnackBar, private authService: UserAuthentifactionService) { }
+
+  loginControl = new FormControl('', [Validators.required, Validators.minLength(3)]);
+  getErrorNameMessage() {
+    return this.loginControl.invalid ? 'You must enter a value (3 character min.)' : '';
+  }
+
+  passwordControl = new FormControl('', [Validators.required, Validators.minLength(8), Validators.pattern(/^(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[^\w\d\s:])([^\s]){8,}$/)]);
+  getErrorPasswordMessage() {
+    return this.passwordControl.invalid ? 'You must enter a value (8 character min., lowercase, uppercase, digit and special character)' : '';
+  }
+
+
+  onClickBack(event: MouseEvent) {
+    event.preventDefault();
+    this.router.navigate([""]);
+  }
+  onSubmit() {
+    if (this.loginControl.valid && this.passwordControl.valid) {
+      if (this.authService.connect(this.loginInfo)) {
+        this.router.navigate([""]);
+      } else {
+        this.snackBar.openFromComponent(this.snackBar.simpleSnackBarComponent, {
+          duration: 1000,
+          data: {
+            message: "Wrong password or login"
+          }
+        })
+      }
+    }
+  }
+}

src/app/models/login-info.model.ts

+export class LoginInfo {
+	login!: string;
+	password!: string;
+
+	constructor(login: string, password: string) {
+		this.login = login;
+		this.password = password;
+	}
+}
\ No newline at end of file

src/app/shared/user-authentifaction.service.ts

+import { Injectable } from '@angular/core';
+import { LoginInfo } from '../models/login-info.model';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserAuthentifactionService {
+
+  isConnected = new BehaviorSubject<boolean>(false);
+
+  constructor() { }
+
+
+  connect(loginInfo: LoginInfo): boolean {
+    if (loginInfo.login === "admin" && loginInfo.password === "Passpass2@") {
+      this.isConnected.next(true);
+      localStorage.setItem("is_connected", "true");
+      return true;
+    }
+    return false;
+  }
+
+
+
+  disconnect() {
+    this.isConnected.next(false);
+  }
+
+}

src/app/shared/user.service.ts

@@ -24,7 +24,7 @@ export class UserService {
     })
   }
 
-  getUsers(): Observable<User[]> {
+  private getUsers(): Observable<User[]> {
     return this.userHttp.getUsers();
   }
 

src/app/user-list/user-list.component.html

 <div id="div-list-user">
-	<div >
+	<div>
 		<mat-form-field>
 			<input matInput (keyup)="applyFilter($event)" placeholder="Filter on any filed">
 		</mat-form-field>
@@ -18,13 +18,13 @@
 			<ng-container *ngIf="column == 'update'">
 				<mat-header-cell *matHeaderCellDef>{{ column }}</mat-header-cell>
 				<mat-cell *matCellDef="let emp">
-					<button mat-raised-button color="primary" (click)="onClickUpdate(emp)">update</button>
+					<button mat-raised-button color="primary" (click)="onClickUpdate(emp)" >update</button>
 				</mat-cell>
 			</ng-container>
 			<ng-container *ngIf="column == 'delete'">
 				<mat-header-cell *matHeaderCellDef>{{ column }}</mat-header-cell>
 				<mat-cell *matCellDef="let emp">
-					<button mat-raised-button color="warn" (click)="onClickDelete(emp)">delete</button>
+					<button mat-raised-button color="warn" (click)="onClickDelete(emp)" >delete</button>
 				</mat-cell>
 			</ng-container>
 

src/app/user-list/user-list.component.ts

-import { Component, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 
@@ -9,18 +9,21 @@ import { MatPaginator } from '@angular/material/paginator';
 import { Router } from '@angular/router';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { UserDetailComponent } from '../user-detail/user-detail.component';
+import { UserAuthentifactionService } from '../shared/user-authentifaction.service';
 
 @Component({
   selector: 'app-user-list',
   templateUrl: './user-list.component.html',
   styleUrls: ['./user-list.component.scss']
 })
-export class UserListComponent implements OnInit {
+export class UserListComponent implements AfterViewInit {
 
   displayedColumns: string[] = ['name', 'email', 'occupation', "detail", "update", "delete"];
 
   EmpData: User[] = [];
 
+  featureUpdateAndDeleteEnabled = false;
+
   dataSource = new MatTableDataSource(this.EmpData);
 
 
@@ -29,7 +32,18 @@ export class UserListComponent implements OnInit {
 
 
 
-  constructor(private userService: UserService, private router: Router, private snackBar: MatSnackBar) { }
+  constructor(private userService: UserService, private router: Router, private snackBar: MatSnackBar,
+    private authService: UserAuthentifactionService) {
+
+  }
+  ngAfterViewInit(): void {
+    this.loadData();
+
+    this.authService.isConnected.subscribe(connected => {
+      this.featureUpdateAndDeleteEnabled = connected;
+
+    })
+  }
 
 
   applyFilter(event: Event) {
@@ -62,9 +76,6 @@ export class UserListComponent implements OnInit {
     this.dataSource.paginator = this.paginator;
   }
 
-  ngOnInit() {
-    this.loadData();
-  }
 
 
   onClickDetail(user: User) {