sso-mvk/views/auth/login.ejs

<%- include('../partials/header') %>
<div class="row justify-content-center">
  <div class="col-md-5">
    <div class="card shadow">
      <div class="card-body p-4">
        <h3 class="card-title text-center mb-4">Sign In</h3>

        <ul class="nav nav-tabs mb-3" id="loginTabs" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" id="password-tab" data-bs-toggle="tab" data-bs-target="#password" type="button">Password</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="email-code-tab" data-bs-toggle="tab" data-bs-target="#email-code" type="button">Email Code</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="qr-tab" data-bs-toggle="tab" data-bs-target="#qr" type="button">QR Code</button>
          </li>
        </ul>

        <div class="tab-content">
          <div class="tab-pane fade show active" id="password">
            <form id="loginForm">
              <div class="mb-3">
                <label class="form-label">Email</label>
                <input type="email" class="form-control" id="loginEmail" required>
              </div>
              <div class="mb-3">
                <label class="form-label">Password</label>
                <input type="password" class="form-control" id="loginPassword" required>
              </div>
              <button type="submit" class="btn btn-primary w-100">Sign In</button>
            </form>
          </div>

          <div class="tab-pane fade" id="email-code">
            <form id="emailCodeForm">
              <div class="mb-3">
                <label class="form-label">Email</label>
                <input type="email" class="form-control" id="codeEmail" required>
              </div>
              <div class="mb-3">
                <label class="form-label">Code</label>
                <div class="input-group">
                  <input type="text" class="form-control" id="verificationCode" placeholder="000000" required>
                  <button type="button" class="btn btn-outline-secondary" id="sendCodeBtn">Send Code</button>
                </div>
              </div>
              <button type="submit" class="btn btn-primary w-100">Sign In with Code</button>
            </form>
          </div>

          <div class="tab-pane fade" id="qr">
            <div class="text-center">
              <p class="mb-2">Scan with mobile app</p>
              <div id="qrContainer" class="mb-3">
                <button class="btn btn-outline-primary" id="showQrBtn">Show QR Code</button>
              </div>
              <div id="qrStatus" class="alert d-none"></div>
            </div>
          </div>
        </div>

        <div id="errorMessage" class="alert alert-danger mt-3 d-none"></div>
        <div id="successMessage" class="alert alert-success mt-3 d-none"></div>

        <p class="text-center mt-3 mb-0">
          <a href="/register">Don't have an account? Register</a>
        </p>
      </div>
    </div>
  </div>
</div>

<script>
  const API = '/api';

  document.getElementById('loginForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const email = document.getElementById('loginEmail').value;
    const password = document.getElementById('loginPassword').value;
    try {
      const res = await fetch(`${API}/auth/login`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password }),
      });
      const data = await res.json();
      if (res.ok) {
        localStorage.setItem('access_token', data.accessToken);
        localStorage.setItem('refresh_token', data.refreshToken);
        window.location.href = '/profile';
      } else {
        showError(data.message || 'Login failed');
      }
    } catch (err) {
      showError('Network error');
    }
  });

  document.getElementById('sendCodeBtn').addEventListener('click', async () => {
    const email = document.getElementById('codeEmail').value;
    if (!email) return;
    try {
      await fetch(`${API}/auth/send-email-code`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      });
      alert('Code sent!');
    } catch { alert('Failed to send code'); }
  });

  document.getElementById('emailCodeForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const email = document.getElementById('codeEmail').value;
    const code = document.getElementById('verificationCode').value;
    try {
      const res = await fetch(`${API}/auth/login/email-code`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, code }),
      });
      const data = await res.json();
      if (res.ok) {
        localStorage.setItem('access_token', data.accessToken);
        localStorage.setItem('refresh_token', data.refreshToken);
        window.location.href = '/profile';
      } else {
        showError(data.message || 'Login failed');
      }
    } catch { showError('Network error'); }
  });

  document.getElementById('showQrBtn').addEventListener('click', async () => {
    try {
      const res = await fetch(`${API}/auth/qr/init`, { method: 'POST' });
      const data = await res.json();
      const container = document.getElementById('qrContainer');
      container.innerHTML = `<img src="${data.qrDataUrl}" alt="QR Code" class="img-fluid" style="max-width:250px">`;
      document.getElementById('qrStatus').className = 'alert alert-info';
      document.getElementById('qrStatus').textContent = 'Scan with mobile app...';
      const poll = setInterval(async () => {
        const pollRes = await fetch(`${API}/auth/qr/poll`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ sessionId: data.sessionId }),
        });
        const pollData = await pollRes.json();
        if (pollData.status === 'CONFIRMED') {
          clearInterval(poll);
          localStorage.setItem('access_token', pollData.accessToken);
          window.location.href = '/profile';
        } else if (pollData.status === 'EXPIRED') {
          clearInterval(poll);
          document.getElementById('qrStatus').className = 'alert alert-danger';
          document.getElementById('qrStatus').textContent = 'QR expired. Try again.';
        }
      }, 2000);
    } catch { showError('Failed to load QR'); }
  });

  function showError(msg) {
    const el = document.getElementById('errorMessage');
    el.textContent = Array.isArray(msg) ? msg.join(', ') : msg;
    el.classList.remove('d-none');
  }
</script>
<%- include('../partials/footer') %>