From df199cf9a5d1eacba2d7851c5ea1783b57e7a6f7 Mon Sep 17 00:00:00 2001
From: "theis.gaedigk" <theis.gaedigk@icloud.com>
Date: Sat, 21 Jun 2025 00:29:41 +0200
Subject: [PATCH] changed frontend design Also added some notes

---
 backend/views/dashboard.ejs | 104 +++++++++++++++++++++++++++++++-----
 backend/views/login.ejs     |  83 ++++++++++++++--------------
 scheme.sql                  |   1 +
 3 files changed, 133 insertions(+), 55 deletions(-)
diff --git a/backend/views/dashboard.ejs b/backend/views/dashboard.ejs
index d7c65b6..5bd881a 100644
--- a/backend/views/dashboard.ejs
+++ b/backend/views/dashboard.ejs
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <!--
     <script>
-      import { createUser } from "../database.js";
-
       window.history.pushState({}, "", "<%= newLink %>");
-    </script>
+    </script>    
+    -->
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Dashboard</title>
@@ -16,19 +16,97 @@
       crossorigin="anonymous"
     />
   </head>
-  <body>
-    <div class="row">
-        <div class="column">
-              <h1>Hello, <%= sqlResult.user.first_name %>.</h1>  
+  <body class="bg-dark text-light">
+    <div class="container py-5">
+      <!-- Header -->
+      <div class="d-flex justify-content-between align-items-center mb-4">
+        <div>
+          <h2>Hello, <%= sqlResult.user.first_name %>!</h2>
         </div>
-        <div class="column">
-                <h1>Welcome to your dashboard.</h1>
+        <div>
+          <h3>Welcome to your dashboard</h3>
         </div>
-        <div class="column">
-            <button class="btn btn-danger">Logout</button>
+        <div>
+          <a href="/" class="btn btn-danger">Logout</a>
         </div>
-    </div>
+      </div>
 
+      <!-- User creation form -->
+      <div class="card text-dark shadow">
+        <div class="card-body">
+          <h4 class="card-title mb-4">Create a new user</h4>
+          <form action="/createUser" method="post">
+            <div class="row g-3">
+              <div class="col-md-6">
+                <label for="first_name" class="form-label">First Name</label>
+                <input
+                  type="text"
+                  name="first_name"
+                  id="first_name"
+                  class="form-control"
+                  placeholder="First name"
+                  required
+                />
+              </div>
+
+              <div class="col-md-6">
+                <label for="last_name" class="form-label">Last Name</label>
+                <input
+                  type="text"
+                  name="last_name"
+                  id="last_name"
+                  class="form-control"
+                  placeholder="Last name"
+                  required
+                />
+              </div>
+
+              <div class="col-md-6">
+                <label for="username" class="form-label">Username</label>
+                <input
+                  type="text"
+                  name="username"
+                  id="username"
+                  class="form-control"
+                  placeholder="Username"
+                  required
+                />
+              </div>
+
+              <div class="col-md-6">
+                <label for="email" class="form-label">Email</label>
+                <input
+                  type="email"
+                  name="email"
+                  id="email"
+                  class="form-control"
+                  placeholder="Email"
+                  required
+                />
+              </div>
+
+              <div class="col-md-6">
+                <label for="password" class="form-label">Password</label>
+                <input
+                  type="password"
+                  name="password"
+                  id="password"
+                  class="form-control"
+                  placeholder="Password"
+                  required
+                />
+              </div>
+
+              <div class="col-12">
+                <button type="submit" class="btn btn-primary w-100">
+                  Create User
+                </button>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
 
     <script
       src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
@@ -36,4 +114,4 @@
       crossorigin="anonymous"
     ></script>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/backend/views/login.ejs b/backend/views/login.ejs
index e182c95..9ee69c2 100644
--- a/backend/views/login.ejs
+++ b/backend/views/login.ejs
@@ -1,14 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script>
-      const reloadState = "<%= reload %>";
-
-      if (reloadState === "true") {
-        window.location.href = "/";
-      }
-    </script>
-
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Login Page</title>
@@ -19,43 +11,49 @@
       crossorigin="anonymous"
     />
   </head>
-  <body>
-    <div class="container">
-      <div class="row">
-        <h1>Login page</h1>
-      </div>
-      <div class="row">
-        <form action="/login" method="post">
-          <div class="input-group">
-            <input
-              type="text"
-              name="username"
-              placeholder="Username"
-              class="form-control"
-              required
-            />
-            <input
-              type="password"
-              name="password"
-              placeholder="Password"
-              class="form-control"
-              required
-            />
-            <input
-              type="submit"
-              value="Login"
-              class="btn btn-primary"
-              onsubmit="this.form.submit()"
-            />
-          </div>
-        </form>
-      </div>
+  <body class="bg-dark">
+    <div class="container d-flex justify-content-center align-items-center" style="min-height: 100vh;">
+      <div class="card shadow-lg" style="width: 100%; max-width: 400px;">
+        <div class="card-body">
+          <h2 class="card-title text-center mb-4">Login</h2>
 
-      <div class="alert alert-danger alter-dismissable fade show" role="alert">
-        <%= error %>
-      <button class="btn-close" aria-label="close" data-bs-dismiss="alert"></button>
+          <% if (error) { %>
+            <div class="alert alert-danger text-center" role="alert">
+              <%= error %>
+            </div>
+          <% } %>
+
+          <form action="/login" method="post">
+            <div class="mb-3">
+              <label for="username" class="form-label">Username</label>
+              <input
+                type="text"
+                class="form-control"
+                id="username"
+                name="username"
+                placeholder="Enter username"
+                required
+              />
+            </div>
+            <div class="mb-3">
+              <label for="password" class="form-label">Password</label>
+              <input
+                type="password"
+                class="form-control"
+                id="password"
+                name="password"
+                placeholder="Enter password"
+                required
+              />
+            </div>
+            <div class="d-grid">
+              <button type="submit" class="btn btn-primary">Login</button>
+            </div>
+          </form>
+        </div>
       </div>
     </div>
+
     <script
       src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
       integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q"
@@ -63,3 +61,4 @@
     ></script>
   </body>
 </html>
+
diff --git a/scheme.sql b/scheme.sql
index d89d7f4..f61d0fb 100644
--- a/scheme.sql
+++ b/scheme.sql
@@ -1,3 +1,4 @@
+-- Table structure for the database
 CREATE TABLE users (
     id INT PRIMARY KEY AUTO_INCREMENT,
     username VARCHAR(50) NOT NULL UNIQUE,
