From 1762d19787fd79eb1f9390f63e56769478d97292 Mon Sep 17 00:00:00 2001
From: Gucheng Wang <nomeguy@qq.com>
Date: Sun, 12 Dec 2021 18:51:12 +0800
Subject: [PATCH] Improve creation UI for pages.

---
 web/src/ApplicationEditPage.js  | 15 ++++++++++----
 web/src/ApplicationListPage.js  |  3 ++-
 web/src/OrganizationListPage.js |  2 +-
 web/src/ProviderEditPage.js     | 15 ++++++++++----
 web/src/ProviderListPage.js     |  3 ++-
 web/src/Setting.js              |  4 ++++
 web/src/TokenEditPage.js        | 35 +++++++++++++++++++++++++++++----
 web/src/TokenListPage.js        |  6 +++++-
 web/src/UserEditPage.js         | 14 +++++++++----
 web/src/UserListPage.js         |  4 +++-
 web/src/WebhookEditPage.js      | 15 ++++++++++----
 web/src/WebhookListPage.js      |  5 +++--
 12 files changed, 94 insertions(+), 27 deletions(-)

diff --git a/web/src/ApplicationEditPage.js b/web/src/ApplicationEditPage.js
index 2c61243c..1ff07f65 100644
--- a/web/src/ApplicationEditPage.js
+++ b/web/src/ApplicationEditPage.js
@@ -123,7 +123,8 @@ class ApplicationEditPage extends React.Component {
       <Card size="small" title={
         <div>
           {i18next.t("application:Edit Application")}&nbsp;&nbsp;&nbsp;&nbsp;
-          <Button type="primary" onClick={this.submitApplicationEdit.bind(this)}>{i18next.t("general:Save")}</Button>
+          <Button onClick={() => this.submitApplicationEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: '20px'}} type="primary" onClick={() => this.submitApplicationEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
         </div>
       } style={(Setting.isMobile())? {margin: '5px'}:{}} type="inner">
         <Row style={{marginTop: '10px'}} >
@@ -509,7 +510,7 @@ class ApplicationEditPage extends React.Component {
     )
   }
 
