Core Authentication

// Add this HTML to your login page
<form id="loginForm">
  <input type="email" id="email" placeholder="Email" />
  <input type="password" id="password" placeholder="Password" />
  <button type="submit" id="loginButton">Log In</button>
  <div id="loginError" style="display: none; color: red;"></div>
</form>

// Add this JavaScript to handle the login
document.getElementById('loginForm').addEventListener('submit', async (event) => {
  event.preventDefault();
  const loginButton = document.getElementById('loginButton');
  const errorDiv = document.getElementById('loginError');
  
  // Disable button and show loading state
  loginButton.disabled = true;
  loginButton.textContent = 'Logging in...';
  errorDiv.style.display = 'none';
  
  // Get form values
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
  
  try {
    const member = await memberstack.loginMemberEmailPassword({
      email,
      password
    });
    
    // If login is successful, redirect to dashboard
    window.location.href = "/dashboard";
  } catch (error) {
    errorDiv.textContent = error.message || "Login failed. Please check your credentials.";
    errorDiv.style.display = 'block';
  } finally {
    // Reset button state
    loginButton.disabled = false;
    loginButton.textContent = 'Log In';
  }
});

// Add this HTML to your login page
<form id="passwordlessForm">
  <input type="email" id="passwordlessEmail" placeholder="Email" />
  <button type="submit" id="passwordlessButton">Login with passwordless</button>
  <div id="passwordlessMessage"></div>
  <div id="passwordlessError" style="display: none; color: red;"></div>
</form>

// Add this JavaScript to handle passwordless login
let isEmailSent = false;
const form = document.getElementById('passwordlessForm');
const button = document.getElementById('passwordlessButton');
const messageDiv = document.getElementById('passwordlessMessage');
const errorDiv = document.getElementById('passwordlessError');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  
  if (isEmailSent) return; // Prevent multiple sends
  
  button.disabled = true;
  button.textContent = 'Sending...';
  errorDiv.style.display = 'none';
  
  const email = document.getElementById('passwordlessEmail').value;
  
  try {
    await memberstack.sendMemberLoginPasswordlessEmail({
      email,
      redirectUrl: window.location.origin + "/dashboard"
    });
    
    isEmailSent = true;
    messageDiv.textContent = 'Check your email for the login token';
    button.textContent = 'Check your email';
    
    // Reset after 60 seconds
    setTimeout(() => {
      isEmailSent = false;
      button.disabled = false;
      button.textContent = 'Login with passwordless';
      messageDiv.textContent = '';
    }, 60000);
  } catch (error) {
    errorDiv.textContent = error.message || "Couldn't send login email. Please try again.";
    errorDiv.style.display = 'block';
    button.disabled = false;
    button.textContent = 'Login with passwordless';
  }
});

// Handle verification (if needed)
async function handlePasswordlessVerification(token) {
  try {
    const member = await memberstack.loginMemberPasswordless({
      passwordlessToken: token
    });
    window.location.href = "/dashboard";
  } catch (error) {
    console.error("Verification failed:", error);
  }
}

// Handle logout
async function handleLogout() {
  try {
	await memberstack.logout();
	window.location.href = "/login";
  } catch (error) {
	console.error("Logout failed:", error);
  }
}