File size: 6,751 Bytes
365de9c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 |
{% extends "base.html" %}
{% block title %}
<title>SignUp</title>
{% endblock %}
{% block content %}
<div class="d-flex justify-content-center align-items-center vh-100" style="background-color: #111827; width: 100%;">
<div class="card p-4" style="min-width: 360px; background-color: #1F2937; border: none; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
<div class="text-center mb-4">
<div class="rounded-circle d-inline-flex align-items-center justify-content-center"
style="width: 60px; height: 60px; background-color: #19c37d;">
<i class="bi bi-person-plus-fill text-white" style="font-size: 1.5rem;"></i>
</div>
<h3 class="mt-3 text-white">Create Account</h3>
<p class="text-white small mt-1">Join our community</p>
</div>
<form id="registerForm">
<div class="mb-3">
<label class="form-label text-white">Email Address</label>
<div class="input-group">
<input type="email" id="email" name="email"
class="form-control"
style="background-color: #374151; border: none; color: white; height: 44px;"
placeholder="your@email.com"
required>
<span class="input-group-text" style="background-color: #374151; border: none;">
<i class="bi bi-envelope text-muted"></i>
</span>
</div>
<div id="emailError" class="text-danger small mt-1"></div>
</div>
<div class="mb-3">
<label class="form-label text-white">Password</label>
<div class="input-group">
<input type="password" id="password" name="password"
class="form-control"
style="background-color: #374151; border: none; color: white; height: 44px;"
placeholder="••••••••"
required>
<span class="input-group-text" style="background-color: #374151; border: none;">
<i class="bi bi-lock text-muted"></i>
</span>
</div>
<div id="passwordError" class="text-danger small mt-1"></div>
</div>
<div class="mb-4">
<label class="form-label text-white">Confirm Password</label>
<div class="input-group">
<input type="password" id="confirmPassword" name="confirmPassword"
class="form-control"
style="background-color: #374151; border: none; color: white; height: 44px;"
placeholder="••••••••"
required>
<span class="input-group-text" style="background-color: #374151; border: none;">
<i class="bi bi-lock-fill text-muted"></i>
</span>
</div>
<div id="confirmPasswordError" class="text-danger small mt-1"></div>
</div>
<div class="d-grid mb-3">
<button type="submit" class="btn rounded-pill py-2 fw-medium"
style="background-color: #19c37d; border: none; color: white;">
<i class="bi bi-person-plus me-2"></i> Sign Up
</button>
</div>
<div class="text-center small text-white pt-2" style="border-top: 1px solid #374151;">
Already registered?
<a href="/login" class="text-success fw-medium" style="text-decoration: none;">Sign In</a>
</div>
</form>
</div>
</div>
{% endblock %}
{% block body_scripts %}
<script>
document.getElementById('registerForm').addEventListener('submit', async function(e) {
e.preventDefault();
// Clear previous errors
document.getElementById('emailError').textContent = '';
document.getElementById('passwordError').textContent = '';
document.getElementById('confirmPasswordError').textContent = '';
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirmPassword').value;
if (password !== confirmPassword) {
document.getElementById('confirmPasswordError').textContent = 'Passwords do not match';
return;
}
try {
const response = await fetch('/new_user', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email, password })
});
const data = await response.json();
if (!response.ok) {
if (data.detail) {
if (Array.isArray(data.detail)) {
data.detail.forEach(error => {
if (error.loc && error.loc.includes('email')) {
document.getElementById('emailError').textContent = error.msg;
}
if (error.loc && error.loc.includes('password')) {
document.getElementById('passwordError').textContent = error.msg;
}
});
} else {
alert(data.detail);
}
}
return;
}
alert('Registration successful!');
window.location.href = '/last_user_chat';
} catch (error) {
console.error('Error:', error);
alert('An error occurred during registration');
}
});
// Add password visibility toggle
document.querySelectorAll('.input-group-text').forEach(icon => {
icon.style.cursor = 'pointer';
icon.addEventListener('click', function() {
const input = this.parentElement.querySelector('input');
if (input.type === 'password') {
input.type = 'text';
this.innerHTML = '<i class="bi bi-eye text-muted"></i>';
} else {
input.type = 'password';
this.innerHTML = this.classList.contains('bi-lock-fill') ?
'<i class="bi bi-lock-fill text-muted"></i>' :
'<i class="bi bi-lock text-muted"></i>';
}
});
});
</script>
{% endblock %} |