Final app

ylwong

Here’s a final, consolidated guide that will help you build a fully working full-stack application using NextJS as the backend, Ionic Angular as the frontend, and MSSQL for the database. The app includes:

Employee management with CRUD operations.
Authentication using JWT.
Input validation (frontend and backend).
Password reset functionality.
Role-based access control (RBAC) for Admin and User roles.

Backend (NextJS + MSSQL)

Step 1: Setting Up NextJS with MSSQL and TypeORM

1.1. Install Dependencies

npm install next express typeorm reflect-metadata mssql jsonwebtoken bcryptjs cors body-parser class-validator class-transformer

1.2. Create TypeORM Data Source Configuration

Create a data-source.ts to set up the MSSQL connection:

// backend/data-source.ts
import { DataSource } from "typeorm";
import { Employee } from "./entities/Employee";

export const AppDataSource = new DataSource({
    type: "mssql",
    host: "localhost",
    username: "your_db_user",
    password: "your_db_password",
    database: "your_db_name",
    synchronize: true,
    entities: [Employee],
});

1.3. Employee Entity with Validation and Roles

Define the Employee entity, including fields like resetToken for password reset and role for RBAC.

// backend/entities/Employee.ts
import { Entity, PrimaryGeneratedColumn, Column } from "typeorm";
import { IsEmail, IsNotEmpty } from "class-validator";

@Entity()
export class Employee {
    @PrimaryGeneratedColumn()
    id: number;

    @Column()
    @IsNotEmpty({ message: "Name is required" })
    name: string;

    @Column()
    @IsEmail({}, { message: "Invalid email" })
    email: string;

    @Column()
    @IsNotEmpty({ message: "Password is required" })
    password: string;

    @Column()
    @IsNotEmpty({ message: "Position is required" })
    position: string;

    @Column({ default: true })
    isActive: boolean;

    @Column({ nullable: true })
    resetToken: string;

    @Column({ nullable: true })
    resetTokenExpires: Date;

    @Column({ default: 'User' })
    role: string;
}

1.4. JWT Utility Functions

Add helper functions to generate and verify JWT tokens.

// backend/utils/jwt.ts
import jwt from "jsonwebtoken";

const SECRET_KEY = "your_secret_key"; // Store securely in environment variables

export const generateToken = (employee) => {
    return jwt.sign(
        { id: employee.id, email: employee.email, role: employee.role },
        SECRET_KEY,
        { expiresIn: "1h" }
    );
};

export const verifyToken = (token) => {
    return jwt.verify(token, SECRET_KEY);
};

1.5. JWT Verification Middleware

Middleware to protect routes by verifying JWT tokens and roles.

// backend/utils/verifyToken.ts
import { NextApiRequest, NextApiResponse } from "next";
import { verifyToken } from "./jwt";

export const verifyJwt = (handler) => async (req: NextApiRequest, res: NextApiResponse) => {
    const token = req.headers.authorization?.split(' ')[1];
    if (!token) {
        return res.status(401).json({ message: 'No token provided' });
    }

    try {
        const decoded = verifyToken(token);
        req.user = decoded;
        return handler(req, res);
    } catch (error) {
        return res.status(401).json({ message: 'Invalid token' });
    }
};

export const verifyRole = (handler, role) => async (req: NextApiRequest, res: NextApiResponse) => {
    const token = req.headers.authorization?.split(' ')[1];
    if (!token) {
        return res.status(401).json({ message: 'No token provided' });
    }

    try {
        const decoded = verifyToken(token);
        if (decoded.role !== role) {
            return res.status(403).json({ message: 'Forbidden' });
        }
        req.user = decoded;
        return handler(req, res);
    } catch (error) {
        return res.status(401).json({ message: 'Invalid token' });
    }
};

Step 2: Authentication API Routes

2.1. Registration Route

A route to handle employee registration, with validation.

// backend/pages/api/employees/register.ts
import { NextApiRequest, NextApiResponse } from 'next';
import bcrypt from 'bcryptjs';
import { AppDataSource } from '../../../data-source';
import { Employee } from '../../../entities/Employee';
import { validate } from "class-validator";

AppDataSource.initialize();

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    if (req.method === 'POST') {
        const { name, email, password, position } = req.body;
        const employeeRepository = AppDataSource.getRepository(Employee);

        const newEmployee = new Employee();
        newEmployee.name = name;
        newEmployee.email = email;
        newEmployee.password = bcrypt.hashSync(password, 8);
        newEmployee.position = position;
        
        // Validation
        const errors = await validate(newEmployee);
        if (errors.length > 0) {
            return res.status(400).json({ errors });
        }

        await employeeRepository.save(newEmployee);
        res.status(201).json(newEmployee);
    } else {
        res.status(405).json({ message: 'Method Not Allowed' });
    }
}

