+
+ {
+ Setting.renderHelmet(application)
+ }
+ {
+ Setting.renderLogo(application)
+ }
+
+ );
+ } else if (signinItem.name === "Back button") {
+ return (
+
+
+ {
+ this.renderBackButton()
+ }
+
+ );
+ } else if (signinItem.name === "Languages") {
+ return (
+
+
+
+ );
+ } else if (signinItem.name === "Signin methods") {
+ return (
+
+
+ {this.renderMethodChoiceBox()}
+
+ )
+ ;
+ } else if (signinItem.name === "Username") {
+ return (
+
+
+ {
+ switch (this.state.loginMethod) {
+ case "verificationCodeEmail":
+ return i18next.t("login:Please input your Email!");
+ case "verificationCodePhone":
+ return i18next.t("login:Please input your Phone!");
+ case "ldap":
+ return i18next.t("login:Please input your LDAP username!");
+ default:
+ return i18next.t("login:Please input your Email or Phone!");
+ }
+ },
+ },
+ {
+ validator: (_, value) => {
+ if (value === "") {
+ return Promise.resolve();
+ }
+
+ if (this.state.loginMethod === "verificationCode") {
+ if (!Setting.isValidEmail(value) && !Setting.isValidPhone(value)) {
+ this.setState({validEmailOrPhone: false});
+ return Promise.reject(i18next.t("login:The input is not valid Email or phone number!"));
+ }
+
+ if (Setting.isValidEmail(value)) {
+ this.setState({validEmail: true});
+ } else {
+ this.setState({validEmail: false});
+ }
+ } else if (this.state.loginMethod === "verificationCodeEmail") {
+ if (!Setting.isValidEmail(value)) {
+ this.setState({validEmail: false});
+ this.setState({validEmailOrPhone: false});
+ return Promise.reject(i18next.t("login:The input is not valid Email!"));
+ } else {
+ this.setState({validEmail: true});
+ }
+ } else if (this.state.loginMethod === "verificationCodePhone") {
+ if (!Setting.isValidPhone(value)) {
+ this.setState({validEmailOrPhone: false});
+ return Promise.reject(i18next.t("login:The input is not valid phone number!"));
+ }
+ }
+
+ this.setState({validEmailOrPhone: true});
+ return Promise.resolve();
+ },
+ },
+ ]}
+ >
+
+ }
+ placeholder={this.getPlaceholder()}
+ onChange={e => {
+ this.setState({
+ username: e.target.value,
+ });
+ }}
+ />
+
+
+ );
+ } else if (signinItem.name === "Password") {
+ return (
+
+
+ {this.renderPasswordOrCodeInput()}
+
+ );
+ } else if (signinItem.name === "Forgot password?") {
+ return (
+
+
+
+ );
+ } else if (signinItem.name === "Agreement") {
+ return AgreementModal.isAgreementRequired(application) ? AgreementModal.renderAgreementFormItem(application, true, {}, this) : null;
+ } else if (signinItem.name === "Login button") {
+ return (
+
+
+
+ {i18next.t("login:Auto sign in")}
+
+
+ {
+ signinItem.visible ? Setting.renderForgetLink(application, i18next.t("login:Forgot password?")) : null
+ }
+
+
+
+
+ {
+ application.providers.filter(providerItem => this.isProviderVisible(providerItem)).map(providerItem => {
+ return ProviderButton.renderProviderLogo(providerItem.provider, application, null, null, signinItem.rule, this.props.location);
+ })
+ }
+ {
+ this.renderOtherFormProvider(application)
+ }
+
+
+ );
+ } else if (signinItem.name.startsWith("Text ") || signinItem?.isCustom) {
+ return (
+
+ );
+ } else if (signinItem.name === "Signup link") {
+ return (
+
+
+ {this.renderFooter(application)}
+
+ );
+ }
+ }
+
renderForm(application) {
if (this.state.msg !== null) {
return Util.renderMessage(this.state.msg);
@@ -569,116 +763,10 @@ class LoginPage extends React.Component {
]}
>
- {this.renderMethodChoiceBox()}
-
-
-
- {i18next.t("login:Auto sign in")}
-
-
- {
- Setting.renderForgetLink(application, i18next.t("login:Forgot password?"))
- }
-
- {AgreementModal.isAgreementRequired(application) ? AgreementModal.renderAgreementFormItem(application, true, {}, this) : null}
- - { - application.providers?.filter(providerItem => this.isProviderVisible(providerItem)).map(providerItem => { - return ProviderButton.renderProviderLogo(providerItem.provider, application, 40, 10, "big", this.props.location); - }) - } - { - this.renderOtherFormProvider(application) - } -
-
- { - this.renderFooter(application) - } -
+ {application.signinItems.map(signinItem => signinItem.name === "ThirdParty" || signinItem.name === "Footer" ? this.renderFormItem(application, signinItem) : null)}
);
}
@@ -760,7 +835,7 @@ class LoginPage extends React.Component {
renderFooter(application) {
return (
-
+ - { - this.renderFooter(application) - } -
{
!application.enableSignUp ? null : (
@@ -771,7 +846,7 @@ class LoginPage extends React.Component {
)
}
-
+
);
}
@@ -889,33 +964,37 @@ class LoginPage extends React.Component {
if (this.state.loginMethod === "password" || this.state.loginMethod === "ldap") {
return (
+
+
+
);
} else if (this.state.loginMethod?.includes("verificationCode")) {
return (
+
+
+
);
} else {
@@ -952,7 +1031,7 @@ class LoginPage extends React.Component {
if (items.length > 1) {
return (
- {
+ {
this.setState({loginMethod: key});
}} centered>
@@ -1047,10 +1126,10 @@ class LoginPage extends React.Component {
}
renderBackButton() {
- if (this.state.orgChoiceMode === "None") {
+ if (this.state.orgChoiceMode === "None" || this.props.preview === "auto") {
return (
}
- style={{top: "65px", left: "15px", position: "absolute"}}
+ className="back-button"
onClick={() => history.back()}>
);
@@ -1099,16 +1178,6 @@ class LoginPage extends React.Component {
- {
- Setting.renderHelmet(application)
- }
- {
- Setting.renderLogo(application)
- }
- {
- this.renderBackButton()
- }
- })
+
);
} else {
return (
-
+
);
}
} else if (provider.category === "SAML") {
return (
goToSamlUrl(provider, location)}>
-
+
);
} else if (provider.category === "Web3") {
return (
goToWeb3Url(application, provider, "signup")}>
-
+
);
}
@@ -193,7 +193,7 @@ export function renderProviderLogo(provider, application, width, margin, size, l
return (
@@ -202,7 +202,7 @@ export function renderProviderLogo(provider, application, width, margin, size, l
return (
goToSamlUrl(provider, location)} style={customAStyle}>
@@ -212,7 +212,7 @@ export function renderProviderLogo(provider, application, width, margin, size, l
// big button, for disable password signin
if (provider.category === "SAML") {
return (
-
+
goToSamlUrl(provider, location)}>
{
getSigninButton(provider)
@@ -222,7 +222,7 @@ export function renderProviderLogo(provider, application, width, margin, size, l
);
} else if (provider.category === "Web3") {
return (
-