simple mobile app

ylwong

To create a simple mobile app using the Ionic Angular framework as the frontend and Next.js as the backend with MSSQL integration, ORM, JWT authentication, and REST API for CRUD operations, here’s a step-by-step guide. I’ll include comments in the code to explain each function.

Step 1: Setup the Next.js Backend with MSSQL Integration

Initialize Next.js project:

   npx create-next-app employee-backend
   cd employee-backend
   npm install

Install necessary dependencies:

   npm install sequelize mssql sequelize-cli jsonwebtoken bcryptjs

sequelize for ORM
mssql for database integration
jsonwebtoken for JWT authentication
bcryptjs for password hashing

Create Sequelize Configuration:
Create a .sequelizerc file to configure Sequelize:

   {
     "config": "./config/config.json",
     "models-path": "./models",
     "seeders-path": "./seeders",
     "migrations-path": "./migrations"
   }

Database Configuration:
In config/config.json, configure the MSSQL database:

   {
     "development": {
       "username": "db_user",
       "password": "db_password",
       "database": "employee_db",
       "host": "127.0.0.1",
       "dialect": "mssql"
     }
   }

Create Employee Model:
Run:

   npx sequelize model:generate --name Employee --attributes firstName:string,lastName:string,email:string,password:string

Define Employee Model in models/employee.js:

   module.exports = (sequelize, DataTypes) => {
     const Employee = sequelize.define('Employee', {
       firstName: DataTypes.STRING,
       lastName: DataTypes.STRING,
       email: DataTypes.STRING,
       password: DataTypes.STRING
     });
     return Employee;
   };

Step 2: Create JWT Authentication in Next.js

Create Authentication Helpers:
In lib/auth.js, create helper functions:

   const jwt = require('jsonwebtoken');
   const bcrypt = require('bcryptjs');

   const generateToken = (employee) => {
     return jwt.sign({ id: employee.id }, 'your_secret_key', { expiresIn: '1h' });
   };

   const hashPassword = async (password) => {
     return await bcrypt.hash(password, 10);
   };

   const comparePassword = async (enteredPassword, hashedPassword) => {
     return await bcrypt.compare(enteredPassword, hashedPassword);
   };

   module.exports = { generateToken, hashPassword, comparePassword };

Add Authentication API:
In pages/api/auth/login.js:

   const { Employee } = require('../../../models');
   const { comparePassword, generateToken } = require('../../../lib/auth');

   export default async (req, res) => {
     const { email, password } = req.body;
     const employee = await Employee.findOne({ where: { email } });

     if (!employee || !(await comparePassword(password, employee.password))) {
       return res.status(401).json({ message: 'Invalid credentials' });
     }

     const token = generateToken(employee);
     return res.json({ token });
   };

In pages/api/auth/register.js:

   const { Employee } = require('../../../models');
   const { hashPassword } = require('../../../lib/auth');

   export default async (req, res) => {
     const { firstName, lastName, email, password } = req.body;

     const hashedPassword = await hashPassword(password);
     const employee = await Employee.create({ firstName, lastName, email, password: hashedPassword });

     return res.status(201).json(employee);
   };

Step 3: Setup Ionic Angular Frontend

Initialize Ionic Angular Project:

   ionic start employee-app blank --type=angular
   cd employee-app

Install Angular HTTP and JWT Dependencies:

   npm install @angular/common @angular/http @auth0/angular-jwt

Create Service for Employee API:
In src/app/services/employee.service.ts:

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Observable } from 'rxjs';

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

     constructor(private http: HttpClient) {}

     // List employees with pagination
     getEmployees(page: number): Observable<any> {
       return this.http.get(`${this.apiUrl}/employees?page=${page}`);
     }

     // Add new employee
     addEmployee(employeeData: any): Observable<any> {
       return this.http.post(`${this.apiUrl}/employees`, employeeData);
     }

     // Modify employee
     updateEmployee(id: string, employeeData: any): Observable<any> {
       return this.http.put(`${this.apiUrl}/employees/${id}`, employeeData);
     }

     // Delete employee
     deleteEmployee(id: string): Observable<any> {
       return this.http.delete(`${this.apiUrl}/employees/${id}`);
     }
   }

