rantii - Molodetz Institute

 /**
  * @fileoverview Login Form Component for Rantii
  * @author retoor <retoor@molodetz.nl>
  * @description User authentication form with validation
  * @keywords login, form, authentication, credentials, signin
  */
 import { BaseComponent } from './base-component.js';
 class LoginForm extends BaseComponent {
     init() {
         this.isLoading = false;
         this.render();
         this.bindEvents();
     }
     render() {
         this.setHtml(`
             <form class="login-form">
                 <div class="form-header">
                     <h2 class="form-title">Sign In</h2>
                     <p class="form-subtitle">Enter your DevRant credentials</p>
                 </div>
                 <div class="form-group">
                     <label for="login-username" class="form-label">Username</label>
                     <input type="text"
                            id="login-username"
                            class="form-input"
                            name="username"
                            autocomplete="username"
                            required
                            ${this.isLoading ? 'disabled' : ''}>
                 </div>
                 <div class="form-group">
                     <label for="login-password" class="form-label">Password</label>
                     <input type="password"
                            id="login-password"
                            class="form-input"
                            name="password"
                            autocomplete="current-password"
                            required
                            ${this.isLoading ? 'disabled' : ''}>
                 </div>
                 <div class="form-group form-checkbox">
                     <input type="checkbox"
                            id="login-remember"
                            name="remember"
                            checked
                            ${this.isLoading ? 'disabled' : ''}>
                     <label for="login-remember">Remember me</label>
                 </div>
                 <div class="form-error" hidden></div>
                 <button type="submit"
                         class="form-submit"
                         ${this.isLoading ? 'disabled' : ''}>
                     ${this.isLoading ? '<loading-spinner size="small"></loading-spinner>' : 'Sign In'}
                 </button>
             </form>
         `);
     }
     bindEvents() {
         const form = this.$('form');
         if (form) {
             this.on(form, 'submit', this.handleSubmit);
         }
     }
     async handleSubmit(e) {
         e.preventDefault();
         if (this.isLoading) return;
         const username = this.$('#login-username').value.trim();
         const password = this.$('#login-password').value;
         const remember = this.$('#login-remember').checked;
         if (!username || !password) {
             this.showError('Please enter username and password');
             return;
         }
         this.setLoading(true);
         this.hideError();
         try {
             const result = await this.getAuth()?.login(username, password, remember);
             if (result?.success) {
                 this.emit('login-success', { user: result.user });
                 this.getRouter()?.goHome();
             } else {
                 this.showError(result?.error || 'Login failed');
             }
         } catch (error) {
             this.showError('Connection error. Please try again.');
         } finally {
             this.setLoading(false);
         }
     }
     setLoading(loading) {
         this.isLoading = loading;
         this.render();
         this.bindEvents();
     }
     showError(message) {
         const errorEl = this.$('.form-error');
         if (errorEl) {
             errorEl.textContent = message;
             errorEl.hidden = false;
         }
     }
     hideError() {
         const errorEl = this.$('.form-error');
         if (errorEl) {
             errorEl.hidden = true;
         }
     }
     reset() {
         const form = this.$('form');
         if (form) {
             form.reset();
         }
         this.hideError();
     }
 }
 customElements.define('login-form', LoginForm);
 export { LoginForm };