2.2. Login Route

A route for logging in and generating a JWT token.

// backend/pages/api/employees/login.ts
import { NextApiRequest, NextApiResponse } from 'next';
import bcrypt from 'bcryptjs';
import { AppDataSource } from '../../../data-source';
import { Employee } from '../../../entities/Employee';
import { generateToken } from '../../../utils/jwt';

AppDataSource.initialize();

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    if (req.method === 'POST') {
        const { email, password } = req.body;
        const employeeRepository = AppDataSource.getRepository(Employee);
        const employee = await employeeRepository.findOne({ where: { email } });

        if (!employee || !bcrypt.compareSync(password, employee.password)) {
            return res.status(400).json({ message: 'Invalid email or password' });
        }

        const token = generateToken(employee);
        res.status(200).json({ token });
    } else {
        res.status(405).json({ message: 'Method Not Allowed' });
    }
}

Step 3: Employee CRUD Operations

3.1. List Employees (with JWT protection)

// backend/pages/api/employees/index.ts
import { NextApiRequest, NextApiResponse } from 'next';
import { AppDataSource } from '../../../data-source';
import { Employee } from '../../../entities/Employee';
import { verifyJwt } from '../../../utils/verifyToken';

AppDataSource.initialize();

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
    const employeeRepository = AppDataSource.getRepository(Employee);

    if (req.method === 'GET') {
        const employees = await employeeRepository.find();
        res.status(200).json(employees);
    }
};

export default verifyJwt(handler);

3.2. Add, Update, and Delete Employees (Admin only)

// backend/pages/api/employees/[id].ts
import { NextApiRequest, NextApiResponse } from 'next';
import { AppDataSource } from '../../../data-source';
import { Employee } from '../../../entities/Employee';
import { verifyRole } from '../../../utils/verifyToken';

AppDataSource.initialize();

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
    const employeeRepository = AppDataSource.getRepository(Employee);
    const { id } = req.query;

    if (req.method === 'PUT') {
        const { name, email, position, isActive } = req.body;
        const employee = await employeeRepository.findOne({ where: { id: Number(id) } });
        if (!employee) {
            return res.status(404).json({ message: 'Employee not found' });
        }

        employee.name = name || employee.name;
        employee.email = email || employee.email;
        employee.position = position || employee.position;
        employee.isActive = isActive !== undefined ? isActive : employee.isActive;
        await employeeRepository.save(employee);

        res.status(200).json(employee);
    }

    if (req.method === 'DELETE') {
        const employee = await employeeRepository.findOne({ where: { id: Number(id) } });
        if (!employee) {
            return res.status(404).json({ message: 'Employee not found' });
        }

        await employeeRepository.remove(employee);
        res.status(204).send();
    }
};

export default verifyRole(handler, 'Admin');

Step 4: Password Reset Functionality

4.1. Password Reset Request Route

// backend/pages/api/employees/reset-request.ts
import crypto from 'crypto';
import { NextApiRequest, NextApiResponse } from 'next';
import { AppDataSource } from '../../../data-source';
import { Employee } from '../../../

entities/Employee';

AppDataSource.initialize();

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    if (req.method === 'POST') {
        const { email } = req.body;
        const employeeRepository = AppDataSource.getRepository(Employee);
        const employee = await employeeRepository.findOne({ where: { email } });

        if (!employee) {
            return res.status(404).json({ message: 'Employee not found' });
        }

        const resetToken = crypto.randomBytes(32).toString('hex');
        employee.resetToken = resetToken;
        employee.resetTokenExpires = new Date(Date.now() + 3600000); // 1 hour expiry

        await employeeRepository.save(employee);
        console.log(`Password reset link: http://localhost:3000/reset-password?token=${resetToken}`);
        res.status(200).json({ message: 'Password reset email sent' });
    }
}

4.2. Password Reset API

// backend/pages/api/employees/reset-password.ts
import bcrypt from 'bcryptjs';
import { NextApiRequest, NextApiResponse } from 'next';
import { AppDataSource } from '../../../data-source';
import { Employee } from '../../../entities/Employee';

AppDataSource.initialize();

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    if (req.method === 'POST') {
        const { token, newPassword } = req.body;
        const employeeRepository = AppDataSource.getRepository(Employee);
        const employee = await employeeRepository.findOne({
            where: { resetToken: token, resetTokenExpires: MoreThan(new Date()) }
        });

        if (!employee) {
            return res.status(400).json({ message: 'Invalid or expired token' });
        }

        employee.password = bcrypt.hashSync(newPassword, 8);
        employee.resetToken = null;
        employee.resetTokenExpires = null;

        await employeeRepository.save(employee);
        res.status(200).json({ message: 'Password successfully reset' });
    }
}

