etc404/thymecrunch
1
0
Fork 0
mirror of https://gitlab.com/etc404/software-engineering-project.git synced 2026-05-10 20:52:58 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added create-account + fixes

Browse Source
This commit is contained in:
kaipher7
2026-03-09 00:49:23 -06:00
parent 5ce0af0e92
commit 43dd602a48
3 changed files with 233 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/create-account.html
+104
View File
@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Create Thyme Crunch Account</title>
<link rel="stylesheet" href="css/create-account.css">
</head>
<body>
<header class="top-header">
<img src="images/header_left.png" alt="Violin f-hole shape to the left of header." class="swirl">
<h1 class="site-name">Thyme Crunch</h1>
<img src="images/header_right.png" alt="Violin f-hole shape to the right of header." class="swirl">
</header>
<!-- Main Content -->
<main class="main-content">
<div class="login-box">
<h2>Create Account</h2>
<form id="createUserForm">
<div class="rows">
<label for="username">Username</label>
<input type="text" id="username" required>
</div>
<div class="rows">
<label for="email">Email</label>
<input type="email" id="email" required>
</div>
<div class="rows">
<label for="password">Password</label>
<input type="password" id="password" required>
</div>
<div class="rows">
<label for="confirmPassword">Confirm Password</label>
<input type="password" id="confirmPassword" required>
</div>
<p id="passwordError"></p>
<button type="submit">Create</button>
</form>
</div>
</main>
</div>
</body>
</html>
<script>
document.addEventListener("DOMContentLoaded", function () {
const passwordField = document.getElementById("password");
const confirmPasswordField = document.getElementById("confirmPassword");
function checkPasswords() {
if (confirmPasswordField.value === "") {
confirmPasswordField.classList.remove("invalid");
return;
}
if (passwordField.value !== confirmPasswordField.value) {
confirmPasswordField.classList.add("invalid");
} else {
confirmPasswordField.classList.remove("invalid");
}
}
passwordField.addEventListener("input", checkPasswords);
confirmPasswordField.addEventListener("input", checkPasswords);
document.getElementById("createUserForm").addEventListener("submit", function(e) {
const password = passwordField.value;
const confirmPassword = confirmPasswordField.value;
if (password !== confirmPassword) {
e.preventDefault();
confirmPasswordField.classList.add("invalid");
return;
}
const userData = {
username: document.getElementById("username").value,
email: document.getElementById("email").value,
hashedpassword: password,
role: "USER"
};
fetch("http://localhost:8080/api/users", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(userData)
});
e.preventDefault();
});
});
</script>
demo/css/create-account.css
+128
View File
@@ -0,0 +1,128 @@
:root {
--dusty-red: #D43F3F;
--dusty-red-hover: #C73636;
--dark-yellow: #FFD27F;
--pale-yellow: #FFECB3;
--peach: #F5A96E;
--dark: #850000;
}
/* login.css */
body, html {
height: 100%;
margin: 0;
font-family: 'Roboto', sans-serif;
background-color: var(--pale-yellow);
}
.container {
display: flex;
height: 100vh;
}
/* Header Styles */
.top-header {
position: sticky;
top: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--dusty-red);
color: var(--dark-yellow);
padding: 10px 20px;
height: 60px;
gap: 40px;
}
.top-header .swirl {
height: 40px;
width: auto;
margin: 0 20px;
}
.site-name {
font-size: 2.5em;
font-weight: bold;
letter-spacing: 4px;
font-family: 'EB Garamond', serif;}
/* Main Content */
.main-content {
flex-grow: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 40px;}
/* Login Box */
.login-box {
background-color: var(--peach);
padding: 45px;
border-radius: 20px;
width: 600px;
color: var(--dark);
}
.login-box h2 {
font-size: 50px;
text-align: center;
font-weight: bold;
margin-bottom: 30px;
margin-top: 8px;
}
.login-box rows {
display: flex;
gap: 10px;
align-items: center;
}
.login-box label {
font-size: 20px;
width: 30%;
margin: 0px;
font-weight: bold;
text-align: right;
}
.login-box input {
flex: 1;
padding: 10px;
margin: auto;
margin-top: 5px;
margin-left: 25px;
border-radius: 10px;
border: 2.5px solid var(--dusty-red);
background-color: var(--pale-yellow);
font-size: 20px;
box-sizing: border-box;
}
.login-box input.invalid {
border: 4px solid var(--dusty-red);
}
.login-box button {
display: block;
margin: 0 auto;
width: 40%;
padding: 10px;
margin-top: 20px;
background-color: var(--dusty-red);
color: white;
font-weight: bold;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.1s ease;
transition: transform 0.2s ease;
}
.login-box button:hover {
background-color: var(--dusty-red-hover);
transform: scale(1.05);
}
demo/login.html
+1 -1
View File
@@ -18,7 +18,7 @@
<main class="main-content"> <main class="main-content">
<div class="login-box"> <div class="login-box">
<h2>Log In</h2> <h2>Log In</h2>
<form action="AuthController" method="post"> <form action="/login" method="post">
<label for="username">Username</label> <label for="username">Username</label>
<input type="text" id="user" name="user" required> <input type="text" id="user" name="user" required>