express-generator-typescript 2.4.6 → 2.4.8

package/lib/project-files-auth/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')) {
@@ -93,13 +65,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 +106,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 +130,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-auth/src/public/stylesheets/users.css

@@ -22,20 +22,13 @@ body .add-user-col input {
   margin-bottom: 10px;
 }
 
-body .add-user-col #add-user-btn {
-  margin-top: 2px;
-  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-auth/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-auth/src/repos/database.json

@@ -1 +1 @@
-{"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":[{"name":"Sean Maxwell","email":"sean.maxwell@gmail.com","pwdHash":"$2b$12$1mE2OI9hMS/rgH9Mi0s85OM2V5gzm7aF3gJIWH1y0S1MqVBueyjsy","role":1,"id":159123164363,"created":"2024-03-22T05:20:55.079Z"},{"name":"John Smith","email":"john.smith@yahoo.com","pwdHash":"$2b$12$1mE2OI9hMS/rgH9Mi0s85OM2V5gzm7aF3gJIWH1y0S1MqVBueyjsy","role":0,"id":357437875835,"created":"2024-03-22T05:20:55.079Z"},{"id":28541714318,"name":"Gordan Freeman","email":"nova@prospect.com","created":"2024-03-23T15:56:42.615Z"}]}

package/lib/project-files-auth/src/services/UserService.ts

@@ -31,10 +31,7 @@ function addOne(user: IUser): Promise<void> {
 async function updateOne(user: IUser): Promise<void> {
   const persists = await UserRepo.persists(user.id);
   if (!persists) {
-    throw new RouteError(
-      HttpStatusCodes.NOT_FOUND,
-      USER_NOT_FOUND_ERR,
-    );
+    throw new RouteError(HttpStatusCodes.NOT_FOUND, USER_NOT_FOUND_ERR);
   }
   // Return user
   return UserRepo.update(user);
@@ -46,10 +43,7 @@ async function updateOne(user: IUser): Promise<void> {
 async function _delete(id: number): Promise<void> {
   const persists = await UserRepo.persists(id);
   if (!persists) {
-    throw new RouteError(
-      HttpStatusCodes.NOT_FOUND,
-      USER_NOT_FOUND_ERR,
-    );
+    throw new RouteError(HttpStatusCodes.NOT_FOUND, USER_NOT_FOUND_ERR);
   }
   // Delete user
   return UserRepo.delete(id);

package/lib/project-files-auth/src/views/login.html

@@ -1,10 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
+
+  <!-- Head -->
   <head>
     <meta charset="UTF-8">
     <title>Login</title>
     <link rel="stylesheet" type="text/css" href="/stylesheets/login.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>
 
     <div class="login-block">
@@ -12,16 +32,18 @@
 
       <div class="login-input">
         Username:<br/>
-        <input id="email-input" type="text"/>
+        <input id="email-input" type="text" class="form-control"/>
       </div>
       
       <div class="login-input">
         Password:<br/>
-        <input id="pwd-input" type="password"/>
+        <input id="pwd-input" type="password" class="form-control"/>
       </div>
 
       <div>
-        <button id="login-btn">Login</button>
+        <button id="login-btn" class="btn btn-primary">
+          Login
+        </button>
       </div>
 
       <div class="default-login-user">
@@ -30,6 +52,7 @@
     </div>
 
   </body>
+  
   <script src="scripts/http.js"></script>
   <script src="scripts/login.js"></script>
 </html>

package/lib/project-files-auth/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,18 +33,32 @@
         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>
-      <div>
-        <button id="logout-btn">
+        <button
+          id="logout-btn"
+          class="btn btn-secondary"
+        >
           Logout
         </button>
       </div>
@@ -32,11 +66,75 @@
 
     <!-- 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 class="display-wrapper">
+                <div><b>Name:</b> {{name}}</div>
+                <div><b>Email:</b> {{email}}</div>
+                <div><b>Created:</b> {{createdFormatted}}</div>
+              </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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "express-generator-typescript",
-  "version": "2.4.6",
+  "version": "2.4.8",
   "description": "Generate new Express applications similar to express-generate which but sets it up to use TypeScript instead",
   "scripts": {
     "express-generator-typescript": "node bin/cli.js",

package/lib/project-files/spec/support/types.ts

@@ -1 +0,0 @@
-export type TReqBody = string | object | undefined;

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

@@ -1 +0,0 @@
-export type TReqBody = string | object | undefined;