Step 4: Implement UI Components

List Employees with Pagination:
In src/app/pages/employee-list/employee-list.page.ts:

   import { Component, OnInit } from '@angular/core';
   import { EmployeeService } from '../../services/employee.service';

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

     constructor(private employeeService: EmployeeService) {}

     ngOnInit() {
       this.loadEmployees();
     }

     loadEmployees() {
       this.employeeService.getEmployees(this.currentPage).subscribe((data) => {
         this.employees = data;
       }, error => {
         console.error('Error loading employees', error);
       });
     }

     nextPage() {
       this.currentPage++;
       this.loadEmployees();
     }

     prevPage() {
       if (this.currentPage > 1) {
         this.currentPage--;
         this.loadEmployees();
       }
     }
   }

Add New Employee:
In src/app/pages/add-employee/add-employee.page.ts:

   import { Component } from '@angular/core';
   import { EmployeeService } from '../../services/employee.service';

   @Component({
     selector: 'app-add-employee',
     templateUrl: './add-employee.page.html',
   })
   export class AddEmployeePage {
     employee = { firstName: '', lastName: '', email: '', password: '' };

     constructor(private employeeService: EmployeeService) {}

     addEmployee() {
       this.employeeService.addEmployee(this.employee).subscribe(
         (response) => {
           console.log('Employee added successfully', response);
         },
         (error) => {
           console.error('Error adding employee', error);
         }
       );
     }
   }

Step 5: Error Handling in Angular

You can handle errors globally by creating an HTTP interceptor in Angular. This will catch all request/response errors.

Create an error.interceptor.ts file:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        console.error('Error occurred:', error);
        return throwError(error);
      })
    );
  }
}

Finally, ensure the interceptor is registered in app.module.ts.

Step 6: Run the App

Start the Next.js backend:

  npm run dev

Serve the Ionic app:

  ionic serve

Now you have a full-stack application with Ionic as the frontend, Next.js as the backend, integrated with MSSQL, and following the requirements for JWT authentication, CRUD operations, and error handling.

ylwong

Let's break this task down into manageable steps. We'll focus on building a simple full-stack application using NextJS as the backend, MSSQL for the database, and Ionic Angular for the frontend UI. The application will focus on managing employee data with authentication and CRUD operations, and we will incorporate JWT token-based authentication.

Step 1: Setting up the Backend (NextJS) with MSSQL Database Integration

1. Install Dependencies

You will need typeorm (ORM for database interaction), jsonwebtoken (for JWT authentication), and some basic packages for NextJS and database connection.

npm install next express typeorm reflect-metadata mssql jsonwebtoken bcryptjs cors

2. Configure MSSQL Database Connection

Create a data-source.ts file for TypeORM configuration.

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

export const AppDataSource = new DataSource({
    type: "mssql",
    host: "localhost",
    username: "your_db_user",
    password: "your_db_password",
    database: "your_db_name",
    entities: ["./entities/*.ts"],
    synchronize: true, // Automatically syncs the schema
});

3. Create the Employee Entity

// backend/entities/Employee.ts
import { Entity, PrimaryGeneratedColumn, Column } from "typeorm";

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

    @Column()
    name: string;

    @Column()
    email: string;

    @Column()
    password: string;

    @Column()
    position: string;

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

4. Set Up Authentication (JWT)

// 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 }, SECRET_KEY, { expiresIn: "1h" });
};

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

5. Create Employee CRUD API Routes

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

// Connect to the database
AppDataSource.initialize();

