Show signup preview.

web/src/ApplicationEditPage.js

@@ -19,6 +19,7 @@ import * as ApplicationBackend from "./backend/ApplicationBackend";
 import * as Setting from "./Setting";
 import * as ProviderBackend from "./backend/ProviderBackend";
 import * as OrganizationBackend from "./backend/OrganizationBackend";
+import SignupPage from "./auth/SignupPage";
 import LoginPage from "./auth/LoginPage";
 import i18next from "i18next";
 import UrlTable from "./UrlTable";
@@ -208,10 +209,10 @@ class ApplicationEditPage extends React.Component {
         </Row>
         <Row style={{marginTop: '20px'}} >
           <Col style={{marginTop: '5px'}} span={2}>
-            {i18next.t("general:Expire in hours")}:
+            {i18next.t("general:Token expire")}:
           </Col>
           <Col span={22} >
-            <Input value={this.state.application.expireInHours} onChange={e => {
+            <Input style={{width: "150px"}} value={this.state.application.expireInHours} suffix="Hours" onChange={e => {
               this.updateApplicationField('expireInHours', e.target.value);
             }} />
           </Col>
@@ -284,17 +285,25 @@ class ApplicationEditPage extends React.Component {
         </Row>
         <Row style={{marginTop: '20px'}} >
           <Col style={{marginTop: '5px'}} span={2}>
-            {i18next.t("application:Login page preview")}:
+            {i18next.t("general:Preview")}:
           </Col>
-          <Col span={22} >
-            <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`}>
-              {
-                `${window.location.host}/login/oauth/authorize?client_id=${this.state.application.clientId}&response_type=code&redirect_uri=${this.state.application.redirectUris[0]}&scope=read&state=casdoor`
-              }
+          <Col span={11} >
+            <a style={{marginBottom: '10px'}} target="_blank" rel="noreferrer" href={`/signup/${this.state.application.name}`}>
+              <Button type="primary">{i18next.t("application:Test signup page..")}</Button>
             </a>
             <br/>
             <br/>
-            <div style={{width: "500px", height: "600px", border: "1px solid rgb(217,217,217)"}}>
+            <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>

web/src/UrlTable.js

@@ -95,7 +95,7 @@ class UrlTable extends React.Component {
     ];
 
     return (
-      <Table rowKey="index" columns={columns} dataSource={table.map((row, i) => ({id: row, index: i}))} size="middle" bordered pagination={{pageSize: 100}}
+      <Table rowKey="index" columns={columns} dataSource={table.map((row, i) => ({id: row, index: i}))} size="middle" bordered pagination={false}
              title={() => (
                <div>
                  {this.props.title}&nbsp;&nbsp;&nbsp;&nbsp;

web/src/auth/SignupPage.js

@@ -61,7 +61,7 @@ class SignupPage extends React.Component {
     super(props);
     this.state = {
       classes: props,
-      applicationName: props.match.params.applicationName !== undefined ? props.match.params.applicationName : authConfig.appName,
+      applicationName: props.match?.params.applicationName !== undefined ? props.match.params.applicationName : authConfig.appName,
       application: null,
       email: "",
       phone: "",
@@ -101,12 +101,21 @@ class SignupPage extends React.Component {
     }
   }
 
+  getApplicationObj() {
+    if (this.props.application !== undefined) {
+      return this.props.application;
+    } else {
+      return this.state.application;
+    }
+  }
+
   onFinish(values) {
-    values.phonePrefix = this.state.application?.organizationObj.phonePrefix;
+    const application = this.getApplicationObj();
+    values.phonePrefix = application.organizationObj.phonePrefix;
     AuthBackend.signup(values)
       .then((res) => {
         if (res.status === 'ok') {
-          Setting.goToLinkSoft(this, this.getResultPath(this.state.application));
+          Setting.goToLinkSoft(this, this.getResultPath(application));
         } else {
           Setting.showMessage("error", i18next.t(`signup:${res.msg}`));
         }
@@ -240,7 +249,7 @@ class SignupPage extends React.Component {
           <CountDownInput
             defaultButtonText={i18next.t("signup:send code")}
             onButtonClick={UserBackend.sendCode}
-            onButtonClickArgs={[this.state.email, "email", this.state.application?.organizationObj.owner + "/" + this.state.application?.organizationObj.name]}
+            onButtonClickArgs={[this.state.email, "email", application?.organizationObj.owner + "/" + application?.organizationObj.name]}
             coolDownTime={60}
           />
         </Form.Item>
@@ -311,7 +320,7 @@ class SignupPage extends React.Component {
           <CountDownInput
             defaultButtonText={i18next.t("signup:send code")}
             onButtonClick={UserBackend.sendCode}
-            onButtonClickArgs={[this.state.phone, "phone", this.state.application?.organizationObj.owner + "/" + this.state.application?.organizationObj.name]}
+            onButtonClickArgs={[this.state.phone, "phone", application.organizationObj.owner + "/" + application.organizationObj.name]}
             coolDownTime={60}
           />
         </Form.Item>
@@ -339,7 +348,7 @@ class SignupPage extends React.Component {
   }
 
   render() {
-    const application = this.state.application;
+    const application = this.getApplicationObj();
     if (application === null) {
       return null;
     }

web/src/locales/en.json

@@ -172,7 +172,9 @@
   {
     "Edit Application": "Edit Application",
     "Enable password": "Enable password",
-    "Login page preview": "Login page preview"
+    "Login page preview": "Login page preview",
+    "Test signup page..": "Test signup page..",
+    "Test signin page..": "Test signin page.."
   },
   "forget":
   {

web/src/locales/zh.json

@@ -172,7 +172,9 @@
   {
     "Edit Application": "修改应用",
     "Enable password": "开启密码",
-    "Login page preview": "登录页面预览"
+    "Login page preview": "登录页面预览",
+    "Test signup page..": "测试注册页面..",
+    "Test signin page..": "测试登录页面.."
   },
   "forget":
   {