change:register, login, authenticated. Add: logout component, logout routes

Author: ambinintsoa-nomade

README.md

@@ -1,10 +1,8 @@
 # Angular JWT Authentication System
 
-## Screenshots
-
 <div align="center">
-  <img src="./screenshot/login.png" alt="Angular Login Page" width="300" style="margin-right: auto">
-  <img src="./screenshot/register.png" alt="Angular Registration Page" width="300">
+<h3 align="center">Demo</h3>
+  <img src="./screenshot/login-angular-screenshot.gif" alt="Angular Login Page">
 </div>
 
 ## Overview

screenshot/login-angular-screenshot.gif

@@ -4,11 +4,13 @@ import {LoginComponent} from "./component/login/login.component";
 import {RegisterComponent} from "./component/register/register.component";
 import {AuthenticatedComponent} from "./component/authenticated/authenticated.component";
 import {AuthGuard} from "./guards/auth.guard";
+import {LogoutComponent} from "./component/logout.component";
 
 const routes: Routes = [
   { path: 'login', component: LoginComponent, data: { title: 'Login' } },
   { path: 'signup', component: RegisterComponent, data: { title: 'Register' } },
-  { path: 'dashboard', component: AuthenticatedComponent, data: { title: 'Dashboard' } , canActivate: [AuthGuard]}
+  { path: 'dashboard', component: AuthenticatedComponent, data: { title: 'Dashboard' }, canActivate: [AuthGuard]},
+  { path: 'logout', component: LogoutComponent, canActivate: [AuthGuard] },
 ];
 
 @NgModule({

screenshot/login.png

@@ -9,14 +9,16 @@ import {ToastComponent} from "./component/toast/toast.component";
 import {RegisterComponent} from "./component/register/register.component";
 import {LoginComponent} from "./component/login/login.component";
 import {WithCredentialInterceptor} from "./interceptors/with-credential.interceptor";
+import {LogoutComponent} from "./component/logout.component";
 
 @NgModule({
   declarations: [
     AppComponent,
     LoginComponent,
     RegisterComponent,
     ToastComponent,
-    AuthenticatedComponent
+    AuthenticatedComponent,
+    LogoutComponent,
   ],
     imports: [
         BrowserModule,

screenshot/register.png

@@ -1,8 +1,10 @@
 <div class="hero">
   <div class="welcome">
     <h3 class="welcome-heading">WELCOME</h3>
-    <h1 class="welcome-title mt-3">Mr. </h1>
+    <h1 class="welcome-title mt-3">Mr. {{ authenticatedUser?.firstName }} {{ authenticatedUser?.lastName }}</h1>
     <h2 class="welcome-subtitle">This is an example of a JWT authentication system in Angular, showcasing the implementation and security features.</h2>
-    <br />
+    <div class="d-flex justify-content-center register">
+      <p class="">You can test the logout <a (click)="logout()" class="cursor-pointer">Here!</a></p>
+    </div>
   </div>
 </div>

src/app/app-routing.module.ts

@@ -1,10 +1,30 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import {AuthService} from "../../services/auth.service";
+
 
 @Component({
   selector: 'app-authenticated',
   templateUrl: './authenticated.component.html',
   styleUrls: ['./authenticated.component.css']
 })
-export class AuthenticatedComponent {
+export class AuthenticatedComponent implements OnInit {
+  authenticatedUser: any; // Declare a variable to store authenticated user details
+
+  constructor(private authService: AuthService, private router: Router) {}
+
+  ngOnInit(): void {
+    this.authService.getAuthenticatedUser().subscribe(
+      (user) => {
+        this.authenticatedUser = user;
+      },
+      (error) => {
+        console.error('Error fetching authenticated user:', error);
+      }
+    );
+  }
 
+  logout() {
+    this.router.navigate(['/logout']);
+  }
 }

src/app/app.module.ts

@@ -0,0 +1,21 @@
+// logout.component.ts
+import { Component } from '@angular/core';
+import {AuthService} from "../services/auth.service";
+import {Router} from "@angular/router";
+
+
+@Component({
+  template: '',
+})
+export class LogoutComponent {
+  constructor(private authService: AuthService, private router: Router) {
+    this.authService.logout().subscribe({
+    next : () => {
+      this.router.navigate(['/login']);
+    },
+    error : (error) => {
+      console.error('Logout error:', error);
+    }
+    });
+  }
+}

src/app/component/authenticated/authenticated.component.html

@@ -14,26 +14,26 @@ <h2 class="my-1 auth-form-title"><strong>Sign Up</strong></h2>
                       <div class="input-group-addon">
                         <i class="material-icons">person</i>
                       </div>
-                      <input type="text" class="form-control" formControlName="firstname">
+                      <input type="text" class="form-control" formControlName="firstName">
                       <!-- Validation messages -->
                     </div>
-                    <div *ngIf="f['firstname'].touched && f['firstname'].invalid">
-                      <small class="text-danger" *ngIf="f['firstname'].errors?.['required']">First name is required</small>
-                      <small class="text-danger" *ngIf="f['firstname'].errors?.['minlength']">First name must be at least 2 characters</small>
+                    <div *ngIf="f['firstName'].touched && f['firstName'].invalid">
+                      <small class="text-danger" *ngIf="f['firstName'].errors?.['required']">First name is required</small>
+                      <small class="text-danger" *ngIf="f['firstName'].errors?.['minlength']">First name must be at least 2 characters</small>
                     </div>
                   </div>
                   <div class="form-group col-md-6">
                     <label>Last Name</label>
                     <div class="input-group input-group--inline">
                       <div class="input-group-addon">
-                        <i class="material-icons">person</i>
+                        <i class="material-icons">face</i>
                       </div>
-                      <input type="text" class="form-control" formControlName="lastname">
+                      <input type="text" class="form-control" formControlName="lastName">
                       <!-- Validation messages -->
                     </div>
-                    <div *ngIf="f['lastname'].touched && f['lastname'].invalid">
-                      <small class="text-danger" *ngIf="f['lastname'].errors?.['required']">Last name is required</small>
-                      <small class="text-danger" *ngIf="f['lastname'].errors?.['minlength']">Last name must be at least 2 characters</small>
+                    <div *ngIf="f['lastName'].touched && f['lastName'].invalid">
+                      <small class="text-danger" *ngIf="f['lastName'].errors?.['required']">Last name is required</small>
+                      <small class="text-danger" *ngIf="f['lastName'].errors?.['minlength']">Last name must be at least 2 characters</small>
                     </div>
                   </div>
                 </div>
@@ -60,6 +60,19 @@ <h2 class="my-1 auth-form-title"><strong>Sign Up</strong></h2>
                     <small class="text-danger" *ngIf="f['email'].errors?.['email']">Please enter a valid email</small>
                   </div>
                 </div>
+                <div class="form-group">
+                  <label>Username</label>
+                  <div class="input-group input-group--inline">
+                    <div class="input-group-addon">
+                      <i class="material-icons">account_circle</i>
+                    </div>
+                    <input type="text" class="form-control" formControlName="username">
+                  </div>
+                  <div *ngIf="f['username'].touched && f['username'].invalid">
+                    <small class="text-danger" *ngIf="f['username'].errors?.['required']">Username is required</small>
+                    <small class="text-danger" *ngIf="f['username'].errors?.['email']">Last name must be at least 5 characters</small>
+                  </div>
+                </div>
                 <div class="form-group">
                   <label>Password</label>
                   <div class="input-group input-group--inline">

src/app/component/authenticated/authenticated.component.ts

@@ -19,8 +19,9 @@ export class RegisterComponent implements OnInit {
   constructor(private authService: AuthService, private router: Router) {
     // Initialize the registration form with form controls
     this.registerForm = new FormGroup({
-      firstname: new FormControl('', [Validators.required, Validators.minLength(2)]),
-      lastname: new FormControl('', [Validators.required, Validators.minLength(2)]),
+      firstName: new FormControl('', [Validators.required, Validators.minLength(2)]),
+      lastName: new FormControl('', [Validators.minLength(2)]),
+      username: new FormControl('', [Validators.required, Validators.minLength(5)]),
       company: new FormControl(''),
       email: new FormControl('', [Validators.required, Validators.email]),
       password: new FormControl('', [Validators.required, Validators.minLength(6)])

src/app/component/logout.component.ts

@@ -6,18 +6,20 @@ import { Observable } from 'rxjs';
   providedIn: 'root'
 })
 export class AuthService {
-  private loginUrl = 'http://yourapi.com/login';
-  private registerUrl = 'http://yourapi.com/register';
-  private logoutUrl = 'http://yourapi.com/logout';
-  private userUrl = 'http://yourapi.com/user';
+  private baseUrl = 'http://localhost:3000/api/auth';
+
+  private loginUrl = `${this.baseUrl}/login`;
+  private registerUrl = `${this.baseUrl}/register`;
+  private logoutUrl = `${this.baseUrl}/logout`;
+  private userUrl = `${this.baseUrl}/profile`;
 
   constructor(private http: HttpClient) { }
 
   login(credentials: { username: string, password: string }): Observable<any> {
     return this.http.post(this.loginUrl, credentials);
   }
 
-  register(data: { firstname: string, lastname: string, company: string, email: string, password: string }): Observable<any> {
+  register(data: { firstName: string, lastName: string, company: string, email: string, username: string, password: string }): Observable<any> {
     return this.http.post(this.registerUrl, data);
   }
 

src/app/component/register/register.component.html

@@ -1,4 +1,3 @@
-/* Common Styles */
 .full-page-container {
   display: flex;
   justify-content: center;
@@ -10,7 +9,6 @@
 }
 
 
-/* Form Styles */
 input.form-control {
   border: 1px solid #ced4da;
 }
@@ -38,7 +36,7 @@ input.form-control:focus {
   align-items: center;
 }
 
-/* Input Group Styles */
+
 .input-group--inline {
   position: relative;
 }
@@ -71,7 +69,10 @@ label {
   z-index: auto;
 }
 
-/* Register Styles */
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .register {
   font-size: 0.9em;
   color: #fff;
@@ -89,7 +90,7 @@ label {
   text-decoration: underline;
 }
 
-/* Authentication Form Styles */
+
 .auth-form-title {
   font-size: 2em;
   color: #fff;