Embed

<section class="donation-section">
  <div class="donation-container">
    <div class="donation-language-toggle">
      <button type="button" onclick="toggleLoginLanguage()">Français / English</button>
    </div>

    <h2 id="login-title">Member Login</h2>

    <form id="loginForm" class="donation-form">
      <div class="donation-grid">
        <div class="donation-field" style="grid-column: span 2;">
          <label id="login-membershipLabel" for="membership_number">Membership Number</label>
          <input type="text" id="membership_number" name="membership_number" required>
        </div>

        <div class="donation-field" style="grid-column: span 2;">
          <label id="login-passwordLabel" for="password">Password</label>
          <input type="password" id="password" name="password" required>
        </div>
      </div>

      <button type="submit" id="login-loginButton">Login</button>

      <div style="text-align: center; margin-top: 20px;">
        <span id="login-noAccount">Don't have an account?</span>
        <a id="login-signUpLink" href="/signup" class="signup-link">Sign Up</a>
      </div>

      <div id="loginError" style="color:red; text-align:center; margin-top:10px;"></div>
    </form>
  </div>
</section>

<script>
  const loginTranslations = {
    en: {
      title: "Member Login",
      membershipLabel: "Membership Number",
      passwordLabel: "Password",
      loginButton: "Login",
      noAccount: "Don't have an account?",
      signUp: "Sign Up"
    },
    fr: {
      title: "Connexion membre",
      membershipLabel: "Numéro d'adhésion",
      passwordLabel: "Mot de passe",
      loginButton: "Se connecter",
      noAccount: "Vous n'avez pas de compte?",
      signUp: "S'inscrire"
    }
  };

  let loginLang = 'en';

  function toggleLoginLanguage() {
    loginLang = loginLang === 'en' ? 'fr' : 'en';
    const t = loginTranslations[loginLang];
    document.getElementById('login-title').textContent = t.title;
    document.getElementById('login-membershipLabel').textContent = t.membershipLabel;
    document.getElementById('login-passwordLabel').textContent = t.passwordLabel;
    document.getElementById('login-loginButton').textContent = t.loginButton;
    document.getElementById('login-noAccount').textContent = t.noAccount;
    document.getElementById('login-signUpLink').textContent = t.signUp;
  }

  document.getElementById("loginForm").addEventListener("submit", async function(e) {
    e.preventDefault();

    const membership_number = document.getElementById("membership_number").value.trim();
    const password = document.getElementById("password").value;

    try {
      const response = await fetch("https://talindigital.com/login.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ membership_number, password })
      });

      const data = await response.json();

      if (data.status === "success") {
        // Save token & member data for cross-page access
        localStorage.setItem("authToken", data.token);
        localStorage.setItem("memberData", JSON.stringify(data.member));

        // Redirect to profile/dashboard
        window.location.href = "/memberprofile";
      } else {
        document.getElementById("loginError").textContent = data.message || "Login failed.";
      }
    } catch (err) {
      document.getElementById("loginError").textContent = "Server error. Please try again.";
    }
  });
</script>

Africa Dream Water

Providing clean drinking water to communities in Africa. People donante money and we mount projects to provide drinking water to communities in Africa. include dashborad, donation page, impact page, payment page, notification page, contact page