Frontend (Ionic Angular)

Step 5: Setup Ionic Angular

Create a new Ionic project:

   ionic start employeeApp blank --type=angular

Install Axios for API requests:

   npm install axios

Create EmployeeService to handle API requests:

   // src/app/services/employee.service.ts
   import { Injectable } from '@angular/core';
   import axios from 'axios';

   @Injectable({
     providedIn: 'root',
   })
   export class EmployeeService {
     private apiUrl = 'http://localhost:3000/api/employees';

     async getEmployees(token: string) {
       const response = await axios.get(`${this.apiUrl}`, {
         headers: { Authorization: `Bearer ${token}` },
       });
       return response.data;
     }

     async login(email: string, password: string) {
       const response = await axios.post(`${this.apiUrl}/login`, { email, password });
       return response.data;
     }

     // More CRUD methods (add, update, delete) go here
   }

Implement pages like Login, Employee List, and Password Reset using forms with validation, similar to the earlier steps.

Final Thoughts

Backend: Secured with JWT and includes full CRUD operations, validation, password reset, and RBAC.
Frontend: Angular app to interact with the backend, handling authentication, CRUD operations, and role-based access.

You can now extend the frontend for other CRUD operations and secure sensitive routes based on roles. With this complete setup, you have a production-ready full-stack app using NextJS, Ionic Angular, and MSSQL.

ylwong

Sure! Here’s how to complete the Ionic Angular part of the full-stack app, including login, employee CRUD operations, JWT authentication, and password reset functionality.

Step 1: Set Up Ionic Angular Project

Create a new Ionic project:

   ionic start employeeApp blank --type=angular
   cd employeeApp

Install Axios to handle API requests:

   npm install axios

Install Angular Forms for handling reactive forms and validation:

   npm install @angular/forms

Step 2: Create Employee Service for API Calls

Create a service that will interact with the backend for handling authentication, employee CRUD operations, and password reset requests.

`employee.service.ts`

// src/app/services/employee.service.ts
import { Injectable } from '@angular/core';
import axios from 'axios';

@Injectable({
  providedIn: 'root',
})
export class EmployeeService {
  private apiUrl = 'http://localhost:3000/api/employees';

  // Employee login - returns a JWT token
  async login(email: string, password: string) {
    const response = await axios.post(`${this.apiUrl}/login`, { email, password });
    return response.data;
  }

  // Get employee list (JWT protected)
  async getEmployees(token: string) {
    const response = await axios.get(`${this.apiUrl}`, {
      headers: { Authorization: `Bearer ${token}` },
    });
    return response.data;
  }

  // Add a new employee (JWT protected)
  async addEmployee(token: string, employeeData: any) {
    const response = await axios.post(`${this.apiUrl}`, employeeData, {
      headers: { Authorization: `Bearer ${token}` },
    });
    return response.data;
  }

  // Update an existing employee (JWT protected)
  async updateEmployee(token: string, employeeId: number, employeeData: any) {
    const response = await axios.put(`${this.apiUrl}/${employeeId}`, employeeData, {
      headers: { Authorization: `Bearer ${token}` },
    });
    return response.data;
  }

  // Delete an employee (JWT protected)
  async deleteEmployee(token: string, employeeId: number) {
    const response = await axios.delete(`${this.apiUrl}/${employeeId}`, {
      headers: { Authorization: `Bearer ${token}` },
    });
    return response.data;
  }

  // Request password reset
  async requestPasswordReset(email: string) {
    const response = await axios.post(`${this.apiUrl}/reset-request`, { email });
    return response.data;
  }

  // Reset the password using the reset token
  async resetPassword(token: string, newPassword: string) {
    const response = await axios.post(`${this.apiUrl}/reset-password`, {
      token,
      newPassword,
    });
    return response.data;
  }
}

Step 3: Create Login Page

3.1. Create the Login Page

Generate the login page:

ionic generate page login

3.2. Implement Login Form with Validation

In login.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form [formGroup]="loginForm" (ngSubmit)="login()">
    <ion-item>
      <ion-label position="floating">Email</ion-label>
      <ion-input type="email" formControlName="email"></ion-input>
    </ion-item>
    <ion-note *ngIf="loginForm.get('email').hasError('required') && loginForm.get('email').touched">
      Email is required
    </ion-note>
    <ion-note *ngIf="loginForm.get('email').hasError('email') && loginForm.get('email').touched">
      Invalid email
    </ion-note>

    <ion-item>
      <ion-label position="floating">Password</ion-label>
      <ion-input type="password" formControlName="password"></ion-input>
    </ion-item>
    <ion-note *ngIf="loginForm.get('password').hasError('required') && loginForm.get('password').touched">
      Password is required
    </ion-note>

    <ion-button expand="block" type="submit" [disabled]="loginForm.invalid">Login</ion-button>
  </form>
