Improve signup page.

web/src/App.js

@@ -345,6 +345,7 @@ class App extends Component {
         </Header>
         <Switch>
           <Route exact path="/signup" render={(props) => this.renderHomeIfLoggedIn(<SignupPage {...props} />)}/>
+          <Route exact path="/signup/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<SignupPage {...props} />)}/>
           <Route exact path="/result" render={(props) => this.renderHomeIfLoggedIn(<ResultPage {...props} />)}/>
           <Route exact path="/login" render={(props) => this.renderHomeIfLoggedIn(<SelfLoginPage {...props} />)}/>
           <Route exact path="/callback" component={AuthCallback}/>

web/src/Setting.js

@@ -179,3 +179,21 @@ export function getProviderLogo(provider) {
     <img width={30} height={30} src={url} alt={idp} />
   )
 }
+
+export function renderLogo(application) {
+  if (application === null) {
+    return null;
+  }
+
+  if (application.homepageUrl !== "") {
+    return (
+      <a target="_blank" rel="noreferrer" href={application.homepageUrl}>
+        <img width={250} src={application.logo} alt={application.displayName} style={{marginBottom: '30px'}}/>
+      </a>
+    )
+  } else {
+    return (
+      <img width={250} src={application.logo} alt={application.displayName} style={{marginBottom: '30px'}}/>
+    );
+  }
+}

web/src/auth/Auth.js

@@ -14,8 +14,8 @@
 
 export let authConfig = {
   serverUrl: "http://example.com", // your Casdoor URL, like the official one: https://door.casbin.com
-  appName: "app-example", // your Casdoor application name, like: "app-built-in"
-  organizationName: "org-example", // your Casdoor organization name, like: "built-in"
+  appName: "app-built-in", // your Casdoor application name, like: "app-built-in"
+  organizationName: "built-in", // your Casdoor organization name, like: "built-in"
 }
 
 export function initAuthWithConfig(config) {

web/src/auth/LoginPage.js

@@ -262,20 +262,6 @@ class LoginPage extends React.Component {
     }
   }
 
-  renderLogo(application) {
-    if (application.homepageUrl !== "") {
-      return (
-        <a target="_blank" rel="noreferrer" href={application.homepageUrl}>
-          <img width={250} src={application.logo} alt={application.displayName} style={{marginBottom: '30px'}}/>
-        </a>
-      )
-    } else {
-      return (
-        <img width={250} src={application.logo} alt={application.displayName} style={{marginBottom: '30px'}}/>
-      );
-    }
-  }
-
   render() {
     const application = this.getApplicationObj();
     if (application === null) {
@@ -287,7 +273,7 @@ class LoginPage extends React.Component {
         <Col span={24} style={{display: "flex", justifyContent: "center"}}>
           <div style={{marginTop: "80px", textAlign: "center"}}>
             {
-              this.renderLogo(application)
+              Setting.renderLogo(application)
             }
             {/*{*/}
             {/*  this.state.clientId !== null ? "Redirect" : null*/}

web/src/auth/SignupPage.js

@@ -18,6 +18,9 @@ import {Form, Input, Select, Checkbox, Button, Row, Col} from 'antd';
 import * as Setting from "../Setting";
 import * as AuthBackend from "./AuthBackend";
 import i18next from "i18next";
+import * as Util from "./Util";
+import {authConfig} from "./Auth";
+import * as ApplicationBackend from "../backend/ApplicationBackend";
 
 const { Option } = Select;
 
@@ -27,7 +30,7 @@ const formItemLayout = {
       span: 24,
     },
     sm: {
-      span: 8,
+      span: 6,
     },
   },
   wrapperCol: {
@@ -35,7 +38,7 @@ const formItemLayout = {
       span: 24,
     },
     sm: {
-      span: 16,
+      span: 18,
     },
   },
 };
@@ -58,11 +61,34 @@ class SignupPage extends React.Component {
     super(props);
     this.state = {
       classes: props,
+      applicationName: props.match.params.applicationName !== undefined ? props.match.params.applicationName : authConfig.appName,
+      application: null,
     };
 
     this.form = React.createRef();
   }
 
+  UNSAFE_componentWillMount() {
+    if (this.state.applicationName !== undefined) {
+      this.getApplication();
+    } else {
+      Util.showMessage("error", `Unknown application name: ${this.state.applicationName}`);
+    }
+  }
+
+  getApplication() {
+    if (this.state.applicationName === undefined) {
+      return;
+    }
+
+    ApplicationBackend.getApplication("admin", this.state.applicationName)
+      .then((application) => {
+        this.setState({
+          application: application,
+        });
+      });
+  }
+
   onFinish(values) {
     AuthBackend.signup(values)
       .then((res) => {
@@ -78,7 +104,7 @@ class SignupPage extends React.Component {
     this.form.current.scrollToField(errorFields[0].name);
   }
 
-  renderForm() {
+  renderForm(application) {
     const prefixSelector = (
       <Form.Item name="prefix" noStyle>
         <Select
@@ -100,6 +126,7 @@ class SignupPage extends React.Component {
         onFinish={(values) => this.onFinish(values)}
         onFinishFailed={(errorInfo) => this.onFinishFailed(errorInfo.values, errorInfo.errorFields, errorInfo.outOfDate)}
         initialValues={{
+          application: application.name,
           prefix: '86',
         }}
         style={{width: !Setting.isMobile() ? "400px" : "250px"}}
@@ -235,14 +262,24 @@ class SignupPage extends React.Component {
   }
 
   render() {
+    const application = this.state.application;
+    if (application === null) {
+      return null;
+    }
+
     return (
       <div>
         &nbsp;
         <Row>
           <Col span={24} style={{display: "flex", justifyContent:  "center"}} >
-            {
-              this.renderForm()
-            }
+            <div style={{marginTop: "10px", textAlign: "center"}}>
+              {
+                Setting.renderLogo(application)
+              }
+              {
+                this.renderForm(application)
+              }
+            </div>
           </Col>
         </Row>
       </div>