Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Firebase Auth App</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f0f2f5;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    .container {
      background: #fff;
      padding: 40px;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
      width: 100%;
      max-width: 400px;
    }
    h2 {
      text-align: center;
      margin-bottom: 20px;
    }
    input, button {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border-radius: 5px;
      border: 1px solid #ccc;
    }
    button {
      background-color: #007bff;
      color: white;
      border: none;
    }
    button:hover {
      background-color: #0056b3;
    }
    #message {
      text-align: center;
      margin-top: 15px;
      font-weight: bold;
    }
    .link {
      color: #007bff;
      cursor: pointer;
      text-align: center;
      margin-top: 10px;
      text-decoration: underline;
    }
    .checkbox-label {
      font-size: 14px;
      display: flex;
      align-items: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div id="auth-forms">
      <h2>Register</h2>
      <input type="email" id="signup-email" placeholder="Email">
      <input type="password" id="signup-password" placeholder="Password">
      <label class="checkbox-label">
        <input type="checkbox" id="age-confirm" style="margin-right: 10px;">
        I confirm I am over 18 years old
      </label>
      <button onclick="signUp()">Register</button>

      <h2>Login</h2>
      <input type="email" id="signin-email" placeholder="Email">
      <input type="password" id="signin-password" placeholder="Password">
      <label class="checkbox-label">
        <input type="checkbox" id="remember-me" style="margin-right: 10px;">
        Remember Me
      </label>
      <button onclick="signIn()">Login</button>
      <div class="link" onclick="forgotPassword()">Forgot Password?</div>
    </div>

    <div id="reset-password-section" style="display: none;">
      <h2>Reset Password</h2>
      <input type="password" id="reset-new-password" placeholder="Enter new password">
      <button onclick="confirmResetPassword()">Reset Password</button>
    </div>

    <div id="resend-section" style="display: none; text-align: center;">
      <p>Didn't receive the verification email?</p>
      <button onclick="resendVerification()">Resend Email</button>
    </div>

    <div id="post-verify-buttons" style="display:none; text-align: center;">
      <p>Your email is verified!</p>
      <button onclick="showLoginForm()">Login</button>
      <button onclick="window.location.href='https://betdiamondsgroup.com'">Go to Home</button>
    </div>

    <button id="signout-btn" onclick="signOutUser()" style="display: none;">Sign Out</button>
    <button id="toggle-reset-btn" onclick="toggleChangePassword()" style="display: none;">Reset/Change Password</button>

    <div id="change-password-section" style="display: none;">
      <h2>Change Password</h2>
      <input type="password" id="new-pass" placeholder="New Password">
      <button onclick="changePassword()">Update Password</button>
    </div>

    <div id="message"></div>
  </div>

  <script type="module">
    import { initializeApp } from 'https://www.gstatic.com/firebasejs/11.9.0/firebase-app.js';
    import {
      getAuth,
      createUserWithEmailAndPassword,
      sendEmailVerification,
      signInWithEmailAndPassword,
      signOut,
      sendPasswordResetEmail,
      updatePassword,
      applyActionCode,
      confirmPasswordReset,
      onAuthStateChanged
    } from 'https://www.gstatic.com/firebasejs/11.9.0/firebase-auth.js';

    const firebaseConfig = {
      apiKey: "AIzaSyB8ChBZ_W4OxHy1pfnLPMrDBN90On98usY",
      authDomain: "login-9738e.firebaseapp.com",
      projectId: "login-9738e",
      storageBucket: "login-9738e.appspot.com",
      messagingSenderId: "284330640945",
      appId: "1:284330640945:web:45eeefece7ecb6ac8fb710",
      measurementId: "G-H173BCPDJM"
    };

    const app = initializeApp(firebaseConfig);
    const auth = getAuth(app);

    document.addEventListener('DOMContentLoaded', async () => {
      const urlParams = new URLSearchParams(window.location.search);
      const mode = urlParams.get('mode');
      const actionCode = urlParams.get('oobCode');

      if (mode === 'verifyEmail' && actionCode) {
        try {
          await applyActionCode(auth, actionCode);
          const tempEmail = sessionStorage.getItem('tempEmail');
          const tempPass = sessionStorage.getItem('tempPass');

          if (tempEmail && tempPass) {
            try {
              const userCredential = await signInWithEmailAndPassword(auth, tempEmail, tempPass);
              const user = userCredential.user;
              if (user.emailVerified) {
                document.getElementById('auth-forms').style.display = 'none';
                document.getElementById('signout-btn').style.display = 'block';
                document.getElementById('toggle-reset-btn').style.display = 'block';
                document.getElementById('message').textContent = `Welcome ${user.email}`;
              }
              sessionStorage.removeItem('tempEmail');
              sessionStorage.removeItem('tempPass');
            } catch (err) {
              document.getElementById('message').textContent = 'Login failed after verification: ' + err.message;
            }
          } else {
            document.getElementById('auth-forms').style.display = 'none';
            document.getElementById('post-verify-buttons').style.display = 'block';
            document.getElementById('message').textContent = 'Email verified. Please log in.';
          }
        } catch (err) {
          document.getElementById('message').textContent = 'Invalid or expired verification link.';
        }
      }

      if (mode === 'resetPassword' && actionCode) {
        document.getElementById('auth-forms').style.display = 'none';
        document.getElementById('reset-password-section').style.display = 'block';

        window.confirmResetPassword = async function () {
          const newPassword = document.getElementById('reset-new-password').value;
          if (newPassword.length < 6) {
            document.getElementById('message').textContent = 'Password must be at least 6 characters.';
            return;
          }
          try {
            await confirmPasswordReset(auth, actionCode, newPassword);
            document.getElementById('message').textContent = 'Password has been reset successfully.';
            document.getElementById('reset-password-section').style.display = 'none';
            document.getElementById('auth-forms').style.display = 'block';
          } catch (error) {
            document.getElementById('message').textContent = 'Error resetting password: ' + error.message;
          }
        }
      }

      // Auto-login
      const savedEmail = localStorage.getItem('rememberedEmail');
      const savedPass = localStorage.getItem('rememberedPassword');
      if (savedEmail && savedPass) {
        try {
          const userCredential = await signInWithEmailAndPassword(auth, savedEmail, savedPass);
          const user = userCredential.user;
          if (user.emailVerified) {
            document.getElementById('auth-forms').style.display = 'none';
            document.getElementById('signout-btn').style.display = 'block';
            document.getElementById('toggle-reset-btn').style.display = 'block';
            document.getElementById('message').textContent = `Welcome back ${user.email}`;
          } else {
            document.getElementById('message').textContent = 'Please verify your email before logging in.';
            await signOut(auth);
          }
        } catch (err) {
          document.getElementById('message').textContent = 'Auto-login failed: ' + err.message;
        }
      }
    });

    window.showLoginForm = function () {
      document.getElementById('post-verify-buttons').style.display = 'none';
      document.getElementById('auth-forms').style.display = 'block';
    }

    window.signUp = async function () {
      const email = document.getElementById('signup-email').value.trim();
      const password = document.getElementById('signup-password').value;
      const ageConfirmed = document.getElementById('age-confirm').checked;

      if (!ageConfirmed) {
        document.getElementById('message').textContent = 'You must confirm you are over 18 years old.';
        return;
      }

      try {
        const userCredential = await createUserWithEmailAndPassword(auth, email, password);
        await sendEmailVerification(userCredential.user);
        sessionStorage.setItem('tempEmail', email);
        sessionStorage.setItem('tempPass', password);
        document.getElementById('message').textContent = 'Registration successful. Please check your email to verify your account.';
        document.getElementById('resend-section').style.display = 'block';
      } catch (error) {
        document.getElementById('message').textContent = `Error: ${error.message}`;
      }
    }

    window.signIn = async function () {
      const email = document.getElementById('signin-email').value.trim();
      const password = document.getElementById('signin-password').value;
      const remember = document.getElementById('remember-me').checked;

      if (!email || !password) {
        document.getElementById('message').textContent = 'Please enter email and password.';
        return;
      }

      try {
        const userCredential = await signInWithEmailAndPassword(auth, email, password);
        const user = userCredential.user;

        if (!user.emailVerified) {
          document.getElementById('message').textContent = 'Please verify your email before logging in.';
          await signOut(auth);
          return;
        }

        if (remember) {
          localStorage.setItem('rememberedEmail', email);
          localStorage.setItem('rememberedPassword', password);
        }

        document.getElementById('auth-forms').style.display = 'none';
        document.getElementById('signout-btn').style.display = 'block';
        document.getElementById('toggle-reset-btn').style.display = 'block';
        document.getElementById('message').textContent = `Welcome ${user.email}`;
        document.getElementById('resend-section').style.display = 'none';
      } catch (error) {
        document.getElementById('message').textContent = `Login failed: ${error.message}`;
      }
    }

    window.resendVerification = async function () {
      const user = auth.currentUser;
      if (user && !user.emailVerified) {
        try {
          await sendEmailVerification(user);
          document.getElementById('message').textContent = 'Verification email resent.';
        } catch (error) {
          document.getElementById('message').textContent = `Error: ${error.message}`;
        }
      }
    }

    window.signOutUser = async function () {
      try {
        await signOut(auth);
        document.getElementById('auth-forms').style.display = 'block';
        document.getElementById('signout-btn').style.display = 'none';
        document.getElementById('toggle-reset-btn').style.display = 'none';
        document.getElementById('change-password-section').style.display = 'none';
        document.getElementById('resend-section').style.display = 'none';
        document.getElementById('message').textContent = 'Signed out!';
        localStorage.removeItem('rememberedEmail');
        localStorage.removeItem('rememberedPassword');
      } catch (error) {
        document.getElementById('message').textContent = error.message;
      }
    }

    window.forgotPassword = async function () {
      const email = prompt("Enter your email to reset password:");
      if (email) {
        try {
          await sendPasswordResetEmail(auth, email.trim());
          document.getElementById('message').textContent = 'Reset link sent to your email.';
        } catch (error) {
          document.getElementById('message').textContent = error.message;
        }
      }
    }

    window.toggleChangePassword = function () {
      const section = document.getElementById('change-password-section');
      section.style.display = section.style.display === 'none' ? 'block' : 'none';
    }

    window.changePassword = async function () {
      const newPassword = document.getElementById('new-pass').value;
      const user = auth.currentUser;

      if (!user) {
        document.getElementById('message').textContent = 'User not logged in.';
        return;
      }

      if (newPassword.length < 6) {
        document.getElementById('message').textContent = 'Password should be at least 6 characters.';
        return;
      }

      try {
        await updatePassword(user, newPassword);
        document.getElementById('new-pass').value = '';
        document.getElementById('message').textContent = 'Password updated successfully.';
        document.getElementById('change-password-section').style.display = 'none';
      } catch (error) {
        document.getElementById('message').textContent = `Error: ${error.message}`;
      }
    }
  </script>
</body>
</html>


Video

betdiamonds