From c33ef02dca57534d24277c426628eaaebb4d2ca4 Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Tue, 30 Dec 2025 13:12:47 +0100
Subject: [PATCH] NEW: add login/pass authentication

---
 index.html          | 14 +++++++++-
 js/firebase/auth.js | 38 +++++++++++++++++++++++++--
 js/settings.js      | 64 +++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 113 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 4fe2a0f..633008c 100644
--- a/index.html
+++ b/index.html
@@ -551,10 +551,22 @@
                 <h2 class="section-title" style="text-align: center;">Sign Up / Sign In</h2>
                 <div class="account-content">
                 <p style="text-align: center;" class="account-description">Make An Account to Allow Syncing Your Library Between Devices.</p>
-                    <div style="display: flex; gap: 50px; align-items: center; justify-content: center; margin-top: 50px;" class="account-buttons">
+                    <div class="account-buttons" id="auth-buttons-container" style="display: flex; gap: 20px; align-items: center; justify-content: center; margin-top: 50px; flex-wrap: wrap;">
                         <button id="firebase-connect-btn" class="btn-secondary">Connect with Google</button>
+                        <button id="toggle-email-auth-btn" class="btn-secondary">Connect with Email</button>
                         <button id="firebase-clear-cloud-btn" class="btn-secondary danger">Clear Cloud Data</button>
                     </div>
