teagles / qrurl

public
0
Clone
login.js
export function loginHtml() {
  return `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login - QRurl</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; color: #333; display: flex; min-height: 100vh; align-items: center; justify-content: center; background: #f5f5f5; }
    .login-container { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 100%; max-width: 400px; }
    h1 { margin-bottom: 1.5rem; text-align: center; }
    .form-group { margin-bottom: 1rem; }
    label { display: block; margin-bottom: 0.5rem; font-weight: 500; }
    input, button { width: 100%; padding: 0.75rem; font-size: 1rem; border-radius: 4px; }
    input { border: 1px solid #ddd; }
    button { background: #000; color: white; border: none; cursor: pointer; margin-top: 1rem; }
    button:hover { background: #333; }
    button:disabled { opacity: 0.5; cursor: not-allowed; }
    .message { padding: 0.75rem; border-radius: 4px; margin-bottom: 1rem; }
    .message.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
    .message.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
    .back-link { text-align: center; margin-top: 1rem; }
    .back-link a { color: #666; text-decoration: none; }
    .back-link a:hover { text-decoration: underline; }
  </style>
</head>
<body>
  <div class="login-container">
    <h1>Login to QRurl</h1>
    
    <div id="message"></div>
    
    <form id="loginForm">
      <div class="form-group">
        <label for="email">Email Address</label>
        <input type="email" id="email" required placeholder="your@email.com">
      </div>
      
      <button type="submit" id="submitBtn">Send Magic Link</button>
    </form>
    
    <div class="back-link">
      <a href="/">← Back to home</a>
    </div>
  </div>

  <script>
    document.getElementById('loginForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      
      const email = document.getElementById('email').value;
      const submitBtn = document.getElementById('submitBtn');
      const messageDiv = document.getElementById('message');
      
      submitBtn.disabled = true;
      submitBtn.textContent = 'Sending...';
      messageDiv.className = '';
      messageDiv.textContent = '';
      
      try {
        const response = await fetch('/api/auth/request', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ email })
        });
        
        const data = await response.json();
        
        if (response.ok) {
          messageDiv.className = 'message success';
          messageDiv.textContent = 'Check your email for the login link!';
          document.getElementById('loginForm').reset();
        } else {
          messageDiv.className = 'message error';
          messageDiv.textContent = data.error || 'Failed to send login link';
        }
      } catch (error) {
        messageDiv.className = 'message error';
        messageDiv.textContent = 'Network error. Please try again.';
      } finally {
        submitBtn.disabled = false;
        submitBtn.textContent = 'Send Magic Link';
      }
    });
  </script>
</body>
</html>`;
}