Spaces:
Running
Running
File size: 4,179 Bytes
c6fe16a |
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 |
class AuthForm extends HTMLElement {
constructor() {
super();
this.mode = 'login'; // 'login' or 'register'
}
connectedCallback() {
this.render();
this.setupEventListeners();
}
toggleMode() {
this.mode = this.mode === 'login' ? 'register' : 'login';
this.render();
this.setupEventListeners();
}
async handleSubmit(e) {
e.preventDefault();
const formData = new FormData(e.target);
const data = Object.fromEntries(formData.entries());
try {
const endpoint = this.mode === 'login' ? '/auth/login' : '/auth/register';
const response = await fetch(`${API_BASE_URL}${endpoint}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
});
if (!response.ok) {
throw new Error(await response.text());
}
const { token, user } = await response.json();
localStorage.setItem('token', token);
localStorage.setItem('user', JSON.stringify(user));
if (user.role === 'admin') {
redirectTo('/admin-dashboard.html');
} else {
redirectTo('/dashboard.html');
}
} catch (error) {
showToast(error.message, 'error');
}
}
setupEventListeners() {
this.querySelector('form').addEventListener('submit', (e) => this.handleSubmit(e));
this.querySelector('#toggleMode').addEventListener('click', () => this.toggleMode());
}
render() {
this.innerHTML = `
<style>
.auth-form input {
transition: all 0.2s;
}
.auth-form input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 1px #6366f1;
}
</style>
<form class="auth-form space-y-6">
<div class="space-y-4">
<div>
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
<input id="email" name="email" type="email" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none">
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700">Password</label>
<input id="password" name="password" type="password" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none">
</div>
${this.mode === 'register' ? `
<div>
<label for="name" class="block text-sm font-medium text-gray-700">Full Name</label>
<input id="name" name="name" type="text" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none">
</div>
` : ''}
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
${this.mode === 'login' ? 'Sign in' : 'Create account'}
</button>
</div>
<div class="text-center text-sm text-gray-600">
<button id="toggleMode" type="button" class="font-medium text-purple-600 hover:text-purple-500">
${this.mode === 'login' ? 'Need an account? Register' : 'Already have an account? Sign in'}
</button>
</div>
</form>
`;
}
}
customElements.define('auth-form', AuthForm); |