// List employees with pagination
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    if (req.method === "GET") {
        const page = parseInt(req.query.page as string) || 1;
        const take = 10; // Pagination limit
        const skip = (page - 1) * take;

        const employeeRepository = AppDataSource.getRepository(Employee);
        const [result, total] = await employeeRepository.findAndCount({
            take: take,
            skip: skip,
        });

        res.status(200).json({
            data: result,
            total,
            page,
            pages: Math.ceil(total / take),
        });
    }

    // Add new employee
    if (req.method === "POST") {
        const { name, email, password, position } = req.body;
        const employeeRepository = AppDataSource.getRepository(Employee);

        // Hash password before saving
        const hashedPassword = bcrypt.hashSync(password, 8);

        const newEmployee = employeeRepository.create({
            name,
            email,
            password: hashedPassword,
            position,
            isActive: true,
        });

        await employeeRepository.save(newEmployee);
        res.status(201).json(newEmployee);
    }
}

// Other routes like DELETE, PUT will follow the same pattern.

Step 2: Frontend (Ionic Angular) Setup

1. Install Dependencies

ionic start employeeApp tabs --type=angular
cd employeeApp
npm install axios

2. Create Service for Employee API Interaction

// 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';

  // Get employees with pagination
  async getEmployees(page: number) {
    const response = await axios.get(`${this.apiUrl}?page=${page}`);
    return response.data;
  }

  // Add a new employee
  async addEmployee(employee) {
    const response = await axios.post(this.apiUrl, employee);
    return response.data;
  }

  // Update employee
  async updateEmployee(id, employee) {
    const response = await axios.put(`${this.apiUrl}/${id}`, employee);
    return response.data;
  }

  // Delete employee
  async deleteEmployee(id) {
    const response = await axios.delete(`${this.apiUrl}/${id}`);
    return response.data;
  }
}

3. Create UI for Employee Listing with Pagination

<!-- src/app/pages/employee-list/employee-list.page.html -->
<ion-header>
  <ion-toolbar>
    <ion-title>Employee List</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-searchbar placeholder="Search employees"></ion-searchbar>

  <ion-list>
    <ion-item *ngFor="let employee of employees">
      <ion-label>
        {{ employee.name }} - {{ employee.position }}
      </ion-label>
    </ion-item>
  </ion-list>

  <ion-button (click)="loadMore()">Load More</ion-button>
</ion-content>

4. Create Corresponding Logic in TypeScript

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

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

  constructor(private employeeService: EmployeeService) {}

  ngOnInit() {
    this.loadEmployees();
  }

  async loadEmployees() {
    const data = await this.employeeService.getEmployees(this.currentPage);
    this.employees = data.data;
  }

  loadMore() {
    this.currentPage++;
    this.loadEmployees();
  }
}

Step 3: Error Handling in the Frontend

Ensure proper error handling in the request and response at the service and UI levels.

// src/app/services/employee.service.ts
async getEmployees(page: number) {
  try {
    const response = await axios.get(`${this.apiUrl}?page=${page}`);
    return response.data;
  } catch (error) {
    console.error('Error fetching employees:', error);
    throw error; // Pass the error to be handled in the component
  }
}

// src/app/pages/employee-list/employee-list.page.ts
async loadEmployees() {
  try {
    const data = await this.employeeService.getEmployees(this.currentPage);
    this.employees = data.data;
  } catch (error) {
    // Display error message or handle it gracefully
    console.log('Error:', error.message);
  }
}

These steps cover setting up a full-stack application with CRUD operations for employees, JWT authentication, proper error handling, and pagination on the UI. This can be further expanded with authentication routes and input validations based on your requirements.

ylwong

Creating a full-stack application from scratch using NextJS as the backend and Ionic Angular as the frontend will be a step-by-step process. Let's break it down from zero to a fully functional app. This guide includes setting up both the backend and frontend, integrating the MSSQL database, and ensuring authentication and CRUD operations are fully functional.

Part 1: Backend - Setting Up NextJS with MSSQL and ORM

1. Create a NextJS Project

npx create-next-app employee-backend
cd employee-backend

2. Install Required Packages

Install the necessary dependencies for the backend.

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

These include:

typeorm for ORM to handle MSSQL.
mssql for database connection.
jsonwebtoken and bcryptjs for handling authentication.
cors and body-parser for handling API requests.