</ion-content>

3.3. Handle Login Logic

In login.page.ts:

// src/app/pages/login/login.page.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { EmployeeService } from '../../services/employee.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
  loginForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private employeeService: EmployeeService,
    private router: Router
  ) {}

  ngOnInit() {
    this.loginForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required]],
    });
  }

  async login() {
    if (this.loginForm.valid) {
      const { email, password } = this.loginForm.value;
      try {
        const { token } = await this.employeeService.login(email, password);
        localStorage.setItem('token', token); // Store JWT token
        this.router.navigate(['/employee-list']); // Navigate to employee list after login
      } catch (error) {
        console.log('Login failed:', error);
      }
    }
  }
}

Step 4: Create Employee List Page

4.1. Create Employee List Page

Generate the employee list page:

ionic generate page employee-list

4.2. Display Employees and Implement Delete Operation

In employee-list.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>Employees</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let employee of employees">
      <ion-label>{{ employee.name }} ({{ employee.position }})</ion-label>
      <ion-button color="danger" (click)="deleteEmployee(employee.id)">Delete</ion-button>
    </ion-item>
  </ion-list>

  <ion-button expand="block" (click)="loadEmployees()">Refresh</ion-button>
</ion-content>

4.3. Implement Logic for Fetching and Deleting Employees

In employee-list.page.ts:

// src/app/pages/employee-list/employee-list.page.ts
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../../services/employee.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.page.html',
  styleUrls: ['./employee-list.page.scss'],
})
export class EmployeeListPage implements OnInit {
  employees = [];

  constructor(private employeeService: EmployeeService, private router: Router) {}

  ngOnInit() {
    this.loadEmployees();
  }

  async loadEmployees() {
    const token = localStorage.getItem('token');
    if (!token) {
      this.router.navigate(['/login']);
    } else {
      try {
        this.employees = await this.employeeService.getEmployees(token);
      } catch (error) {
        console.log('Failed to load employees:', error);
      }
    }
  }

  async deleteEmployee(id: number) {
    const token = localStorage.getItem('token');
    try {
      await this.employeeService.deleteEmployee(token, id);
      this.loadEmployees(); // Reload the employee list after deletion
    } catch (error) {
      console.log('Failed to delete employee:', error);
    }
  }
}

Step 5: Create Password Reset Page

5.1. Create Password Reset Request Page

Generate the password reset request page:

ionic generate page reset-password

5.2. Implement Password Reset Request Form

In reset-password.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>Reset Password</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form [formGroup]="resetForm" (ngSubmit)="requestReset()">
    <ion-item>
      <ion-label position="floating">Email</ion-label>
      <ion-input type="email" formControlName="email"></ion-input>
    </ion-item>
    <ion-note *ngIf="resetForm.get('email').hasError('required') && resetForm.get('email').touched">
      Email is required
    </ion-note>
    <ion-note *ngIf="resetForm.get('email').hasError('email') && resetForm.get('email').touched">
      Invalid email
    </ion-note>

    <ion-button expand="block" type="submit" [disabled]="resetForm.invalid">Request Reset</ion-button>
  </form>
</ion-content>

In reset-password.page.ts:

// src/app/pages/reset-password/reset-password.page.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { EmployeeService } from '../../services/employee.service

';

@Component({
  selector: 'app-reset-password',
  templateUrl: './reset-password.page.html',
  styleUrls: ['./reset-password.page.scss'],
})
export class ResetPasswordPage implements OnInit {
  resetForm: FormGroup;

  constructor(private fb: FormBuilder, private employeeService: EmployeeService) {}

  ngOnInit() {
    this.resetForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
    });
  }

  async requestReset() {
    if (this.resetForm.valid) {
      const { email } = this.resetForm.value;
      try {
        await this.employeeService.requestPasswordReset(email);
        alert('Password reset request successful. Check your email for reset link.');
      } catch (error) {
        console.log('Password reset request failed:', error);
      }
    }
  }
}

Step 6: Route Configuration

Ensure your routes are properly set up for login, employee list, and reset password pages.

In app-routing.module.ts:

