Ability to change the username

7 years ago · 5a569bca22
4 changed files with 33 additions and 10 deletions
--- a/src/components/SettingsPage/index.js
+++ b/src/components/SettingsPage/index.js
@ -43,7 +43,7 @@ type State = {

 class SettingsPage extends PureComponent<Props, State> {
  state = {
-    tab: 0,
+    tab: 2,
  }

  _items = []
--- a/src/components/SettingsPage/sections/Profile.js
+++ b/src/components/SettingsPage/sections/Profile.js
@ -3,11 +3,11 @@
 import React, { PureComponent } from 'react'
 import { connect } from 'react-redux'

-// import type { Settings, T } from 'types/common'
-import type { T } from 'types/common'
+import type { Settings, T } from 'types/common'

 import { unlock } from 'reducers/application'

+import Input from 'components/base/Input'
 import IconUser from 'icons/User'

 import {
@ -19,22 +19,37 @@ import {

 type Props = {
  t: T,
-  // settings: Settings,
-  // onSaveSettings: Function,
+  settings: Settings,
+  saveSettings: Function,
  // unlock: Function,
 }

 type State = {}

+const mapStateToProps = state => ({
+  username: state.settings,
+})
+
 const mapDispatchToProps = {
  unlock,
 }

 class TabProfile extends PureComponent<Props, State> {
-  state = {}
+  state = {
+    username: this.props.settings.username,
+  }
+
+  handleChangeUsername = username => {
+    const { saveSettings } = this.props
+    this.setState({ username })
+    window.requestIdleCallback(() => {
+      saveSettings({ username: username.trim() || 'Anonymous' })
+    })
+  }

  render() {
    const { t } = this.props
+    const { username } = this.state

    return (
      <Section>
@ -45,7 +60,12 @@ class TabProfile extends PureComponent<Props, State> {
        />
        <Body>
          <Row title={t('settings:profile.username')} desc={t('settings:profile.usernameDesc')}>
-            {'-'}
+            <Input
+              small
+              placeholder={t('settings:profile.username')}
+              onChange={this.handleChangeUsername}
+              value={username}
+            />
          </Row>
          <Row title={t('settings:profile.password')} desc={t('settings:profile.passwordDesc')}>
            {'-'}
@ -65,4 +85,4 @@ class TabProfile extends PureComponent<Props, State> {
  }
 }

-export default connect(null, mapDispatchToProps)(TabProfile)
+export default connect(mapStateToProps, mapDispatchToProps)(TabProfile)
--- a/src/components/TopBar.js
+++ b/src/components/TopBar.js
@ -75,6 +75,7 @@ const DropDownItem = styled(DDItem).attrs({
 `

 const mapStateToProps = state => ({
+  username: state.settings.username,
  hasAccounts: getAccounts(state).length > 0,
  hasPassword: hasPassword(state),
 })
@ -88,6 +89,7 @@ type Props = {
  hasAccounts: boolean,
  hasPassword: boolean,
  lock: Function,
+  username: string,
 }

 type State = {
@ -145,7 +147,7 @@ class TopBar extends PureComponent<Props, State> {
  handleLock = () => this.props.lock()

  render() {
-    const { hasPassword, hasAccounts, t } = this.props
+    const { hasPassword, hasAccounts, username, t } = this.props
    const { sync } = this.state

    return (
@ -197,7 +199,7 @@ class TopBar extends PureComponent<Props, State> {
              justifyContent="center"
              offsetTop={-2}
            >
-              <Box>{'Khalil Benihoud'}</Box>
+              <Box>{username}</Box>
              <IconAngleDown size={12} />
            </DropDown>
          </Box>
--- a/src/reducers/settings.js
+++ b/src/reducers/settings.js
@ -10,6 +10,7 @@ import type { Settings } from 'types/common'
 export type SettingsState = Object

 const defaultState: SettingsState = {
+  username: 'Anonymous',
  counterValue: 'USD',
  language: 'en',
  orderAccounts: 'balance|asc',