rantii/js/pages/login-page.js

/**
 * @fileoverview Login Page Component for Rantii
 * @author retoor <retoor@molodetz.nl>
 * @description User authentication page
 * @keywords login, page, auth, signin, authentication
 */

import { BaseComponent } from '../components/base-component.js';

class LoginPage extends BaseComponent {
    init() {
        this.render();
        this.bindEvents();
    }

    render() {
        const isLoggedIn = this.isLoggedIn();
        const user = this.getCurrentUser();

        this.addClass('page', 'login-page');

        if (isLoggedIn) {
            this.setHtml(`
                <div class="login-container">
                    <header class="login-header">
                        <button class="back-btn" aria-label="Go back">
                            <svg viewBox="0 0 24 24" width="24" height="24">
                                <path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
                            </svg>
                        </button>
                        <h1 class="login-logo">Rantii</h1>
                    </header>
                    <div class="logged-in-info">
                        <user-avatar size="large" username="${user?.username || ''}"></user-avatar>
                        <p class="logged-in-text">Logged in as <strong>${user?.username || ''}</strong></p>
                        <div class="logged-in-actions">
                            <button class="btn btn-primary home-btn">Go Home</button>
                            <button class="btn btn-secondary logout-btn">Logout</button>
                        </div>
                        <p class="switch-text">Want to use a different account?</p>
                        <button class="btn btn-link switch-btn">Switch Account</button>
                    </div>
                </div>
            `);
        } else {
            this.setHtml(`
                <div class="login-container">
                    <header class="login-header">
                        <button class="back-btn" aria-label="Go back">
                            <svg viewBox="0 0 24 24" width="24" height="24">
                                <path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
                            </svg>
                        </button>
                        <h1 class="login-logo">Rantii</h1>
                    </header>
                    <login-form></login-form>
                </div>
            `);
        }
    }

    bindEvents() {
        this.on(this, 'click', this.handleClick);
        this.on(this, 'login-success', this.handleLoginSuccess);
    }

    handleClick(e) {
        const backBtn = e.target.closest('.back-btn');
        const logoutBtn = e.target.closest('.logout-btn');
        const switchBtn = e.target.closest('.switch-btn');
        const homeBtn = e.target.closest('.home-btn');

        if (backBtn) {
            window.history.back();
        } else if (logoutBtn) {
            this.getAuth()?.logout();
            this.render();
        } else if (switchBtn) {
            this.getAuth()?.logout();
            this.render();
        } else if (homeBtn) {
            this.getRouter()?.goHome();
        }
    }

    handleLoginSuccess() {
        this.getRouter()?.goHome();
    }
}

customElements.define('login-page', LoginPage);

export { LoginPage };