const routes: Routes = [
  { path: 'login', loadChildren: () => import('./pages/login/login.module').then(m => m.LoginPageModule) },
  { path: 'employee-list', loadChildren: () => import('./pages/employee-list/employee-list.module').then(m => m.EmployeeListPageModule) },
  { path: 'reset-password', loadChildren: () => import('./pages/reset-password/reset-password.module').then(m => m.ResetPasswordPageModule) },
  { path: '', redirectTo: '/login', pathMatch: 'full' },
];

Step 7: Testing the Full App

Backend: Ensure the NextJS backend is running and connected to your MSSQL database.

   npm run dev

Frontend: Run your Ionic Angular frontend app:

   ionic serve

Now, you have a full working app with:

Login: Authenticated using JWT.
Employee List: List and delete employees (secured by JWT).
Password Reset: Request password reset.

You can expand this by adding edit functionality, admin access control, and more detailed form validation.

ylwong

To expand your Ionic Angular app, we’ll add the following:

Edit Employee Functionality: Allow editing of employee details.
Admin Access Control: Ensure that only admin users can access certain operations (e.g., add, edit, delete).
More Detailed Form Validation: Improve validation for the login, employee management, and password reset forms.

Step 1: Add Edit Employee Functionality

1.1. Create an Edit Employee Page

Generate a new page for editing employee details:

ionic generate page edit-employee

1.2. Implement Edit Employee Form

In edit-employee.page.html, create a form for editing employee details:

<ion-header>
  <ion-toolbar>
    <ion-title>Edit Employee</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form [formGroup]="editEmployeeForm" (ngSubmit)="saveEmployee()">
    <ion-item>
      <ion-label position="floating">Name</ion-label>
      <ion-input type="text" formControlName="name"></ion-input>
    </ion-item>
    <ion-note *ngIf="editEmployeeForm.get('name').hasError('required') && editEmployeeForm.get('name').touched">
      Name is required
    </ion-note>

    <ion-item>
      <ion-label position="floating">Email</ion-label>
      <ion-input type="email" formControlName="email"></ion-input>
    </ion-item>
    <ion-note *ngIf="editEmployeeForm.get('email').hasError('required') && editEmployeeForm.get('email').touched">
      Email is required
    </ion-note>
    <ion-note *ngIf="editEmployeeForm.get('email').hasError('email') && editEmployeeForm.get('email').touched">
      Invalid email format
    </ion-note>

    <ion-item>
      <ion-label position="floating">Position</ion-label>
      <ion-input type="text" formControlName="position"></ion-input>
    </ion-item>
    <ion-note *ngIf="editEmployeeForm.get('position').hasError('required') && editEmployeeForm.get('position').touched">
      Position is required
    </ion-note>

    <ion-button expand="block" type="submit" [disabled]="editEmployeeForm.invalid">Save</ion-button>
  </form>
</ion-content>

1.3. Handle Edit Employee Logic

In edit-employee.page.ts:

// src/app/pages/edit-employee/edit-employee.page.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { EmployeeService } from '../../services/employee.service';

@Component({
  selector: 'app-edit-employee',
  templateUrl: './edit-employee.page.html',
  styleUrls: ['./edit-employee.page.scss'],
})
export class EditEmployeePage implements OnInit {
  editEmployeeForm: FormGroup;
  employeeId: number;

  constructor(
    private route: ActivatedRoute,
    private fb: FormBuilder,
    private employeeService: EmployeeService,
    private router: Router
  ) {}

  ngOnInit() {
    this.employeeId = +this.route.snapshot.paramMap.get('id'); // Get employee ID from route params
    this.initForm();

    // Load employee data for editing
    this.loadEmployee();
  }

  initForm() {
    this.editEmployeeForm = this.fb.group({
      name: ['', [Validators.required]],
      email: ['', [Validators.required, Validators.email]],
      position: ['', [Validators.required]],
    });
  }

  async loadEmployee() {
    const token = localStorage.getItem('token');
    const employees = await this.employeeService.getEmployees(token);
    const employee = employees.find(e => e.id === this.employeeId);

    if (employee) {
      this.editEmployeeForm.patchValue({
        name: employee.name,
        email: employee.email,
        position: employee.position,
      });
    }
  }

  async saveEmployee() {
    const token = localStorage.getItem('token');
    if (this.editEmployeeForm.valid) {
      await this.employeeService.updateEmployee(token, this.employeeId, this.editEmployeeForm.value);
      this.router.navigate(['/employee-list']);
    }
  }
}

1.4. Add Edit Button to Employee List

In employee-list.page.html, add a button to edit each employee:

<ion-item *ngFor="let employee of employees">
  <ion-label>{{ employee.name }} ({{ employee.position }})</ion-label>
  <ion-button color="primary" [routerLink]="['/edit-employee', employee.id]">Edit</ion-button>
  <ion-button color="danger" (click)="deleteEmployee(employee.id)">Delete</ion-button>
