Clear following PIN fields on reentry

This commit is contained in:
seo
2026-06-17 19:56:23 +09:00
parent db48512585
commit 4499a4d472
2 changed files with 18 additions and 5 deletions
+1 -1
View File
@@ -41,6 +41,6 @@
암호는 숫자 4자리만 허용합니다. 로그인과 암호 변경 입력창은 `inputmode=numeric`, `[0-9]*` 패턴, 커스텀 숫자 키패드를 사용하며 Android/iPhone에서 문자 키보드가 뜨지 않도록 `readonly` 입력창에 화면 키패드로 값을 넣습니다. 서버 API도 4자리 숫자가 아닌 암호를 거부합니다. 암호는 숫자 4자리만 허용합니다. 로그인과 암호 변경 입력창은 `inputmode=numeric`, `[0-9]*` 패턴, 커스텀 숫자 키패드를 사용하며 Android/iPhone에서 문자 키보드가 뜨지 않도록 `readonly` 입력창에 화면 키패드로 값을 넣습니다. 서버 API도 4자리 숫자가 아닌 암호를 거부합니다.
로그인은 확인 버튼 없이 4자리가 입력되면 즉시 검증하고 성공 시 원래 선택한 미니앱으로 이동합니다. 암호 변경 화면도 변경/확인 버튼 없이 현재 암호, 새 암호, 새 암호 확인 순서로 4자리 입력이 끝날 때마다 다음 칸으로 이동하며, 마지막 칸까지 입력되면 바로 변경을 검증합니다. 이미 값이 들어간 입력창을 누르면 해당 칸의 값을 지우고 다시 입력받습니다. 현재 입력 중인 칸은 상태 문구와 파란 테두리로 표시합니다. 로그인은 확인 버튼 없이 4자리가 입력되면 즉시 검증하고 성공 시 원래 선택한 미니앱으로 이동합니다. 암호 변경 화면도 변경/확인 버튼 없이 현재 암호, 새 암호, 새 암호 확인 순서로 4자리 입력이 끝날 때마다 다음 칸으로 이동하며, 마지막 칸까지 입력되면 바로 변경을 검증합니다. 이미 값이 들어간 입력창을 누르면 로그인 화면은 해당 칸을 지우고, 암호 변경 화면은 클릭한 칸부터 뒤 칸까지 지운 뒤 다시 입력받습니다. 현재 입력 중인 칸은 상태 문구와 파란 테두리로 표시합니다.
암호 변경은 배너 우하단의 작은 `관리` 링크에서 처리하며, 이 링크는 사이트 관리자 로그인 상태에서만 표시합니다. 암호 변경 시에는 현재 공통 암호 입력을 계속 요구합니다. 암호 변경은 배너 우하단의 작은 `관리` 링크에서 처리하며, 이 링크는 사이트 관리자 로그인 상태에서만 표시합니다. 암호 변경 시에는 현재 공통 암호 입력을 계속 요구합니다.
+17 -4
View File
@@ -223,6 +223,8 @@ function showPasswordChangeForm() {
msg.textContent = data.message === 'password_digits_only' ? '암호는 숫자 4자리여야 합니다.' : '현재 암호가 틀립니다.'; msg.textContent = data.message === 'password_digits_only' ? '암호는 숫자 4자리여야 합니다.' : '현재 암호가 틀립니다.';
if (data.message === 'current_password_invalid') { if (data.message === 'current_password_invalid') {
currentInput.value = ''; currentInput.value = '';
newInput.value = '';
confirmInput.value = '';
currentInput.focus(); currentInput.focus();
} }
} catch (_) { } catch (_) {
@@ -443,9 +445,20 @@ function createPinKeypad(inputs, onEnter, onActiveChange = null) {
let activeInput = inputs[0]; let activeInput = inputs[0];
const keypad = document.createElement('div'); const keypad = document.createElement('div');
keypad.className = 'launcher-pin-keypad'; keypad.className = 'launcher-pin-keypad';
const setActiveInput = (input, clear = false) => { const clearInputsFrom = input => {
const startIndex = inputs.indexOf(input);
if (startIndex < 0) return;
inputs.slice(startIndex).forEach(item => {
item.value = '';
});
};
const setActiveInput = (input, clear = false, clearFollowing = false) => {
activeInput = input; activeInput = input;
if (clear) activeInput.value = ''; if (clearFollowing) {
clearInputsFrom(activeInput);
} else if (clear) {
activeInput.value = '';
}
activeInput.focus(); activeInput.focus();
document.querySelectorAll('.launcher-pin-input').forEach(el => el.classList.toggle('active', el === activeInput)); document.querySelectorAll('.launcher-pin-input').forEach(el => el.classList.toggle('active', el === activeInput));
if (typeof onActiveChange === 'function') onActiveChange(activeInput); if (typeof onActiveChange === 'function') onActiveChange(activeInput);
@@ -456,7 +469,7 @@ function createPinKeypad(inputs, onEnter, onActiveChange = null) {
if (typeof onActiveChange === 'function') onActiveChange(activeInput); if (typeof onActiveChange === 'function') onActiveChange(activeInput);
}); });
input.addEventListener('click', () => { input.addEventListener('click', () => {
setActiveInput(input, input.value.length > 0); setActiveInput(input, input.value.length > 0, inputs.length > 1 && input.value.length > 0);
}); });
}); });
@@ -481,7 +494,7 @@ function createPinKeypad(inputs, onEnter, onActiveChange = null) {
const idx = inputs.indexOf(activeInput); const idx = inputs.indexOf(activeInput);
if (idx >= 0 && idx < inputs.length - 1) { if (idx >= 0 && idx < inputs.length - 1) {
const nextInput = inputs[idx + 1]; const nextInput = inputs[idx + 1];
setActiveInput(nextInput, nextInput.value.length > 0); setActiveInput(nextInput, nextInput.value.length > 0, nextInput.value.length > 0);
} else { } else {
onEnter(); onEnter();
} }