Added signup form and functionality
This commit is contained in:
@ -50,8 +50,8 @@
|
||||
border: 1px solid #D9D9D9;
|
||||
border-radius: 6px;
|
||||
background-color: #D9D9D9;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -81,19 +81,6 @@
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.login-container {
|
||||
width: 95%;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.error-message p {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.signup-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -105,6 +92,19 @@
|
||||
color: #8f8f8f;
|
||||
margin-top: 14px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.signup u:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.error-message p {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
@ -112,30 +112,57 @@
|
||||
{% block content %}
|
||||
<div class="spotlight"></div>
|
||||
<div class="container">
|
||||
<div class="login-signup-container">
|
||||
|
||||
</div>
|
||||
<div class="login-container">
|
||||
<h2>Login</h2>
|
||||
<p class="login-description">Enter your credentials below to login to your account</p>
|
||||
<!-- Login Form -->
|
||||
<div id="loginForm">
|
||||
<h2>Login</h2>
|
||||
<p class="login-description">Enter your credentials below to login to your account</p>
|
||||
|
||||
<form method="POST" action="{{ url_for('main.login_route') }}">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" name="username" required>
|
||||
<form method="POST" action="{{ url_for('main.login_route') }}" id="login-form">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" name="username" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" required class="password-input">
|
||||
</div>
|
||||
|
||||
<button type="submit">Login</button>
|
||||
</form>
|
||||
<div class="signup-container">
|
||||
<p class="signup">Don't have an account? <u onclick="toggleForms()">Sign up</u></p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" required class="password-input">
|
||||
</div>
|
||||
|
||||
<button type="submit">Login</button>
|
||||
</form>
|
||||
<div class="signup-container">
|
||||
<p class="signup">Dont have an account? <u>Sign up</u></p>
|
||||
</div>
|
||||
|
||||
<!-- Signup Form -->
|
||||
<div id="signupForm" class="hidden">
|
||||
<h2>Sign Up</h2>
|
||||
<p class="login-description">Create your account to get started</p>
|
||||
|
||||
<form method="POST" action="{{ url_for('main.signup_route') }}" id="signup-form" onsubmit="return validateForm()">
|
||||
<div class="form-group">
|
||||
<label for="signup-username">Username</label>
|
||||
<input type="text" id="signup-username" name="username" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="signup-email">Email</label>
|
||||
<input type="email" id="signup-email" name="email" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="signup-password">Password</label>
|
||||
<input type="password" id="signup-password" name="password" required class="password-input">
|
||||
</div>
|
||||
|
||||
<button type="submit">Sign Up</button>
|
||||
</form>
|
||||
<div class="signup-container">
|
||||
<p class="signup">Already have an account? <u onclick="toggleForms()">Login</u></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% with messages = get_flashed_messages() %}
|
||||
{% if messages %}
|
||||
@ -148,4 +175,61 @@
|
||||
{% endwith %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleForms() {
|
||||
const loginForm = document.getElementById('loginForm');
|
||||
const signupForm = document.getElementById('signupForm');
|
||||
loginForm.classList.toggle('hidden');
|
||||
signupForm.classList.toggle('hidden');
|
||||
}
|
||||
|
||||
function validateForm() {
|
||||
const username = document.getElementById('signup-username').value;
|
||||
const email = document.getElementById('signup-email').value;
|
||||
const password = document.getElementById('signup-password').value;
|
||||
|
||||
// Username validation
|
||||
if (username.length < 5) {
|
||||
flash('Username must be at least 5 characters long');
|
||||
return false;
|
||||
}
|
||||
|
||||
// Email validation
|
||||
const emailRegex = /^[a-zA-Z][a-zA-Z0-9._-]*@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
||||
if (!emailRegex.test(email)) {
|
||||
flash('Please enter a valid email address');
|
||||
return false;
|
||||
}
|
||||
|
||||
// Password validation
|
||||
const passwordRegex = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,}$/;
|
||||
if (!passwordRegex.test(password)) {
|
||||
flash('Password must be at least 8 characters long and contain a number and a special character');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function flash(message) {
|
||||
const errorDiv = document.querySelector('.error-message');
|
||||
if (!errorDiv) {
|
||||
const newErrorDiv = document.createElement('div');
|
||||
newErrorDiv.className = 'error-message';
|
||||
const p = document.createElement('p');
|
||||
p.className = 'text-danger';
|
||||
p.textContent = message;
|
||||
newErrorDiv.appendChild(p);
|
||||
document.querySelector('.login-container').appendChild(newErrorDiv);
|
||||
} else {
|
||||
const p = errorDiv.querySelector('p') || document.createElement('p');
|
||||
p.className = 'text-danger';
|
||||
p.textContent = message;
|
||||
if (!errorDiv.contains(p)) {
|
||||
errorDiv.appendChild(p);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user