Member Journey

<!-- Add this HTML to your signup page -->
<form id="signupForm">
  <!-- Basic required fields -->
  <input type="email" id="email" placeholder="Email" required />
  <input type="password" id="password" placeholder="Password" required />
  
  <!-- Custom fields to collect extra information -->
  <input type="text" id="firstName" placeholder="First Name" required />
  <input type="text" id="lastName" placeholder="Last Name" required />
  
  <!-- Simple dropdown for user type -->
  <select id="userType" required>
    <option value="">I am a...</option>
    <option value="designer">Designer</option>
    <option value="developer">Developer</option>
    <option value="other">Other</option>
  </select>
  
  <button type="submit">Create Account</button>
  <div id="errorMessage" style="color: red; display: none;"></div>
</form>

// Add this JavaScript to handle the signup
document.getElementById('signupForm').addEventListener('submit', async (event) => {
  event.preventDefault();
  
  // Hide any previous error messages
  const errorDiv = document.getElementById('errorMessage');
  errorDiv.style.display = 'none';
  
  // Get all the form values
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
  const firstName = document.getElementById('firstName').value;
  const lastName = document.getElementById('lastName').value;
  const userType = document.getElementById('userType').value;
  
  try {
    // Try to create the new account
    const member = await memberstack.signupMemberEmailPassword({
      email: email,
      password: password,
      // Store additional information in customFields
      customFields: {
        firstName: firstName,
        lastName: lastName,
        userType: userType
      }
    });
    
    // If successful, send them to the dashboard
    window.location.href = '/dashboard';
  } catch (error) {
    // If something goes wrong, show the error message
    errorDiv.textContent = error.message || 'Something went wrong. Please try again.';
    errorDiv.style.display = 'block';
  }
});

// Add this HTML to your login page
<div class="login-options">
  <!-- Email/Password Login Form -->
  <form id="loginForm">
    <h3>Log in with Email</h3>
    <input type="email" id="loginEmail" placeholder="Email" required />
    <input type="password" id="loginPassword" placeholder="Password" required />
    <button type="submit">Log In</button>
    <div id="loginError" style="color: red; display: none;"></div>
  </form>

  <!-- Passwordless Login Option -->
  <div class="passwordless-section">
    <h3>Login without Password</h3>
    <form id="passwordlessForm">
      <input type="email" id="passwordlessEmail" placeholder="Email" required />
      <button type="submit">Send Login Token</button>
      <div id="passwordlessMessage"></div>
    </form>
  </div>
</div>

// Add this JavaScript to handle both login methods
// 1. Email/Password Login
document.getElementById('loginForm').addEventListener('submit', async (event) => {
  event.preventDefault();
  const errorDiv = document.getElementById('loginError');
  errorDiv.style.display = 'none';
  
  try {
    const member = await memberstack.loginMemberEmailPassword({
      email: document.getElementById('loginEmail').value,
      password: document.getElementById('loginPassword').value
    });
    
    window.location.href = '/dashboard';
  } catch (error) {
    errorDiv.textContent = error.message || 'Login failed. Please check your email and password.';
    errorDiv.style.display = 'block';
  }
});

// 2. Passwordless Login
document.getElementById('passwordlessForm').addEventListener('submit', async (event) => {
  event.preventDefault();
  const messageDiv = document.getElementById('passwordlessMessage');
  const email = document.getElementById('passwordlessEmail').value;
  
  try {
    await memberstack.sendMemberLoginPasswordlessEmail({
      email: email,
      redirectUrl: window.location.origin + '/dashboard'  // Where to send them after login
    });
    
    messageDiv.textContent = 'Check your email for a login token!';
    messageDiv.style.color = 'green';
  } catch (error) {
    messageDiv.textContent = error.message || 'Could not send login token. Please try again.';
    messageDiv.style.color = 'red';
  }
});

<!-- Add this HTML -->
<form id="passwordForm">
  <div>
    <input 
      type="password" 
      id="currentPassword" 
      placeholder="Current Password" 
      required 
    />
  </div>

  <div>
    <input 
      type="password" 
      id="newPassword" 
      placeholder="New Password" 
      required 
    />
    <div id="passwordStrength"></div>
  </div>

  <button type="submit">Update Password</button>
  <div id="message"></div>
