Improve creation UI for pages.

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>
     );

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 => {

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}`,

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>
     );

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 => {

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);
+}

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>
     );

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 => {

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>
     );

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 => {

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>
     );

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 => {