-  submitApplicationEdit() {
+  submitApplicationEdit(willExist) {
     let application = Setting.deepCopy(this.state.application);
     ApplicationBackend.updateApplication(this.state.application.owner, this.state.applicationName, application)
       .then((res) => {
@@ -518,7 +519,12 @@ class ApplicationEditPage extends React.Component {
           this.setState({
             applicationName: this.state.application.name,
           });
-          this.props.history.push(`/applications/${this.state.application.name}`);
+
+          if (willExist) {
+            this.props.history.push(`/applications`);
+          } else {
+            this.props.history.push(`/applications/${this.state.application.name}`);
+          }
         } else {
           Setting.showMessage("error", res.msg);
           this.updateApplicationField('name', this.state.applicationName);
@@ -536,7 +542,8 @@ class ApplicationEditPage extends React.Component {
         this.state.application !== null ? this.renderApplication() : null
       }
       <div style={{marginTop: '20px', marginLeft: '40px'}}>
-        <Button type="primary" size="large" onClick={this.submitApplicationEdit.bind(this)}>{i18next.t("general:Save")}</Button>
+        <Button size="large" onClick={() => this.submitApplicationEdit(false)}>{i18next.t("general:Save")}</Button>
+        <Button style={{marginLeft: '20px'}} type="primary" size="large" onClick={() => this.submitApplicationEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
       </div>
     </div>
     );
diff --git a/web/src/ApplicationListPage.js b/web/src/ApplicationListPage.js
index be42cdfa..f9020489 100644
--- a/web/src/ApplicationListPage.js
+++ b/web/src/ApplicationListPage.js
@@ -48,7 +48,7 @@ class ApplicationListPage extends React.Component {
   }
 
   newApplication() {
-    var randomName = Math.random().toString(36).slice(-6)
+    const randomName = Setting.getRandomName();
     return {
       owner: "admin", // this.props.account.applicationname,
       name: `application_${randomName}`,
@@ -83,6 +83,7 @@ class ApplicationListPage extends React.Component {
             applications: Setting.prependRow(this.state.applications, newApplication),
             total: this.state.total + 1
           });
+          this.props.history.push(`/applications/${newApplication.name}`);
         }
       )
       .catch(error => {
diff --git a/web/src/OrganizationListPage.js b/web/src/OrganizationListPage.js
index b9ba6650..e907fc31 100644
--- a/web/src/OrganizationListPage.js
+++ b/web/src/OrganizationListPage.js
@@ -47,7 +47,7 @@ class OrganizationListPage extends React.Component {
   }
 
   newOrganization() {
-    var randomName = Math.random().toString(36).slice(-6)
+    const randomName = Setting.getRandomName();
     return {
       owner: "admin", // this.props.account.organizationname,
       name: `organization_${randomName}`,
diff --git a/web/src/ProviderEditPage.js b/web/src/ProviderEditPage.js
index 5eeb0cb8..10b82aa9 100644
--- a/web/src/ProviderEditPage.js
+++ b/web/src/ProviderEditPage.js
@@ -181,7 +181,8 @@ class ProviderEditPage extends React.Component {
       <Card size="small" title={
         <div>
           {i18next.t("provider:Edit Provider")}&nbsp;&nbsp;&nbsp;&nbsp;
-          <Button type="primary" onClick={this.submitProviderEdit.bind(this)}>{i18next.t("general:Save")}</Button>
+          <Button onClick={() => this.submitProviderEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: '20px'}} type="primary" onClick={() => this.submitProviderEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
         </div>
       } style={(Setting.isMobile())? {margin: '5px'}:{}} type="inner">
         <Row style={{marginTop: '10px'}} >
@@ -521,7 +522,7 @@ class ProviderEditPage extends React.Component {
     )
   }
 
-  submitProviderEdit() {
+  submitProviderEdit(willExist) {
     let provider = Setting.deepCopy(this.state.provider);
     ProviderBackend.updateProvider(this.state.provider.owner, this.state.providerName, provider)
       .then((res) => {
@@ -530,7 +531,12 @@ class ProviderEditPage extends React.Component {
           this.setState({
             providerName: this.state.provider.name,
           });
-          this.props.history.push(`/providers/${this.state.provider.name}`);
+
+          if (willExist) {
+            this.props.history.push(`/providers`);
+          } else {
+            this.props.history.push(`/providers/${this.state.provider.name}`);
+          }
         } else {
           Setting.showMessage("error", res.msg);
           this.updateProviderField('name', this.state.providerName);
@@ -548,7 +554,8 @@ class ProviderEditPage extends React.Component {
           this.state.provider !== null ? this.renderProvider() : null
         }
         <div style={{marginTop: '20px', marginLeft: '40px'}}>
-          <Button type="primary" size="large" onClick={this.submitProviderEdit.bind(this)}>{i18next.t("general:Save")}</Button>
+          <Button size="large" onClick={() => this.submitProviderEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: '20px'}} type="primary" size="large" onClick={() => this.submitProviderEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
         </div>
       </div>
     );
diff --git a/web/src/ProviderListPage.js b/web/src/ProviderListPage.js
index 9ad38659..8b468410 100644
--- a/web/src/ProviderListPage.js
+++ b/web/src/ProviderListPage.js
@@ -48,7 +48,7 @@ class ProviderListPage extends React.Component {
   }
 
   newProvider() {
-    var randomName = Math.random().toString(36).slice(-6)
+    const randomName = Setting.getRandomName();
     return {
       owner: "admin", // this.props.account.providername,
       name: `provider_${randomName}`,
@@ -75,6 +75,7 @@ class ProviderListPage extends React.Component {
             providers: Setting.prependRow(this.state.providers, newProvider),
             total: this.state.total + 1
           });
+          this.props.history.push(`/providers/${newProvider.name}`);
         }
       )
       .catch(error => {
diff --git a/web/src/Setting.js b/web/src/Setting.js
index ab79e784..ea89a4e6 100644
--- a/web/src/Setting.js
+++ b/web/src/Setting.js
@@ -554,3 +554,7 @@ export function getTags(tags) {
 export function getApplicationOrgName(application) {
   return `${application?.organizationObj.owner}/${application?.organizationObj.name}`;
 }
+
+export function getRandomName() {
+  return Math.random().toString(36).slice(-6);
+}
diff --git a/web/src/TokenEditPage.js b/web/src/TokenEditPage.js
index c515dd18..d4418623 100644
--- a/web/src/TokenEditPage.js
+++ b/web/src/TokenEditPage.js
@@ -63,7 +63,8 @@ class TokenEditPage extends React.Component {
       <Card size="small" title={
         <div>
           {i18next.t("token:Edit Token")}&nbsp;&nbsp;&nbsp;&nbsp;
-          <Button type="primary" onClick={this.submitTokenEdit.bind(this)}>{i18next.t("general:Save")}</Button>
+          <Button onClick={() => this.submitTokenEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: '20px'}} type="primary" onClick={() => this.submitTokenEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
         </div>
       } style={(Setting.isMobile())? {margin: '5px'}:{}} type="inner">
         <Row style={{marginTop: '10px'}} >
@@ -86,6 +87,26 @@ class TokenEditPage extends React.Component {
             }} />
           </Col>
         </Row>
+        <Row style={{marginTop: '20px'}} >
+          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+            {i18next.t("general:Organization")}:
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.token.organization} onChange={e => {
+              this.updateTokenField('organization', e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: '20px'}} >
+          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+            {i18next.t("general:User")}:
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.token.user} onChange={e => {
+              this.updateTokenField('user', e.target.value);
+            }} />
+          </Col>
+        </Row>
         <Row style={{marginTop: '20px'}} >
           <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
             {i18next.t("general:Authorization code")}:
@@ -140,7 +161,7 @@ class TokenEditPage extends React.Component {
     )
   }
 
-  submitTokenEdit() {
+  submitTokenEdit(willExist) {
     let token = Setting.deepCopy(this.state.token);
     TokenBackend.updateToken(this.state.token.owner, this.state.tokenName, token)
       .then((res) => {
@@ -149,7 +170,12 @@ class TokenEditPage extends React.Component {
           this.setState({
             tokenName: this.state.token.name,
           });
-          this.props.history.push(`/tokens/${this.state.token.name}`);
+
+          if (willExist) {
+            this.props.history.push(`/tokens`);
+          } else {
+            this.props.history.push(`/tokens/${this.state.token.name}`);
+          }
         } else {
           Setting.showMessage("error", res.msg);
           this.updateTokenField('name', this.state.tokenName);
@@ -167,7 +193,8 @@ class TokenEditPage extends React.Component {
         this.state.token !== null ? this.renderToken() : null
       }
       <div style={{marginTop: '20px', marginLeft: '40px'}}>
-        <Button type="primary" size="large" onClick={this.submitTokenEdit.bind(this)}>{i18next.t("general:Save")}</Button>
+        <Button size="large" onClick={() => this.submitTokenEdit(false)}>{i18next.t("general:Save")}</Button>
+        <Button style={{marginLeft: '20px'}} type="primary" size="large" onClick={() => this.submitTokenEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
       </div>
     </div>
     );
diff --git a/web/src/TokenListPage.js b/web/src/TokenListPage.js
index cb8540ff..49fbf944 100644
--- a/web/src/TokenListPage.js
+++ b/web/src/TokenListPage.js
@@ -47,11 +47,14 @@ class TokenListPage extends React.Component {
   }
 
   newToken() {
+    const randomName = Setting.getRandomName();
     return {
       owner: "admin", // this.props.account.tokenname,
-      name: `token_${Math.random().toString(36).slice(-6)}`,
+      name: `token_${randomName}`,
       createdTime: moment().format(),
       application: "app-built-in",
+      organization: "built-in",
+      user: "admin",
       accessToken: "",
       expiresIn: 7200,
       scope: "read",
@@ -68,6 +71,7 @@ class TokenListPage extends React.Component {
             tokens: Setting.prependRow(this.state.tokens, newToken),
             total: this.state.total + 1
           });
+          this.props.history.push(`/tokens/${newToken.name}`);
         }
       )
       .catch(error => {
diff --git a/web/src/UserEditPage.js b/web/src/UserEditPage.js
index 5b0a2bcb..2c76cdc4 100644
--- a/web/src/UserEditPage.js
+++ b/web/src/UserEditPage.js
@@ -110,7 +110,8 @@ class UserEditPage extends React.Component {
       <Card size="small" title={
         <div>
           {i18next.t("user:Edit User")}&nbsp;&nbsp;&nbsp;&nbsp;
-          <Button type="primary" onClick={this.submitUserEdit.bind(this)}>{i18next.t("general:Save")}</Button>
+          <Button onClick={() => this.submitUserEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: '20px'}} type="primary" onClick={() => this.submitUserEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
         </div>
       } style={(Setting.isMobile())? {margin: '5px'}:{}} type="inner">
         <Row style={{marginTop: '10px'}} >
@@ -370,7 +371,7 @@ class UserEditPage extends React.Component {
     )
   }
 
-  submitUserEdit() {
+  submitUserEdit(willExist) {
     let user = Setting.deepCopy(this.state.user);
     UserBackend.updateUser(this.state.organizationName, this.state.userName, user)
       .then((res) => {
@@ -382,7 +383,11 @@ class UserEditPage extends React.Component {
           });
 
           if (this.props.history !== undefined) {
-            this.props.history.push(`/users/${this.state.user.owner}/${this.state.user.name}`);
+            if (willExist) {
+              this.props.history.push(`/users`);
+            } else {
+              this.props.history.push(`/users/${this.state.user.owner}/${this.state.user.name}`);
+            }
           }
         } else {
           Setting.showMessage("error", res.msg);
@@ -402,7 +407,8 @@ class UserEditPage extends React.Component {
         this.state.user !== null ? this.renderUser() : null
       }
       <div style={{marginTop: '20px', marginLeft: '40px'}}>
-        <Button type="primary" size="large" onClick={this.submitUserEdit.bind(this)}>{i18next.t("general:Save")}</Button>
+        <Button size="large" onClick={() => this.submitUserEdit(false)}>{i18next.t("general:Save")}</Button>
+        <Button style={{marginLeft: '20px'}} type="primary" size="large" onClick={() => this.submitUserEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
       </div>
     </div>
     );
diff --git a/web/src/UserListPage.js b/web/src/UserListPage.js
index c45603ed..4406a265 100644
--- a/web/src/UserListPage.js
+++ b/web/src/UserListPage.js
@@ -60,7 +60,7 @@ class UserListPage extends React.Component {
   }
 
   newUser() {
-    var randomName = Math.random().toString(36).slice(-6)
+    const randomName = Setting.getRandomName();
     return {
       owner: "built-in", // this.props.account.username,
       name: `user_${randomName}`,
@@ -81,6 +81,7 @@ class UserListPage extends React.Component {
       IsForbidden: false,
       isDeleted: false,
       properties: {},
+      signupApplication: "app-built-in",
     }
   }
 
@@ -93,6 +94,7 @@ class UserListPage extends React.Component {
             users: Setting.prependRow(this.state.users, newUser),
             total: this.state.total + 1
           });
+          this.props.history.push(`/users/${newUser.owner}/${newUser.name}`);
         }
       )
       .catch(error => {
diff --git a/web/src/WebhookEditPage.js b/web/src/WebhookEditPage.js
index d1e46482..15e5a334 100644
--- a/web/src/WebhookEditPage.js
+++ b/web/src/WebhookEditPage.js
@@ -78,7 +78,8 @@ class WebhookEditPage extends React.Component {
       <Card size="small" title={
         <div>
           {i18next.t("webhook:Edit Webhook")}&nbsp;&nbsp;&nbsp;&nbsp;
-          <Button type="primary" onClick={this.submitWebhookEdit.bind(this)}>{i18next.t("general:Save")}</Button>
+          <Button onClick={() => this.submitWebhookEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: '20px'}} type="primary" onClick={() => this.submitWebhookEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
         </div>
       } style={(Setting.isMobile())? {margin: '5px'}:{}} type="inner">
         <Row style={{marginTop: '10px'}} >
@@ -154,7 +155,7 @@ class WebhookEditPage extends React.Component {
     )
   }
 
-  submitWebhookEdit() {
+  submitWebhookEdit(willExist) {
     let webhook = Setting.deepCopy(this.state.webhook);
     WebhookBackend.updateWebhook(this.state.webhook.owner, this.state.webhookName, webhook)
       .then((res) => {
@@ -163,7 +164,12 @@ class WebhookEditPage extends React.Component {
           this.setState({
             webhookName: this.state.webhook.name,
           });
-          this.props.history.push(`/webhooks/${this.state.webhook.name}`);
+
+          if (willExist) {
+            this.props.history.push(`/webhooks`);
+          } else {
+            this.props.history.push(`/webhooks/${this.state.webhook.name}`);
+          }
         } else {
           Setting.showMessage("error", res.msg);
           this.updateWebhookField('name', this.state.webhookName);
@@ -181,7 +187,8 @@ class WebhookEditPage extends React.Component {
           this.state.webhook !== null ? this.renderWebhook() : null
         }
         <div style={{marginTop: '20px', marginLeft: '40px'}}>
-          <Button type="primary" size="large" onClick={this.submitWebhookEdit.bind(this)}>{i18next.t("general:Save")}</Button>
+          <Button size="large" onClick={() => this.submitWebhookEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: '20px'}} type="primary" size="large" onClick={() => this.submitWebhookEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
         </div>
       </div>
     );
diff --git a/web/src/WebhookListPage.js b/web/src/WebhookListPage.js
index c94a895a..4613b57d 100644
--- a/web/src/WebhookListPage.js
+++ b/web/src/WebhookListPage.js
@@ -47,14 +47,14 @@ class WebhookListPage extends React.Component {
   }
 
   newWebhook() {
-    var randomName = Math.random().toString(36).slice(-6)
+    const randomName = Setting.getRandomName();
     return {
       owner: "admin", // this.props.account.webhookname,
       name: `webhook_${randomName}`,
       createdTime: moment().format(),
       url: "https://example.com/callback",
       contentType: "application/json",
-      events: [],
+      events: ["signup", "login", "logout", "update-user"],
       organization: "built-in",
     }
   }
@@ -68,6 +68,7 @@ class WebhookListPage extends React.Component {
             webhooks: Setting.prependRow(this.state.webhooks, newWebhook),
             total: this.state.total + 1
           });
+          this.props.history.push(`/webhooks/${newWebhook.name}`);
         }
       )
       .catch(error => {