3. Configure TypeORM for MSSQL Connection

In the project root, create a file data-source.ts to configure the database 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, // Automatically updates the schema in development
    entities: [Employee],
});

Replace your_db_user, your_db_password, and your_db_name with your MSSQL credentials.
synchronize: true will synchronize your database schema based on your models/entities automatically in development mode.

4. Create the Employee Entity (Database Model)

Create an entities folder in the root directory and add Employee.ts for the employee table schema.

// backend/entities/Employee.ts
import { Entity, PrimaryGeneratedColumn, Column } from "typeorm";

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

    @Column()
    name: string;

    @Column()
    email: string;

    @Column()
    password: string;

    @Column()
    position: string;

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

5. Create Authentication Utility for JWT

Create a utils folder and add a jwt.ts file for generating and verifying JWT tokens.

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

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

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

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

6. Set Up Express API Routes for Employee CRUD

Now, create the API routes for handling employee data. Start by creating the pages/api/employees/index.ts file.

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

AppDataSource.initialize();

// Handle employee CRUD operations
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    const employeeRepository = AppDataSource.getRepository(Employee);

    if (req.method === "GET") {
        const page = parseInt(req.query.page as string) || 1;
        const take = 10;
        const skip = (page - 1) * take;

        const [result, total] = await employeeRepository.findAndCount({
            take: take,
            skip: skip,
        });

        res.status(200).json({
            data: result,
            total,
            page,
            pages: Math.ceil(total / take),
        });
    }

    if (req.method === "POST") {
        const { name, email, password, position } = req.body;

        const hashedPassword = bcrypt.hashSync(password, 8);
        const newEmployee = employeeRepository.create({
            name,
            email,
            password: hashedPassword,
            position,
            isActive: true,
        });

        await employeeRepository.save(newEmployee);
        res.status(201).json(newEmployee);
    }
}

7. Test the Backend API

Run the backend by starting the NextJS server:

npm run dev

Visit http://localhost:3000/api/employees to see the employee listing (if you have added employees).

Part 2: Frontend - Setting Up Ionic Angular Application

1. Create a New Ionic Angular Project

ionic start employeeApp blank --type=angular
cd employeeApp

2. Install Axios for HTTP Requests

npm install axios

3. Create Employee Service

Create a service to handle requests to the backend API. In src/app/services, create 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';

  // Get employees with pagination
  async getEmployees(page: number) {
    const response = await axios.get(`${this.apiUrl}?page=${page}`);
    return response.data;
  }

  // Add a new employee
  async addEmployee(employee) {
    const response = await axios.post(this.apiUrl, employee);
    return response.data;
  }

  // Update employee
  async updateEmployee(id, employee) {
    const response = await axios.put(`${this.apiUrl}/${id}`, employee);
    return response.data;
  }

  // Delete employee
  async deleteEmployee(id) {
    const response = await axios.delete(`${this.apiUrl}/${id}`);
    return response.data;
  }
}

4. Create Employee Listing UI

Create a page that will display the list of employees and allow pagination. Generate a new page:

ionic g page employee-list

In employee-list.page.html, add the following code for displaying and paginating employees:

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

<ion-content>
  <ion-searchbar placeholder="Search employees"></ion-searchbar>

  <ion-list>
    <ion-item *ngFor="let employee of employees">
      <ion-label>
        {{ employee.name }} - {{ employee.position }}
      </ion-label>
    </ion-item>
  </ion-list>

  <ion-button (click)="loadMore()">Load More</ion-button>
</ion-content>

5. Add Employee List Logic in TypeScript

In employee-list.page.ts, implement the logic to fetch employee data using the EmployeeService.

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

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

  constructor(private employeeService: EmployeeService) {}

  ngOnInit() {
    this.loadEmployees();
  }

  async loadEmployees() {
    const data = await this.employeeService.getEmployees(this.currentPage);
    this.employees = data.data;
  }

  loadMore() {
    this.currentPage++;
    this.loadEmployees();
  }
}

