Spaces:
Running
Running
File size: 3,820 Bytes
e7a4412 |
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 |
document.addEventListener('DOMContentLoaded', () => {
// Check if user is already signed in
const token = localStorage.getItem('authToken');
if (token) {
window.location.href = '/dashboard.html'; // Redirect to dashboard if already signed in
return;
}
const form = document.querySelector('.ancient-access-form');
const inputs = document.querySelectorAll('.mystical-input-group input');
const passwordInputs = document.querySelectorAll('input[type="password"]');
const passwordToggleButtons = document.querySelectorAll('.toggle-password');
// Input focus effects
inputs.forEach(input => {
input.addEventListener('focus', () => {
input.style.transform = 'scale(1.02)';
input.style.boxShadow = '0 0 15px rgba(193, 162, 87, 0.3)';
});
input.addEventListener('blur', () => {
input.style.transform = 'scale(1)';
input.style.boxShadow = 'none';
});
});
// Password visibility toggle
passwordToggleButtons.forEach((button, index) => {
button.addEventListener('click', () => {
const input = passwordInputs[index];
const eyeIcon = button.querySelector('.eye-icon');
if (input.type === 'password') {
input.type = 'text';
eyeIcon.innerHTML = `
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
<line x1="1" y1="1" x2="23" y2="23"></line>
`;
} else {
input.type = 'password';
eyeIcon.innerHTML = `
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
`;
}
});
});
// Form submission with API integration
form.addEventListener('submit', async (e) => {
e.preventDefault();
// Password validation
const [password, confirmPassword] = passwordInputs;
if (password.value !== confirmPassword.value) {
alert('Sacred Ciphers must align');
return;
}
const email = form.querySelector('input[type="email"]').value;
const username = form.querySelector('input[type="text"]').value;
try {
const response = await fetch('/signup', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
email,
password: password.value,
username
}),
});
const data = await response.json();
if (response.ok) {
// Create a magical reveal effect
const formWrapper = document.querySelector('.magical-form-wrapper');
formWrapper.style.transition = 'transform 0.5s ease, opacity 0.5s ease';
formWrapper.style.transform = 'scale(1.1)';
formWrapper.style.opacity = '0';
alert('Signup successful!');
alert('A confirmation email has been sent!');
setTimeout(() => {
window.location.href = 'signin.html';
}, 500);
} else {
const errorSpan = document.createElement('span');
errorSpan.style.color = 'red';
errorSpan.style.display = 'block';
errorSpan.style.textAlign = 'center';
errorSpan.style.marginTop = '10px';
errorSpan.innerText = data.error;
form.appendChild(errorSpan);
setTimeout(() => {
errorSpan.remove();
}, 3000);
}
} catch (error) {
console.error('Signup error:', error);
alert('A mystical disturbance occurred. Please try again.');
}
});
}); |