</ion-item>

Step 2: Admin Access Control

We will implement role-based access control so that only admins can perform certain operations (e.g., add, edit, and delete employees).

2.1. Modify EmployeeService to Fetch Role from JWT

Decode the JWT token to extract the user’s role:

// src/app/services/employee.service.ts
import jwtDecode from 'jwt-decode'; // Install jwt-decode if you don't have it: npm install jwt-decode

@Injectable({
  providedIn: 'root',
})
export class EmployeeService {
  private apiUrl = 'http://localhost:3000/api/employees';

  // Decodes JWT and returns the user's role
  getUserRole() {
    const token = localStorage.getItem('token');
    if (token) {
      const decoded = jwtDecode(token) as any;
      return decoded.role;
    }
    return null;
  }

  // Other methods...
}

2.2. Implement Role-Based Access in Employee List Page

Check the user’s role in employee-list.page.ts and only show the "Add", "Edit", and "Delete" buttons for admins.

// src/app/pages/employee-list/employee-list.page.ts
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../../services/employee.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.page.html',
  styleUrls: ['./employee-list.page.scss'],
})
export class EmployeeListPage implements OnInit {
  employees = [];
  isAdmin: boolean = false;

  constructor(private employeeService: EmployeeService, private router: Router) {}

  ngOnInit() {
    this.isAdmin = this.employeeService.getUserRole() === 'Admin'; // Check if the user is an admin
    this.loadEmployees();
  }

  async loadEmployees() {
    const token = localStorage.getItem('token');
    if (!token) {
      this.router.navigate(['/login']);
    } else {
      try {
        this.employees = await this.employeeService.getEmployees(token);
      } catch (error) {
        console.log('Failed to load employees:', error);
      }
    }
  }

  async deleteEmployee(id: number) {
    if (!this.isAdmin) {
      alert('Only admins can delete employees');
      return;
    }

    const token = localStorage.getItem('token');
    try {
      await this.employeeService.deleteEmployee(token, id);
      this.loadEmployees(); // Reload the employee list after deletion
    } catch (error) {
      console.log('Failed to delete employee:', error);
    }
  }
}

In employee-list.page.html, hide the "Add", "Edit", and "Delete" buttons for non-admins:

<ion-item *ngFor="let employee of employees">
  <ion-label>{{ employee.name }} ({{ employee.position }})</ion-label>
  <ion-button *ngIf="isAdmin" color="primary" [routerLink]="['/edit-employee', employee.id]">Edit</ion-button>
  <ion-button *ngIf="isAdmin" color="danger" (click)="deleteEmployee(employee.id)">Delete</ion-button>
</ion-item>

<ion-button *ngIf="isAdmin" expand="block" [routerLink]="['/add-employee']">Add Employee</ion-button>

Step 3: Improved Form Validation

3.1. Add Custom Validators for Password Strength

Create a custom password validator for strong passwords in validators.ts:

// src/app/validators.ts
import { AbstractControl, ValidationErrors } from '@angular/forms';

