Home Fixcode byआचार्य आशीष मिश्र -April 12, 2025 0 Login Widget Customizer Customize Widget Backend Configuration API Key: Auth Domain: Project ID: Storage Bucket: Messaging Sender ID: App ID: (These settings only update the code in the 'Full Widget Code' box below) Main Colors Primary: Danger: Success: Info: Text & Backgrounds Widget BG: Dark Text: Medium Text: Light Text: Placeholder: Borders & Radius Divider/Border: Input Border: Widget Border: Widget Brdr W:px Radius (Lg):px Radius (Md):px Input Focus: Sizing & Font Widget Width:px W. Padding:px Base Font:px Font Family: Input Pad V:px Input Pad H:px Button Pad V:px Button Pad H:px Message Styles Error BG: Error Border: Success BG: Success Brdr: Success Text: Info BG: Info Border: Provider Colors Facebook: GitHub: Yahoo: (Google button color is fixed) Previous Next Backend Configuration Full Widget Code Copy <!doctype html> <style> :root { --primary-color: #007bff; --danger-color: #dc3545; --success-color: #28a745; --info-color: #17a2b8; --bg-light: #ffffff; --dark-text: #212529; --medium-text: #495057; --light-text: #6c757d; --grey-text: #adb5bd; --border-color: #dee2e6; --input-border-color: #ced4da; --widget-border-color: #007bff; --widget-border-width: 2px; --border-radius-lg: 6px; --border-radius-md: 4px; --input-focus-shadow-color: rgba(0, 123, 255, 0.15); --widget-width-preview: 300px; --widget-padding-preview: 18px; --widget-base-font-size: 13px; --widget-font: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"; --input-padding-vertical: 9px; --input-padding-horizontal: 10px; --button-padding-vertical: 9px; --button-padding-horizontal: 9px; --danger-light-bg: #ffe3e3; --danger-border-color: #f5c6cb; --success-light-bg: #eaf7ec; --success-border: #a1d9a5; --success-dark-text: #155724; --info-light-bg: #e8f7fa; --info-border: #bee5eb; --facebook-color: #1877F2; --github-color: #333333; --yahoo-color: #6001d2; --primary-light-bg: #e7f5ff; --bg-body: #f8f9fa; --box-shadow-light: 0px 1px 2px rgba(0, 0, 0, 0.05); --box-shadow-strong: 0px 2px 6px rgba(0, 0, 0, 0.1); } .firebase-auth-widget-container, .firebase-auth-logout-box, .firebase-auth-popup { font-family: var(--widget-font); font-size: var(--widget-base-font-size); box-sizing: border-box; } .firebase-auth-widget-container *, .firebase-auth-logout-box *, .firebase-auth-popup * { box-sizing: border-box; } .firebase-auth-widget-hidden { display: none !important; } #firebase-auth-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 999; } #firebase-auth-backdrop.firebase-auth-widget-hidden { display: none !important; } .firebase-auth-widget-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--widget-width-preview); background: var(--bg-light); padding: var(--widget-padding-preview); border-radius: var(--border-radius-lg); box-shadow: var(--box-shadow-strong); display: flex; flex-direction: column; align-items: center; z-index: 1000; border: var(--widget-border-width) solid var(--widget-border-color); color: var(--dark-text); max-height: 90vh; overflow-y: auto; } .firebase-auth-widget-box { width: 100%; text-align: center; } .firebase-auth-widget-box h2 { color: var(--dark-text); font-weight: 600; font-size: calc(var(--widget-base-font-size) * 1.1); margin: 0 0 12px 0; line-height: 1.3; flex-shrink: 0; } .firebase-auth-input-group { margin-bottom: 10px; width: 100%; flex-shrink: 0;} .firebase-auth-input-group input { width: 100%; padding: var(--input-padding-vertical) var(--input-padding-horizontal); border: 1px solid var(--input-border-color); border-radius: var(--border-radius-md); font-size: var(--widget-base-font-size); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; background-color: var(--bg-light); color: var(--dark-text); margin-bottom: 6px; font-family: inherit; } .firebase-auth-input-group input:last-child { margin-bottom: 0; } .firebase-auth-input-group input::placeholder { color: var(--grey-text); opacity: 1; } .firebase-auth-input-group input:hover { background-color: #f8f9fa; } .firebase-auth-input-group input:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 2px var(--input-focus-shadow-color); background-color: var(--bg-light); } .firebase-auth-action-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: var(--button-padding-vertical) var(--button-padding-horizontal); border: none; cursor: pointer; border-radius: var(--border-radius-md); font-size: var(--widget-base-font-size); font-weight: 600; transition: all 0.2s ease; margin-top: 5px; font-family: inherit; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; } .firebase-auth-action-btn:hover { opacity: 1; transform: translateY(-1px); filter: brightness(1.1); } .firebase-auth-action-btn:disabled { opacity: 0.65; cursor: not-allowed; filter: brightness(1); transform: none; } .firebase-auth-sign-in-btn { background-color: var(--primary-color); color: white; } .firebase-auth-sign-up-btn { background-color: var(--success-color); color: white; } .firebase-auth-reset-btn { background-color: var(--info-color); color: white; } .firebase-auth-email-link-btn { color: var(--medium-text); background-color: #f1f3f5; border: 1px solid var(--input-border-color); margin-top: 10px; text-transform: none; letter-spacing: normal; font-weight: 500; } .firebase-auth-email-link-btn:hover { background-color: #e9ecef; border-color: #adb5bd; filter: brightness(1); } .firebase-auth-link-btn { background: none; border: none; color: var(--primary-color); font-size: calc(var(--widget-base-font-size) * 0.85); cursor: pointer; padding: 0; text-align: right; width: 100%; display: block; margin-top: 4px; margin-bottom: 8px; font-family: inherit; flex-shrink: 0;} .firebase-auth-link-btn:hover { text-decoration: underline; } .firebase-auth-toggle-link { background: none; border: none; color: var(--primary-color); font-size: calc(var(--widget-base-font-size) * 0.92); cursor: pointer; padding: 5px 0; text-align: center; width: 100%; display: block; margin-top: 10px; font-weight: 500; font-family: inherit; flex-shrink: 0;} .firebase-auth-toggle-link:hover { text-decoration: underline; } .firebase-auth-provider-btn { margin: 5px 0; color: white; text-transform: none; letter-spacing: normal; font-weight: 500; border-radius: var(--border-radius-md); } .firebase-auth-provider-btn:hover { filter: brightness(1.1); } .firebase-auth-google-btn { background: #DB4437; } .firebase-auth-facebook-btn-style { background: var(--facebook-color); } .firebase-auth-github-btn-style { background: var(--github-color); } .firebase-auth-yahoo-btn-style { background: var(--yahoo-color); } .firebase-auth-message { color: var(--danger-color); margin-top: 12px; margin-bottom: 12px; min-height: 1.4em; font-size: calc(var(--widget-base-font-size) * 0.92); font-weight: 500; text-align: center; width: 100%; line-height: 1.4; word-wrap: break-word; padding: 6px 8px; border-radius: var(--border-radius-md); border: 1px solid transparent; flex-shrink: 0; } .firebase-auth-message.info { color: var(--info-color); background-color: var(--info-light-bg); border-color: var(--info-border); } .firebase-auth-message.error { color: var(--danger-color); background-color: var(--danger-light-bg); border-color: var(--danger-border-color); } .firebase-auth-message.success { color: var(--success-dark-text); background-color: var(--success-light-bg); border-color: var(--success-border); } .firebase-auth-divider { font-size: calc(var(--widget-base-font-size) * 0.85); color: var(--light-text); margin: 15px 0; text-align: center; position: relative; width: 100%; line-height: 1; flex-shrink: 0; } .firebase-auth-divider::before, .firebase-auth-divider::after { content: ''; position: absolute; top: 50%; width: 37%; height: 1px; background-color: var(--border-color); transform: translateY(-50%); } .firebase-auth-divider::before { left: 0; } .firebase-auth-divider::after { right: 0; } .firebase-auth-legal-text { font-size: calc(var(--widget-base-font-size) * 0.77); color: var(--light-text); margin-top: 10px; line-height: 1.3; text-align: center; width: 100%; flex-shrink: 0; } .firebase-auth-legal-text a { color: var(--primary-color); text-decoration: none; } .firebase-auth-legal-text a:hover { text-decoration: underline; } .firebase-auth-popup { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto; max-width: 90%; min-width: 250px; background-color: var(--success-light-bg); color: var(--success-dark-text); border: 1px solid var(--success-border); border-radius: var(--border-radius-lg); padding: 18px 25px; box-shadow: var(--box-shadow-strong); z-index: 2000; text-align: center; font-size: 14px; font-weight: 600; line-height: 1.4; } .firebase-auth-popup p { margin: 0; padding: 0; } .firebase-auth-logout-box { width: auto; padding: 5px 8px; position: fixed; bottom: 15px; left: 15px; background-color: var(--bg-light); color: var(--dark-text); border-radius: 18px; box-shadow: var(--box-shadow-light); border: 1px solid var(--border-color); display: flex; align-items: center; gap: 6px; z-index: 9999; transition: background-color 0.2s ease, box-shadow 0.2s ease; } .firebase-auth-logout-box.firebase-auth-widget-hidden { display: none !important; } .firebase-auth-logout-box:hover { box-shadow: var(--box-shadow-strong); } .firebase-auth-profile-img { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-color); display: block; } .firebase-auth-profile-initial { width: 24px; height: 24px; border-radius: 50%; background-color: var(--primary-color); color: white; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; line-height: 1; text-transform: uppercase; border: 1px solid var(--border-color); } .firebase-auth-logout-box button { background-color: transparent; color: var(--danger-color); border: 1px solid var(--danger-light-bg); padding: 3px 8px; font-size: 11px; font-weight: 600; cursor: pointer; margin: 0; width: auto; border-radius: var(--border-radius-md); transition: all 0.2s ease; font-family: inherit; } .firebase-auth-logout-box button:hover { background-color: var(--danger-color); color: white; border-color: var(--danger-color); text-decoration: none; transform: translateY(-1px); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); } #firebase-auth-reset-password-section p { font-size: calc(var(--widget-base-font-size) * 0.92); color: var(--medium-text); margin-bottom: 10px; line-height: 1.4; flex-shrink: 0; } </style> <div id="firebase-auth-backdrop" class="firebase-auth-widget-hidden"></div> <div id="firebase-auth-login-popup" class="firebase-auth-widget-container firebase-auth-widget-hidden"> <div class="firebase-auth-widget-box"> <div id="firebase-auth-sign-in-section"><h2>Sign In</h2><div class="firebase-auth-input-group"><input type="email" id="firebase-auth-email-input-signin" placeholder="Enter email" aria-label="Email address for Sign In" autocomplete="email" /><input type="password" id="firebase-auth-password-input-signin" placeholder="Enter password" aria-label="Password for Sign In" autocomplete="current-password" /></div><button onclick="firebaseAuthToggleView('reset')" class="firebase-auth-link-btn">Forgot Password?</button><button id="firebase-auth-signin-btn" onclick="firebaseAuthSignInWithEmailPassword()" class="firebase-auth-action-btn firebase-auth-sign-in-btn">Sign In</button><button onclick="firebaseAuthToggleView('signup')" class="firebase-auth-toggle-link">New user? Sign Up</button></div> <div id="firebase-auth-sign-up-section" class="firebase-auth-widget-hidden"><h2>Create Account</h2><div class="firebase-auth-input-group"><input type="email" id="firebase-auth-email-input-signup" placeholder="Enter email" aria-label="Email address for Sign Up" autocomplete="email" /><input type="password" id="firebase-auth-password-input-signup" placeholder="Create password (min. 6 chars)" aria-label="Password for Sign Up" autocomplete="new-password" /><input type="password" id="firebase-auth-password-confirm-signup" placeholder="Confirm password" aria-label="Confirm Password for Sign Up" autocomplete="new-password" /></div><button onclick="firebaseAuthSignUpWithEmailPassword()" class="firebase-auth-action-btn firebase-auth-sign-up-btn">Sign Up</button><button onclick="firebaseAuthToggleView('signin')" class="firebase-auth-toggle-link">Already have an account? Sign In</button></div> <div id="firebase-auth-reset-password-section" class="firebase-auth-widget-hidden"><h2>Reset Password</h2><p>Enter your email address below and we'll send you a link to reset your password.</p><div class="firebase-auth-input-group"><input type="email" id="firebase-auth-email-input-reset" placeholder="Enter your email" aria-label="Email address for Password Reset" autocomplete="email" /></div><button onclick="firebaseAuthSendPasswordReset()" class="firebase-auth-action-btn firebase-auth-reset-btn">Send Reset Link</button><button onclick="firebaseAuthToggleView('signin')" class="firebase-auth-toggle-link">Back to Sign In</button></div> <p id="firebase-auth-message" class="firebase-auth-message" aria-live="polite"></p> <div id="firebase-auth-other-methods-divider" class="firebase-auth-divider">OR</div> <button id="firebase-auth-magic-link-btn" onclick="firebaseAuthSendEmailLink()" class="firebase-auth-action-btn firebase-auth-email-link-btn">Send Magic Link (Passwordless)</button> <div id="firebase-auth-provider-divider" class="firebase-auth-divider" style="margin-top: 10px;">OR USE</div> <button id="firebase-auth-google-btn" onclick="firebaseAuthLoginWithProvider('google')" class="firebase-auth-action-btn firebase-auth-provider-btn firebase-auth-google-btn">Continue with Google</button> <button id="firebase-auth-facebook-btn" onclick="firebaseAuthLoginWithProvider('facebook')" class="firebase-auth-action-btn firebase-auth-provider-btn firebase-auth-facebook-btn-style">Continue with Facebook</button> <button id="firebase-auth-github-btn" onclick="firebaseAuthLoginWithProvider('github')" class="firebase-auth-action-btn firebase-auth-provider-btn firebase-auth-github-btn-style">Continue with GitHub</button> <button id="firebase-auth-yahoo-btn" onclick="firebaseAuthLoginWithProvider('yahoo')" class="firebase-auth-action-btn firebase-auth-provider-btn firebase-auth-yahoo-btn-style">Continue with Yahoo</button> <p class="firebase-auth-legal-text">By signing in, you agree to our <a href="#">Policy</a> & <a href="#">Terms</a>.</p> </div> </div> <div id="firebase-auth-logout-box" class="firebase-auth-logout-box firebase-auth-widget-hidden"><img id="firebase-auth-profile-pic" src="" alt="User profile picture" class="firebase-auth-profile-img firebase-auth-widget-hidden" /><div id="firebase-auth-profile-fallback" class="firebase-auth-profile-initial firebase-auth-widget-hidden"><span id="firebase-auth-profile-initial-letter"></span></div><button onclick="firebaseAuthLogout()">Logout</button></div> <div id="firebase-auth-success-popup" class="firebase-auth-popup firebase-auth-widget-hidden"><p id="firebase-auth-popup-message"></p></div> <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app-compat.js"></script> <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-auth-compat.js"></script> <script> (function() { "use strict"; const firebaseConfig = { apiKey: "PLACEHOLDER_API_KEY", authDomain: "PLACEHOLDER_AUTH_DOMAIN", projectId: "PLACEHOLDER_PROJECT_ID", storageBucket: "PLACEHOLDER_STORAGE_BUCKET", messagingSenderId: "PLACEHOLDER_SENDER_ID", appId: "PLACEHOLDER_APP_ID" }; const EMAIL_STORAGE_KEY = 'loginWidgetEmailForSignIn'; const actionCodeSettings = { url: window.location.href.split('?')[0].split('#')[0], handleCodeInApp: true }; const SIGNUP_SUCCESS_DELAY = 4000; const RESET_SUCCESS_DELAY = 3000; const fallbackColors = ["#007bff","#6f42c1","#e83e8c","#dc3545","#fd7e14","#ffc107","#28a745","#20c997","#17a2b8","#6c757d"]; let auth = null; let app = null; const loginPopup=document.getElementById('firebase-auth-login-popup'),logoutBox=document.getElementById('firebase-auth-logout-box'),backdrop=document.getElementById('firebase-auth-backdrop'),profilePic=document.getElementById('firebase-auth-profile-pic'),profileFallback=document.getElementById('firebase-auth-profile-fallback'),initialSpan=document.getElementById('firebase-auth-profile-initial-letter'),messageElement=document.getElementById('firebase-auth-message'),signInSection=document.getElementById('firebase-auth-sign-in-section'),signUpSection=document.getElementById('firebase-auth-sign-up-section'),resetPasswordSection=document.getElementById('firebase-auth-reset-password-section'),emailInputSignIn=document.getElementById('firebase-auth-email-input-signin'),passwordInputSignIn=document.getElementById('firebase-auth-password-input-signin'),signInBtn=document.getElementById('firebase-auth-signin-btn'),emailInputSignUp=document.getElementById('firebase-auth-email-input-signup'),passwordInputSignUp=document.getElementById('firebase-auth-password-input-signup'),passwordConfirmInputSignUp=document.getElementById('firebase-auth-password-confirm-signup'),emailInputReset=document.getElementById('firebase-auth-email-input-reset'),successPopup=document.getElementById('firebase-auth-success-popup'),popupMessageElement=document.getElementById('firebase-auth-popup-message'),otherMethodsDivider=document.getElementById('firebase-auth-other-methods-divider'),magicLinkBtn=document.getElementById('firebase-auth-magic-link-btn'),providerDivider=document.getElementById('firebase-auth-provider-divider'),googleBtn=document.getElementById('firebase-auth-google-btn'),facebookBtn=document.getElementById('firebase-auth-facebook-btn'),githubBtn=document.getElementById('firebase-auth-github-btn'),yahooBtn=document.getElementById('firebase-auth-yahoo-btn'); const getVisibleEmailInput=()=>{ return signInSection && !signInSection.classList.contains('firebase-auth-widget-hidden') ? emailInputSignIn : (signUpSection && !signUpSection.classList.contains('firebase-auth-widget-hidden') ? emailInputSignUp : emailInputReset); }; function isValidEmail(e){return!!e&&/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(e).toLowerCase())}; function getUserColorIndex(e){if(!e)return 0;let t=0;for(let n=0;n<e.length;n++)t=e.charCodeAt(n)+((t<<5)-t),t&=t;return Math.abs(t)%fallbackColors.length}; function showLoginPopupMessage(e,t="error"){if(messageElement){messageElement.textContent=e;messageElement.className="firebase-auth-message";if(e&&t)messageElement.classList.add(t)}}; function clearMessages(){showLoginPopupMessage("")}; function showSuccessPopup(message, duration) { if (!successPopup || !popupMessageElement) return; popupMessageElement.textContent = message; successPopup.classList.remove('firebase-auth-widget-hidden'); setTimeout(() => { successPopup.classList.add('firebase-auth-widget-hidden'); }, duration); } function cleanUrlAfterSignIn(){if(window.history&&window.history.replaceState){const e=window.location.protocol+"//"+window.location.host+window.location.pathname+window.location.hash;try{window.history.replaceState({path:e},"",e)}catch(err){console.warn("Could not clean URL:",err)}}}; function displayGlobalError(e){console.error("GLOBAL WIDGET ERROR:",e);if(messageElement){showLoginPopupMessage(e,"error");if(loginPopup)loginPopup.classList.remove("firebase-auth-widget-hidden")}else if(loginPopup){loginPopup.innerHTML=`<p style='color:red; font-weight:bold; padding: 10px;'>${e}</p>`;loginPopup.classList.remove("firebase-auth-widget-hidden")}else{alert("Widget Error: "+e)}if(backdrop)backdrop.classList.remove("firebase-auth-widget-hidden")}; function initializeApp(){ const requiredElements = [loginPopup, logoutBox, backdrop, profilePic, profileFallback, initialSpan, messageElement, signInSection, signUpSection, resetPasswordSection, emailInputSignIn, passwordInputSignIn, signInBtn, emailInputSignUp, passwordInputSignUp, passwordConfirmInputSignUp, emailInputReset, successPopup, popupMessageElement]; if (requiredElements.some(el => !el)) { displayGlobalError("Widget Initialization Error: Missing required HTML elements."); return; } try { if (typeof firebase === "undefined" || !firebase.initializeApp || !firebase.auth) { throw new Error("Backend service SDKs not loaded correctly."); } if (!firebase.apps.length) { app = firebase.initializeApp(firebaseConfig); } else { app = firebase.app(); } auth = firebase.auth(app); console.log("Authentication service initialized for project:", app.options.projectId); setupAuthentication(); handleEmailLinkSignInOnLoad(); } catch(e) { console.error("Initialization Failed:", e); displayGlobalError("Widget failed to start: " + (e.message || "Init error")); } }; function setupAuthentication(){if(!auth)return;auth.setPersistence(firebase.auth.Auth.Persistence.LOCAL).then(()=>{auth.onAuthStateChanged(handleAuthStateChange)}).catch(e=>{console.error("Persistence error:",e);auth.onAuthStateChanged(handleAuthStateChange)})}; window.firebaseAuthToggleView=e=>{if(!signInSection||!signUpSection||!resetPasswordSection)return;signInSection.classList.add("firebase-auth-widget-hidden");signUpSection.classList.add("firebase-auth-widget-hidden");resetPasswordSection.classList.add("firebase-auth-widget-hidden");successPopup&&successPopup.classList.add("firebase-auth-widget-hidden");clearMessages();let t=!0;"signin"===e?signInSection.classList.remove("firebase-auth-widget-hidden"):"signup"===e?signUpSection.classList.remove("firebase-auth-widget-hidden"):"reset"===e&&(resetPasswordSection.classList.remove("firebase-auth-widget-hidden"),t=!1);[otherMethodsDivider,magicLinkBtn,providerDivider,googleBtn,facebookBtn,githubBtn,yahooBtn].forEach(el=>{el&&el.classList.toggle("firebase-auth-widget-hidden",!t)})}; function handleAuthStateChange(e){ successPopup&&successPopup.classList.add("firebase-auth-widget-hidden");if(!loginPopup||!logoutBox||!backdrop||!profilePic||!profileFallback||!initialSpan||!passwordInputSignIn)return;const t=auth&&auth.isSignInWithEmailLink(window.location.href);if(e){loginPopup.classList.add("firebase-auth-widget-hidden");backdrop.classList.add("firebase-auth-widget-hidden");logoutBox.classList.remove("firebase-auth-widget-hidden");if(e.photoURL){profilePic.src=e.photoURL;profilePic.classList.remove("firebase-auth-widget-hidden");profileFallback.classList.add("firebase-auth-widget-hidden")}else{const i=(e.displayName?.charAt(0)||e.email?.charAt(0)||"U").toUpperCase(),c=getUserColorIndex(e.uid);initialSpan.textContent=i;if(profileFallback){profileFallback.style.backgroundColor=fallbackColors[c];profileFallback.classList.remove("firebase-auth-widget-hidden")}profilePic.classList.add("firebase-auth-widget-hidden")}console.log("User logged in:",e.uid);messageElement?.classList.contains("success")?setTimeout(()=>clearMessages(),3500):clearMessages();passwordInputSignIn.value="";if(passwordInputSignUp)passwordInputSignUp.value="";if(passwordConfirmInputSignUp)passwordConfirmInputSignUp.value="";if(emailInputReset)emailInputReset.value=""}else{logoutBox.classList.add("firebase-auth-widget-hidden");profilePic.classList.add("firebase-auth-widget-hidden");profileFallback.classList.add("firebase-auth-widget-hidden");passwordInputSignIn.value="";if(passwordInputSignUp)passwordInputSignUp.value="";if(passwordConfirmInputSignUp)passwordConfirmInputSignUp.value="";if(emailInputReset)emailInputReset.value="";console.log("User logged out or not logged in.");if(!t){loginPopup.classList.remove("firebase-auth-widget-hidden");backdrop.classList.remove("firebase-auth-widget-hidden");firebaseAuthToggleView("signin");clearMessages()}else{loginPopup.classList.add("firebase-auth-widget-hidden");backdrop.classList.add("firebase-auth-widget-hidden")}}}; window.firebaseAuthSignUpWithEmailPassword=()=>{ if(!auth||!emailInputSignUp||!passwordInputSignUp||!passwordConfirmInputSignUp)return;const e=emailInputSignUp.value.trim(),t=passwordInputSignUp.value,n=passwordConfirmInputSignUp.value;clearMessages();if(!isValidEmail(e))return showLoginPopupMessage("Invalid email format","error"),void emailInputSignUp.focus();if(t.length<6)return showLoginPopupMessage("Password must be at least 6 characters","error"),void passwordInputSignUp.focus();if(t!==n)return showLoginPopupMessage("Passwords do not match","error"),void passwordConfirmInputSignUp.focus();showLoginPopupMessage("Creating account...","info");auth.createUserWithEmailAndPassword(e,t).then(t=>{console.log("Sign up OK:",t.user?.uid);clearMessages();showSuccessPopup("Account created! You can now sign in.", SIGNUP_SUCCESS_DELAY);if(emailInputSignUp)emailInputSignUp.value="";if(passwordInputSignUp)passwordInputSignUp.value="";if(passwordConfirmInputSignUp)passwordConfirmInputSignUp.value="";setTimeout(()=>{firebaseAuthToggleView("signin");if(emailInputSignIn)emailInputSignIn.value=e;if(passwordInputSignIn)passwordInputSignIn.focus()},SIGNUP_SUCCESS_DELAY)}).catch(handleAuthError)}; window.firebaseAuthSignInWithEmailPassword=()=>{ if(!auth||!emailInputSignIn||!passwordInputSignIn||!signInBtn)return;const e=emailInputSignIn.value.trim(),t=passwordInputSignIn.value;clearMessages();if(!isValidEmail(e))return showLoginPopupMessage("Invalid email format","error"),void emailInputSignIn.focus();if(!t)return showLoginPopupMessage("Please enter your password","error"),void passwordInputSignIn.focus();signInBtn.disabled=!0;signInBtn.textContent="Signing In...";showLoginPopupMessage("Signing in...","info");auth.signInWithEmailAndPassword(e,t).then(e=>{console.log("Sign in OK:",e.user?.uid);}).catch(e=>{if(passwordInputSignIn)passwordInputSignIn.value="";handleAuthError(e)}).finally(()=>{if(signInBtn){signInBtn.disabled=!1;signInBtn.textContent="Sign In"}if(messageElement&&messageElement.classList.contains("info")&&!messageElement.classList.contains("error")&&!messageElement.classList.contains("success"))clearMessages()})}; window.firebaseAuthSendPasswordReset=()=>{ if(!auth||!emailInputReset)return;const e=emailInputReset.value.trim();clearMessages();if(!isValidEmail(e))return showLoginPopupMessage("Please enter a valid email address","error"),void emailInputReset.focus();showLoginPopupMessage("Sending password reset link...","info");auth.sendPasswordResetEmail(e,actionCodeSettings).then(()=>{console.log("Reset email sent:",e);showSuccessPopup("Password reset email sent. Check your inbox.", RESET_SUCCESS_DELAY);setTimeout(()=>{firebaseAuthToggleView("signin");if(emailInputReset)emailInputReset.value=""},RESET_SUCCESS_DELAY)}).catch(handleAuthError)}; function handleEmailLinkSignInOnLoad(){ if(backdrop)backdrop.classList.add("firebase-auth-widget-hidden");if(!auth||typeof auth.isSignInWithEmailLink!=="function")return;if(auth.isSignInWithEmailLink(window.location.href)){if(loginPopup)loginPopup.classList.remove("firebase-auth-widget-hidden");if(backdrop)backdrop.classList.remove("firebase-auth-widget-hidden");firebaseAuthToggleView("signin");showLoginPopupMessage("Verifying magic link...","info");let e=window.localStorage.getItem(EMAIL_STORAGE_KEY);if(!e){e=window.prompt("Please provide your email address again:");if(!e||!isValidEmail(e))return showLoginPopupMessage("Valid email required. Try the link again.","error"),void cleanUrlAfterSignIn()}auth.signInWithEmailLink(e,window.location.href).then(e=>{console.log("Email link sign-in OK:",e.user?.uid);window.localStorage.removeItem(EMAIL_STORAGE_KEY);cleanUrlAfterSignIn();}).catch(e=>{console.error("Email link sign-in error:",e);window.localStorage.removeItem(EMAIL_STORAGE_KEY);handleAuthError(e);cleanUrlAfterSignIn()})}}; window.firebaseAuthSendEmailLink=()=>{ if(!auth)return void showLoginPopupMessage("Auth service unavailable","error");const e=getVisibleEmailInput();if(!e)return void showLoginPopupMessage("Email field not found","error");const t=e.value.trim();clearMessages();if(!isValidEmail(t))return showLoginPopupMessage("Enter email first","error"),void e.focus();showLoginPopupMessage("Sending magic link...","info");auth.sendSignInLinkToEmail(t,actionCodeSettings).then(()=>{console.log("Sign-in link sent to:",t);window.localStorage.setItem(EMAIL_STORAGE_KEY,t);showLoginPopupMessage("Magic link sent! Check your email.","success")}).catch(handleAuthError)}; window.firebaseAuthLoginWithProvider=e=>{ console.log("Login with:",e);if(!auth)return void showLoginPopupMessage("Auth service unavailable","error");clearMessages();let t,n=e.charAt(0).toUpperCase()+e.slice(1);try{switch(e.toLowerCase()){case"google":t=new firebase.auth.GoogleAuthProvider;n="Google";break;case"facebook":t=new firebase.auth.FacebookAuthProvider;n="Facebook";break;case"github":t=new firebase.auth.GithubAuthProvider;n="GitHub";break;case"yahoo":t=new firebase.auth.OAuthProvider("yahoo.com");n="Yahoo";break;default:throw new Error(`Unsupported provider: ${e}`)}}catch(err){return console.error(`Provider error ${n}:`,err),void showLoginPopupMessage(`Cannot setup ${n}`,"error")}showLoginPopupMessage(`Connecting to ${n}...`,"info");auth.signInWithPopup(t).then(e=>{console.log(`${n} sign-in OK:`,e.user?.uid);clearMessages()}).catch(e=>{if("auth/popup-closed-by-user"===e.code||"auth/cancelled-popup-request"===e.code){console.log(`${n} popup closed`);clearMessages()}else if("auth/account-exists-with-different-credential"===e.code){console.warn("Account exists",e.email);const provider=e.customData?.providerId||"other method";showLoginPopupMessage(`Email linked to ${provider}. Sign in that way.`,"error")}else{handleAuthError(e)}})}; window.firebaseAuthLogout=()=>{ if(!auth)return console.error("Logout fail: No auth"),void alert("Logout failed: Service unavailable.");auth.signOut().then(()=>{console.log("Logout OK")}).catch(e=>{console.error("Logout error:",e);(loginPopup&&!loginPopup.classList.contains("firebase-auth-widget-hidden")&&messageElement)?showLoginPopupMessage("Logout failed","error"):alert("Logout failed: "+e.message)})}; function handleAuthError(e){ console.error("Auth Error:",e.code,e.message);let t="",n="error";switch(e.code){case"auth/invalid-login-credentials":case"auth/invalid-credential":t="Incorrect email or password.";break;case"auth/invalid-email":t="Invalid email format.";break;case"auth/email-already-in-use":t="Email already registered.";break;case"auth/weak-password":t="Password too short.";break;case"auth/requires-recent-login":t="Sign in again.",n="info";break;case"auth/too-many-requests":t="Too many attempts. Wait.",n="info";break;case"auth/network-request-failed":t="Network error.",n="info";break;case"auth/user-disabled":t="Account disabled.";break;case"auth/user-not-found":t="No account found with this email.";break;case"auth/wrong-password":t="Incorrect password.";break;case"auth/invalid-action-code":t="Link invalid/expired.";break;case"auth/operation-not-allowed":t="Method not enabled.";break;case"auth/popup-blocked":t="Popup blocked.";break;case"auth/popup-closed-by-user":case"auth/cancelled-popup-request":return void clearMessages();case"auth/account-exists-with-different-credential":t=`Email uses ${e.customData?.providerId||"other method"}.`;break;case"auth/unauthorized-domain":t="Domain not allowed.";break;case"auth/auth-domain-config-required":t="Config error.";break;default:console.warn("Unhandled Error:",e.code),t=`Unexpected issue (${e.code}).`}showLoginPopupMessage(t,n)}; "loading"===document.readyState?document.addEventListener("DOMContentLoaded",initializeApp):initializeApp(); })(); </script> Live Preview (Appearance Only) Sign InForgot Password?Sign InNew user? Sign Up Create AccountSign UpAlready have account? Sign In Reset PasswordEnter email for reset link.Send Reset LinkBack to Sign In OR Send Magic Link OR USE Continue with Google Continue with Facebook Continue with GitHub Continue with Yahoo By signing in, you agree to our Policy & Terms. Logout ``` Facebook Twitter
