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

web/src/auth/LoginPage.js

@@ -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%"}}>