export class CustomValidators {
  static strongPassword(control: AbstractControl): ValidationErrors | null {
    const value = control.value;
    if (!value) return null;

    const hasUpperCase = /[A-Z]+/.test(value);
    const hasLowerCase = /[a-z]+/.test(value);
    const hasNumeric = /[0-9]+/.test(value);
    const hasSpecialChar = /[!@#$%^&*]+/.test(value);

    const isValid = hasUpperCase && hasLowerCase && hasNumeric && hasSpecialChar;

    return isValid ? null : { strongPassword: true };
  }
}

3.2. Add Strong Password Validator to Registration and Reset Forms

In reset-password.page.ts and similar forms where passwords are handled:

// src/app/pages/reset-password/reset-password.page.ts
import { CustomValidators } from '../../validators';

this.resetForm = this.fb.group({
  password: ['', [Validators.required,



 CustomValidators.strongPassword]],
  confirmPassword: ['', [Validators.required]],
}, { validator: this.passwordsMatch });

passwordsMatch(group: FormGroup) {
  const password = group.get('password').value;
  const confirmPassword = group.get('confirmPassword').value;
  return password === confirmPassword ? null : { mismatch: true };
}

3.3. Show Password Validation Messages in HTML

<ion-item>
  <ion-label position="floating">Password</ion-label>
  <ion-input type="password" formControlName="password"></ion-input>
</ion-item>
<ion-note *ngIf="resetForm.get('password').hasError('strongPassword') && resetForm.get('password').touched">
  Password must contain upper, lower, number, and special character
</ion-note>

<ion-item>
  <ion-label position="floating">Confirm Password</ion-label>
  <ion-input type="password" formControlName="confirmPassword"></ion-input>
</ion-item>
<ion-note *ngIf="resetForm.hasError('mismatch') && resetForm.get('confirmPassword').touched">
  Passwords do not match
</ion-note>

Summary of the Updates:

Edit Employee Functionality: Added a form and logic to allow users to edit employee details.
Admin Access Control: Restricted certain operations (e.g., Add, Edit, Delete) to admin users only.
More Detailed Form Validation: Improved form validation for passwords (strong password validation) and confirmed password match.

These improvements enhance security, usability, and validation for your Ionic Angular app.

ylwong

Let's expand the app further by adding:

Edit Employee Functionality: Allows users to update employee information.
Admin Access Control: Protect certain actions like editing or deleting employees so only admins can perform them.
More Detailed Form Validation: Improve form validation for fields like passwords, emails, and other inputs.

Step 1: Edit Employee Functionality

1.1. Create Edit Employee Page

Generate a new page for editing an employee:

ionic generate page edit-employee

1.2. Edit Employee Form

In edit-employee.page.html, create the form to edit employee details.

<ion-header>
  <ion-toolbar>
    <ion-title>Edit Employee</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form [formGroup]="editForm" (ngSubmit)="updateEmployee()">
    <ion-item>
      <ion-label position="floating">Name</ion-label>
      <ion-input type="text" formControlName="name"></ion-input>
    </ion-item>
    <ion-note *ngIf="editForm.get('name').hasError('required') && editForm.get('name').touched">
      Name is required
    </ion-note>

    <ion-item>
      <ion-label position="floating">Email</ion-label>
      <ion-input type="email" formControlName="email"></ion-input>
    </ion-item>
    <ion-note *ngIf="editForm.get('email').hasError('required') && editForm.get('email').touched">
      Email is required
    </ion-note>
    <ion-note *ngIf="editForm.get('email').hasError('email') && editForm.get('email').touched">
      Invalid email
    </ion-note>

    <ion-item>
      <ion-label position="floating">Position</ion-label>
      <ion-input type="text" formControlName="position"></ion-input>
    </ion-item>
    <ion-note *ngIf="editForm.get('position').hasError('required') && editForm.get('position').touched">
      Position is required
    </ion-note>

    <ion-button expand="block" type="submit" [disabled]="editForm.invalid">Update Employee</ion-button>
  </form>
</ion-content>

1.3. Edit Employee Logic

In edit-employee.page.ts, handle the form submission and update logic:

// src/app/pages/edit-employee/edit-employee.page.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { EmployeeService } from '../../services/employee.service';

@Component({
  selector: 'app-edit-employee',
  templateUrl: './edit-employee.page.html',
  styleUrls: ['./edit-employee.page.scss'],
})
export class EditEmployeePage implements OnInit {
  editForm: FormGroup;
  employeeId: number;

  constructor(
    private fb: FormBuilder,
    private employeeService: EmployeeService,
    private route: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit() {
    this.employeeId = +this.route.snapshot.paramMap.get('id');
    this.initializeForm();
    this.loadEmployeeData();
  }

  initializeForm() {
    this.editForm = this.fb.group({
      name: ['', [Validators.required]],
      email: ['', [Validators.required, Validators.email]],
      position: ['', [Validators.required]],
    });
  }

  async loadEmployeeData() {
    const token = localStorage.getItem('token');
    try {
      const employee = await this.employeeService.getEmployeeById(token, this.employeeId);
      this.editForm.patchValue(employee); // Populate the form with employee data
    } catch (error) {
      console.log('Error loading employee data:', error);
    }
  }

  async updateEmployee() {
    if (this.editForm.valid) {
      const token = localStorage.getItem('token');
      const employeeData = this.editForm.value;
      try {
        await this.employeeService.updateEmployee(token, this.employeeId, employeeData);
        this.router.navigate(['/employee-list']); // Redirect to employee list after successful update
      } catch (error) {
        console.log('Error updating employee:', error);
      }
    }
  }
}

1.4. Add Method to Employee Service

In employee.service.ts, add a method to fetch employee by ID:

// src/app/services/employee.service.ts
async getEmployeeById(token: string, employeeId: number) {
  const response = await axios.get(`${this.apiUrl}/${employeeId}`, {
    headers: { Authorization: `Bearer ${token}` },
  });
  return response.data;
}

Update the app-routing.module.ts to include a route for editing employees:

// src/app/app-routing.module.ts
const routes: Routes = [
  { path: 'login', loadChildren: () => import('./pages/login/login.module').then(m => m.LoginPageModule) },
  { path: 'employee-list', loadChildren: () => import('./pages/employee-list/employee-list.module').then(m => m.EmployeeListPageModule) },
  { path: 'edit-employee/:id', loadChildren: () => import('./pages/edit-employee/edit-employee.module').then(m => m.EditEmployeePageModule) },
  { path: '', redirectTo: '/login', pathMatch: 'full' },
];

Step 2: Admin Access Control

To restrict certain actions like editing and deleting employees to admins only, we’ll update the backend and frontend.

2.1. Backend - Update Routes for Role-Based Access

In backend/utils/verifyToken.ts, ensure that certain routes are accessible only by users with the "Admin" role.

// backend/utils/verifyToken.ts
export const verifyRole = (handler, role) => async (req: NextApiRequest, res: NextApiResponse) => {
  const token = req.headers.authorization?.split(' ')[1];
  if (!token) {
    return res.status(401).json({ message: 'No token provided' });
  }

  try {
    const decoded = verifyToken(token);
    if (decoded.role !== role) {
      return res.status(403).json({ message: 'Forbidden' });
    }
    req.user = decoded;
    return handler(req, res);
  } catch (error) {
    return res.status(401).json({ message: 'Invalid token' });
  }
};

For example, modify the employee deletion route so that only admins can delete employees:

// backend/pages/api/employees/[id].ts
import { verifyRole } from '../../../utils/verifyToken';

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const employeeRepository = AppDataSource.getRepository(Employee);
  const { id } = req.query;

