Spaces:
Runtime error
Runtime error
File size: 6,072 Bytes
d6bb550 f858bb6 d6bb550 | 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 | <!DOCTYPE html>
<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');
// Force a new session check
const checkSession = async () => {
try {
const checkResponse = await fetch('/api/check_session', {
method: 'GET',
credentials: 'same-origin'
});
if (checkResponse.ok) {
window.location.href = result.redirect || '/chat';
} else {
// If session check fails, try direct redirect
window.location.replace(result.redirect || '/chat');
}
} catch (error) {
// If anything fails, force reload to chat page
window.location.replace('/chat');
}
};
// Try redirect after a short delay
setTimeout(checkSession, 500);
} 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>
|