fix: Fix federated secrets error

src/actions/secret.js

@@ -78,7 +78,7 @@ export default {
     on({ store, detail, success, ...props }) {
       const modal = Modal.open({
         onOk: data => {
-          store.updateWithEncode(detail, data).then(() => {
+          store.update(detail, data).then(() => {
             Modal.close(modal)
             success && success()
           })

src/components/Forms/ConfigMap/ConfigMapSettings/DataForm/index.jsx

@@ -18,6 +18,7 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
+import { trim } from 'lodash'
 import { Input, TextArea } from '@pitrix/lego-ui'
 import { Form } from 'components/Base'
 import { ReactComponent as BackIcon } from 'src/assets/back.svg'
@@ -76,7 +77,7 @@ export default class SecretDataForm extends React.Component {
     form &&
       form.validate(() => {
         const { key, value } = form.getData()
-        onOk({ [key]: value })
+        onOk({ [trim(key)]: value })
         callback && callback()
       })
   }

src/components/Forms/ImageBuilder/S2IForm/index.jsx

@@ -17,7 +17,6 @@
  */
 
 import React from 'react'
-import PropTypes from 'prop-types'
 import { get, set } from 'lodash'
 import classnames from 'classnames'
 import { Input, Select, Alert, Loading } from '@pitrix/lego-ui'
@@ -56,10 +55,6 @@ export default class S2IForm extends React.Component {
     prefix: '',
   }
 
-  static contextTypes = {
-    formData: PropTypes.object,
-  }
-
   get prefix() {
     const { prefix } = this.props
     return prefix ? `${prefix}.` : ''

src/components/Forms/Secret/SecretSettings/Base64Wrapper/index.jsx

@@ -0,0 +1,38 @@
+/*
+ * This file is part of KubeSphere Console.
+ * Copyright (C) 2019 The KubeSphere Console Authors.
+ *
+ * KubeSphere Console is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * KubeSphere Console is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with KubeSphere Console.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { get } from 'lodash'
+import React, { Component } from 'react'
+
+export default class Base64Wrapper extends Component {
+  handleChange = e => {
+    const value = get(e, 'target.value', e)
+    const { onChange } = this.props
+    return onChange(btoa(value))
+  }
+
+  render() {
+    const { name, children, value } = this.props
+    const node = React.cloneElement(children, {
+      name,
+      value: atob(value || ''),
+      onChange: this.handleChange,
+    })
+    return node
+  }
+}

src/components/Forms/Secret/SecretSettings/DataForm/index.jsx

@@ -17,6 +17,7 @@
  */
 
 import React from 'react'
+import { trim } from 'lodash'
 import PropTypes from 'prop-types'
 import { Input, TextArea } from '@pitrix/lego-ui'
 import { Form } from 'components/Base'
@@ -65,7 +66,7 @@ export default class SecretDataForm extends React.Component {
 
     return {
       key: selectKey || '',
-      value: detail[selectKey] || '',
+      value: atob(detail[selectKey] || ''),
     }
   }
 
@@ -76,7 +77,7 @@ export default class SecretDataForm extends React.Component {
     form &&
       form.validate(() => {
         const { key, value } = form.getData()
-        onOk({ [key]: value })
+        onOk({ [trim(key)]: btoa(value) })
         callback && callback()
       })
   }

src/components/Forms/Secret/SecretSettings/DataList/index.jsx

@@ -47,7 +47,7 @@ export default class SecretDataList extends React.Component {
             key={key}
             icon="key"
             title={key}
-            description={_value || '-'}
+            description={atob(_value) || '-'}
             onDelete={this.handleDelete(key)}
             onEdit={this.handleEdit(key)}
           />

src/components/Forms/Secret/SecretSettings/ImagerRegistry/Wrapper.jsx

@@ -0,0 +1,41 @@
+/*
+ * This file is part of KubeSphere Console.
+ * Copyright (C) 2019 The KubeSphere Console Authors.
+ *
+ * KubeSphere Console is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * KubeSphere Console is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with KubeSphere Console.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import React, { Component } from 'react'
+
+import styles from './index.scss'
+
+export default class Wrapper extends Component {
+  render() {
+    const { label, desc, required, children } = this.props
+    return (
+      <div className={styles.wrapper}>
+        {label && (
+          <label className={styles.label} htmlFor={name}>
+            {label}
+            {required ? <span className={styles.requiredIcon}>*</span> : null}
+          </label>
+        )}
+        <div className={styles.control}>
+          {children}
+          {desc && <div className={styles.desc}>{desc}</div>}
+        </div>
+      </div>
+    )
+  }
+}

src/components/Forms/Secret/SecretSettings/ImagerRegistry/index.jsx

@@ -0,0 +1,199 @@
+/*
+ * This file is part of KubeSphere Console.
+ * Copyright (C) 2019 The KubeSphere Console Authors.
+ *
+ * KubeSphere Console is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * KubeSphere Console is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with KubeSphere Console.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { get, debounce } from 'lodash'
+import React, { Component } from 'react'
+import { observer } from 'mobx-react'
+
+import { Columns, Column, Input, InputPassword } from '@pitrix/lego-ui'
+import { Button, Alert } from 'components/Base'
+import { SchemeInput } from 'components/Inputs'
+
+import { safeParseJSON } from 'utils'
+
+import SecretStore from 'stores/secret'
+
+import Wrapper from './Wrapper'
+
+import styles from './index.scss'
+
+@observer
+export default class ImageRegistry extends Component {
+  getStateFromProps = value => {
+    const valueObj = safeParseJSON(value)
+    const url = Object.keys(get(valueObj, 'auths', {}))[0] || ''
+    return {
+      url,
+      username: get(valueObj, `auths["${url}"].username`, ''),
+      password: get(valueObj, `auths["${url}"].password`, ''),
+      email: get(valueObj, `auths["${url}"].email`, ''),
+    }
+  }
+
+  store = new SecretStore()
+
+  state = {
+    ...this.getStateFromProps(this.props.value),
+    isValidating: false,
+  }
+
+  triggerChange = debounce(() => {
+    const { onChange } = this.props
+    const { url, username, password, email } = this.state
+
+    this.setState({ errorMsg: '' })
+    if (url && username && password) {
+      onChange(
+        JSON.stringify({
+          auths: {
+            [url]: {
+              username,
+              password,
+              email,
+              auth: btoa(`${username}:${password}`),
+            },
+          },
+        })
+      )
+    }
+  }, 200)
+
+  validate() {
+    if (!this.state.url || !this.state.username || !this.state.password) {
+      this.setState({ errorMsg: t('IMAGE_REGISTRY_REQUIRED_DESC') })
+      return false
+    }
+    return true
+  }
+
+  handleValidate = async () => {
+    if (this.validate()) {
+      this.setState({ isValidating: true })
+      const result =
+        (await this.store.validateImageRegistrySecret(this.state)) || {}
+
+      this.setState({
+        validate: result.validate || false,
+        reason: result.reason || '',
+        isValidating: false,
+      })
+    }
+  }
+
+  handleUrlChange = url => {
+    this.setState({ url }, this.triggerChange)
+  }
+
+  handleUserNameChange = e => {
+    this.setState({ username: e.target.value }, this.triggerChange)
+  }
+
+  handleEmailChange = e => {
+    this.setState({ email: e.target.value }, this.triggerChange)
+  }
+
+  handlePasswordChange = e => {
+    this.setState({ password: e.target.value }, this.triggerChange)
+  }
+
+  render() {
+    const {
+      url,
+      username,
+      password,
+      email,
+      errorMsg,
+      isValidating,
+      validate,
+      reason,
+    } = this.state
+    return (
+      <div>
+        <input name="username" className="hidden-input" type="text" disabled />
+        <input
+          name="password"
+          className="hidden-input"
+          type="password"
+          disabled
+        />
+        <Columns>
+          <Column>
+            <Wrapper
+              label={t('Registry Address')}
+              desc={t('Example: docker.io')}
+              required
+            >
+              <SchemeInput value={url} onChange={this.handleUrlChange} />
+            </Wrapper>
+          </Column>
+          <Column>
+            <Wrapper label={t('User Name')} required>
+              <Input
+                value={username}
+                onChange={this.handleUserNameChange}
+                autoComplete="nope"
+              />
+            </Wrapper>
+          </Column>
+        </Columns>
+        <Columns>
+          <Column>
+            <Wrapper label={t('Email')}>
+              <Input value={email} onChange={this.handleEmailChange} />
+            </Wrapper>
+          </Column>
+          <Column>
+            <Wrapper label={t('Password')} required>
+              <InputPassword
+                type="password"
+                value={password}
+                onChange={this.handlePasswordChange}
+                autoComplete="new-password"
+              />
+            </Wrapper>
+          </Column>
+        </Columns>
+        <div className={styles.tip}>
+          {validate ? (
+            <Alert
+              type="info"
+              icon="success"
+              message={t('Registry verification success')}
+            />
+          ) : reason ? (
+            <Alert
+              type="error"
+              title={t('Registry verification failed')}
+              message={reason}
+            />
+          ) : (
+            <Alert type="warning" message={t('IMAGE_REGISTRY_VALIDATE_TIP')} />
+          )}
+          {!validate && (
+            <Button onClick={this.handleValidate} loading={isValidating}>
+              {t('Validate')}
+            </Button>
+          )}
+        </div>
+        {errorMsg && (
+          <Alert className="margin-t12" type="error" message={errorMsg} />
+        )}
+      </div>
+    )
+  }
+}