6. Add Error Handling

To ensure the app handles errors gracefully, implement error handling in your service and component:

// src/app/services/employee.service.ts
async getEmployees(page: number) {
  try {
    const response = await axios.get(`${this.apiUrl}?page=${page}`);
    return response.data;
  } catch (error) {
    console.error('Error fetching employees:', error);
    throw error;
  }
}

// src/app/pages/employee-list/employee-list.page.ts
async loadEmployees() {
  try {
    const data = await this.employeeService.getEmployees(this.currentPage);
    this.employees = data.data;
  } catch (error) {
    console.log('Error:', error.message);
  }
}

Final Step: Running the Full App

Start the backend server in the employee-backend project:

npm run dev

Start the Ionic Angular app in the employeeApp project:

ionic serve

You should now have a full-stack application where you can:

View the employee list with pagination.
Add, modify, and delete employees (to be implemented further).
Handle authentication with JWT tokens (also to be implemented further).

From here, you can expand functionalities like authentication using JWT, more detailed employee CRUD operations, and secure the API routes.

ylwong

Let's expand on the functionality of the full-stack app by implementing authentication using JWT, detailed CRUD operations, and securing the API routes. This expansion will help create a more robust application, especially for handling sensitive employee data.

Part 1: Implementing Authentication Using JWT

1. Backend - Add Employee Authentication Routes

We'll add API routes for login, registration, and securing endpoints with JWT token verification.

1.1. Employee Registration API

Add a new API route for registering employees. Create pages/api/employees/register.ts.

// 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';

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);

        // Check if the email is already registered
        const existingEmployee = await employeeRepository.findOne({ where: { email } });
        if (existingEmployee) {
            return res.status(400).json({ message: 'Email is already in use.' });
        }

        // Hash password before saving
        const hashedPassword = bcrypt.hashSync(password, 8);

        const newEmployee = employeeRepository.create({
            name,
            email,
            password: hashedPassword,
            position,
            isActive: true,
        });

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

1.2. Employee Login API

Create a login endpoint where employees can authenticate and receive a JWT token. Create pages/api/employees/login.ts.

// 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);

        // Check if the employee exists
        const employee = await employeeRepository.findOne({ where: { email } });
        if (!employee) {
            return res.status(400).json({ message: 'Invalid email or password' });
        }

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

        // Generate JWT token
        const token = generateToken(employee);

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

2. Securing Routes with JWT

To secure our routes, we'll create a middleware that verifies the JWT token before allowing access to protected routes.

2.1. JWT Verification Middleware

Create a middleware that checks the token. You can add this in utils/verifyToken.ts.

// 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; // Attach the decoded token data to the request object
        return handler(req, res);
    } catch (error) {
        return res.status(401).json({ message: 'Invalid token' });
    }
};

2.2. Securing Employee CRUD Routes

To secure CRUD routes, we’ll modify pages/api/employees/index.ts to only allow requests with a valid token.

// 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 page = parseInt(req.query.page as string) || 1;
        const take = 10;
        const skip = (page - 1) * take;

        const [result, total] = await employeeRepository.findAndCount({
            take: take,
            skip: skip,
        });

        res.status(200).json({
            data: result,
            total,
            page,
            pages: Math.ceil(total / take),
        });
    }

    if (req.method === 'POST') {
        const { name, email, password, position } = req.body;

        const hashedPassword = bcrypt.hashSync(password, 8);

        const newEmployee = employeeRepository.create({
            name,
            email,
            password: hashedPassword,
            position,
            isActive: true,
        });

        await employeeRepository.save(newEmployee);
        res.status(201).json(newEmployee);
    }
};

export default verifyJwt(handler);

With this, all the routes will be protected, and the user must provide a valid JWT token in the request's Authorization header.

Part 2: Frontend - Implementing Login and Authentication in Ionic

1. Add Login Functionality

To allow employees to log in, we’ll create a login page and store the JWT token in local storage.

1.1. Create Login Page

Generate a new page in your Ionic app:

