fix: Add repo secret key validate

src/components/Base/Modal/index.scss

@@ -54,7 +54,7 @@
             height: 32px;
             border-radius: 2px;
             background-color: $N0;
-            box-shadow: 0 1px 2px 0 rgba(109, 53, 195, 0.15);
+            // box-shadow: 0 1px 2px 0 rgba(109, 53, 195, 0.15);
           }
           & > textarea{
             box-sizing: border-box;

src/config/translation.js

@@ -50,6 +50,9 @@ const tsObj = {
     'Runtime Selector missing value': '环境选择器缺失值',
     'Invalid s3 url, should be like s3://s3.pek3a.qingstor.com/op-repo':
       '无效的s3网址，应该是这样: s3://s3.pek3a.qingstor.com/op-repo',
+    'Information to be verified is incomplete!': '验证要求输入的信息不完整！',
+    'Access key verification successfully': '访问密钥验证成功',
+    'Access key verification fail': '访问密钥验证失败',
     'Create repo successfully': '创建仓库成功',
     'Modify repo successfully': '修改仓库成功',
     'Delete repo successfully.': '删除仓库成功',

src/pages/Admin/Repos/Add/index.jsx

@@ -37,11 +37,14 @@ export default class RepoAdd extends Component {
     }
   }
 
-  componentDidUpdate() {
-    if (get(this.store, 'repoCreated.repo_id') && !this.store.isLoading) {
-      history.back();
+  handleSubmit = async e => {
+    const { repoCreateStore } = this.props;
+    const result = await repoCreateStore.handleSubmit(e);
+
+    if (!(result && result.err)) {
+      setTimeout(() => history.back(), 1000);
     }
-  }
+  };
 
   renderForm() {
     const { t } = this.props;
@@ -61,7 +64,7 @@ export default class RepoAdd extends Component {
     } = this.store;
 
     return (
-      <form className={styles.createForm} onSubmit={this.store.handleSubmit}>
+      <form className={styles.createForm} onSubmit={this.handleSubmit}>
         <div>
           <label className={styles.name}>{t('Name')}</label>
           <Input
@@ -156,7 +159,7 @@ export default class RepoAdd extends Component {
                 value={secretKey}
                 onChange={this.store.changeSecretKey}
               />
-              <Button className={styles.add} onClick={this.store.handleValidateCredential}>
+              <Button className={styles.add} onClick={this.store.validateRepoCredential}>
                 {t('Validate')}
               </Button>
             </div>

src/pages/Admin/Users/index.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { observer, inject } from 'mobx-react';
+import { toJS } from 'mobx';
 import { Link } from 'react-router-dom';
 import { translate } from 'react-i18next';
 import classnames from 'classnames';
@@ -111,8 +112,7 @@ export default class Users extends Component {
     if (operateType === 'modify') {
       title = t('Modify User');
     }
-    const emailRegexp =
-      "[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)[\\w](?:[\\w-]*[\\w])?";
+    const emailRegexp = '^[A-Za-z0-9._%-]+@([A-Za-z0-9-]+\\.)+[A-Za-z]{2,4}$';
 
     return (
       <Modal
@@ -236,7 +236,7 @@ export default class Users extends Component {
       selectName
     } = userStore;
 
-    const data = userStore.users.toJSON();
+    const data = toJS(userStore.users);
 
     const columns = [
       {

src/pages/Home/index.jsx

@@ -28,15 +28,14 @@ export default class Home extends Component {
     } else {
       rootStore.setNavFix(false);
     }
-
-    window.scroll({ top: 0 });
   }
 
   async componentDidMount() {
     const { rootStore, appStore, categoryStore, match } = this.props;
     const { category, search } = match.params;
     const filterParams = { status: 'active', noLimit: true };
 
+    window.scroll({ top: 0 });
     await categoryStore.fetchAll();
 
     if (!(category || search)) {

src/scss/index.scss

@@ -163,13 +163,6 @@
     pointer-events: none;
   }
 
-  input:-webkit-autofill,
-  input:-webkit-autofill:hover,
-  input:-webkit-autofill:focus {
-    box-shadow:0 0 0 60px white  inset;
-    -webkit-text-fill-color: #878787;
-  }
-
   .CodeMirror {
     font-family: "roboto monospace", monospace, sans-serif;
   }

src/stores/app/deploy.js

@@ -203,7 +203,10 @@ ${this.yamlStr}`;
 
   @action
   async fetchSubnets(runtimeId) {
-    const result = await this.request.get(`clusters/subnets`, { runtime_id: runtimeId });
+    const result = await this.request.get(`clusters/subnets`, {
+      runtime_id: runtimeId,
+      limit: this.maxLimit
+    });
     this.subnets = get(result, 'subnet_set', []);
     this.subnetId = this.subnets[0] ? this.subnets[0].subnet_id : '';
   }

src/stores/repo/create.js

@@ -144,6 +144,34 @@ export default class RepoCreateStore extends Store {
       .join('&');
   }
 
+  @action
+  validateRepoCredential = async () => {
+    if (!this.url || !this.accessKey || !this.secretKey) {
+      return this.info(ts('Information to be verified is incomplete!'));
+    }
+
+    // format s3 url
+    const url = this.url.startsWith('s3://') ? this.url : `s3://${this.url}`;
+    if (!s3UrlPattern.test(url)) {
+      return this.info(ts('Invalid s3 url, should be like s3://s3.pek3a.qingstor.com/op-repo'));
+    }
+
+    const params = {
+      type: this.protocolType,
+      url: url,
+      credential: JSON.stringify({
+        access_key_id: this.accessKey,
+        secret_access_key: this.secretKey
+      })
+    };
+    const result = await this.request.get('repos/validate', params);
+    if (result && result.ok) {
+      this.success(ts('Access key verification successfully'));
+    } else {
+      this.error(ts('Access key verification fail'));
+    }
+  };
+
   @action
   handleSubmit = async e => {
     e.preventDefault();
@@ -216,10 +244,17 @@ export default class RepoCreateStore extends Store {
 
     this.isLoading = true;
     if (this.repoId) {
-      delete data.url;
-      if (!accessKey) {
+      if (!accessKey || !secretKey) {
+        delete data.url;
         delete data.credential;
+      } else {
+        data.url = this.url;
+        data.credential = JSON.stringify({
+          access_key_id: accessKey,
+          secret_access_key: secretKey
+        });
       }
+
       _.extend(data, { repo_id: this.repoId });
       await this.modifyRepo(data);
     } else {
@@ -230,24 +265,23 @@ export default class RepoCreateStore extends Store {
       this.success(ts('Modify repo successfully'));
     } else if (_.get(this, 'repoCreated.repo_id')) {
       this.success(ts('Create repo successfully'));
+    } else {
+      return this.repoCreated;
     }
-
-    // disable re-submit form in 1 sec
-    setTimeout(() => {
-      this.isLoading = false;
-    }, 1000);
   };
 
   @action
   async create(params) {
     params = typeof params === 'object' ? params : JSON.stringify(params);
     this.repoCreated = await this.request.post('repos', params);
+    this.isLoading = false;
   }
 
   @action
   async modifyRepo(params) {
     params = typeof params === 'object' ? params : JSON.stringify(params);
     this.repoCreated = await this.request.patch('repos', params);
+    this.isLoading = false;
   }
 
   @action
@@ -273,12 +307,16 @@ export default class RepoCreateStore extends Store {
 
   @action
   setRepo = detail => {
+    this.repoCreated = null;
+
     if (detail) {
       this.repoId = detail.repo_id;
       this.name = detail.name;
       this.description = detail.description;
       this.url = detail.url;
       this.protocolType = detail.type;
+      this.accessKey = '';
+      this.secretKey = '';
       this.providers = detail.providers;
       this.visibility = detail.visibility;
       this.labels = detail.labels || [{ label_key: '', label_value: '' }];

src/stores/user/index.js

@@ -44,7 +44,7 @@ export default class UserStore extends Store {
     username: '',
     email: '',
     password: '',
-    role: 'user',
+    role: '',
     description: ''
   };
   @observable userId = '';
@@ -297,7 +297,7 @@ export default class UserStore extends Store {
       username: '',
       email: '',
       password: '',
-      role: 'user',
+      role: '',
       description: ''
     };
   };
@@ -347,7 +347,7 @@ export default class UserStore extends Store {
       username: '',
       email: '',
       password: '',
-      role: 'user',
+      role: '',
       description: ''
     };
   };

test/pages/Home.test.js

@@ -21,7 +21,8 @@ describe('Home', () => {
       categoryStore: {
         getCategoryApps: () => {},
         categories: []
-      }
+      },
+      setNavFix: () => {}
     });
   });
 

test/pages/__snapshots__/Home.test.js.snap

@@ -19,17 +19,18 @@ Array [
       />
     </div>
     <div
-      class="appList apps"
+      class="apps"
     >
       <div
-        class="title"
-      />
-      <div
-        class="appsRow"
-      />
-      <div
-        class="noData"
-      />
+        class="appList"
+      >
+        <div
+          class="title"
+        />
+        <div
+          class="noData"
+        />
+      </div>
     </div>
   </div>,
 ]