vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

NEW: add login/pass authentication

Browse source
This commit is contained in:
Julien Maille 2025-12-30 13:12:47 +01:00
parent 0d8d362ac9
commit c33ef02dca
3 changed files with 113 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
index.html
View file

@ -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) {

38
js/firebase/auth.js
View file

@ -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';
}

64
js/settings.js
View file

@ -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');