ionic g page login

In login.page.html, create the login form:

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

<ion-content>
  <ion-item>
    <ion-label position="floating">Email</ion-label>
    <ion-input type="email" [(ngModel)]="email"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label position="floating">Password</ion-label>
    <ion-input type="password" [(ngModel)]="password"></ion-input>
  </ion-item>

  <ion-button expand="full" (click)="login()">Login</ion-button>
</ion-content>

1.2. Implement Login Logic

In login.page.ts, use the EmployeeService to log in the user and store the JWT token.

// src/app/pages/login/login.page.ts
import { Component } from '@angular/core';
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 {
  email = '';
  password = '';

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

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

1.3. Add Login Functionality to EmployeeService

In employee.service.ts, add the login method.

// src/app/services/employee.service.ts
async login(email: string, password: string) {
  try {
    const response = await axios.post(`${this.apiUrl}/login`, { email, password });
    return response.data;
  } catch (error) {
    console.error('Login error:', error);
    throw error;
  }
}

2. Protect Routes in Ionic

We can use Angular guards to protect certain routes in the Ionic app.

2.1. Create an Auth Guard

Generate an AuthGuard that checks if the user is authenticated before accessing certain pages.

ionic g guard auth

In auth.guard.ts, implement the logic to check for the JWT token in local storage.

// src/app/guards/auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(): boolean {
    const token = localStorage.getItem('token');
    if (!token) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

2.2. Protect Employee List Route

In app-routing.module.ts, protect the employee-list route using the AuthGuard.

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule,

 Routes } from '@angular/router';
import { AuthGuard } from './guards/auth.guard';

const routes: Routes = [
  {
    path: 'employee-list',
    loadChildren: () => import('./pages/employee-list/employee-list.module').then(m => m.EmployeeListPageModule),
    canActivate: [AuthGuard],
  },
  {
    path: 'login',
    loadChildren: () => import('./pages/login/login.module').then(m => m.LoginPageModule),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Part 3: Detailed Employee CRUD Operations

In the backend, let's add the PUT (update) and DELETE routes for employees.

1. Update Employee API

Add a PUT route to update employee details. In pages/api/employees/[id].ts, add the following:

// backend/pages/api/employees/[id].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 === 'PUT') {
        const { id } = req.query;
        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);
    } else {
        res.status(405).json({ message: 'Method Not Allowed' });
    }
};

export default verifyJwt(handler);

2. Delete Employee API

Similarly, add a DELETE route in the same file.

// backend/pages/api/employees/[id].ts
if (req.method === 'DELETE') {
    const { id } = req.query;

    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();
}

3. Implementing Update and Delete in Ionic

In employee.service.ts, add methods to update and delete employees.

// src/app/services/employee.service.ts
async updateEmployee(id: number, employee) {
  const token = localStorage.getItem('token');
  const response = await axios.put(`${this.apiUrl}/${id}`, employee, {
    headers: { Authorization: `Bearer ${token}` },
  });
  return response.data;
}

async deleteEmployee(id: number) {
  const token = localStorage.getItem('token');
  await axios.delete(`${this.apiUrl}/${id}`, {
    headers: { Authorization: `Bearer ${token}` },
  });
}

Final Thoughts

By now, you have expanded the app to include:

Authentication using JWT (both login and registration).
Protected API routes to ensure only authenticated users can access them.
Full CRUD functionality for the employee model, including Create, Read, Update, and Delete operations.
Authorization in the frontend using Angular Guards, and properly managing tokens with local storage.

This app can be further improved by adding:

Input validation (both frontend and backend).
Password reset functionality.
Role-based access control if there are different roles (e.g., Admin, User) in your system.

ylwong

Let's further enhance the full-stack application by adding:

Input Validation (both frontend and backend) to ensure data consistency and prevent invalid inputs.
Password Reset Functionality to allow users to reset their passwords.
Role-based Access Control (RBAC) to control access to specific resources based on the user's role (e.g., Admin, User).

Part 1: Input Validation

