cieanyau/console-dev
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复密码输入可访问性并统一新手机号为中国大陆区号

Browse Source
This commit is contained in:
cieanyau committed 2026-11-06 04:53:45 +08:00
1 parent 990b802553
commit f6ab3c9087
15 files changed
+592 -362
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/assets/styles/PhoneCodeField.CwyHXfML.css
+2 -31
View File
@@ -1,35 +1,6 @@
/* 手机号国家区号字段：区号选择、输入与字段错误说明。 */
/* 导入方：app/components/PhoneCodeField.vue、app/pages/forgot-password.vue、app/pages/oauth/bind.vue、app/pages/register.vue。 */
/* 固定手机号区号说明：只有静态文本，不继承输入框或国家选择器的交互外观。 */
.phone-code-field[data-v-24cb0489] {
gap: 6px;
display: grid;
}
.phone-code-field label[data-v-24cb0489] {
color: var(--p-text-muted-color);
font-size: 0.875rem;
}
.phone-code-input[data-v-24cb0489] {
border: 1px solid
var(--p-inputtext-border-color, var(--p-content-border-color));
border-radius: var(--p-inputtext-border-radius, 6px);
background: var(--p-inputtext-background, var(--p-content-background));
align-items: center;
gap: 6px;
padding: 8px 12px;
display: flex;
}
.phone-code-input input[data-v-24cb0489] {
width: 100%;
min-width: 0;
color: inherit;
font: inherit;
background: 0 0;
border: 0;
outline: 0;
}
.phone-code-input[data-v-24cb0489]:focus-within {
outline: 1px solid var(--p-primary-color);
}
small[data-v-24cb0489] {
color: var(--p-text-muted-color);
white-space: nowrap;
}
app/assets/styles/account.CTvLXxT_.css
+3 -2
View File
@@ -141,8 +141,9 @@
flex: 1;
min-width: 180px;
}
.code-select[data-v-8ca4eb3d] {
flex: 0 0 160px;
.inline[data-v-8ca4eb3d] > .phone-code-field {
flex: 0 0 auto;
min-width: 0;
}
.actions[data-v-8ca4eb3d] {
border-top: 1px solid var(--p-content-border-color, #e2e8f0);
app/components/HostList.vue
+1 -1
View File
@@ -62,7 +62,7 @@ import PaymentDialog from "~/components/PaymentDialog.vue";
import { t as useListPage_t } from "~/lib/useListPage.js";
import { r as instance_status_r } from "~/lib/instance-status.js";
import { t as instance_status_t } from "~/lib/instance-status.js";
import password from "primevue/password";
import password from "~/components/PasswordField.vue";
import textarea from "primevue/textarea";
import menu from "primevue/menu";
import tag from "primevue/tag";
app/components/PasswordField.vue
+95
View File
@@ -0,0 +1,95 @@
<script setup>
/** 复用 PrimeVue 的密码/反馈状态，只统一原生输入语义与可键盘访问的显隐操作。 */
import { computed, nextTick, ref, useSlots } from "vue";
import Password from "primevue/password";
defineOptions({ inheritAttrs: false });
const props = defineProps({
autocomplete: { type: String, default: undefined },
inputProps: { type: Object, default: () => ({}) },
disabled: Boolean,
});
const slots = useSlots();
const forwardedSlots = () =>
Object.keys(slots).filter(
(name) => !["maskicon", "unmaskicon"].includes(name),
);
// autocomplete 属于真实 input，而不是 Password 的包装 DIV；保留已有 aria 等输入属性。
const nativeProps = computed(() => ({
...props.inputProps,
autocomplete: props.autocomplete ?? props.inputProps?.autocomplete ?? "off",
}));
const toggleButton = ref(null);
async function togglePassword(callback) {
callback();
// PrimeVue切换两个显隐slot时会替换按钮；把焦点交回新按钮，键盘才能连续显示/隐藏。
await nextTick();
toggleButton.value?.focus();
}
</script>
<template>
<Password
v-bind="$attrs"
class="password-field"
:input-props="nativeProps"
:disabled="disabled"
>
<template v-for="name in forwardedSlots()" #[name]="scope">
<slot :name="name" v-bind="scope" />
</template>
<template #unmaskicon="{ toggleCallback, class: iconClass }">
<button
ref="toggleButton"
type="button"
:class="['password-toggle', iconClass]"
aria-label="显示密码"
aria-pressed="false"
:disabled="disabled"
@click="togglePassword(toggleCallback)"
>
<i class="pi pi-eye" aria-hidden="true" />
</button>
</template>
<template #maskicon="{ toggleCallback, class: iconClass }">
<button
ref="toggleButton"
type="button"
:class="['password-toggle', iconClass]"
aria-label="隐藏密码"
aria-pressed="true"
:disabled="disabled"
@click="togglePassword(toggleCallback)"
>
<i class="pi pi-eye-slash" aria-hidden="true" />
</button>
</template>
</Password>
</template>
<style scoped>
.password-field .password-toggle {
position: absolute;
inset-block: 0;
inset-inline-end: 0;
display: grid;
place-items: center;
width: 44px;
height: 100%;
min-height: 0;
margin: 0;
padding: 0;
color: var(--p-text-muted-color);
background: transparent;
border: 0;
border-radius: var(--p-form-field-border-radius, 6px);
cursor: pointer;
}
.password-field .password-toggle:focus-visible {
outline: 2px solid var(--p-primary-color);
outline-offset: -3px;
}
.password-field .password-toggle:disabled {
cursor: not-allowed;
}
</style>
app/components/PhoneCodeField.vue
+6 -173
View File
@@ -1,175 +1,8 @@
<script>
/** 国际电话区号输入；地区列表按需请求，加载失败仍允许直接填写区号，不阻塞账号表单。 */
<script setup>
/** 新输入手机号只支持中国大陆，区号由请求方固定为86，不再提供地区选择或加载国家列表。 */
import "~/assets/styles/PhoneCodeField.CwyHXfML.css";
import { toDisplayString } from "vue";
import { renderList } from "vue";
import { useId } from "vue";
import { onBeforeUnmount } from "vue";
import { ref } from "vue";
import { createCommentVNode } from "vue";
import { createElementBlock } from "vue";
import { Fragment } from "vue";
import { createElementVNode } from "vue";
import { unref } from "vue";
import { defineComponent } from "vue";
import { openBlock } from "vue";
import { useApi } from "~/lib/auth.js";
import { t as _plugin_vue_export_helper_t } from "~/lib/_plugin-vue_export-helper.js";
var m = {
class: `phone-code-field`,
},
h = [`for`],
g = {
class: `phone-code-input`,
},
_ = [`id`, `value`, `list`, `disabled`],
v = [`id`],
y = [`value`],
b = {
key: 0,
role: `status`,
},
x = {
key: 1,
role: `status`,
},
S = Object.assign(
_plugin_vue_export_helper_t(
defineComponent({
__name: `PhoneCodeField`,
props: {
modelValue: {},
disabled: {
type: Boolean,
},
},
emits: [`update:modelValue`],
setup(u, { emit: p }) {
let S = u,
C = p,
w = useId(),
T = useApi(),
E = ref([]),
D = ref(!1),
O = ref(``),
k = !1;
onBeforeUnmount(() => {
k = !0;
});
async function A() {
// 地区列表仅收录 1–4 位且首位非零的区号，成功列表可复用；卸载后不回写。
if (!(D.value || E.value.length)) {
((D.value = !0), (O.value = ``));
try {
let e = await T.get(`/country`, void 0, !1);
if (k) return;
E.value = (e.list || [])
.filter((e) => /^[1-9]\d{0,3}$/.test(String(e.phone_code)))
.map((e) => ({
phone_code: String(e.phone_code),
name: e.name_zh || e.name || ``,
}));
} catch {
k || (O.value = `地区列表暂不可用，可直接填写国际区号`);
} finally {
k || (D.value = !1);
}
}
}
return (n, r) => (
openBlock(),
createElementBlock(`div`, m, [
createElementVNode(
`label`,
{
for: `${unref(w)}-phone-code`,
},
`国际区号`,
8,
h,
),
createElementVNode(`div`, g, [
(r[1] ||= createElementVNode(
`span`,
{
"aria-hidden": `true`,
},
`+`,
-1,
)),
createElementVNode(
`input`,
{
id: `${unref(w)}-phone-code`,
value: S.modelValue,
list: `${unref(w)}-countries`,
inputmode: `numeric`,
autocomplete: `tel-country-code`,
maxlength: `4`,
disabled: u.disabled,
onFocus: A,
onInput: (r[0] ||= (e) =>
C(
`update:modelValue`,
e.target.value.replace(/^\+/, ``).trim(),
)),
},
null,
40,
_,
),
]),
createElementVNode(
`datalist`,
{
id: `${unref(w)}-countries`,
},
[
(openBlock(!0),
createElementBlock(
Fragment,
null,
renderList(
unref(E),
(t, n) => (
openBlock(),
createElementBlock(
`option`,
{
key: `${t.phone_code}-${n}`,
value: t.phone_code,
},
toDisplayString(t.name) +
` +` +
toDisplayString(t.phone_code),
9,
y,
)
),
),
128,
)),
],
8,
v,
),
unref(D)
? (openBlock(), createElementBlock(`small`, b, `正在加载地区…`))
: createCommentVNode(``, !0),
unref(O)
? (openBlock(),
createElementBlock(`small`, x, toDisplayString(unref(O)), 1))
: createCommentVNode(``, !0),
])
);
},
}),
[[`__scopeId`, `data-v-24cb0489`]],
),
{
__name: `PhoneCodeField`,
},
);
export {};
export default S;
</script>
<template>
<span class="phone-code-field" data-v-24cb0489>中国大陆 +86</span>
</template>
app/components/instance/InstanceAccess.vue
+2 -1
View File
@@ -44,7 +44,7 @@ import checkbox from "primevue/checkbox";
import OsIcon from "~/components/OsIcon.vue";
import OperationNotice from "~/components/OperationNotice.vue";
import OperatePasswordGate from "~/components/OperatePasswordGate.vue";
import password from "primevue/password";
import password from "~/components/PasswordField.vue";
import skeleton from "primevue/skeleton";
import { t as os_name_t } from "~/lib/os-name.js";
import { t as password_t } from "~/lib/password-2.js";
@@ -2048,6 +2048,7 @@ var xe = {
"onUpdate:modelValue": (n[27] ||= (e) =>
(unref(B).password = e)),
"input-id": `${unref(w)}-rescue-password`,
autocomplete: `new-password`,
feedback: !1,
toggleMask: ``,
class: `grow`,
app/components/instance/InstanceRenewDialog.vue
+1 -1
View File
@@ -31,7 +31,7 @@ import inputtext from "primevue/inputtext";
import select from "primevue/select";
import OperationNotice from "~/components/OperationNotice.vue";
import OperatePasswordGate from "~/components/OperatePasswordGate.vue";
import password from "primevue/password";
import password from "~/components/PasswordField.vue";
import skeleton from "primevue/skeleton";
import { n as renewal_quote_n } from "~/lib/renewal-quote.js";
import { r as renewal_quote_r } from "~/lib/renewal-quote.js";
app/config/primevue.js
+7
View File
@@ -15,6 +15,13 @@ const preset = definePreset(Aura, {
),
colorScheme: {
light: {
// 普通字号白字按钮至少4.5:1；浅色主色从blue-600起，hover/active继续加深，暗色令牌不变。
primary: {
color: "{primary.600}",
contrastColor: "#ffffff",
hoverColor: "{primary.700}",
activeColor: "{primary.800}",
},
surface: Object.fromEntries(
[0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map(
(shade) => [shade, shade === 0 ? "#ffffff" : `{slate.${shade}}`],
app/lib/useVerifyCode.js
+2 -7
View File
@@ -49,15 +49,10 @@ function i(i) {
email: t,
});
else {
let e = String(
typeof i.phoneCode == `function`
? i.phoneCode()
: (i.phoneCode ?? 86),
).trim();
if (!/^[1-9]\d{0,3}$/.test(e)) throw Error(`请输入有效的国际电话区号`);
// 此发送器只服务新输入手机号；已保存号码的安全验证走原后端账号契约，不在这里改写。
await a.post(`/phone/code`, {
...n,
phone_code: Number(e),
phone_code: 86,
phone: t,
});
}
app/pages/account/index.vue
+9 -77
View File
@@ -49,7 +49,8 @@ import CaptchaField from "~/components/CaptchaField.vue";
import select from "primevue/select";
import ClientLevelDialog from "~/components/ClientLevelDialog.vue";
import { t as interval_t } from "~/lib/interval.js";
import password from "primevue/password";
import password from "~/components/PasswordField.vue";
import PhoneCodeField from "~/components/PhoneCodeField.vue";
import skeleton from "primevue/skeleton";
import toggleswitch from "primevue/toggleswitch";
import { t as useCaptcha_t } from "~/lib/useCaptcha.js";
@@ -204,8 +205,7 @@ var Ce = {
_t = {
class: `field`,
},
vt = [`id`, `for`],
yt = [`id`],
vt = [`for`],
bt = {
class: `inline`,
},
@@ -729,7 +729,6 @@ var Ce = {
}
}
let q = reactive({
phone_code: 86,
newPhone: ``,
code: ``,
}),
@@ -799,7 +798,7 @@ var Ce = {
try {
if (!q.newPhone.trim()) throw Error(`请输入新手机号`);
(await jn(`phone`, `update`, {
phone_code: q.phone_code,
phone_code: 86,
phone: q.newPhone.trim(),
}),
(O.value = `验证码已发送`));
@@ -815,7 +814,7 @@ var Ce = {
(M(), (Y.value = !0));
try {
(await b.put(`/account/phone`, {
phone_code: q.phone_code,
phone_code: 86,
phone: q.newPhone,
code: q.code,
}),
@@ -1406,6 +1405,7 @@ var Ce = {
toggleMask: ``,
fluid: ``,
placeholder: `输入当前密码`,
autocomplete: `current-password`,
},
null,
8,
@@ -1617,6 +1617,7 @@ var Ce = {
toggleMask: ``,
fluid: ``,
placeholder: `输入新密码`,
autocomplete: `new-password`,
},
null,
8,
@@ -1647,6 +1648,7 @@ var Ce = {
toggleMask: ``,
fluid: ``,
placeholder: `再次输入新密码`,
autocomplete: `new-password`,
},
null,
8,
@@ -2068,88 +2070,18 @@ var Ce = {
createElementVNode(
`label`,
{
id: `${unref(x)}-phone-label`,
for: `${unref(x)}-new-phone`,
},
`新手机号`,
8,
vt,
),
createElementVNode(
`span`,
{
id: `${unref(x)}-phone-code-label`,
class: `sr-only`,
},
`国际区号`,
8,
yt,
),
createElementVNode(
`div`,
bt,
[
createVNode(
g,
{
modelValue:
unref(q)
.phone_code,
"onUpdate:modelValue":
(r[19] ||= (
e,
) =>
(unref(
q,
).phone_code =
e)),
"aria-labelledby": `${unref(x)}-phone-label ${unref(x)}-phone-code-label`,
options:
unref(Zt),
optionLabel: `phone_code`,
optionValue: `phone_code`,
filter: ``,
class: `code-select`,
},
{
option: withCtx(
({
option: t,
}) => [
createTextVNode(
`+` +
toDisplayString(
t.phone_code,
) +
` ` +
toDisplayString(
t.name,
),
1,
),
],
),
value: withCtx(
({
value: t,
}) => [
createTextVNode(
`+` +
toDisplayString(
t,
),
1,
),
],
),
_: 1,
},
8,
[
`modelValue`,
`aria-labelledby`,
`options`,
],
PhoneCodeField,
),
createVNode(
l,
app/pages/forgot-password.vue
+3 -20
View File
@@ -36,7 +36,7 @@ import { n as auth_redirect_n } from "~/lib/auth-redirect.js";
import { t as auth_redirect_t } from "~/lib/auth-redirect.js";
import inputtext from "primevue/inputtext";
import CaptchaField from "~/components/CaptchaField.vue";
import password from "primevue/password";
import password from "~/components/PasswordField.vue";
import PhoneCodeField from "~/components/PhoneCodeField.vue";
import { t as useCaptcha_t } from "~/lib/useCaptcha.js";
import { t as composables_t } from "~/lib/composables-2.js";
@@ -94,7 +94,6 @@ var D = {
code: ``,
password: ``,
re_password: ``,
phone_code: `86`,
}),
W = ref(``),
G = ref(!1),
@@ -120,7 +119,6 @@ var D = {
action: `password_reset`,
captcha: K,
error: W,
phoneCode: () => U.phone_code,
});
// 复用 password_reset 场景的验证码发送与倒计时，不在页面另写一套短信请求。
function fe() {
@@ -140,8 +138,6 @@ var D = {
if (!e)
return (W.value =
H.value === `email` ? `请输入邮箱` : `请输入手机号`);
if (H.value === `phone` && !/^[1-9]\d{0,3}$/.test(U.phone_code))
return (W.value = `请输入有效的国际电话区号`);
if (!U.code.trim()) return (W.value = `请输入验证码`);
if (!U.password) return (W.value = `请输入新密码`);
if (U.password !== U.re_password)
@@ -151,7 +147,7 @@ var D = {
(await z.post(`/account/password_reset`, {
type: H.value,
account: e,
phone_code: U.phone_code,
phone_code: `86`,
code: U.code.trim(),
password: U.password,
re_password: U.re_password,
@@ -205,20 +201,7 @@ var D = {
},
[
unref(H) === `phone`
? (openBlock(),
createBlock(
f,
{
key: 0,
modelValue: unref(U).phone_code,
"onUpdate:modelValue": (o[0] ||= (e) =>
(unref(U).phone_code = e)),
disabled: unref(G) || unref(Q),
},
null,
8,
[`modelValue`, `disabled`],
))
? (openBlock(), createBlock(f, { key: 0 }))
: createCommentVNode(``, !0),
createElementVNode(`div`, O, [
(o[8] ||= createElementVNode(
app/pages/login.vue
+4 -8
View File
@@ -15,7 +15,7 @@ import { NuxtLink } from "#components";
import Button from "primevue/button";
import InputText from "primevue/inputtext";
import Message from "primevue/message";
import Password from "primevue/password";
import Password from "~/components/PasswordField.vue";
import AuthProviders from "~/components/AuthProviders.vue";
import CaptchaField from "~/components/CaptchaField.vue";
import GenericOAuthProviders from "~/components/GenericOAuthProviders.vue";
@@ -42,7 +42,8 @@ const site = useSiteConfig();
const { config, error: configError } = site;
const form = reactive({ account: "", password: "", code: "" });
const loginMode = ref("password");
const phoneCode = ref("86");
// 新输入的手机号统一为中国大陆，不从用户输入或地区选择器派生区号。
const phoneCode = "86";
const errorMessage = ref("");
const submitting = ref(false);
const authProviders = ref(null);
@@ -115,7 +116,6 @@ const {
action: "login",
captcha,
error: errorMessage,
phoneCode: () => phoneCode.value,
});
const fieldsDisabled = computed(() => formLocked.value || sendingCode.value);
const captchaBusy = computed(
@@ -304,10 +304,6 @@ async function submitLogin() {
errorMessage.value = "当前登录方式未开放，请选择其他方式";
return;
}
if (isPhoneAccount.value && !/^[1-9]\d{0,3}$/.test(phoneCode.value)) {
errorMessage.value = "请输入有效的国际电话区号";
return;
}
if (loginMode.value === "code" && form.account.includes("@")) {
errorMessage.value = "请输入手机号";
return;
@@ -334,7 +330,7 @@ async function submitLogin() {
token: captchaToken.value,
type: loginMode.value,
code: form.code.trim(),
phoneCode: isPhoneAccount.value ? phoneCode.value : "",
phoneCode: isPhoneAccount.value ? phoneCode : "",
});
}
</script>
app/pages/oauth/bind.vue
+2 -21
View File
@@ -112,7 +112,6 @@ var ve = {
F = auth_redirect_r(M.query.redirect),
I = ref(`phone`),
L = ref(``),
R = ref(`86`),
z = ref(``),
B = ref(!1),
V = ref(!1),
@@ -182,7 +181,6 @@ var ve = {
action: `oauth`,
captcha: q,
error: H,
phoneCode: () => R.value,
}),
{
needed: Ae,
@@ -223,10 +221,6 @@ var ve = {
H.value = `请先阅读并同意服务协议和隐私协议`;
return;
}
if (I.value === `phone` && !/^[1-9]\d{0,3}$/.test(R.value)) {
H.value = `请输入有效的国际电话区号`;
return;
}
V.value = !0;
try {
let e = q.validationError?.();
@@ -238,7 +232,7 @@ var ve = {
{
type: I.value,
account: L.value.trim(),
phone_code: R.value,
phone_code: `86`,
code: z.value.trim(),
...(N && P
? {
@@ -404,20 +398,7 @@ var ve = {
),
createElementVNode(`div`, T, [
unref(I) === `phone`
? (openBlock(),
createBlock(
u,
{
key: 0,
modelValue: unref(R),
"onUpdate:modelValue": (n[2] ||= (e) =>
isRef(R) ? (R.value = e) : null),
disabled: unref(V) || unref(J),
},
null,
8,
[`modelValue`, `disabled`],
))
? (openBlock(), createBlock(u, { key: 0 }))
: createCommentVNode(``, !0),
createVNode(
g,
app/pages/register.vue
+3 -20
View File
@@ -43,7 +43,7 @@ import inputtext from "primevue/inputtext";
import CaptchaField from "~/components/CaptchaField.vue";
import select from "primevue/select";
import checkbox from "primevue/checkbox";
import password from "primevue/password";
import password from "~/components/PasswordField.vue";
import textarea from "primevue/textarea";
import PhoneCodeField from "~/components/PhoneCodeField.vue";
import { i as product_fields_i } from "~/lib/product-fields.js";
@@ -209,7 +209,6 @@ var ve = {
username: ``,
password: ``,
re_password: ``,
phone_code: `86`,
customfield: {},
}),
I = ref(``),
@@ -264,7 +263,6 @@ var ve = {
action: `register`,
captcha: R,
error: I,
phoneCode: () => F.phone_code,
});
// 仅对已开放且需要验证码的注册方式发送验证码，倒计时与验证码挑战由公共发送器管理。
function ze() {
@@ -291,8 +289,6 @@ var ve = {
if (!e)
return (I.value =
P.value === `email` ? `请输入邮箱` : `请输入手机号`);
if (P.value === `phone` && !/^[1-9]\d{0,3}$/.test(F.phone_code))
return (I.value = `请输入有效的国际电话区号`);
if (K.value && !F.code.trim()) return (I.value = `请输入验证码`);
if (!F.password) return (I.value = `请输入密码`);
if (F.password !== F.re_password)
@@ -308,7 +304,7 @@ var ve = {
(await w.post(`/register`, {
type: P.value,
account: e,
phone_code: F.phone_code,
phone_code: `86`,
code: K.value ? F.code.trim() : ``,
username: F.username.trim(),
password: F.password,
@@ -455,20 +451,7 @@ var ve = {
),
]),
unref(P) === `phone`
? (openBlock(),
createBlock(
m,
{
key: 3,
modelValue: unref(F).phone_code,
"onUpdate:modelValue": (a[2] ||= (e) =>
(unref(F).phone_code = e)),
disabled: unref(L) || unref(Z),
},
null,
8,
[`modelValue`, `disabled`],
))
? (openBlock(), createBlock(m, { key: 3 }))
: createCommentVNode(``, !0),
createElementVNode(`div`, D, [
createElementVNode(
tests/review-online-auth.e2e.test.mjs
+452
View File
@@ -0,0 +1,452 @@
/** 认证与手机号回归仅经生产页面和本地 HTTP 边界验证，不请求真实短信或修改线上账号。 */
import assert from "node:assert/strict";
import { test } from "node:test";
import {
appOrigin,
backendOrigin,
eventually,
fixtureRequest,
login,
scenario,
} from "./helpers/console-browser.mjs";
async function authBoundary(page, overrides = {}) {
// 外部响应使用既有接口信封；只捕获本组声明的接口，不给缺失契约统一返回成功。
const observed = [];
const replies = {
"/register": {},
"/account/password_reset": {},
"/oauth/token": { url: "/oauth/bind" },
"/oauth/client/bind": { jwt: "e2e-session-token" },
"/country": {
list: [
{ id: 1, name: "中国", name_zh: "中国", phone_code: 86 },
{ id: 2, name: "美国", name_zh: "美国", phone_code: 1 },
],
},
"/account/phone/old": {},
"/account/phone": {},
...overrides,
};
await page
.context()
.route(`${backendOrigin}/console/v1/**`, async (route) => {
const request = route.request();
const path = new URL(request.url()).pathname.replace(
/^\/console\/v1/,
"",
);
if (!Object.hasOwn(replies, path)) return route.fallback();
observed.push({
path,
method: request.method(),
body: request.postDataJSON(),
});
return route.fulfill({
json: { status: 200, msg: "", data: replies[path] },
headers: { "Access-Control-Allow-Origin": "*" },
});
});
return observed;
}
async function fixedPhonePrefix(page) {
// 固定区号必须是文本，而非可编辑、可选择、可触发国家列表的控件。
assert.equal(
await page.locator('input[autocomplete="tel-country-code"]').count(),
0,
);
assert.equal(
await page.getByRole("combobox", { name: /国际区号/ }).count(),
0,
);
await page.getByText("中国大陆 +86", { exact: true }).waitFor();
}
async function passwordKeyboard(page, field) {
await field.fill("local-only-password");
await field.focus();
await page.keyboard.press("Tab");
const owner = field.locator("..");
const show = owner.getByRole("button", { name: "显示密码", exact: true });
assert.equal(await show.evaluate((e) => e === document.activeElement), true);
assert.equal(await show.getAttribute("aria-pressed"), "false");
await page.keyboard.press("Space");
assert.equal(await field.getAttribute("type"), "text");
const hide = owner.getByRole("button", { name: "隐藏密码", exact: true });
assert.equal(await hide.getAttribute("aria-pressed"), "true");
await page.keyboard.press("Enter");
assert.equal(await field.getAttribute("type"), "password");
assert.equal(await field.inputValue(), "local-only-password");
}
for (const [path, labels, autocomplete] of [
["/login", ["密码"], "current-password"],
["/register", ["密码 *", "确认密码 *"], "new-password"],
["/forgot-password", ["新密码 *", "确认新密码 *"], "new-password"],
]) {
test(
`password manager semantics reach native inputs on ${path}`,
{ timeout: 20000 },
(t) =>
scenario(t, {}, async (page) => {
await authBoundary(page);
await page.goto(appOrigin + path);
for (const label of labels) {
const field = page.getByLabel(label, { exact: true });
await field.waitFor();
assert.equal(await field.getAttribute("autocomplete"), autocomplete);
}
return {
nativePasswordAutocomplete: autocomplete,
fields: labels.length,
};
}),
);
}
test(
"password visibility is keyboard operable without submitting the form",
{ timeout: 20000 },
(t) =>
scenario(t, {}, async (page) => {
await page.goto(`${appOrigin}/login`);
await passwordKeyboard(page, page.getByLabel("密码", { exact: true }));
assert.equal(
(await fixtureRequest("requests")).some((r) => r.path === "/login"),
false,
);
return { keyboardShowHide: true, noAccidentalSubmit: true };
}),
);
async function contrast(locator) {
return locator.evaluate((element) => {
const style = getComputedStyle(element);
const rgb = (value) =>
value
.match(/[\d.]+/g)
.slice(0, 3)
.map(Number);
const light = (color) =>
rgb(color)
.map((channel) => {
const v = channel / 255;
return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
})
.reduce(
(sum, value, i) => sum + value * [0.2126, 0.7152, 0.0722][i],
0,
);
const fg = light(style.color),
bg = light(style.backgroundColor);
return (Math.max(fg, bg) + 0.05) / (Math.min(fg, bg) + 0.05);
});
}
test(
"primary auth actions stay readable in normal hover and focus states across themes",
{ timeout: 25000 },
(t) =>
scenario(t, {}, async (page) => {
await page.goto(`${appOrigin}/login`);
const submit = page.getByRole("button", { name: "登录", exact: true });
await eventually(
() => submit.isEnabled(),
Boolean,
"Auth configuration must finish loading",
);
const results = [];
for (const theme of ["light", "dark"]) {
await page.emulateMedia({ colorScheme: theme });
await page.mouse.move(1, 1);
await submit.blur();
await page.waitForTimeout(200);
assert.ok(
(await contrast(submit)) >= 4.5,
`${theme} normal action text contrast`,
);
await submit.hover();
await page.waitForTimeout(200);
assert.ok(
(await contrast(submit)) >= 4.5,
`${theme} hovered action text contrast`,
);
await page.mouse.move(1, 1);
await submit.focus();
await page.waitForTimeout(200);
assert.ok(
(await contrast(submit)) >= 4.5,
`${theme} focused action text contrast`,
);
results.push({ theme, normalHoverFocusReadable: true });
}
return { themes: results };
}),
);
test(
"phone registration uses fixed mainland prefix for SMS and registration",
{ timeout: 25000 },
(t) =>
scenario(t, {}, async (page) => {
const writes = await authBoundary(page);
await page.goto(`${appOrigin}/register`);
await page.getByLabel("手机号", { exact: true }).waitFor();
await fixedPhonePrefix(page);
await page.getByLabel("手机号", { exact: true }).fill("13800138000");
await page
.getByRole("button", { name: "获取验证码", exact: true })
.click();
await eventually(
() => fixtureRequest("requests"),
(r) => r.some((e) => e.path === "/phone/code"),
"Registration SMS must reach HTTP",
);
const sms = (await fixtureRequest("requests")).find(
(r) => r.path === "/phone/code",
);
assert.equal(sms.body.phone_code, 86);
await page.getByLabel("验证码 *", { exact: true }).fill("123456");
await page
.getByLabel("密码 *", { exact: true })
.fill("new-local-password");
await page
.getByLabel("确认密码 *", { exact: true })
.fill("new-local-password");
await page.getByRole("button", { name: "创建账户", exact: true }).click();
await page.waitForURL((u) => u.pathname === "/login");
assert.equal(
String(writes.find((r) => r.path === "/register").body.phone_code),
"86",
);
assert.equal(
writes.some((r) => r.path === "/country"),
false,
);
return {
smsPrefix: 86,
registrationPrefix: 86,
countryPickerAbsent: true,
};
}),
);
test(
"phone password recovery uses fixed mainland prefix",
{ timeout: 25000 },
(t) =>
scenario(t, {}, async (page) => {
const writes = await authBoundary(page);
await page.goto(`${appOrigin}/forgot-password`);
await page.getByLabel("手机号", { exact: true }).waitFor();
await fixedPhonePrefix(page);
await page.getByLabel("手机号", { exact: true }).fill("13800138000");
await page
.getByRole("button", { name: "获取验证码", exact: true })
.click();
await eventually(
() => fixtureRequest("requests"),
(r) => r.some((e) => e.path === "/phone/code"),
"Recovery SMS must reach HTTP",
);
assert.equal(
(await fixtureRequest("requests")).find((r) => r.path === "/phone/code")
.body.phone_code,
86,
);
await page.getByLabel("验证码 *", { exact: true }).fill("123456");
await page
.getByLabel("新密码 *", { exact: true })
.fill("new-local-password");
await page
.getByLabel("确认新密码 *", { exact: true })
.fill("new-local-password");
await page.getByRole("button", { name: "重置密码", exact: true }).click();
await page.waitForURL(
(u) => u.pathname === "/login" && u.searchParams.get("reset") === "1",
);
assert.equal(
String(
writes.find((r) => r.path === "/account/password_reset").body
.phone_code,
),
"86",
);
return { smsPrefix: 86, resetPrefix: 86 };
}),
);
test(
"OAuth phone binding uses fixed mainland prefix after external session verification",
{ timeout: 25000 },
(t) =>
scenario(t, {}, async (page) => {
const writes = await authBoundary(page);
await page.goto(`${appOrigin}/oauth/bind?redirect=/security/ssh-keys`);
await page.getByLabel("手机号", { exact: true }).waitFor();
await fixedPhonePrefix(page);
await page.getByLabel("手机号", { exact: true }).fill("13800138000");
await page
.getByRole("button", { name: "获取验证码", exact: true })
.click();
await eventually(
() => fixtureRequest("requests"),
(r) => r.some((e) => e.path === "/phone/code"),
"Binding SMS must reach HTTP",
);
assert.equal(
(await fixtureRequest("requests")).find((r) => r.path === "/phone/code")
.body.phone_code,
86,
);
await page.getByLabel("验证码", { exact: true }).fill("123456");
await page.getByRole("checkbox").check();
await page.getByRole("button", { name: "确认绑定", exact: true }).click();
await page.waitForURL((u) => u.pathname === "/security/ssh-keys");
assert.equal(
String(
writes.find((r) => r.path === "/oauth/client/bind").body.phone_code,
),
"86",
);
return { authorizedBeforeBind: true, smsPrefix: 86, bindingPrefix: 86 };
}),
);
for (const existingPhone of [false, true]) {
test(
`account ${existingPhone ? "change" : "new"} phone uses fixed prefix without changing stored phone or address countries`,
{ timeout: 30000 },
(t) =>
scenario(t, {}, async (page) => {
const writes = await authBoundary(page, {
"/account": {
account: {
id: 1,
username: "audit-user",
email: "audit@example.invalid",
phone: existingPhone ? "2025550100" : "",
phone_code: 1,
country_id: 2,
},
},
});
await login(page, "/account?tab=phone");
const panel = page.getByRole("tabpanel", {
name: "手机号",
exact: true,
});
await panel.waitFor();
if (existingPhone) {
assert.match(await panel.innerText(), /\+1 /);
await panel
.getByRole("button", { name: "获取验证码", exact: true })
.click();
await eventually(
() => fixtureRequest("requests"),
(r) => r.some((e) => e.path === "/phone/code"),
"Old-phone SMS must reach HTTP",
);
const oldSms = (await fixtureRequest("requests")).find(
(r) => r.path === "/phone/code",
);
assert.equal(oldSms.body.action, "verify");
assert.equal(
"phone_code" in oldSms.body,
false,
"Old-phone verification must use the saved backend number",
);
await panel
.getByLabel("原手机验证码", { exact: true })
.fill("123456");
await panel
.getByRole("button", { name: "下一步", exact: true })
.click();
}
await panel
.getByRole("textbox", { name: "新手机号", exact: true })
.waitFor();
await fixedPhonePrefix(page);
await panel
.getByRole("textbox", { name: "新手机号", exact: true })
.fill("13800138000");
await panel
.getByRole("button", { name: "获取验证码", exact: true })
.click();
await eventually(
() => fixtureRequest("requests"),
(r) =>
r.some(
(e) => e.path === "/phone/code" && e.body.action === "update",
),
"New-phone SMS must reach HTTP",
);
assert.equal(
(await fixtureRequest("requests")).find(
(r) => r.path === "/phone/code" && r.body.action === "update",
).body.phone_code,
86,
);
await panel.getByLabel("新手机验证码", { exact: true }).fill("123456");
await panel
.getByRole("button", { name: "保存变更", exact: true })
.click();
await eventually(
() => writes.find((r) => r.path === "/account/phone"),
Boolean,
"New phone must reach update HTTP",
);
assert.equal(
writes.find((r) => r.path === "/account/phone").body.phone_code,
86,
);
await page.getByRole("tab", { name: "资料", exact: true }).click();
const country = page.getByRole("combobox", {
name: "国家/地区",
exact: true,
});
await country.click();
await page.getByRole("option", { name: "中国", exact: true }).waitFor();
await page.getByRole("option", { name: "美国", exact: true }).waitFor();
return {
phonePrefix: 86,
oldPhonePreserved: true,
addressCountriesStillSelectable: true,
};
}),
);
}
test(
"account password editor shares native semantics and keyboard visibility",
{ timeout: 25000 },
(t) =>
scenario(t, {}, async (page) => {
await authBoundary(page);
await login(page, "/account?tab=password");
const panel = page.getByRole("tabpanel", { name: "密码", exact: true });
await panel.waitFor();
const current = panel
.getByLabel("当前密码", { exact: true })
.and(panel.locator("input"));
assert.equal(
await current.getAttribute("autocomplete"),
"current-password",
);
assert.equal(
await panel
.getByLabel("新密码", { exact: true })
.getAttribute("autocomplete"),
"new-password",
);
assert.equal(
await panel
.getByLabel("确认新密码", { exact: true })
.getAttribute("autocomplete"),
"new-password",
);
await passwordKeyboard(page, current);
return { nativeSemantics: true, sharedKeyboardShowHide: true };
}),
);