98 lines
3.4 KiB
HTML
98 lines
3.4 KiB
HTML
<!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 & 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>
|