diff options
Diffstat (limited to 'src/components/settings/navigation/SettingsNavigation.js')
-rw-r--r-- | src/components/settings/navigation/SettingsNavigation.js | 63 |
1 files changed, 53 insertions, 10 deletions
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js index 4696b82eb..192cfde7a 100644 --- a/src/components/settings/navigation/SettingsNavigation.js +++ b/src/components/settings/navigation/SettingsNavigation.js | |||
@@ -3,10 +3,13 @@ import PropTypes from 'prop-types'; | |||
3 | import { defineMessages, intlShape } from 'react-intl'; | 3 | import { defineMessages, intlShape } from 'react-intl'; |
4 | import { inject, observer } from 'mobx-react'; | 4 | import { inject, observer } from 'mobx-react'; |
5 | import { ProBadge } from '@meetfranz/ui'; | 5 | import { ProBadge } from '@meetfranz/ui'; |
6 | import { RouterStore } from 'mobx-react-router'; | ||
6 | 7 | ||
8 | import { LOCAL_SERVER, LIVE_API } from '../../../config'; | ||
7 | import Link from '../../ui/Link'; | 9 | import Link from '../../ui/Link'; |
8 | import { workspaceStore } from '../../../features/workspaces'; | 10 | import { workspaceStore } from '../../../features/workspaces'; |
9 | import UIStore from '../../../stores/UIStore'; | 11 | import UIStore from '../../../stores/UIStore'; |
12 | import SettingsStore from '../../../stores/SettingsStore'; | ||
10 | import UserStore from '../../../stores/UserStore'; | 13 | import UserStore from '../../../stores/UserStore'; |
11 | import { serviceLimitStore } from '../../../features/serviceLimit'; | 14 | import { serviceLimitStore } from '../../../features/serviceLimit'; |
12 | 15 | ||
@@ -35,9 +38,9 @@ const messages = defineMessages({ | |||
35 | id: 'settings.navigation.settings', | 38 | id: 'settings.navigation.settings', |
36 | defaultMessage: '!!!Settings', | 39 | defaultMessage: '!!!Settings', |
37 | }, | 40 | }, |
38 | inviteFriends: { | 41 | supportFerdi: { |
39 | id: 'settings.navigation.inviteFriends', | 42 | id: 'settings.navigation.supportFerdi', |
40 | defaultMessage: '!!!Invite Friends', | 43 | defaultMessage: '!!!Support Ferdi', |
41 | }, | 44 | }, |
42 | logout: { | 45 | logout: { |
43 | id: 'settings.navigation.logout', | 46 | id: 'settings.navigation.logout', |
@@ -45,11 +48,18 @@ const messages = defineMessages({ | |||
45 | }, | 48 | }, |
46 | }); | 49 | }); |
47 | 50 | ||
48 | export default @inject('stores') @observer class SettingsNavigation extends Component { | 51 | export default @inject('stores', 'actions') @observer class SettingsNavigation extends Component { |
49 | static propTypes = { | 52 | static propTypes = { |
50 | stores: PropTypes.shape({ | 53 | stores: PropTypes.shape({ |
51 | ui: PropTypes.instanceOf(UIStore).isRequired, | 54 | ui: PropTypes.instanceOf(UIStore).isRequired, |
52 | user: PropTypes.instanceOf(UserStore).isRequired, | 55 | user: PropTypes.instanceOf(UserStore).isRequired, |
56 | settings: PropTypes.instanceOf(SettingsStore).isRequired, | ||
57 | router: PropTypes.instanceOf(RouterStore).isRequired, | ||
58 | }).isRequired, | ||
59 | actions: PropTypes.shape({ | ||
60 | settings: PropTypes.shape({ | ||
61 | update: PropTypes.func.isRequired, | ||
62 | }).isRequired, | ||
53 | }).isRequired, | 63 | }).isRequired, |
54 | serviceCount: PropTypes.number.isRequired, | 64 | serviceCount: PropTypes.number.isRequired, |
55 | workspaceCount: PropTypes.number.isRequired, | 65 | workspaceCount: PropTypes.number.isRequired, |
@@ -59,11 +69,42 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp | |||
59 | intl: intlShape, | 69 | intl: intlShape, |
60 | }; | 70 | }; |
61 | 71 | ||
72 | handleLoginLogout() { | ||
73 | const isLoggedIn = Boolean(localStorage.getItem('authToken')); | ||
74 | const isUsingWithoutAccount = this.props.stores.settings.app.server === LOCAL_SERVER; | ||
75 | |||
76 | if (isLoggedIn) { | ||
77 | // Remove current auth token | ||
78 | localStorage.removeItem('authToken'); | ||
79 | |||
80 | if (isUsingWithoutAccount) { | ||
81 | // Reset server back to Ferdi API | ||
82 | this.props.actions.settings.update({ | ||
83 | type: 'app', | ||
84 | data: { | ||
85 | server: LIVE_API, | ||
86 | }, | ||
87 | }); | ||
88 | } | ||
89 | this.props.stores.user.isLoggingOut = true; | ||
90 | } | ||
91 | |||
92 | this.props.stores.router.push(isLoggedIn ? '/auth/logout' : '/auth/welcome'); | ||
93 | |||
94 | if (isLoggedIn) { | ||
95 | // Reload Ferdi, otherwise many settings won't sync correctly with the server | ||
96 | // after logging into another account | ||
97 | window.location.reload(); | ||
98 | } | ||
99 | } | ||
100 | |||
62 | render() { | 101 | render() { |
63 | const { serviceCount, workspaceCount, stores } = this.props; | 102 | const { serviceCount, workspaceCount, stores } = this.props; |
64 | const { isDarkThemeActive } = stores.ui; | 103 | const { isDarkThemeActive } = stores.ui; |
65 | const { router, user } = stores; | 104 | const { router, user } = stores; |
66 | const { intl } = this.context; | 105 | const { intl } = this.context; |
106 | const isLoggedIn = Boolean(localStorage.getItem('authToken')); | ||
107 | const isUsingWithoutAccount = stores.settings.app.server === LOCAL_SERVER; | ||
67 | 108 | ||
68 | return ( | 109 | return ( |
69 | <div className="settings-navigation"> | 110 | <div className="settings-navigation"> |
@@ -128,19 +169,21 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp | |||
128 | {intl.formatMessage(messages.settings)} | 169 | {intl.formatMessage(messages.settings)} |
129 | </Link> | 170 | </Link> |
130 | <Link | 171 | <Link |
131 | to="/settings/invite" | 172 | to="/settings/support" |
132 | className="settings-navigation__link" | 173 | className="settings-navigation__link" |
133 | activeClassName="is-active" | 174 | activeClassName="is-active" |
134 | > | 175 | > |
135 | {intl.formatMessage(messages.inviteFriends)} | 176 | {intl.formatMessage(messages.supportFerdi)} |
136 | </Link> | 177 | </Link> |
137 | <span className="settings-navigation__expander" /> | 178 | <span className="settings-navigation__expander" /> |
138 | <Link | 179 | <button |
139 | to="/auth/logout" | 180 | type="button" |
181 | to={isLoggedIn ? '/auth/logout' : '/auth/welcome'} | ||
140 | className="settings-navigation__link" | 182 | className="settings-navigation__link" |
183 | onClick={this.handleLoginLogout.bind(this)} | ||
141 | > | 184 | > |
142 | {intl.formatMessage(messages.logout)} | 185 | { isLoggedIn && !isUsingWithoutAccount ? intl.formatMessage(messages.logout) : 'Login'} |
143 | </Link> | 186 | </button> |
144 | </div> | 187 | </div> |
145 | ); | 188 | ); |
146 | } | 189 | } |