+
+                    <div id="email-auth-container" style="display: none; flex-direction: column; gap: 15px; width: 100%; max-width: 320px; margin: 20px auto; padding: 20px; background: var(--card); border-radius: var(--radius); border: 1px solid var(--border);">
+                        <h3 style="text-align: center; margin-bottom: 10px;">Email Authentication</h3>
+                        <input type="email" id="auth-email" class="template-input" placeholder="Email Address">
+                        <input type="password" id="auth-password" class="template-input" placeholder="Password">
+                        <div style="display: flex; gap: 10px; justify-content: center; margin-top: 10px;">
+                            <button id="email-signin-btn" class="btn-primary" style="flex: 1;">Sign In</button>
+                            <button id="email-signup-btn" class="btn-secondary" style="flex: 1;">Sign Up</button>
+                        </div>
+                        <button id="cancel-email-auth-btn" class="btn-secondary" style="width: 100%; margin-top: 10px;">Cancel</button>
+                    </div>
                     <p id="firebase-status" style="text-align: center; padding-top: 15px; color: #8B8B93;">Sync your library across devices</p>
                     <script>
                         if (window.authManager && window.authManager.user) {
diff --git a/js/firebase/auth.js b/js/firebase/auth.js
index e13994d..60d22c3 100644
--- a/js/firebase/auth.js
+++ b/js/firebase/auth.js
@@ -1,6 +1,6 @@
 // js/firebase/auth.js
 import { auth, provider } from './config.js';
-import { signInWithPopup, signOut as firebaseSignOut, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js";
+import { signInWithPopup, signOut as firebaseSignOut, onAuthStateChanged, signInWithEmailAndPassword, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js";
 import { syncManager } from './sync.js';
 
 export class AuthManager {
@@ -44,6 +44,36 @@ export class AuthManager {
         }
     }
 
+    async signInWithEmail(email, password) {
+        if (!auth) {
+            alert("Firebase is not configured.");
+            return;
+        }
+        try {
+            const result = await signInWithEmailAndPassword(auth, email, password);
+            return result.user;
+        } catch (error) {
+            console.error("Email Login failed:", error);
+            alert(`Login failed: ${error.message}`);
+            throw error;
+        }
+    }
+
+    async signUpWithEmail(email, password) {
+        if (!auth) {
+            alert("Firebase is not configured.");
+            return;
+        }
+        try {
+            const result = await createUserWithEmailAndPassword(auth, email, password);
+            return result.user;
+        } catch (error) {
+            console.error("Sign Up failed:", error);
+            alert(`Sign Up failed: ${error.message}`);
+            throw error;
+        }
+    }
+
     async signOut() {
         if (!auth) return;
 
@@ -60,7 +90,8 @@ export class AuthManager {
         const connectBtn = document.getElementById('firebase-connect-btn');
         const clearDataBtn = document.getElementById('firebase-clear-cloud-btn');
         const statusText = document.getElementById('firebase-status');
-        const container = document.getElementById('firebase-controls');
+        const emailContainer = document.getElementById('email-auth-container');
+        const emailToggleBtn = document.getElementById('toggle-email-auth-btn');
 
         if (!connectBtn) return; // UI might not be rendered yet
 
@@ -70,6 +101,8 @@ export class AuthManager {
             connectBtn.onclick = () => this.signOut();
             
             if (clearDataBtn) clearDataBtn.style.display = 'block';
+            if (emailContainer) emailContainer.style.display = 'none';
+            if (emailToggleBtn) emailToggleBtn.style.display = 'none';
 
             if (statusText) statusText.textContent = `Signed in as ${user.email}`;
 
@@ -79,6 +112,7 @@ export class AuthManager {
             connectBtn.onclick = () => this.signInWithGoogle();
             
             if (clearDataBtn) clearDataBtn.style.display = 'none';
+            if (emailToggleBtn) emailToggleBtn.style.display = 'inline-block';
 
             if (statusText) statusText.textContent = 'Sync your library across devices';
         }
diff --git a/js/settings.js b/js/settings.js
index 656a184..a707101 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -10,6 +10,70 @@ export function initializeSettings(scrobbler, player, api, ui) {
     authManager.updateUI(authManager.user);
     initializeFirebaseSettingsUI();
 
+    // Email Auth UI Logic
+    const toggleEmailBtn = document.getElementById('toggle-email-auth-btn');
+    const cancelEmailBtn = document.getElementById('cancel-email-auth-btn');
+    const authContainer = document.getElementById('email-auth-container');
+    const authButtonsContainer = document.getElementById('auth-buttons-container');
+    const emailInput = document.getElementById('auth-email');
+    const passwordInput = document.getElementById('auth-password');
+    const signInBtn = document.getElementById('email-signin-btn');
+    const signUpBtn = document.getElementById('email-signup-btn');
+
+    if (toggleEmailBtn && authContainer && authButtonsContainer) {
+        toggleEmailBtn.addEventListener('click', () => {
+            authContainer.style.display = 'flex';
+            authButtonsContainer.style.display = 'none';
+        });
+    }
+
+    if (cancelEmailBtn && authContainer && authButtonsContainer) {
+        cancelEmailBtn.addEventListener('click', () => {
+            authContainer.style.display = 'none';
+            authButtonsContainer.style.display = 'flex';
+        });
+    }
+
+    if (signInBtn) {
+        signInBtn.addEventListener('click', async () => {
+            const email = emailInput.value;
+            const password = passwordInput.value;
+            if (!email || !password) {
+                alert('Please enter both email and password.');
+                return;
+            }
+            try {
+                await authManager.signInWithEmail(email, password);
+                authContainer.style.display = 'none';
+                authButtonsContainer.style.display = 'flex';
+                emailInput.value = '';
+                passwordInput.value = '';
+            } catch (e) {
+                // Error handled in authManager
+            }
+        });
+    }
+
+    if (signUpBtn) {
+        signUpBtn.addEventListener('click', async () => {
+            const email = emailInput.value;
+            const password = passwordInput.value;
+            if (!email || !password) {
+                alert('Please enter both email and password.');
+                return;
+            }
+            try {
+                await authManager.signUpWithEmail(email, password);
+                authContainer.style.display = 'none';
+                authButtonsContainer.style.display = 'flex';
+                emailInput.value = '';
+                passwordInput.value = '';
+            } catch (e) {
+                 // Error handled in authManager
+            }
+        });
+    }
+
     const lastfmConnectBtn = document.getElementById('lastfm-connect-btn');
     const lastfmStatus = document.getElementById('lastfm-status');
     const lastfmToggle = document.getElementById('lastfm-toggle');