Spaces:
Paused
Paused
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>Create Account - WhatsApp Clone</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet"> | |
| </head> | |
| <body class="register-page"> | |
| <div class="container-fluid h-100"> | |
| <div class="row h-100 justify-content-center align-items-center"> | |
| <div class="col-md-6 col-lg-4"> | |
| <div class="register-card"> | |
| <div class="text-center mb-4"> | |
| <img src="{{ url_for('static', filename='images/logo.svg') }}" alt="WhatsApp Clone" class="logo-small"> | |
| <h2 class="mt-3">Create Account</h2> | |
| <p class="text-muted">Join our messaging platform</p> | |
| </div> | |
| <form id="registerForm"> | |
| <div class="mb-3"> | |
| <label for="name" class="form-label">Full Name</label> | |
| <div class="input-group"> | |
| <span class="input-group-text"><i class="fas fa-user"></i></span> | |
| <input type="text" class="form-control" id="name" name="name" required> | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="email" class="form-label">Email Address</label> | |
| <div class="input-group"> | |
| <span class="input-group-text"><i class="fas fa-envelope"></i></span> | |
| <input type="email" class="form-control" id="email" name="email" required> | |
| </div> | |
| </div> | |
| <div class="d-grid mb-3"> | |
| <button type="submit" class="btn btn-success btn-lg"> | |
| <i class="fas fa-user-plus me-2"></i>Create Account | |
| </button> | |
| </div> | |
| </form> | |
| <div class="text-center"> | |
| <a href="/" class="text-muted"> | |
| <i class="fas fa-arrow-left me-1"></i>Back to Home | |
| </a> | |
| </div> | |
| <div id="alert-container"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| <script src="{{ url_for('static', filename='js/main.js') }}"></script> | |
| <script> | |
| document.getElementById('registerForm').addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const formData = new FormData(e.target); | |
| const data = { | |
| name: formData.get('name').trim(), | |
| email: formData.get('email').trim() | |
| }; | |
| if (!data.name || !data.email) { | |
| showAlert('Please fill in all fields', 'danger'); | |
| return; | |
| } | |
| try { | |
| const response = await fetch('/api/register', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify(data) | |
| }); | |
| const result = await response.json(); | |
| if (result.success) { | |
| showAlert('Account created successfully! Redirecting...', 'success'); | |
| setTimeout(() => { | |
| window.location.href = '/chat'; | |
| }, 2000); | |
| } else { | |
| showAlert(result.message || 'Registration failed', 'danger'); | |
| } | |
| } catch (error) { | |
| console.error('Registration error:', error); | |
| showAlert('Registration failed. Please try again.', 'danger'); | |
| } | |
| }); | |
| function showAlert(message, type) { | |
| const alertContainer = document.getElementById('alert-container'); | |
| const alert = document.createElement('div'); | |
| alert.className = `alert alert-${type} mt-3`; | |
| alert.textContent = message; | |
| alertContainer.innerHTML = ''; | |
| alertContainer.appendChild(alert); | |
| if (type === 'success') { | |
| setTimeout(() => { | |
| alert.remove(); | |
| }, 3000); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |