|
import { api } from '../api.js';
|
|
|
|
export class LoginView extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.render();
|
|
this.attachListeners();
|
|
}
|
|
|
|
render() {
|
|
this.innerHTML = `
|
|
<div class="auth-container">
|
|
<div class="auth-box">
|
|
<h1>RBox</h1>
|
|
<p class="auth-subtitle">Self-hosted cloud storage</p>
|
|
|
|
<div class="auth-tabs">
|
|
<button class="auth-tab active" data-tab="login">Login</button>
|
|
<button class="auth-tab" data-tab="register">Sign Up</button>
|
|
</div>
|
|
|
|
<form id="login-form" class="auth-form">
|
|
<input type="text" name="username" placeholder="Username" required class="input-field">
|
|
<input type="password" name="password" placeholder="Password" required class="input-field">
|
|
<button type="submit" class="button button-primary">Login</button>
|
|
<div class="error-message" id="login-error"></div>
|
|
</form>
|
|
|
|
<form id="register-form" class="auth-form" style="display: none;">
|
|
<input type="text" name="username" placeholder="Username" required class="input-field">
|
|
<input type="email" name="email" placeholder="Email" required class="input-field">
|
|
<input type="password" name="password" placeholder="Password" required class="input-field">
|
|
<button type="submit" class="button button-primary">Register</button>
|
|
<div class="error-message" id="register-error"></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
attachListeners() {
|
|
const tabs = this.querySelectorAll('.auth-tab');
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', () => this.switchTab(tab.dataset.tab));
|
|
});
|
|
|
|
this.querySelector('#login-form').addEventListener('submit', (e) => this.handleLogin(e));
|
|
this.querySelector('#register-form').addEventListener('submit', (e) => this.handleRegister(e));
|
|
}
|
|
|
|
switchTab(tab) {
|
|
const tabs = this.querySelectorAll('.auth-tab');
|
|
tabs.forEach(t => t.classList.remove('active'));
|
|
this.querySelector(`[data-tab="${tab}"]`).classList.add('active');
|
|
|
|
const loginForm = this.querySelector('#login-form');
|
|
const registerForm = this.querySelector('#register-form');
|
|
|
|
if (tab === 'login') {
|
|
loginForm.style.display = 'block';
|
|
registerForm.style.display = 'none';
|
|
} else {
|
|
loginForm.style.display = 'none';
|
|
registerForm.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
async handleLogin(e) {
|
|
e.preventDefault();
|
|
const form = e.target;
|
|
const formData = new FormData(form);
|
|
const username = formData.get('username');
|
|
const password = formData.get('password');
|
|
const errorDiv = this.querySelector('#login-error');
|
|
|
|
try {
|
|
await api.login(username, password);
|
|
this.dispatchEvent(new CustomEvent('auth-success'));
|
|
} catch (error) {
|
|
errorDiv.textContent = error.message;
|
|
}
|
|
}
|
|
|
|
async handleRegister(e) {
|
|
e.preventDefault();
|
|
const form = e.target;
|
|
const formData = new FormData(form);
|
|
const username = formData.get('username');
|
|
const email = formData.get('email');
|
|
const password = formData.get('password');
|
|
const errorDiv = this.querySelector('#register-error');
|
|
|
|
try {
|
|
await api.register(username, email, password);
|
|
this.dispatchEvent(new CustomEvent('auth-success'));
|
|
} catch (error) {
|
|
errorDiv.textContent = error.message;
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define('login-view', LoginView);
|