express-generator-typescript 2.4.6 → 2.4.8

package/lib/project-files/src/public/scripts/users.js

@@ -1,9 +1,18 @@
-// ***** Start **** //
+// **** Variables **** //
 
-displayUsers();
+const DateFormatter = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+});
+
+const formatDate = (date) => DateFormatter.format(new Date(date));
 
 
-// ***** Fetch and display users **** //
+// **** Run **** //
+
+// Start
+displayUsers();
 
 /**
  * Call api
@@ -12,59 +21,22 @@ function displayUsers() {
   Http
     .get('/api/users/all')
     .then(resp => resp.json())
-    .then((resp) => {
-      var allUsers = resp.users;
-      // Empty the anchor
+    .then(resp => {
+      var allUsersTemplate = document.getElementById('all-users-template'),
+        allUsersTemplateHtml = allUsersTemplate.innerHTML,
+        template = Handlebars.compile(allUsersTemplateHtml);
       var allUsersAnchor = document.getElementById('all-users-anchor');
-      allUsersAnchor.innerHTML = '';
-      // Append users to anchor
-      allUsers.forEach((user) => {
-        allUsersAnchor.innerHTML += getUserDisplayEle(user);
+      allUsersAnchor.innerHTML = template({
+        users: resp.users.map(user => ({
+          ...user,
+          createdFormatted: formatDate(user.created),
+        })),
       });
     });
 }
 
-/**
- * Get user display element
- */
-function getUserDisplayEle(user) {
-  return (
-    `<div class="user-display-ele">
-
-      <div class="normal-view">
-        <div>Name: ${user.name}</div>
-        <div>Email: ${user.email}</div>
-        <button class="edit-user-btn" data-user-id="${user.id}" data-user-role="${user.role}">
-          Edit
-        </button>
-        <button class="delete-user-btn" data-user-id="${user.id}">
-          Delete
-        </button>
-      </div>
-
-      <div class="edit-view">
-        <div>
-          Name: <input class="name-edit-input" value="${user.name}">
-        </div>
-        <div>
-          Email: <input class="email-edit-input" value="${user.email}">
-        </div>
-        <button class="submit-edit-btn" data-user-id="${user.id}">
-          Submit
-        </button>
-        <button class="cancel-edit-btn" data-user-id="${user.id}">
-          Cancel
-        </button>
-      </div>
-    </div>`
-  );
-}
-
-
-// **** Add, Edit, and Delete Users **** //
-
 // Setup event listener for button click
