perf: disable browser's autocomplete feature for password input field (#3550)

#### What type of PR is this?

/kind improvement
/area console

#### What this PR does / why we need it:

默认禁用 password 输入框的浏览器自动填充,实现方式为默认给 type 为 password 的 input 添加 `autocomplete="new-passwrod"` 属性。如果需要自动填充,手动为组件添加 `autocomplete` 属性即可。

此改动主要是针对非登录表单场景的密码输入框来做优化,在这些场景下,浏览器如果自动填充用户保存的用户名密码,会带来一定的干扰。

<img width="1103" alt="image" src="https://user-images.githubusercontent.com/21301288/226558568-bf617be7-0cd8-44db-a123-f230a2b88181.png">

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/3502

#### Special notes for your reviewer:

1. 登录 Console,并将用户名和密码保存在浏览器的密码管理器。
2. 然后进入任意使用了密码输入框的页面,检查是否自动填充了密码。推荐使用 https://github.com/halo-sigs/plugin-s3 测试。

#### Does this PR introduce a user-facing change?

```release-note
禁用非登录场景下,密码输入框的浏览器自动填充
```
pull/3563/head^2
Ryan Wang 2023-03-23 21:42:35 +08:00 committed by GitHub
parent b63d2b882c
commit 0503c5ff2e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 1 deletions

View File

@ -155,6 +155,7 @@ const { data: socialAuthProviders } = useQuery<SocialAuthProvider[]>({
:placeholder="$t('core.login.fields.password.placeholder')"
type="password"
validation="required"
autocomplete="current-password"
>
</FormKit>
</FormKit>

View File

@ -18,12 +18,13 @@ import { tagCheckbox } from "./inputs/tag-checkbox";
import radioAlt from "./plugins/radio-alt";
import stopImplicitSubmission from "./plugins/stop-implicit-submission";
import passwordPreventAutocomplete from "./plugins/password-prevent-autocomplete";
const config: DefaultConfigOptions = {
config: {
classes: generateClasses(theme),
},
plugins: [radioAlt, stopImplicitSubmission],
plugins: [radioAlt, stopImplicitSubmission, passwordPreventAutocomplete],
inputs: {
form,
attachment,

View File

@ -0,0 +1,9 @@
import type { FormKitNode } from "@formkit/core";
export default function passwordPreventAutocomplete(node: FormKitNode) {
if (node.props.type === "password" && !node.props.attrs?.autocomplete) {
if (!node.props.attrs) node.props.attrs = {};
// https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#preventing_autofilling_with_autocompletenew-password
node.props.attrs.autocomplete = "new-password";
}
}