fix(cloud): login form submits via fetch (redirect on success, show error)
This commit is contained in:
parent
81e8e81b72
commit
81eae5d045
2 changed files with 76 additions and 0 deletions
75
cloud/public/assets/login.js
Normal file
75
cloud/public/assets/login.js
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
/**
|
||||
* Login form handler: intercepts form submission and submits via fetch.
|
||||
* On success (200), redirects to dashboard. On error (401/423), shows
|
||||
* the #login-error element with a user-friendly message.
|
||||
*
|
||||
* XSS-safe: all dynamic values are set via textContent, never innerHTML.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var form = document.querySelector('.login-form');
|
||||
if (!form) return;
|
||||
|
||||
var errorEl = document.getElementById('login-error');
|
||||
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Hide any previous error message
|
||||
if (errorEl) {
|
||||
errorEl.setAttribute('hidden', '');
|
||||
errorEl.textContent = '';
|
||||
}
|
||||
|
||||
// Collect form data and convert to application/x-www-form-urlencoded
|
||||
var formData = new FormData(form);
|
||||
var body = new URLSearchParams(formData).toString();
|
||||
|
||||
fetch('/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: body
|
||||
})
|
||||
.then(function (res) {
|
||||
if (res.status === 200) {
|
||||
// Success: redirect to dashboard
|
||||
window.location.href = '/';
|
||||
return null;
|
||||
}
|
||||
// Error: parse response and show error message
|
||||
if (!res.ok) throw new Error('login_failed:' + res.status);
|
||||
return res.json();
|
||||
})
|
||||
.then(function (data) {
|
||||
if (data && data.error) {
|
||||
showError(data.error);
|
||||
}
|
||||
})
|
||||
.catch(function (err) {
|
||||
// Extract status code from error message if available
|
||||
var status = /login_failed:(\d+)/.exec(String(err)) ? parseInt(RegExp.$1) : 0;
|
||||
if (status === 401 || status === 0) {
|
||||
showError('invalid_credentials');
|
||||
} else if (status === 423) {
|
||||
showError('locked');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function showError(errorCode) {
|
||||
if (!errorEl) return;
|
||||
|
||||
var message;
|
||||
if (errorCode === 'invalid_credentials') {
|
||||
message = '로그인 실패';
|
||||
} else if (errorCode === 'locked') {
|
||||
message = '계정 잠김';
|
||||
} else {
|
||||
message = '로그인 실패';
|
||||
}
|
||||
|
||||
errorEl.textContent = message;
|
||||
errorEl.removeAttribute('hidden');
|
||||
}
|
||||
})();
|
||||
|
|
@ -20,5 +20,6 @@ render_header('로그인');
|
|||
<button type="submit">로그인</button>
|
||||
<p id="login-error" class="form-error" role="alert" hidden></p>
|
||||
</form>
|
||||
<script src="/assets/login.js" defer></script>
|
||||
<?php
|
||||
render_footer();
|
||||
|
|
|
|||
Loading…
Reference in a new issue