Add login page "signup" mode.

web/src/App.js

@@ -421,7 +421,8 @@ class App extends Component {
           <Route exact path="/signup" render={(props) => this.renderHomeIfLoggedIn(<SignupPage {...props} />)}/>
           <Route exact path="/signup/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<SignupPage {...props} />)}/>
           <Route exact path="/login" render={(props) => this.renderHomeIfLoggedIn(<SelfLoginPage {...props} />)}/>
-          <Route exact path="/login/oauth/authorize" render={(props) => <LoginPage type={"code"} {...props} />}/>
+          <Route exact path="/signup/oauth/authorize" render={(props) => <LoginPage type={"code"} mode={"signup"} {...props} />}/>
+          <Route exact path="/login/oauth/authorize" render={(props) => <LoginPage type={"code"} mode={"signin"} {...props} />}/>
           <Route exact path="/callback" component={AuthCallback}/>
           <Route exact path="/forget" render={(props) => this.renderHomeIfLoggedIn(<SelfForgetPage {...props} />)}/>
           <Route exact path="/forget/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<ForgetPage {...props} />)}/>

web/src/ApplicationEditPage.js

@@ -285,31 +285,53 @@ class ApplicationEditPage extends React.Component {
           <Col style={{marginTop: '5px'}} span={2}>
             {i18next.t("general:Preview")}:
           </Col>
-          <Col span={11} >
+          {
-            <a style={{marginBottom: '10px'}} target="_blank" rel="noreferrer" href={`/signup/${this.state.application.name}`}>
+            this.renderPreview()
-              <Button type="primary">{i18next.t("application:Test signup page..")}</Button>
+          }
-            </a>
-            <br/>
-            <br/>
-            <div style={{width: "90%", border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888"}}>
-              <SignupPage application={this.state.application} />
-            </div>
-          </Col>
-          <Col span={11} >
-            <a style={{marginBottom: '10px'}} target="_blank" rel="noreferrer" href={`/login/oauth/authorize?client_id=${this.state.application.clientId}&response_type=code&redirect_uri=${this.state.application.redirectUris[0]}&scope=read&state=casdoor`}>
-              <Button type="primary">{i18next.t("application:Test signin page..")}</Button>
-            </a>
-            <br/>
-            <br/>
-            <div style={{width: "90%", border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888"}}>
-              <LoginPage type={"login"} application={this.state.application} />
-            </div>
-          </Col>
         </Row>
       </Card>
     )
   }
 
+  renderPreview() {
+    let signUpUrl = `/signup/${this.state.application.name}`;
+    let signInUrl = `/login/oauth/authorize?client_id=${this.state.application.clientId}&response_type=code&redirect_uri=${this.state.application.redirectUris[0]}&scope=read&state=casdoor`;
+    if (!this.state.application.enablePassword) {
+      signUpUrl = signInUrl.replace("/login/oauth/authorize", "/signup/oauth/authorize");
+    }
+
+    return (
+      <React.Fragment>
+        <Col span={11} >
+          <a style={{marginBottom: '10px'}} target="_blank" rel="noreferrer" href={signUpUrl}>
+            <Button type="primary">{i18next.t("application:Test signup page..")}</Button>
+          </a>
+          <br/>
+          <br/>
+          <div style={{width: "90%", border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888"}}>
+            {
+              this.state.application.enablePassword ? (
+                <SignupPage application={this.state.application} />
+              ) : (
+                <LoginPage type={"login"} mode={"signup"} application={this.state.application} />
+              )
+            }
+          </div>
+        </Col>
+        <Col span={11} >
+          <a style={{marginBottom: '10px'}} target="_blank" rel="noreferrer" href={signInUrl}>
+            <Button type="primary">{i18next.t("application:Test signin page..")}</Button>
+          </a>
+          <br/>
+          <br/>
+          <div style={{width: "90%", border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888"}}>
+            <LoginPage type={"login"} mode={"signin"} application={this.state.application} />
+          </div>
+        </Col>
+      </React.Fragment>
+    )
+  }
+
   submitApplicationEdit() {
     let application = Setting.deepCopy(this.state.application);
     ApplicationBackend.updateApplication(this.state.application.owner, this.state.applicationName, application)

web/src/auth/LoginPage.js

@@ -13,7 +13,8 @@
 // limitations under the License.
 
 import React from "react";
-import {Button, Checkbox, Col, Form, Input, Row} from "antd";
+import {Link} from "react-router-dom";
+import {Button, Checkbox, Col, Form, Input, Result, Row} from "antd";
 import {LockOutlined, UserOutlined} from "@ant-design/icons";
 import * as AuthBackend from "./AuthBackend";
 import * as ApplicationBackend from "../backend/ApplicationBackend";
@@ -32,6 +33,7 @@ class LoginPage extends React.Component {
       type: props.type,
       applicationName: props.applicationName !== undefined ? props.applicationName : (props.match === undefined ? null : props.match.params.applicationName),
       application: null,
+      mode: props.mode !== undefined ? props.mode : (props.match === undefined ? null : props.match.params.mode), // "signup" or "signin"
       msg: null,
     };
   }
@@ -139,11 +141,39 @@ class LoginPage extends React.Component {
     }
   }
 
+  isProviderVisible(providerItem) {
+    if (this.state.mode === "signup") {
+      return Setting.isProviderVisibleForSignUp(providerItem);
+    } else {
+      return Setting.isProviderVisibleForSignIn(providerItem);
+    }
+  }
+
   renderForm(application) {
     if (this.state.msg !== null) {
       return Util.renderMessage(this.state.msg)
     }
 
+    if (this.state.mode === "signup" && !application.enableSignUp) {
+      return (
+        <Result
+          status="error"
+          title="Sign Up Error"
+          subTitle={"The application does not allow to sign up new account"}
+          extra={[
+            <Link onClick={() => {
+              Setting.goToLogin(this, application);
+            }}>
+              <Button type="primary" key="signin">
+                Sign In
+              </Button>
+            </Link>
+          ]}
+        >
+        </Result>
+      )
+    }
+
     if (application.enablePassword) {
       return (
         <Form
@@ -210,21 +240,12 @@ class LoginPage extends React.Component {
               {i18next.t("login:Sign In")}
             </Button>
             {
-              !application.enableSignUp ? null : (
+              !application.enableSignUp ? null : this.renderFooter(application)
-                <div style={{float: "right"}}>
-                  {i18next.t("login:No account yet?")}&nbsp;
-                  <a onClick={() => {
-                    Setting.goToSignup(this, application);
-                  }}>
-                    {i18next.t("login:sign up now")}
-                  </a>
-                </div>
-              )
             }
           </Form.Item>
           <Form.Item>
             {
-              application.providers.filter(providerItem => Setting.isProviderVisibleForSignIn(providerItem)).map(providerItem => {
+              application.providers.filter(providerItem => this.isProviderVisible(providerItem)).map(providerItem => {
                 return this.renderProviderLogo(providerItem.provider, application, 30, 5, "small");
               })
             }
@@ -245,7 +266,7 @@ class LoginPage extends React.Component {
           </div>
           <br/>
           {
-            application.providers.filter(providerItem => Setting.isProviderVisibleForSignIn(providerItem)).map(providerItem => {
+            application.providers.filter(providerItem => this.isProviderVisible(providerItem)).map(providerItem => {
               return this.renderProviderLogo(providerItem.provider, application, 40, 10, "big");
             })
           }
@@ -253,14 +274,9 @@ class LoginPage extends React.Component {
             !application.enableSignUp ? null : (
               <div>
                 <br/>
-                <div style={{float: "right"}}>
+                {
-                  {i18next.t("login:No account yet?")}&nbsp;
+                  this.renderFooter(application)
-                  <a onClick={() => {
+                }
-                    Setting.goToSignup(this, application);
-                  }}>
-                    {i18next.t("login:sign up now")}
-                  </a>
-                </div>
               </div>
             )
           }
@@ -269,6 +285,32 @@ class LoginPage extends React.Component {
     }
   }
 
+  renderFooter(application) {
+    if (this.state.mode === "signup") {
+      return (
+        <div style={{float: "right"}}>
+          {i18next.t("signup:Have account?")}&nbsp;
+          <Link onClick={() => {
+            Setting.goToLogin(this, application);
+          }}>
+            {i18next.t("signup:sign in now")}
+          </Link>
+        </div>
+      )
+    } else {
+      return (
+        <div style={{float: "right"}}>
+          {i18next.t("login:No account yet?")}&nbsp;
+          <a onClick={() => {
+            Setting.goToSignup(this, application);
+          }}>
+            {i18next.t("login:sign up now")}
+          </a>
+        </div>
+      )
+    }
+  }
+
   render() {
     const application = this.getApplicationObj();
     if (application === null) {

web/src/auth/SelfLoginPage.js

@@ -19,7 +19,7 @@ import {authConfig} from "./Auth";
 class SelfLoginPage extends React.Component {
   render() {
     return (
-      <LoginPage type={"login"} applicationName={authConfig.appName} account={this.props.account} {...this.props} />
+      <LoginPage type={"login"} mode={"signin"} applicationName={authConfig.appName} account={this.props.account} {...this.props} />
     )
   }
 }