feat: show code signin page with password disabled (#2021)

This commit is contained in:
June
2023-06-27 23:38:48 +07:00
committed by GitHub
parent cd7589775c
commit 8080b10b3b

View File

@ -49,7 +49,6 @@ class LoginPage extends React.Component {
username: null,
validEmailOrPhone: false,
validEmail: false,
loginMethod: "password",
enableCaptchaModal: CaptchaRule.Never,
openCaptchaModal: false,
verifyCaptcha: undefined,
@ -83,6 +82,8 @@ class LoginPage extends React.Component {
componentDidUpdate(prevProps, prevState, snapshot) {
if (prevProps.application !== this.props.application) {
this.setState({loginMethod: this.getDefaultLoginMethod(this.props.application)});
const captchaProviderItems = this.getCaptchaProviderItems(this.props.application);
if (captchaProviderItems) {
if (captchaProviderItems.some(providerItem => providerItem.rule === "Always")) {
@ -187,6 +188,20 @@ class LoginPage extends React.Component {
return this.props.application;
}
getDefaultLoginMethod(application) {
if (application.enablePassword) {
return "password";
}
if (application.enableCodeSignin) {
return "verificationCode";
}
if (application.enableWebAuthn) {
return "webAuthn";
}
return "password";
}
onUpdateAccount(account) {
this.props.onUpdateAccount(account);
}
@ -430,7 +445,8 @@ class LoginPage extends React.Component {
);
}
if (application.enablePassword) {
const showForm = application.enablePassword || application.enableCodeSignin || application.enableWebAuthn;
if (showForm) {
let loginWidth = 320;
if (Setting.getLanguage() === "fr") {
loginWidth += 20;
@ -515,7 +531,6 @@ class LoginPage extends React.Component {
id="input"
prefix={<UserOutlined className="site-form-item-icon" />}
placeholder={(this.state.loginMethod === "verificationCode") ? i18next.t("login:Email or phone") : i18next.t("login:username, Email or phone")}
disabled={!application.enablePassword}
onChange={e => {
this.setState({
username: e.target.value,
@ -530,7 +545,7 @@ class LoginPage extends React.Component {
</Row>
<div style={{display: "inline-flex", justifyContent: "space-between", width: "320px", marginBottom: AgreementModal.isAgreementRequired(application) ? "5px" : "25px"}}>
<Form.Item name="autoSignin" valuePropName="checked" noStyle>
<Checkbox style={{float: "left"}} disabled={!application.enablePassword}>
<Checkbox style={{float: "left"}}>
{i18next.t("login:Auto sign in")}
</Checkbox>
</Form.Item>
@ -544,7 +559,6 @@ class LoginPage extends React.Component {
type="primary"
htmlType="submit"
style={{width: "100%", marginBottom: "5px"}}
disabled={!application.enablePassword}
>
{
this.state.loginMethod === "webAuthn" ? i18next.t("login:Sign in with WebAuthn") :
@ -805,14 +819,14 @@ class LoginPage extends React.Component {
renderMethodChoiceBox() {
const application = this.getApplicationObj();
const items = [];
items.push({label: i18next.t("general:Password"), key: "password"});
application.enablePassword ? items.push({label: i18next.t("general:Password"), key: "password"}) : null;
application.enableCodeSignin ? items.push({label: i18next.t("login:Verification code"), key: "verificationCode"}) : null;
application.enableWebAuthn ? items.push({label: i18next.t("login:WebAuthn"), key: "webAuthn"}) : null;
if (application.enableCodeSignin || application.enableWebAuthn) {
if (items.length > 1) {
return (
<div>
<Tabs items={items} size={"small"} defaultActiveKey="password" onChange={(key) => {
<Tabs items={items} size={"small"} defaultActiveKey={this.getDefaultLoginMethod(application)} onChange={(key) => {
this.setState({loginMethod: key});
}} centered>
</Tabs>
@ -937,7 +951,7 @@ class LoginPage extends React.Component {
}
const visibleOAuthProviderItems = (application.providers === null) ? [] : application.providers.filter(providerItem => this.isProviderVisible(providerItem));
if (this.props.preview !== "auto" && !application.enablePassword && visibleOAuthProviderItems.length === 1) {
if (this.props.preview !== "auto" && !application.enablePassword && !application.enableCodeSignin && !application.enableWebAuthn && visibleOAuthProviderItems.length === 1) {
Setting.goToLink(Provider.getAuthUrl(application, visibleOAuthProviderItems[0].provider, "signup"));
return (
<div style={{display: "flex", justifyContent: "center", alignItems: "center", width: "100%"}}>