diff options
author | 2019-10-20 20:08:57 +0200 | |
---|---|---|
committer | 2019-10-20 20:08:57 +0200 | |
commit | 7e332dc4b7a5fe0c275a8d802752d7ba5dc3d4ec (patch) | |
tree | 7066e41d4163102292785aec4029ed4c2f98b596 /src/components | |
parent | Fix #139 (diff) | |
download | ferdium-app-7e332dc4b7a5fe0c275a8d802752d7ba5dc3d4ec.tar.gz ferdium-app-7e332dc4b7a5fe0c275a8d802752d7ba5dc3d4ec.tar.zst ferdium-app-7e332dc4b7a5fe0c275a8d802752d7ba5dc3d4ec.zip |
Improve switch between accounts and servers
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/settings/navigation/SettingsNavigation.js | 50 | ||||
-rw-r--r-- | src/components/ui/AppLoader/index.js | 9 |
2 files changed, 53 insertions, 6 deletions
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js index 2711bc107..49e73e569 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 | ||
@@ -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,12 +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 | } | ||
90 | |||
91 | this.props.stores.user.isLoggingOut = true; | ||
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; |
67 | const isLoggedIn = Boolean(localStorage.getItem('authToken')); | 106 | const isLoggedIn = Boolean(localStorage.getItem('authToken')); |
107 | const isUsingWithoutAccount = stores.settings.app.server === LOCAL_SERVER; | ||
68 | 108 | ||
69 | return ( | 109 | return ( |
70 | <div className="settings-navigation"> | 110 | <div className="settings-navigation"> |
@@ -136,12 +176,14 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp | |||
136 | {intl.formatMessage(messages.supportFerdi)} | 176 | {intl.formatMessage(messages.supportFerdi)} |
137 | </Link> | 177 | </Link> |
138 | <span className="settings-navigation__expander" /> | 178 | <span className="settings-navigation__expander" /> |
139 | <Link | 179 | <button |
180 | type="button" | ||
140 | to={isLoggedIn ? '/auth/logout' : '/auth/welcome'} | 181 | to={isLoggedIn ? '/auth/logout' : '/auth/welcome'} |
141 | className="settings-navigation__link" | 182 | className="settings-navigation__link" |
183 | onClick={this.handleLoginLogout.bind(this)} | ||
142 | > | 184 | > |
143 | { isLoggedIn ? intl.formatMessage(messages.logout) : 'Login'} | 185 | { isLoggedIn && !isUsingWithoutAccount ? intl.formatMessage(messages.logout) : 'Login'} |
144 | </Link> | 186 | </button> |
145 | </div> | 187 | </div> |
146 | ); | 188 | ); |
147 | } | 189 | } |
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js index 1fd247d17..a7f6f4545 100644 --- a/src/components/ui/AppLoader/index.js +++ b/src/components/ui/AppLoader/index.js | |||
@@ -22,8 +22,13 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component | |||
22 | static propTypes = { | 22 | static propTypes = { |
23 | classes: PropTypes.object.isRequired, | 23 | classes: PropTypes.object.isRequired, |
24 | theme: PropTypes.object.isRequired, | 24 | theme: PropTypes.object.isRequired, |
25 | texts: PropTypes.array, | ||
25 | }; | 26 | }; |
26 | 27 | ||
28 | static defaultProps = { | ||
29 | texts: textList, | ||
30 | } | ||
31 | |||
27 | state = { | 32 | state = { |
28 | step: 0, | 33 | step: 0, |
29 | }; | 34 | }; |
@@ -43,7 +48,7 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component | |||
43 | } | 48 | } |
44 | 49 | ||
45 | render() { | 50 | render() { |
46 | const { classes, theme } = this.props; | 51 | const { classes, theme, texts } = this.props; |
47 | const { step } = this.state; | 52 | const { step } = this.state; |
48 | 53 | ||
49 | return ( | 54 | return ( |
@@ -52,7 +57,7 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component | |||
52 | className={classes.component} | 57 | className={classes.component} |
53 | spinnerColor={theme.colorAppLoaderSpinner} | 58 | spinnerColor={theme.colorAppLoaderSpinner} |
54 | > | 59 | > |
55 | {textList.map((text, i) => ( | 60 | {texts.map((text, i) => ( |
56 | <span | 61 | <span |
57 | key={text} | 62 | key={text} |
58 | className={classnames({ | 63 | className={classnames({ |