feat: 更新手机号输入框逻辑,确保手动输入值在执行步骤前被保存,避免被旧状态覆盖

This commit is contained in:
QLHazyCoder
2026-05-05 01:48:18 +08:00
parent d054ff65de
commit 16baad20a3
6 changed files with 236 additions and 22 deletions
+1 -1
View File
@@ -63,7 +63,7 @@
|| ''
).trim();
if (!email && !phoneNumber) {
throw new Error('缺少登录账号请先完成步骤 2 和步骤 3。');
throw new Error('缺少登录账号请先完成步骤 2,或在侧栏“注册邮箱/注册手机号”中手动填写账号后再执行当前步骤。');
}
let attempt = 0;
+120 -18
View File
@@ -1076,6 +1076,9 @@ let settingsDirty = false;
let settingsSaveInFlight = false;
let settingsAutoSaveTimer = null;
let settingsSaveRevision = 0;
let signupPhoneInputDirty = false;
let signupPhoneInputFocused = false;
let signupPhoneInputPersistPromise = null;
let cloudflareDomainEditMode = false;
let cloudflareTempEmailDomainEditMode = false;
let modalChoiceResolver = null;
@@ -7012,10 +7015,29 @@ function getRuntimeSignupPhoneValue(state = latestState) {
).trim();
}
function getSignupPhoneInputValue() {
return typeof inputSignupPhone !== 'undefined' && inputSignupPhone
? String(inputSignupPhone.value || '').trim()
: '';
}
function shouldPreserveSignupPhoneInputValue(stateSignupPhone = '') {
if (typeof inputSignupPhone === 'undefined' || !inputSignupPhone || !signupPhoneInputDirty) {
return false;
}
if (getSignupPhoneInputValue() === String(stateSignupPhone || '').trim()) {
signupPhoneInputDirty = false;
return false;
}
return signupPhoneInputFocused || (typeof document !== 'undefined' && document.activeElement === inputSignupPhone);
}
function syncSignupPhoneInputFromState(state = latestState) {
const signupPhone = getRuntimeSignupPhoneValue(state);
if (typeof inputSignupPhone !== 'undefined' && inputSignupPhone) {
inputSignupPhone.value = signupPhone;
if (!shouldPreserveSignupPhoneInputValue(signupPhone)) {
inputSignupPhone.value = signupPhone;
}
}
if (typeof rowSignupPhone !== 'undefined' && rowSignupPhone) {
const phoneVerificationEnabled = typeof inputPhoneVerificationEnabled !== 'undefined' && inputPhoneVerificationEnabled
@@ -7029,7 +7051,10 @@ function syncSignupPhoneInputFromState(state = latestState) {
const selectedMethod = typeof normalizeSignupMethod === 'function'
? normalizeSignupMethod(rawSignupMethod)
: (String(rawSignupMethod || '').trim().toLowerCase() === 'phone' ? 'phone' : 'email');
rowSignupPhone.style.display = phoneVerificationEnabled && (selectedMethod === 'phone' || Boolean(signupPhone)) ? '' : 'none';
rowSignupPhone.style.display = phoneVerificationEnabled
&& (selectedMethod === 'phone' || Boolean(signupPhone) || Boolean(getSignupPhoneInputValue()) || signupPhoneInputDirty)
? ''
: 'none';
}
}
@@ -7048,6 +7073,74 @@ async function setRuntimeSignupPhoneState(phoneNumber) {
return normalizedPhone;
}
async function persistSignupPhoneInputValue(options = {}) {
const { final = true, silent = true } = options;
if (typeof inputSignupPhone === 'undefined' || !inputSignupPhone) {
return getRuntimeSignupPhoneValue(latestState);
}
if (signupPhoneInputPersistPromise) {
return signupPhoneInputPersistPromise;
}
const phoneNumber = getSignupPhoneInputValue();
inputSignupPhone.value = phoneNumber;
const currentPhone = getRuntimeSignupPhoneValue(latestState);
if (!signupPhoneInputDirty && phoneNumber === currentPhone) {
return phoneNumber;
}
signupPhoneInputPersistPromise = (async () => {
const response = await chrome.runtime.sendMessage({
type: final ? 'SAVE_SIGNUP_PHONE' : 'SET_SIGNUP_PHONE_STATE',
source: 'sidepanel',
payload: { phoneNumber },
});
if (response?.error) {
throw new Error(response.error);
}
const normalizedPhone = String(response?.phoneNumber || phoneNumber || '').trim();
signupPhoneInputDirty = getSignupPhoneInputValue() !== normalizedPhone;
syncLatestState({
signupPhoneNumber: normalizedPhone,
...(normalizedPhone
? {
accountIdentifierType: 'phone',
accountIdentifier: normalizedPhone,
}
: (String(latestState?.accountIdentifierType || '').trim().toLowerCase() === 'phone'
? {
accountIdentifierType: null,
accountIdentifier: '',
}
: {})),
});
syncSignupPhoneInputFromState(latestState);
if (!silent) {
showToast(normalizedPhone ? '注册手机号已保存。' : '注册手机号已清空。', 'success', 1600);
}
return normalizedPhone;
})();
try {
return await signupPhoneInputPersistPromise;
} finally {
signupPhoneInputPersistPromise = null;
}
}
async function persistSignupPhoneInputForAction() {
if (typeof inputSignupPhone === 'undefined' || !inputSignupPhone) {
return;
}
const phoneNumber = getSignupPhoneInputValue();
const currentPhone = getRuntimeSignupPhoneValue(latestState);
if (!signupPhoneInputDirty && phoneNumber === currentPhone) {
return;
}
await persistSignupPhoneInputValue({ final: true, silent: true });
}
async function openPlusManualConfirmationDialog(options = {}) {
const method = String(options.method || '').trim().toLowerCase();
const gopayValue = typeof PLUS_PAYMENT_METHOD_GOPAY !== 'undefined' ? PLUS_PAYMENT_METHOD_GOPAY : 'gopay';
@@ -7207,6 +7300,7 @@ async function clearRegistrationSignupPhone(options = {}) {
if (typeof inputSignupPhone !== 'undefined' && inputSignupPhone) {
inputSignupPhone.value = '';
}
signupPhoneInputDirty = false;
syncSignupPhoneInputFromState(latestState);
return;
}
@@ -7214,6 +7308,7 @@ async function clearRegistrationSignupPhone(options = {}) {
if (typeof inputSignupPhone !== 'undefined' && inputSignupPhone) {
inputSignupPhone.value = '';
}
signupPhoneInputDirty = false;
syncLatestState({
signupPhoneNumber: '',
...(String(latestState?.accountIdentifierType || '').trim().toLowerCase() === 'phone'
@@ -7309,6 +7404,7 @@ async function saveSettings(options = {}) {
async function persistCurrentSettingsForAction() {
clearTimeout(settingsAutoSaveTimer);
await waitForSettingsSaveIdle();
await persistSignupPhoneInputForAction();
await saveSettings({ silent: true, force: true });
}
@@ -10203,6 +10299,8 @@ async function handleSkipStep(step) {
}
}
await persistCurrentSettingsForAction();
const response = await chrome.runtime.sendMessage({
type: 'SKIP_STEP',
source: 'sidepanel',
@@ -10728,27 +10826,31 @@ inputEmail.addEventListener('change', async () => {
});
inputEmail.addEventListener('input', updateButtonStates);
if (typeof inputSignupPhone !== 'undefined' && inputSignupPhone) {
inputSignupPhone.addEventListener('change', async () => {
const phoneNumber = inputSignupPhone.value.trim();
inputSignupPhone.value = phoneNumber;
inputSignupPhone.addEventListener('focus', () => {
signupPhoneInputFocused = true;
});
inputSignupPhone.addEventListener('blur', async () => {
signupPhoneInputFocused = false;
if (!signupPhoneInputDirty) {
return;
}
try {
if (phoneNumber) {
const response = await chrome.runtime.sendMessage({
type: 'SAVE_SIGNUP_PHONE',
source: 'sidepanel',
payload: { phoneNumber },
});
if (response?.error) {
throw new Error(response.error);
}
} else {
await clearRegistrationSignupPhone();
}
await persistSignupPhoneInputValue({ final: true, silent: true });
} catch (err) {
showToast(err.message, 'error');
}
});
inputSignupPhone.addEventListener('input', updateButtonStates);
inputSignupPhone.addEventListener('change', async () => {
try {
await persistSignupPhoneInputValue({ final: true, silent: true });
} catch (err) {
showToast(err.message, 'error');
}
});
inputSignupPhone.addEventListener('input', () => {
signupPhoneInputDirty = true;
updateButtonStates();
});
}
inputVpsUrl.addEventListener('input', () => {
markSettingsDirty(true);
@@ -296,6 +296,66 @@ test('step 7 forwards phone login identity payload when account identifier is ph
]);
});
test('step 7 can start from a manually filled signup phone without completed step 2 or step 3 state', async () => {
const source = fs.readFileSync('background/steps/oauth-login.js', 'utf8');
const globalScope = {};
const api = new Function('self', `${source}; return self.MultiPageBackgroundStep7;`)(globalScope);
const events = {
payloads: [],
completions: [],
};
const executor = api.createStep7Executor({
addLog: async () => {},
completeStepFromBackground: async (step, payload) => {
events.completions.push({ step, payload });
},
getErrorMessage: (error) => error?.message || String(error || ''),
getLoginAuthStateLabel: (state) => state || 'unknown',
getState: async () => ({
accountIdentifierType: 'phone',
accountIdentifier: '+447780579093',
signupPhoneNumber: '+447780579093',
stepStatuses: { 2: 'pending', 3: 'pending' },
}),
isStep6RecoverableResult: (result) => result?.step6Outcome === 'recoverable',
isStep6SuccessResult: (result) => result?.step6Outcome === 'success',
refreshOAuthUrlBeforeStep6: async () => 'https://oauth.example/latest',
reuseOrCreateTab: async () => {},
sendToContentScriptResilient: async (_sourceName, message) => {
events.payloads.push(message.payload);
return {
step6Outcome: 'success',
state: 'phone_verification_page',
loginVerificationRequestedAt: 987654,
};
},
STEP6_MAX_ATTEMPTS: 3,
throwIfStopped: () => {},
});
await executor.executeStep7({
accountIdentifierType: 'phone',
accountIdentifier: '+447780579093',
signupPhoneNumber: '+447780579093',
stepStatuses: { 2: 'pending', 3: 'pending' },
});
assert.equal(events.payloads[0].loginIdentifierType, 'phone');
assert.equal(events.payloads[0].phoneNumber, '+447780579093');
assert.equal(events.payloads[0].email, '');
assert.equal(events.payloads[0].password, '');
assert.deepStrictEqual(events.completions, [
{
step: 7,
payload: {
loginVerificationRequestedAt: 987654,
},
},
]);
});
test('step 7 stops immediately when management secret is missing', async () => {
const source = fs.readFileSync('background/steps/oauth-login.js', 'utf8');
const globalScope = {};
@@ -282,10 +282,14 @@ let clearedTimer = null;
let settingsSaveInFlight = false;
let settingsDirty = false;
let settingsSaveRevision = 0;
let phonePersistCalls = 0;
const saveCalls = [];
function clearTimeout(value) {
clearedTimer = value;
}
async function persistSignupPhoneInputForAction() {
phonePersistCalls += 1;
}
function updateSaveButtonState() {}
function collectSettingsPayload() {
return { luckmailApiKey: 'autofilled-key' };
@@ -308,7 +312,7 @@ ${bundle}
return {
persistCurrentSettingsForAction,
getSnapshot() {
return { clearedTimer, saveCalls };
return { clearedTimer, phonePersistCalls, saveCalls };
},
};
`)();
@@ -317,5 +321,6 @@ return {
const snapshot = api.getSnapshot();
assert.equal(snapshot.clearedTimer, 123);
assert.equal(snapshot.phonePersistCalls, 1);
assert.deepStrictEqual(snapshot.saveCalls, [{ luckmailApiKey: 'autofilled-key' }]);
});
@@ -136,10 +136,57 @@ test('sidepanel html exposes phone verification toggle and multi-provider SMS ro
test('sidepanel source wires runtime signup phone field to background sync messages', () => {
assert.match(sidepanelSource, /function getRuntimeSignupPhoneValue\(state = latestState\)/);
assert.match(sidepanelSource, /function shouldPreserveSignupPhoneInputValue\(stateSignupPhone = ''\)/);
assert.match(sidepanelSource, /function syncSignupPhoneInputFromState\(state = latestState\)/);
assert.match(sidepanelSource, /async function persistSignupPhoneInputForAction\(\)/);
assert.match(sidepanelSource, /type:\s*'SET_SIGNUP_PHONE_STATE'/);
assert.match(sidepanelSource, /type:\s*'SAVE_SIGNUP_PHONE'/);
assert.match(sidepanelSource, /final \? 'SAVE_SIGNUP_PHONE' : 'SET_SIGNUP_PHONE_STATE'/);
assert.match(sidepanelSource, /message\.payload\.signupPhoneNumber !== undefined/);
assert.match(sidepanelSource, /await persistSignupPhoneInputForAction\(\);\s*await saveSettings/);
assert.match(sidepanelSource, /async function handleSkipStep\(step\)[\s\S]*await persistCurrentSettingsForAction\(\);/);
assert.match(sidepanelSource, /inputSignupPhone\.addEventListener\('input'[\s\S]*signupPhoneInputDirty = true/);
});
test('runtime signup phone sync preserves active manual input until it is saved', () => {
const api = new Function(`
let latestState = { signupMethod: 'phone', phoneVerificationEnabled: true, signupPhoneNumber: '+441111111111' };
let signupPhoneInputDirty = true;
let signupPhoneInputFocused = true;
const inputSignupPhone = { value: '+442222222222' };
const rowSignupPhone = { style: { display: 'none' } };
const inputPhoneVerificationEnabled = { checked: true };
const document = { activeElement: inputSignupPhone };
function getSelectedSignupMethod() { return 'phone'; }
${extractFunction('normalizeSignupMethod')}
${extractFunction('getRuntimeSignupPhoneValue')}
${extractFunction('getSignupPhoneInputValue')}
${extractFunction('shouldPreserveSignupPhoneInputValue')}
${extractFunction('syncSignupPhoneInputFromState')}
return {
inputSignupPhone,
rowSignupPhone,
syncSignupPhoneInputFromState,
getDirty: () => signupPhoneInputDirty,
setFocused: (value) => { signupPhoneInputFocused = Boolean(value); document.activeElement = value ? inputSignupPhone : null; },
};
`)();
api.syncSignupPhoneInputFromState({
signupMethod: 'phone',
phoneVerificationEnabled: true,
signupPhoneNumber: '+441111111111',
});
assert.equal(api.inputSignupPhone.value, '+442222222222');
assert.equal(api.rowSignupPhone.style.display, '');
assert.equal(api.getDirty(), true);
api.setFocused(false);
api.syncSignupPhoneInputFromState({
signupMethod: 'phone',
phoneVerificationEnabled: true,
signupPhoneNumber: '+441111111111',
});
assert.equal(api.inputSignupPhone.value, '+441111111111');
});
test('hero sms country helpers keep empty summary state and expose removable order handling', () => {
+1 -1
View File
@@ -155,7 +155,7 @@
- 本轮联动自检重点:
1. Step 2 一旦自动取到手机号,必须立刻广播并回填侧栏运行态手机号。
2. sidepanel 重新加载后,必须从当前 state 恢复“注册手机号”文本框,而不是只恢复邮箱。
3. 用户手动修改“注册手机号”时,只能改运行态身份槽位,不能误写入持久配置或配置导入导出。
3. 用户手动修改“注册手机号”时,只能改运行态身份槽位,不能误写入持久配置或配置导入导出;编辑中的值不能被后台旧 state 覆盖,执行步骤或跳过步骤前必须先保存当前输入框值
4. 第 4 步继续依赖当前手机号注册 activation 获取验证码;只有手机号字符串、没有 activation 时,只能作为页面填写来源,不能伪造成自动接码订单。
5. 显示与身份同步统一以侧栏运行态手机号为准,避免 UI 空白和后台状态脱节。
- 第 8 步固定的验证码页显示邮箱 `step8VerificationTargetEmail`