<!doctype html>
<html lang="en" data-bs-theme="auto">
<head><script src="/js/color-modes.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.122.0">
<title>Signup</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/sign-in/">
<link href="/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<!-- Favicons -->
<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="/css/sign-in.css" rel="stylesheet">
</head>
<body class="d-flex align-items-center py-4 bg-body-tertiary">
<main class="form-signin w-100 m-auto">
<form action="/user/register" method="POST">
<h1 class="h3 mb-3 fw-normal">Sign up</h1>
<!-- Show error message if any -->
<% if (message && message.length > 0) { %>
<div class="alert alert-danger" role="alert">
<%= message %>
</div>
<% } %>
<div class="form-floating">
<label for="floatingUsername">Username</label>
<input type="text" class="form-control" id="floatingUsername" name="username" placeholder="Username" required>
</div>
<div class="form-floating">
<label for="floatingFname">First Name</label>
<input type="text" class="form-control" id="floatingFname" name="fname" placeholder="First Name" required>
</div>
<div class="form-floating">
<label for="floatingLname">Last Name</label>
<input type="text" class="form-control" id="floatingLname" name="lname" placeholder="Last Name" required>
</div>
<div class="form-floating">
<label for="floatingInput">Email address</label>
<input type="email" class="form-control" id="floatingInput" name="email" placeholder="name@example.com" required>
</div>
<div class="form-floating">
<label for="floatingPassword">Password</label>
<input type="password" class="form-control" id="floatingPassword" name="rpassword" placeholder="Password" required>
</div>
<div class="form-floating">
<label for="floatingConfirmPassword">Confirm Password</label>
<input type="password" class="form-control" id="floatingConfirmPassword" name="confirm_password" placeholder="Confirm Password" required>
</div>
<button class="btn btn-primary w-100 py-2" type="submit">Sign up</button>
</form>
</main>
<script src="/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script>
// Optional: JavaScript to check if passwords match before form submission
const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
const password = document.getElementById('floatingPassword').value;
const confirmPassword = document.getElementById('floatingConfirmPassword').value;
if (password !== confirmPassword) {
e.preventDefault(); // Prevent form submission
alert('Passwords do not match!');
}
});
</script>
</body>
</html>