1. Backend - Validate Employee Input Using `class-validator`

We'll use the class-validator package to enforce input validation rules in the backend.

1.1. Install `class-validator` and `class-transformer`

npm install class-validator class-transformer

1.2. Add Validation to Employee Entity

In Employee.ts, add validation decorators to enforce constraints (e.g., required fields, email format).

// 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;
}

1.3. Validate Input in API Routes

We need to validate incoming data in the employee registration and update routes. We'll use validate from class-validator.

// backend/pages/api/employees/register.ts
import { validate } from "class-validator";
import { Employee } from "../../../entities/Employee";

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

        const newEmployee = new Employee();
        newEmployee.name = name;
        newEmployee.email = email;
        newEmployee.password = password;
        newEmployee.position = position;

        // Validate employee data
        const errors = await validate(newEmployee);
        if (errors.length > 0) {
            return res.status(400).json({ errors });
        }

        // Proceed with employee creation if no errors
        // ...
    }
}

2. Frontend - Validate Input Using Angular Forms

2.1. Use Reactive Forms for Validation

In login.page.ts, create a reactive form with validation rules for email and password.

// src/app/pages/login/login.page.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, 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, Validators.minLength(6)]],
    });
  }

  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);
        this.router.navigate(['/employee-list']);
      } catch (error) {
        console.error('Login failed:', error);
      }
    } else {
      console.log('Invalid form');
    }
  }
}

In login.page.html, show validation error messages:

<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-note *ngIf="loginForm.get('password').hasError('minlength') && loginForm.get('password').touched">
  Password must be at least 6 characters
</ion-note>

Part 2: Password Reset Functionality

1. Backend - Password Reset Request

We will use a token-based system for password reset.

1.1. Add Password Reset Token to Employee Entity

Modify the Employee entity to include a resetToken and resetTokenExpires.

// backend/entities/Employee.ts
@Column({ nullable: true })
resetToken: string;

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

1.2. Create Password Reset Request API

In pages/api/employees/reset-request.ts, create an API that generates a password reset token and sends an email with the reset link.

// 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: 'Email not found' });
        }

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

        await employeeRepository.save(employee);

        // Send email with reset link (dummy link for this example)
        console.log(`Password reset link: http://localhost:3000/reset-password?token=${resetToken}`);

        res.status(200).json({ message: 'Password reset email sent' });
    }
}

2. Backend - Reset Password API

Create the API for resetting the password once the user clicks the reset link.

// 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' });
        }

        // Update password and clear reset token
        const hashedPassword = bcrypt.hashSync(newPassword, 8);
        employee.password = hashedPassword;
        employee.resetToken = null;
        employee.resetTokenExpires = null;

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

Part 3: Role-Based Access Control (RBAC)

To control access based on roles (e.g., Admin, User), we’ll add a role field to the Employee entity and secure API routes accordingly.

1. Backend - Add Role Field to Employee

Add a role column to the Employee entity to differentiate between Admin and User roles.

// backend/entities/Employee.ts
@Column({ default: 'User' })
role: string;

2. Modify Authentication Token to Include Role

When generating the JWT, include the user's role in the token payload.

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

3. Middleware to Check User Role

Modify verifyJwt to check if the user has the appropriate role to access certain routes.

// 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' });
    }
};

4. Protect Admin Routes

Apply the verifyRole middleware to admin-only routes. For example, the route to delete an employee might only be accessible to admins.

// backend/pages/api/employees/[id].ts
export default verifyRole(handler, 'Admin');

Final Thoughts

With these additions, your full-stack application now supports:

Input validation both in the backend and frontend, ensuring only valid data is processed.
Password reset functionality, allowing users to request a password reset and securely update their password.
Role-based access control (RBAC), ensuring that certain sensitive operations (e.g., deleting employees) are only accessible by users with the appropriate role (e.g., Admin).

This makes the app more robust and secure, providing a foundation for managing users with different levels of access. You can further enhance these features by integrating email services for sending actual reset password emails, creating a better UI for roles, etc.