changed frontend design
Also added some notes
This commit is contained in:
@@ -1,11 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--
|
||||
<script>
|
||||
import { createUser } from "../database.js";
|
||||
|
||||
window.history.pushState({}, "", "<%= newLink %>");
|
||||
</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>
|
||||
|
||||
<!-- 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"
|
||||
|
||||
@@ -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>
|
||||
<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>
|
||||
|
||||
<% if (error) { %>
|
||||
<div class="alert alert-danger text-center" role="alert">
|
||||
<%= error %>
|
||||
</div>
|
||||
<div class="row">
|
||||
<% } %>
|
||||
|
||||
<form action="/login" method="post">
|
||||
<div class="input-group">
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">Username</label>
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
placeholder="Username"
|
||||
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"
|
||||
name="password"
|
||||
placeholder="Password"
|
||||
class="form-control"
|
||||
id="password"
|
||||
name="password"
|
||||
placeholder="Enter password"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="submit"
|
||||
value="Login"
|
||||
class="btn btn-primary"
|
||||
onsubmit="this.form.submit()"
|
||||
/>
|
||||
</div>
|
||||
<div class="d-grid">
|
||||
<button type="submit" class="btn btn-primary">Login</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-danger alter-dismissable fade show" role="alert">
|
||||
<%= error %>
|
||||
<button class="btn-close" aria-label="close" data-bs-dismiss="alert"></button>
|
||||
</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>
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
-- Table structure for the database
|
||||
CREATE TABLE users (
|
||||
id INT PRIMARY KEY AUTO_INCREMENT,
|
||||
username VARCHAR(50) NOT NULL UNIQUE,
|
||||
|
||||
Reference in New Issue
Block a user