[JITERA] Integrate Login Form with Express Server

Created by: chi-jitera

Overview

This pull request integrates a login form into the existing project by setting up an Express server to serve the form as a static HTML file. The login form is designed to be user-friendly and visually appealing.

Changes

1. Updated index.ts:

   • Set up an Express server to serve static files from a new public directory.
   • Defined a route to serve the loginForm.html file when navigating to the root URL.

   import express from 'express';
   import path from 'path';
   
   const app = express();
   const PORT = process.env.PORT || 3000;
   
   // Serve static files from the "public" directory
   app.use(express.static(path.join(__dirname, 'public')));
   
   // Define a route to serve the login form
   app.get('/', (req, res) => {
       res.sendFile(path.join(__dirname, 'public', 'loginForm.html'));
   });
   
   app.listen(PORT, () => {
       console.log(`Server is running on http://localhost:${PORT}`);
   });

2. Created public/loginForm.html:

   • Added a new HTML file for the login form, which includes input fields for username and password, a login button, and a link for forgotten passwords.
   • Styled the form to enhance user experience.

   
       
           
           
       
       
           
           
       
       
           LOGIN
       
       
           Forgot password?
       
   
   
       /* Styles for the login form */
   

Notes

• Ensure that Express.js is installed by running npm install express before starting the server.
• This setup allows users to access the login form at http://localhost:3000.