Add test-login page (preserved from M1 before removing the M1 setup)

2026-09-03 19:55:06 +02:00
parent 556201288a
commit 554d4c2c19
1 changed files with 97 additions and 0 deletions
@@ -0,0 +1,97 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Login Test</title>
  <style>
    body { font-family: -apple-system, sans-serif; max-width: 380px;
           margin: 80px auto; padding: 0 20px; }
    input, button { display: block; width: 100%; margin: 8px 0;
                    padding: 10px; box-sizing: border-box; font-size: 14px; }
    button { cursor: pointer; background: #0ea5e9; color: white;
             border: none; border-radius: 6px; }
    button.sec { background: #64748b; }
    .err  { color: #dc2626; margin: 8px 0; font-size: 13px; }
    .ok   { color: #16a34a; margin: 8px 0; font-size: 13px; }
    label { display: flex; align-items: center; gap: 8px;
            font-size: 13px; margin: 4px 0; }
    fieldset { border: 1px solid #e2e8f0; border-radius: 8px;
               padding: 12px; margin-bottom: 16px; }
    legend { font-size: 12px; font-weight: 600; color: #475569; }
  </style>
 </head>
 <body>
  <h2>Work App — login trigger test</h2>
  <p style="font-size:13px;color:#64748b">
    Each scenario toggles which triggers fire. Watch for the
    "Save this password?" dialog from Work.
  </p>
  <fieldset>
    <legend>Scenario controls</legend>
    <label><input type="checkbox" id="succeed" checked>
      Simulate successful login</label>
    <label><input type="checkbox" id="removeDom" checked>
      Remove form from DOM on success (Trigger A)</label>
    <label><input type="checkbox" id="pushUrl">
      Change URL via pushState on success (Trigger B)</label>
  </fieldset>
  <div id="loginSection">
    <form id="loginForm" onsubmit="return false">
      <input type="email" id="email" placeholder="Email"
             autocomplete="username">
      <input type="password" id="password" placeholder="Password"
             autocomplete="current-password">
      <button type="button" onclick="doXhr()">
        Login via XHR (no submit event) — tests Triggers A &amp; B
      </button>
      <button type="submit" class="sec" onclick="doFormSubmit()">
        Login via form submit — tests Trigger C
      </button>
    </form>
    <div id="msg"></div>
  </div>
  <div id="dashboard" style="display:none">
    <div class="ok">✓ Logged in — form removed from DOM.</div>
    <div class="ok" id="urlNote"></div>
    <button onclick="location.reload()">Reload to reset</button>
  </div>
  <script>
    function doXhr() {
      var succeed  = document.getElementById('succeed').checked;
      var rmDom    = document.getElementById('removeDom').checked;
      var pushUrl  = document.getElementById('pushUrl').checked;
      var msg      = document.getElementById('msg');
      msg.className = '';
      msg.textContent = '';
      if (!succeed) {
        // Failed login: keep form, show error — offer must NOT fire
        msg.className = 'err';
        msg.textContent = 'Invalid credentials. Try again.';
        return;
      }
      // Successful login
      if (rmDom) {
        document.getElementById('loginSection').remove();
        document.getElementById('dashboard').style.display = '';
      }
      if (pushUrl) {
        history.pushState({}, '', '/dashboard');
        var n = document.getElementById('urlNote');
        if (n) n.textContent = '✓ URL changed to /dashboard via pushState.';
      }
    }
    function doFormSubmit() {
      // inject.js's submit listener fires in capture phase before this.
      // Default is already prevented by onsubmit="return false" on the form.
    }
  </script>
 </body>
 </html>