  if (req.method === 'DELETE') {
    const employee = await employeeRepository.findOne({ where: { id: Number(id) } });
    if (!employee) {
      return res.status(404).json({ message: 'Employee not found' });
    }

    await employeeRepository.remove(employee);
    res.status(204).send();
  }
};

export default verifyRole(handler, 'Admin');

2.2. Frontend - Display Admin-Only Actions

In employee-list.page.html, only show the "Delete" button if the logged-in user is an admin.

<ion-item *ngFor="let employee of employees">
  <ion-label>{{ employee.name }} ({{ employee.position }})</ion-label>
  <ion-button color="primary" (click)="editEmployee(employee.id)">Edit</ion-button>
  <ion-button *ngIf="isAdmin" color="danger" (click)="deleteEmployee(employee.id)">Delete</ion-button>
</ion-item>

In employee-list.page.ts, check if the user has the "Admin" role:

// src/app/pages/employee-list/employee-list.page.ts
isAdmin = false;

async ngOnInit() {
  const token = localStorage.getItem('token');
  const decodedToken = this.decodeToken(token);
  this.isAdmin = decodedToken.role === 'Admin'; // Check if user is an Admin
  this.loadEmployees();
}

decodeToken(token: string) {
  // Decode JWT token (you may use a library like jwt-decode here)
  const base64Url = token.split('.')[1];
  const base64 = base64Url.replace('-', '+').replace('_', '/');
  return JSON.parse(atob(base64));
}

Step 3: More Detailed Form Validation

We’ll improve validation rules for different fields.

3.1. Add Password Validation to Registration and Edit Forms

For password fields, we can enforce stronger rules (e.g., minimum 8 characters, must contain numbers, etc.). In edit-employee.page.ts:

this.editForm = this.fb.group({
  name: ['', [Validators.required]],
  email: ['', [Validators.required, Validators.email]],
  position: ['', [Validators.required]],
  password: ['', [Validators.minLength(8), Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$')]],
});

Show validation errors in the template:

<ion-item>
  <ion-label position="floating">Password</ion-label>
  <ion-input type="password" form

ControlName="password"></ion-input>
</ion-item>
<ion-note *ngIf="editForm.get('password').hasError('minlength') && editForm.get('password').touched">
  Password must be at least 8 characters
</ion-note>
<ion-note *ngIf="editForm.get('password').hasError('pattern') && editForm.get('password').touched">
  Password must contain both letters and numbers
</ion-note>

3.2. Enforce Validation Rules in Backend

In the backend, use class-validator to enforce validation rules for fields. In Employee.ts:

@Column()
@IsNotEmpty({ message: 'Password is required' })
@MinLength(8, { message: 'Password must be at least 8 characters' })
@Matches(/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/, {
  message: 'Password must contain both letters and numbers',
})
password: string;

Final Thoughts

With these changes, we have:

Edit functionality: Employees can be updated through a dedicated form.
Admin access control: Only admins can delete employees, with appropriate UI restrictions.
More detailed form validation: Stronger validation rules for input fields like passwords and email.

This application is now more robust, secure, and user-friendly!