-document.addEventListener('click', function (event) {
+document.addEventListener('click', event => {
   event.preventDefault();
   var ele = event.target;
   if (ele.matches('#add-user-btn')) {
@@ -77,8 +49,6 @@ document.addEventListener('click', function (event) {
     submitEdit(ele);
   } else if (ele.matches('.delete-user-btn')) {
     deleteUser(ele);
-  } else if (ele.matches('#logout-btn')) {
-    logoutUser();
   }
 }, false);
 
@@ -93,13 +63,17 @@ function addUser() {
       id: -1,
       name: nameInput.value,
       email: emailInput.value,
-      role: 0,
+      created: new Date(),
     },
   };
   // Call api
   Http
     .post('/api/users/add', data)
-    .then(() => displayUsers());
+    .then(() => {
+      nameInput.value = '';
+      emailInput.value = '';
+      displayUsers();
+    });
 }
 
 /**
@@ -130,13 +104,14 @@ function submitEdit(ele) {
   var nameInput = userEle.getElementsByClassName('name-edit-input')[0];
   var emailInput = userEle.getElementsByClassName('email-edit-input')[0];
   var id = ele.getAttribute('data-user-id');
-  var role = ele.getAttribute('data-user-role');
+  var created = ele.getAttribute('data-user-created');
+    console.log(ele, created)
   var data = {
     user: {
       id: Number(id),
       name: nameInput.value,
       email: emailInput.value,
-      role: Number(role),
+      created: new Date(created),
     },
   };
 	Http
@@ -153,12 +128,3 @@ function deleteUser(ele) {
     .delete('/api/users/delete/' + id)
     .then(() => displayUsers());
 }
-
-
-// **** Logout **** //
-
-function logoutUser() {
-  Http
-    .get('/api/auth/logout')
-    .then(() => window.location.href = '/');
-}

package/lib/project-files/src/public/stylesheets/users.css

@@ -27,15 +27,13 @@ body .add-user-col #add-user-btn {
   margin-bottom: 10px;
 }
 
-body .add-user-col #logout-btn {
-  margin-top: 25px;
-  margin-bottom: 10px;
-  font-size: 15px;
-}
-
 
 /** Users Display Column **/
 
+.email-edit {
+  padding-bottom: 8px;
+}
+
 body .users-column .user-display-ele {
   padding-bottom: 10px;
 }

package/lib/project-files/src/repos/UserRepo.ts

@@ -56,7 +56,12 @@ async function update(user: IUser): Promise<void> {
   const db = await orm.openDb();
   for (let i = 0; i < db.users.length; i++) {
     if (db.users[i].id === user.id) {
-      db.users[i] = user;
+      const dbUser = db.users[i];
+      db.users[i] = {
+        ...dbUser,
+        name: user.name,
+        email: user.email,
+      };
       return orm.saveDb(db);
     }
   }

package/lib/project-files/src/repos/database.json

@@ -1 +1,22 @@
-{"users":[{"name":"Sean Maxwell","email":"sean.maxwell@gmail.com","pwdHash":"$2b$12$1mE2OI9hMS/rgH9Mi0s85OM2V5gzm7aF3gJIWH1y0S1MqVBueyjsy","role":1,"id":159123164363},{"name":"Gordan Freeman","email":"gordan.freeman@halflife.com","pwdHash":"$2b$12$1mE2OI9hMS/rgH9Mi0s85OM2V5gzm7aF3gJIWH1y0S1MqVBueyjsy","role":0,"id":906524522143},{"name":"John Smith","email":"jsmith@yahoo.com","pwdHash":"$2b$12$1mE2OI9hMS/rgH9Mi0s85OM2V5gzm7aF3gJIWH1y0S1MqVBueyjsy","role":0,"id":357437875835}]}
+{
+  "users": [
+    {
+      "id": 366115170645,
+      "name": "Sean Maxwell",
+      "email": "smaxwell@example.com",
+      "created": "2024-03-22T05:14:36.252Z"
+    },
+    {
+      "id": 310946254456,
+      "name": "John Smith",
+      "email": "john.smith@example.com",
+      "created": "2024-03-22T05:20:55.079Z"
+    },
+    {
+      "id": 143027113460,
+      "name": "Gordan Freeman",
+      "email": "nova@prospect.com",
+      "created": "2024-03-22T05:42:18.895Z"
+    }
+  ]
+}

package/lib/project-files/src/routes/types/express/misc.ts

@@ -1,7 +1,5 @@
 import * as e from 'express';
 
-import { ISessionUser } from '@src/models/User';
-
 
 // **** Express **** //
 
@@ -10,7 +8,5 @@ export interface IReq<T = void> extends e.Request {
 }
 
 export interface IRes extends e.Response {
-  locals: {
-    sessionUser?: ISessionUser;
-  };
+  locals: Record<string, unknown>;
 }

package/lib/project-files/src/routes/types/types.ts

@@ -1,8 +1,6 @@
 import * as e from 'express';
 import { Query } from 'express-serve-static-core';
 
-import { ISessionUser } from '@src/models/User';
-
 
 // **** Express **** //
 
@@ -14,9 +12,3 @@ export interface IReqQuery<T extends Query, U = void> extends e.Request {
   query: T;
   body: U;
 }
-
-export interface IRes extends e.Response {
-  locals: {
-    sessionUser: ISessionUser;
-  };
-}

package/lib/project-files/src/views/users.html

@@ -1,10 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
+
+  <!-- Head -->
   <head>
     <meta charset="UTF-8">
     <title>Users</title>
     <link rel="stylesheet" type="text/css" href="/stylesheets/users.css" />
+
+    <!-- Handlebars -->
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.8/handlebars.min.js"></script>
+
+    <!-- Bootstrap -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+      crossorigin="anonymous"
+    ></script>
   </head>
+
+  <!-- Body -->
   <body>
 
     <!-- Add Users -->
@@ -13,13 +33,26 @@
         Add User:
       </div>
       <div>
-        <input id="name-input" placeholder="Name" />
+        <input
+          id="name-input"
+          type="text"
+          class="form-control"
+          placeholder="Name"
+        />
       </div>
       <div>
-        <input id="email-input" placeholder="Email" />
+        <input
+          id="email-input"
+          type="email"
+          class="form-control"
+          placeholder="Email"
+        />
       </div>
       <div>
-        <button id="add-user-btn">
+        <button
+          id="add-user-btn"
+          class="btn btn-success"
+        >
           Add
         </button>
       </div>
@@ -27,11 +60,73 @@
 
     <!-- Display Users -->
     <div class="users-column">
-      <div class="column-header">Users:</div>
+      <div class="column-header">
+        Users:
+      </div>
+
       <div id="all-users-anchor"></div>
-    </div>
+      <script
+        id="all-users-template"
+        type="text/x-handlebars-template"
+      >
+        {{#each users}}
+          <div class="user-display-ele">
+            <div class="normal-view">
+              <div><b>Name:</b> {{name}}</div>
+              <div><b>Email:</b> {{email}}</div>
+              <div><b>Created:</b> {{createdFormatted}}</div>
+              <button
+                type="button"
+                class="btn btn-primary edit-user-btn"
+                data-user-id="{{id}}"
+              >
+                Edit
+              </button>
+              <button
+                class="btn btn-danger delete-user-btn"
+                data-user-id="{{id}}"
+              >
+                Delete
+              </button>
+            </div>
 
+            <div class="edit-view">
+              <div>
+                Name:&nbsp;
+                <input
+                  type="text"
+                  class="form-control name-edit-input"
+                  value="{{name}}"
+                />
+              </div>
+              <div class="email-edit">
+                Email:&nbsp;
+                <input
+                  type="email"
+                  class="form-control email-edit-input"
+                  value="{{email}}"
+                />
+              </div>
+              <button
+                class="btn btn-primary submit-edit-btn"
+                data-user-id="{{id}}"
+                data-user-created="{{created}}"
+              >
+                Submit
+              </button>
+              <button
+                class="btn btn-secondary cancel-edit-btn"
+                data-user-id="{{id}}"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        {{/each}}
+      </script>
+    </div>
   </body>
+
   <script src="scripts/http.js"></script>
   <script src="scripts/users.js"></script>
 </html>

package/lib/project-files-auth/package.json

@@ -35,11 +35,12 @@
     "helmet": "^6.0.0",
     "inserturlparams": "^1.0.1",
     "jet-logger": "^1.3.1",
-    "jet-validator": "^1.0.3",
     "jet-paths": "^1.0.5",
+    "jet-validator": "^1.0.3",
     "jsonfile": "^6.1.0",
     "jsonwebtoken": "^8.5.1",
     "module-alias": "^2.2.2",
+    "moment": "^2.30.1",
     "morgan": "^1.10.0",
     "ts-command-line-args": "^2.4.2"
   },
@@ -54,7 +55,7 @@
     "@types/jsonwebtoken": "^8.5.9",
     "@types/morgan": "^1.9.3",
     "@types/node": "^18.7.14",
-    "@types/supertest": "^2.0.12",
+    "@types/supertest": "^6.0.2",
     "@typescript-eslint/eslint-plugin": "^5.36.1",
     "@typescript-eslint/parser": "^5.36.1",
     "eslint": "^8.23.0",
@@ -63,7 +64,7 @@
     "fs-extra": "^10.1.0",
     "jasmine": "^4.3.0",
     "nodemon": "^2.0.19",
-    "supertest": "^6.2.4",
+    "supertest": "^6.3.4",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.1.0",
     "typescript": "^4.8.2"

package/lib/project-files-auth/spec/support/apiCb.ts

@@ -0,0 +1,76 @@
+import { CallbackHandler } from 'supertest';
+import moment from 'moment';
+import logger from 'jet-logger';
+
+import { TApiCb, TRes } from 'spec/types/misc';
+
+
+/**
+ * API callback function.
+ */
+function apiCb(
+  cb: TApiCb,
+  dateParam = 'created',
+  printErr?: boolean,
+): CallbackHandler {
+  return (err: Error, res: TRes) => {
+    if (printErr) {
+      logger.err(err);
+    }
+    _strToDate(res.body, dateParam);
+    return cb(res);
+  };
+}
+
+/**
+ * When date objects get sent through supertest they are converted to 
+ * iso-strings. This will cause "toEqual()"" tests to fail, so we need to 
+ * convert them back to Date objects.
+ */
+function _strToDate(
+  param: unknown,
+  prop: string,
+): void {
+  return _iterate(param, prop);
+}
+
+/**
+ * Interate object recursively and convert string-dates to "Date" objects.
+ */
+function _iterate(param: unknown, prop: string): void {
+  if (!param || typeof param !== 'object') {
+    return;
+  }
+  const paramF = param as Record<string, unknown>;
+  // For Arrays
+  if (Array.isArray(paramF)) {
+    for (const item of paramF) {
+      _iterate(item, prop);
+    }
+    return;
+  }
+  // Check valid string or Date object. If undefined just skip
+  const val = paramF[prop];
+  if (
+    (typeof val !== 'undefined') && 
+    !((typeof val === 'string') || (val instanceof Date)) && 
+    !moment(val as string | Date).isValid()
+  ) {
+    throw new Error('Property must be a valid date-string or Date() object');
+  }
+  // Convert and iterate
+  if (typeof val !== 'undefined') {
+    paramF[prop] = new Date(val as string | Date);
+  }
+  for (const key in paramF) {
+    const oval = paramF[key];
+    if (typeof oval === 'object' && key !== prop) {
+      _iterate(oval, prop);
+    }
+  }
+}
+
+
+// **** Export default **** //
+
+export default apiCb;

package/lib/project-files-auth/spec/support/login.ts

@@ -1,4 +1,5 @@
-import { SuperTest, Test, Response } from 'supertest';
+import { Test, Response } from 'supertest';
+import TestAgent from 'supertest/lib/agent';
 
 import User, { UserRoles } from '@src/models/User';
 import UserRepo from '@src/repos/UserRepo';
@@ -7,24 +8,21 @@ import PwdUtil from '@src/util/PwdUtil';
 import Paths from './Paths';
 
 
-// **** Variables **** //
-
+// Login Credentials
 const LoginCreds = {
   email: 'jsmith@gmail.com',
   password: 'Password@1',
 } as const;
 
-
-// **** Functions **** //
-
 /**
  * Login a user.
  */
-function login(beforeAgent: SuperTest<Test>, done: (arg: string) => void) {
+function login(beforeAgent: TestAgent<Test>, done: (arg: string) => void) {
   // Setup dummy data
   const role = UserRoles.Admin,
     pwdHash = PwdUtil.hashSync(LoginCreds.password),
-    loginUser = User.new('john smith', LoginCreds.email, role, pwdHash);
+    loginUser = User.new('john smith', LoginCreds.email, new Date(), role, 
+      pwdHash);
   // Add spy
   spyOn(UserRepo, 'getOne').and.resolveTo(loginUser);
   // Call Login API