From 2c4f57c97abbed9a87107f6d6085e71c355976f4 Mon Sep 17 00:00:00 2001
From: leoliu <leoliu@yunify.com>
Date: Thu, 21 May 2020 12:52:54 +0800
Subject: [PATCH] fix: Fix language switch

---
 server/services/session.js                    |  3 +-
 src/components/Layout/LoginInfo/index.jsx     | 16 +--------
 .../Modals/UserSetting/BaseInfo/index.jsx     | 35 +++++--------------
 src/components/Modals/UserSetting/index.jsx   | 20 +++++++++--
 src/stores/user.js                            |  4 ++-
 5 files changed, 33 insertions(+), 45 deletions(-)

diff --git a/server/services/session.js b/server/services/session.js
index cb567db4315..60c144fae77 100644
--- a/server/services/session.js
+++ b/server/services/session.js
@@ -81,8 +81,9 @@ const getUserDetail = async (username, token) => {
 
   if (resp) {
     user = {
-      username: get(resp, 'metadata.name'),
       email: get(resp, 'spec.email'),
+      lang: get(resp, 'spec.lang'),
+      username: get(resp, 'metadata.name'),
       globalrole: get(
         resp,
         'metadata.annotations["iam.kubesphere.io/globalrole"]'
diff --git a/src/components/Layout/LoginInfo/index.jsx b/src/components/Layout/LoginInfo/index.jsx
index d031893a4ac..23628100ed7 100644
--- a/src/components/Layout/LoginInfo/index.jsx
+++ b/src/components/Layout/LoginInfo/index.jsx
@@ -20,7 +20,6 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { inject, observer } from 'mobx-react'
 import classnames from 'classnames'
-import { omit } from 'lodash'
 import { Dropdown, Menu, Icon } from '@pitrix/lego-ui'
 
 import AboutModal from 'components/Modals/About'
@@ -72,19 +71,7 @@ export default class LoginInfo extends Component {
   }
 
   handleUserEdit = data => {
-    this.store.update(
-      {
-        ...omit(globals.user, [
-          '_update_time_',
-          'workspace_rules',
-          'rules',
-          'workspaces',
-          'cluster_rules',
-        ]),
-        ...data,
-      },
-      globals.user
-    )
+    this.store.update({ name: globals.user.username }, data)
   }
 
   renderDropDown() {
@@ -112,7 +99,6 @@ export default class LoginInfo extends Component {
         />
         <UserEditModal
           module="users"
-          detail={globals.user}
           visible={this.state.showUserEdit}
           onOk={this.handleUserEdit}
           onCancel={this.hideUserEditModal}
diff --git a/src/components/Modals/UserSetting/BaseInfo/index.jsx b/src/components/Modals/UserSetting/BaseInfo/index.jsx
index 73f92210f42..6337a63b628 100644
--- a/src/components/Modals/UserSetting/BaseInfo/index.jsx
+++ b/src/components/Modals/UserSetting/BaseInfo/index.jsx
@@ -30,27 +30,10 @@ export default class BaseInfo extends React.Component {
     registerUpdate: PropTypes.func,
   }
 
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      formData: this.getInitialData(),
-    }
-  }
-
   get name() {
     return 'basicInfo'
   }
 
-  getInitialData() {
-    return {
-      avatar_url: globals.user.avatar_url,
-      username: globals.user.username,
-      email: globals.user.email,
-      lang: cookie('lang') || getBrowserLang(),
-    }
-  }
-
   resetData = () => {
     this.setState({
       formData: this.getInitialData(),
@@ -62,26 +45,26 @@ export default class BaseInfo extends React.Component {
   }
 
   render() {
-    const { formRef } = this.props
+    const { formRef, formData } = this.props
     return (
       <div className={styles.wrapper}>
         <div className="h4">{t('Basic Info')}</div>
-        <Form
-          data={this.state.formData}
-          ref={formRef}
-          onChange={this.handleFormChange}
-        >
+        <Form data={formData} ref={formRef} onChange={this.handleFormChange}>
           <Columns>
             <Column>
               <Form.Item label={t('User Name')}>
-                <Input name="username" placeholder="username" disabled />
+                <Input name="metadata.name" placeholder="username" disabled />
               </Form.Item>
               <Form.Item label={t('Email')} desc={t('USER_SETTING_EMAIL_DESC')}>
-                <Input name="email" placeholder="User@example.com" />
+                <Input name="spec.email" placeholder="User@example.com" />
               </Form.Item>
               {globals.config.supportLangs && (
                 <Form.Item label={t('Language')}>
-                  <Select name="lang" options={globals.config.supportLangs} />
+                  <Select
+                    name="spec.lang"
+                    options={globals.config.supportLangs}
+                    defaultValue={cookie('lang') || getBrowserLang()}
+                  />
                 </Form.Item>
               )}
             </Column>
diff --git a/src/components/Modals/UserSetting/index.jsx b/src/components/Modals/UserSetting/index.jsx
index 8d3a9bf3e08..b777595cb25 100644
--- a/src/components/Modals/UserSetting/index.jsx
+++ b/src/components/Modals/UserSetting/index.jsx
@@ -16,7 +16,7 @@
  * along with KubeSphere Console.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { get, has, isEmpty } from 'lodash'
+import { get, has, cloneDeep, isEmpty, set } from 'lodash'
 import React from 'react'
 import classnames from 'classnames'
 import PropTypes from 'prop-types'
@@ -25,6 +25,8 @@ import { Icon, Tooltip } from '@pitrix/lego-ui'
 import { Modal, Button } from 'components/Base'
 import Confirm from 'components/Forms/Base/Confirm'
 
+import UserStore from 'stores/user'
+
 import TABS from './tabs'
 
 import styles from './index.scss'
@@ -62,6 +64,8 @@ export default class UserSettingModal extends React.Component {
       activeTab: get(this.tabs, '[0].name'),
       updatedTabs: {},
     }
+
+    this.store = new UserStore()
   }
 
   get updateTip() {
@@ -78,6 +82,17 @@ export default class UserSettingModal extends React.Component {
     return TABS[module] || []
   }
 
+  componentDidMount() {
+    this.store.fetchDetail({ name: globals.user.username }).then(() => {
+      this.setState({
+        formData: Object.assign(
+          { apiVersion: 'iam.kubesphere.io/v1alpha2', kind: 'User' },
+          cloneDeep(this.store.detail._originData)
+        ),
+      })
+    })
+  }
+
   registerUpdate = (name, params) => {
     const { updatedTabs } = this.state
 
@@ -102,6 +117,7 @@ export default class UserSettingModal extends React.Component {
     if (form) {
       form.validate(() => {
         const data = form.getData()
+        set(data, 'metadata.resourceVersion', this.store.detail.resourceVersion)
         onOk(data)
         this.cancelUpdate(name)
       })
@@ -195,7 +211,7 @@ export default class UserSettingModal extends React.Component {
           module={module}
           ref={this[refName]}
           formRef={this[formRefName]}
-          formData={this.formData}
+          formData={this.state.formData}
         />
       </div>
     )
diff --git a/src/stores/user.js b/src/stores/user.js
index 54477d6c48b..5d27b30a476 100644
--- a/src/stores/user.js
+++ b/src/stores/user.js
@@ -16,6 +16,7 @@
  * along with KubeSphere Console.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import { get } from 'lodash'
 import { observable, action } from 'mobx'
 import { Notify } from 'components/Base'
 import cookie from 'utils/cookie'
@@ -87,7 +88,8 @@ export default class UsersStore extends Base {
       return await request.post('logout')
     }
 
-    if (data.lang && data.lang !== cookie('lang')) {
+    const lang = get(data, 'spec.lang')
+    if (lang && data.lang !== cookie('lang')) {
       cookie('lang', data.lang, { path: '/' })
       window.location.reload()
     }