Home V6 byआचार्य आशीष मिश्र -April 09, 2025 0 Customize Widget Firebase Configuration apiKey: authDomain: projectId: storageBucket: messagingSenderId: appId: 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: < Previous Firebase Configuration Next > Full Widget Code Copy <!doctype html> <!-- Firebase Authentication Widget - Centered --> <style> /* ======================================== */ /* CSS Variables & Basic Setup */ /* ======================================== */ :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); } /* Widget styles... (शेष CSS अपरिवर्तित है) */ .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> <!-- Backdrop Element --> <div id="firebase-auth-backdrop" class="firebase-auth-widget-hidden"></div> <!-- Login Widget HTML (अपरिवर्तित) --> <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> <!-- Logout Box HTML (अपरिवर्तित) --> <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> <!-- Success Popup Box HTML (अपरिवर्तित) --> <div id="firebase-auth-success-popup" class="firebase-auth-popup firebase-auth-widget-hidden"><p id="firebase-auth-popup-message"></p></div> <!-- Firebase SDKs --> <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> <!-- Application Script --> <script> (function() { "use strict"; // --- Configuration & Constants --- // यह ब्लॉक अब JS द्वारा अपडेट किया जाएगा, इसलिए प्रारंभिक मान प्लेसहोल्डर हैं 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" }; // --- End Configuration --- // शेष स्थिरांक और विजेट लॉजिक (अपरिवर्तित) const EMAIL_STORAGE_KEY = 'firebaseAuthEmailForSignIn'; 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 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)) { const missing = requiredElements.map((el, i) => el ? null : i).filter(i => i !== null); console.error("Widget Error: Elements missing (check IDs):", missing); displayGlobalError("Widget Initialization Error: Missing required HTML elements."); return; } try { if (typeof firebase === "undefined" || !firebase.initializeApp || !firebase.auth) { throw new Error("Firebase SDKs not loaded correctly."); } if (!firebase.apps.length) { app = firebase.initializeApp(firebaseConfig); } else { app = firebase.app(); } auth = firebase.auth(app); console.log("Firebase Initialized with config (may be default):", app.options.projectId); setupAuthentication(); handleEmailLinkSignInOnLoad(); } catch(e) { console.error("Initialization Failed:", e); displayGlobalError("Auth widget failed to start: " + (e.message || "Initialization error")); }}; function setupAuthentication(){/*...(अपरिवर्तित)...*/if(!auth)return;auth.setPersistence(firebase.auth.Auth.Persistence.LOCAL).then(()=>{console.log("Persistence set to LOCAL");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 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 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,"| Email:",e.email||"N/A","| Name:",e.displayName||"N/A");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 initially.");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(e=>{if(successPopup)successPopup.classList.add("firebase-auth-widget-hidden");if(passwordInputSignUp)passwordInputSignUp.value="";if(passwordConfirmInputSignUp)passwordConfirmInputSignUp.value="";handleAuthError(e)})}; 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. Please check your inbox (and spam folder).", 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 to complete sign-in:");if(!e||!isValidEmail(e))return showLoginPopupMessage("A valid email address is required to complete sign-in. Please try the magic 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("Authentication service is unavailable","error");const e=getVisibleEmailInput();if(!e)return void showLoginPopupMessage("Could not find the email input field","error");const t=e.value.trim();clearMessages();if(!isValidEmail(t))return showLoginPopupMessage("Please enter your email address 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 inbox (and spam folder) to sign in.","success")}).catch(handleAuthError)}; window.firebaseAuthLoginWithProvider=e=>{/*...(अपरिवर्तित)...*/console.log("Attempting login with:",e);if(!auth)return void showLoginPopupMessage("Authentication service is 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 setup error for ${n}:`,err),void showLoginPopupMessage(`Cannot set up sign-in with ${n}`,"error")}showLoginPopupMessage(`Connecting to ${n}...`,"info");auth.signInWithPopup(t).then(e=>{console.log(`${n} sign-in successful:`,e.user?.uid);clearMessages();}).catch(e=>{if("auth/popup-closed-by-user"===e.code||"auth/cancelled-popup-request"===e.code){console.log(`${n} sign-in popup closed by user.`);clearMessages()}else if("auth/account-exists-with-different-credential"===e.code){console.warn("Account exists with different credential:",e.email);const provider = e.customData?.providerId || "another method"; showLoginPopupMessage(`An account already exists with this email, signed up using ${provider}. Please sign in using that method.`,"error")}else{handleAuthError(e)}})}; window.firebaseAuthLogout=()=>{/*...(अपरिवर्तित)...*/if(!auth)return console.error("Logout failed: Authentication service not available."),void alert("Logout failed: Service unavailable.");auth.signOut().then(()=>{console.log("User logged out successfully.");}).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("Firebase 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="This email address is already registered.";break;case"auth/weak-password":t="Password is too weak (must be at least 6 characters).";break;case"auth/requires-recent-login":t="This action requires you to sign in again.",n="info";break;case"auth/too-many-requests":t="Too many unsuccessful attempts. Please try again later.",n="info";break;case"auth/network-request-failed":t="Network error. Please check your connection.",n="info";break;case"auth/user-disabled":t="This account has been disabled.";break;case"auth/user-not-found":t="No account found with this email address.";break;case"auth/wrong-password":t="Incorrect password.";break;case"auth/invalid-action-code":t="The link used is invalid or has expired. Please request a new one.";break;case"auth/operation-not-allowed":t="This sign-in method is not enabled for this project.";break;case"auth/popup-blocked":t="Popup window blocked by browser. Please allow popups for this site.";break;case"auth/popup-closed-by-user":case"auth/cancelled-popup-request":return void clearMessages();case"auth/account-exists-with-different-credential":t=`An account already exists with this email using ${e.customData?.providerId||"a different sign-in method"}.`;break;case"auth/unauthorized-domain":t="This domain is not authorized to use Firebase Authentication.";break;case"auth/auth-domain-config-required":t="Authentication domain configuration error.";break;default:console.warn("Unhandled Firebase Auth Error:",e.code);t=`An unexpected issue occurred (${e.code}). Please try again.`}showLoginPopupMessage(t,n)}; function showLoginPopupMessage(e,t="error"){/*...(अपरिवर्तित)...*/if(messageElement){messageElement.textContent=e;messageElement.className="firebase-auth-message";if(e&&t)messageElement.classList.add(t)}else console.warn("Message element (#firebase-auth-message) not found")}; 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 isValidEmail(e){return!!e&&/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(e).toLowerCase())}; 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);console.log("URL cleaned after sign-in attempt.")}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; border: 1px solid red; background: #ffeeee;'>${e}</p>`;loginPopup.classList.remove("firebase-auth-widget-hidden")}else{alert("Widget Error: "+e)}if(backdrop)backdrop.classList.remove("firebase-auth-widget-hidden")}; // --- Run Application --- "loading"===document.readyState?document.addEventListener("DOMContentLoaded",initializeApp):initializeApp(); })(); </script> </!doctype> 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 Firebase Authentication Widget - Centered Sign In Forgot Password? Sign In New user? Sign Up Create Account Sign Up Already have an account? Sign In Reset Password Enter your email address below and we'll send you a link to reset your password. Send Reset Link Back to Sign In OR Send Magic Link (Passwordless) 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
