implement captcha to register and login

js/components/auth-modal.js

@@ -4,6 +4,7 @@
 
 import { t, i18n } from '../i18n.js'
 import { auth } from '../services/auth.js'
+import './pow-captcha.js'
 
 class AuthModal extends HTMLElement {
     constructor() {
@@ -12,6 +13,7 @@ class AuthModal extends HTMLElement {
         this.generatedUuid = null
         this.error = null
         this.loading = false
+        this.loginAttempts = 0
     }
 
     connectedCallback() {
@@ -94,6 +96,12 @@ class AuthModal extends HTMLElement {
                     >
                 </div>
 
+                ${this.loginAttempts >= 3 ? `
+                    <div class="form-group">
+                        <pow-captcha id="login-captcha"></pow-captcha>
+                    </div>
+                ` : ''}
+
                 <button type="submit" class="btn btn-primary btn-lg btn-block" ${this.loading ? 'disabled' : ''}>
                     ${this.loading ? t('auth.loggingIn') : t('auth.login')}
                 </button>
@@ -117,6 +125,10 @@ class AuthModal extends HTMLElement {
 
             ${this.error ? `<div class="auth-error">${this.error}</div>` : ''}
 
+            <div class="form-group">
+                <pow-captcha id="register-captcha"></pow-captcha>
+            </div>
+
             <button 
                 class="btn btn-primary btn-lg btn-block" 
                 id="generate-uuid"
@@ -210,6 +222,16 @@ class AuthModal extends HTMLElement {
             return
         }
 
+        // Check captcha after 3 failed attempts
+        if (this.loginAttempts >= 3) {
+            const captcha = this.querySelector('#login-captcha')
+            if (!captcha?.isSolved()) {
+                this.error = t('captcha.error')
+                this.render()
+                return
+            }
+        }
+
         this.loading = true
         this.error = null
         this.render()
@@ -219,18 +241,34 @@ class AuthModal extends HTMLElement {
         this.loading = false
 
         if (result.success) {
+            this.loginAttempts = 0
             this.hide()
             this.dispatchEvent(new CustomEvent('login', { detail: { success: true } }))
         } else {
+            this.loginAttempts++
             this.error = result.error || t('auth.invalidUuid')
             this.render()
         }
     }
 
     async handleRegister() {
+        // Require captcha for registration
+        const captcha = this.querySelector('#register-captcha')
+        if (!captcha?.isSolved()) {
+            this.error = t('captcha.error')
+            this.render()
+            return
+        }
+
         this.loading = true
         this.error = null
-        this.render()
+        
+        // Update button state without full re-render (keeps captcha state)
+        const btn = this.querySelector('#generate-uuid')
+        if (btn) {
+            btn.disabled = true
+            btn.textContent = t('auth.creating')
+        }
 
         const result = await auth.createAccount()