rbox/static/js/components/login-view.js

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">Register</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);