feat: show Organization.PasswordOptions in login UI (#3913)

This commit is contained in:
DacongDA
2025-06-28 22:13:00 +08:00
committed by GitHub
parent f4ad2b4034
commit 568c0e2c3d
4 changed files with 133 additions and 61 deletions

View File

@ -13,7 +13,7 @@
// limitations under the License.
import React from "react";
import {Button, Form, Input, Radio, Result, Row, Select, message} from "antd";
import {Button, Form, Input, Popover, Radio, Result, Row, Select, message} from "antd";
import * as Setting from "../Setting";
import * as AuthBackend from "./AuthBackend";
import * as ProviderButton from "./ProviderButton";
@ -607,28 +607,45 @@ class SignupPage extends React.Component {
}
} else if (signupItem.name === "Password") {
return (
<Form.Item
name="password"
className="signup-password"
label={signupItem.label ? signupItem.label : i18next.t("general:Password")}
rules={[
{
required: required,
validateTrigger: "onChange",
validator: (rule, value) => {
const errorMsg = PasswordChecker.checkPasswordComplexity(value, application.organizationObj.passwordOptions);
if (errorMsg === "") {
return Promise.resolve();
} else {
return Promise.reject(errorMsg);
}
<Popover placement="right" content={this.state.passwordPopover} open={this.state.passwordPopoverOpen}>
<Form.Item
name="password"
className="signup-password"
label={signupItem.label ? signupItem.label : i18next.t("general:Password")}
rules={[
{
required: required,
validateTrigger: "onChange",
validator: (rule, value) => {
const errorMsg = PasswordChecker.checkPasswordComplexity(value, application.organizationObj.passwordOptions);
if (errorMsg === "") {
return Promise.resolve();
} else {
return Promise.reject(errorMsg);
}
},
},
},
]}
hasFeedback
>
<Input.Password className="signup-password-input" placeholder={signupItem.placeholder} />
</Form.Item>
]}
hasFeedback
>
<Input.Password className="signup-password-input" placeholder={signupItem.placeholder} onChange={(e) => {
this.setState({
passwordPopover: PasswordChecker.renderPasswordPopover(application.organizationObj.passwordOptions, e.target.value),
});
}}
onFocus={() => {
this.setState({
passwordPopoverOpen: true,
passwordPopover: PasswordChecker.renderPasswordPopover(application.organizationObj.passwordOptions, this.form.current?.getFieldValue("password") ?? ""),
});
}}
onBlur={() => {
this.setState({
passwordPopoverOpen: false,
});
}} />
</Form.Item>
</Popover>
);
} else if (signupItem.name === "Confirm password") {
return (