</form>

// Add this JavaScript
document.getElementById('passwordForm').addEventListener('submit', async (event) => {
  event.preventDefault();
  const messageDiv = document.getElementById('message');
  
  try {
    await memberstack.updateMemberAuth({
      currentPassword: document.getElementById('currentPassword').value,
      newPassword: document.getElementById('newPassword').value
    });
    
    messageDiv.textContent = 'Password updated!';
    messageDiv.style.color = 'green';
    document.getElementById('passwordForm').reset();
  } catch (error) {
    messageDiv.textContent = error.message || 'Update failed. Please try again.';
    messageDiv.style.color = 'red';
  }
});

// Simple password strength check
document.getElementById('newPassword').addEventListener('input', (event) => {
  const password = event.target.value;
  const strengthDiv = document.getElementById('passwordStrength');
  
  if (password.length < 8) {
    strengthDiv.textContent = 'Too short';
    strengthDiv.style.color = 'red';
  } else if (/[a-zA-Z]/.test(password) && /[0-9]/.test(password)) {
    strengthDiv.textContent = 'Strong';
    strengthDiv.style.color = 'green';
  } else {
    strengthDiv.textContent = 'Add numbers and letters';
    strengthDiv.style.color = 'orange';
  }
});

<!-- Add this HTML to your password management page -->
<form id="passwordForm">
  <!-- Current password is needed for security -->
  <div class="password-field">
    <label for="currentPassword">Current Password</label>
    <input 
      type="password" 
      id="currentPassword" 
      required 
      placeholder="Enter your current password"
    />
  </div>

  <!-- New password section -->
  <div class="password-field">
    <label for="newPassword">New Password</label>
    <input 
      type="password" 
      id="newPassword" 
      required 
      placeholder="Enter your new password"
    />
    <!-- This will show how strong the password is -->
    <div id="passwordStrength"></div>
  </div>

  <!-- Confirm new password -->
  <div class="password-field">
    <label for="confirmPassword">Confirm New Password</label>
    <input 
      type="password" 
      id="confirmPassword" 
      required 
      placeholder="Enter your new password again"
    />
  </div>

  <button type="submit">Update Password</button>
  <div id="passwordMessage"></div>
</form>

// Add this JavaScript to handle password updates
document.getElementById('passwordForm').addEventListener('submit', async (event) => {
  event.preventDefault();
  const messageDiv = document.getElementById('passwordMessage');
  
  // Get the password values
  const currentPassword = document.getElementById('currentPassword').value;
  const newPassword = document.getElementById('newPassword').value;
  const confirmPassword = document.getElementById('confirmPassword').value;
  
  // Make sure the new passwords match
  if (newPassword !== confirmPassword) {
    messageDiv.textContent = 'New passwords do not match';
    messageDiv.style.color = 'red';
    return;
  }
  
  try {
    // Try to update the password
    await memberstack.updateMemberAuth({
      currentPassword: currentPassword,
      newPassword: newPassword
    });
    
    // If successful, show a message and clear the form
    messageDiv.textContent = 'Password updated successfully!';
    messageDiv.style.color = 'green';
    document.getElementById('passwordForm').reset();
  } catch (error) {
    messageDiv.textContent = error.message || 'Could not update password. Please try again.';
    messageDiv.style.color = 'red';
  }
});

// Add this to check password strength as they type
document.getElementById('newPassword').addEventListener('input', (event) => {
  const password = event.target.value;
  const strengthDiv = document.getElementById('passwordStrength');
  
  // Check how strong the password is
  let strength = 'Weak';
  let color = 'red';
  
  if (password.length >= 8) {
    const hasLetter = /[a-zA-Z]/.test(password);
    const hasNumber = /[0-9]/.test(password);
    const hasSymbol = /[^a-zA-Z0-9]/.test(password);
    
    if (hasLetter && hasNumber && hasSymbol) {
      strength = 'Strong';
      color = 'green';
    } else if (hasLetter && (hasNumber || hasSymbol)) {
      strength = 'Medium';
      color = 'orange';
    }
  }
  
  // Show the strength
  strengthDiv.textContent = `Password Strength: ${strength}`;
  strengthDiv.style.color = color;
});