changed frontend design
Also added some notes
This commit is contained in:
@@ -1,11 +1,11 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
<!--
|
||||||
<script>
|
<script>
|
||||||
import { createUser } from "../database.js";
|
|
||||||
|
|
||||||
window.history.pushState({}, "", "<%= newLink %>");
|
window.history.pushState({}, "", "<%= newLink %>");
|
||||||
</script>
|
</script>
|
||||||
|
-->
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<title>Dashboard</title>
|
<title>Dashboard</title>
|
||||||
@@ -16,19 +16,97 @@
|
|||||||
crossorigin="anonymous"
|
crossorigin="anonymous"
|
||||||
/>
|
/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="bg-dark text-light">
|
||||||
<div class="row">
|
<div class="container py-5">
|
||||||
<div class="column">
|
<!-- Header -->
|
||||||
<h1>Hello, <%= sqlResult.user.first_name %>.</h1>
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||||
|
<div>
|
||||||
|
<h2>Hello, <%= sqlResult.user.first_name %>!</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div>
|
||||||
<h1>Welcome to your dashboard.</h1>
|
<h3>Welcome to your dashboard</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div>
|
||||||
<button class="btn btn-danger">Logout</button>
|
<a href="/" class="btn btn-danger">Logout</a>
|
||||||
</div>
|
</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
|
<script
|
||||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
|
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
|
||||||
|
|||||||
@@ -1,14 +1,6 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<script>
|
|
||||||
const reloadState = "<%= reload %>";
|
|
||||||
|
|
||||||
if (reloadState === "true") {
|
|
||||||
window.location.href = "/";
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<title>Login Page</title>
|
<title>Login Page</title>
|
||||||
@@ -19,43 +11,49 @@
|
|||||||
crossorigin="anonymous"
|
crossorigin="anonymous"
|
||||||
/>
|
/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="bg-dark">
|
||||||
<div class="container">
|
<div class="container d-flex justify-content-center align-items-center" style="min-height: 100vh;">
|
||||||
<div class="row">
|
<div class="card shadow-lg" style="width: 100%; max-width: 400px;">
|
||||||
<h1>Login page</h1>
|
<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>
|
||||||
<div class="row">
|
<% } %>
|
||||||
|
|
||||||
<form action="/login" method="post">
|
<form action="/login" method="post">
|
||||||
<div class="input-group">
|
<div class="mb-3">
|
||||||
|
<label for="username" class="form-label">Username</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
name="username"
|
|
||||||
placeholder="Username"
|
|
||||||
class="form-control"
|
class="form-control"
|
||||||
|
id="username"
|
||||||
|
name="username"
|
||||||
|
placeholder="Enter username"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="password" class="form-label">Password</label>
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="password"
|
||||||
name="password"
|
|
||||||
placeholder="Password"
|
|
||||||
class="form-control"
|
class="form-control"
|
||||||
|
id="password"
|
||||||
|
name="password"
|
||||||
|
placeholder="Enter password"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
<input
|
</div>
|
||||||
type="submit"
|
<div class="d-grid">
|
||||||
value="Login"
|
<button type="submit" class="btn btn-primary">Login</button>
|
||||||
class="btn btn-primary"
|
|
||||||
onsubmit="this.form.submit()"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</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
|
<script
|
||||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
|
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
|
||||||
integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q"
|
integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q"
|
||||||
@@ -63,3 +61,4 @@
|
|||||||
></script>
|
></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
-- Table structure for the database
|
||||||
CREATE TABLE users (
|
CREATE TABLE users (
|
||||||
id INT PRIMARY KEY AUTO_INCREMENT,
|
id INT PRIMARY KEY AUTO_INCREMENT,
|
||||||
username VARCHAR(50) NOT NULL UNIQUE,
|
username VARCHAR(50) NOT NULL UNIQUE,
|
||||||
|
|||||||
Reference in New Issue
Block a user