diff options
Diffstat (limited to 'src/components/settings/navigation/SettingsNavigation.jsx')
-rw-r--r-- | src/components/settings/navigation/SettingsNavigation.jsx | 193 |
1 files changed, 193 insertions, 0 deletions
diff --git a/src/components/settings/navigation/SettingsNavigation.jsx b/src/components/settings/navigation/SettingsNavigation.jsx new file mode 100644 index 000000000..bbbe8d888 --- /dev/null +++ b/src/components/settings/navigation/SettingsNavigation.jsx | |||
@@ -0,0 +1,193 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { defineMessages, injectIntl } from 'react-intl'; | ||
4 | import { inject, observer } from 'mobx-react'; | ||
5 | import { RouterStore } from '@superwf/mobx-react-router'; | ||
6 | |||
7 | import { NavLink } from 'react-router-dom'; | ||
8 | import { LOCAL_SERVER, LIVE_FERDIUM_API, LIVE_FRANZ_API } from '../../../config'; | ||
9 | import UIStore from '../../../stores/UIStore'; | ||
10 | import SettingsStore from '../../../stores/SettingsStore'; | ||
11 | import UserStore from '../../../stores/UserStore'; | ||
12 | import globalMessages from '../../../i18n/globalMessages'; | ||
13 | |||
14 | const messages = defineMessages({ | ||
15 | availableServices: { | ||
16 | id: 'settings.navigation.availableServices', | ||
17 | defaultMessage: 'Available services', | ||
18 | }, | ||
19 | yourServices: { | ||
20 | id: 'settings.navigation.yourServices', | ||
21 | defaultMessage: 'Your services', | ||
22 | }, | ||
23 | yourWorkspaces: { | ||
24 | id: 'settings.navigation.yourWorkspaces', | ||
25 | defaultMessage: 'Your workspaces', | ||
26 | }, | ||
27 | account: { | ||
28 | id: 'settings.navigation.account', | ||
29 | defaultMessage: 'Account', | ||
30 | }, | ||
31 | team: { | ||
32 | id: 'settings.navigation.team', | ||
33 | defaultMessage: 'Manage Team', | ||
34 | }, | ||
35 | supportFerdium: { | ||
36 | id: 'settings.navigation.supportFerdium', | ||
37 | defaultMessage: 'About Ferdium', | ||
38 | }, | ||
39 | logout: { | ||
40 | id: 'settings.navigation.logout', | ||
41 | defaultMessage: 'Logout', | ||
42 | }, | ||
43 | }); | ||
44 | |||
45 | class SettingsNavigation extends Component { | ||
46 | static propTypes = { | ||
47 | stores: PropTypes.shape({ | ||
48 | ui: PropTypes.instanceOf(UIStore).isRequired, | ||
49 | user: PropTypes.instanceOf(UserStore).isRequired, | ||
50 | settings: PropTypes.instanceOf(SettingsStore).isRequired, | ||
51 | router: PropTypes.instanceOf(RouterStore).isRequired, | ||
52 | }).isRequired, | ||
53 | actions: PropTypes.shape({ | ||
54 | settings: PropTypes.instanceOf(SettingsStore).isRequired, | ||
55 | }).isRequired, | ||
56 | serviceCount: PropTypes.number.isRequired, | ||
57 | workspaceCount: PropTypes.number.isRequired, | ||
58 | }; | ||
59 | |||
60 | handleLogout() { | ||
61 | const isUsingWithoutAccount = | ||
62 | this.props.stores.settings.app.server === LOCAL_SERVER; | ||
63 | |||
64 | // Remove current auth token | ||
65 | localStorage.removeItem('authToken'); | ||
66 | |||
67 | if (isUsingWithoutAccount) { | ||
68 | // Reset server back to Ferdium API | ||
69 | this.props.actions.settings.update({ | ||
70 | type: 'app', | ||
71 | data: { | ||
72 | server: LIVE_FERDIUM_API, | ||
73 | }, | ||
74 | }); | ||
75 | } | ||
76 | this.props.stores.user.isLoggingOut = true; | ||
77 | |||
78 | this.props.stores.router.push('/auth/welcome'); | ||
79 | |||
80 | // Reload Ferdium, otherwise many settings won't sync correctly with the server | ||
81 | // after logging into another account | ||
82 | window.location.reload(); | ||
83 | } | ||
84 | |||
85 | render() { | ||
86 | const { serviceCount, workspaceCount, stores } = this.props; | ||
87 | const { intl } = this.props; | ||
88 | const isUsingWithoutAccount = stores.settings.app.server === LOCAL_SERVER; | ||
89 | const isUsingFranzServer = stores.settings.app.server === LIVE_FRANZ_API; | ||
90 | |||
91 | return ( | ||
92 | <div className="settings-navigation"> | ||
93 | <NavLink | ||
94 | to="/settings/recipes" | ||
95 | className={({ isActive }) => | ||
96 | isActive | ||
97 | ? 'settings-navigation__link is-active' | ||
98 | : 'settings-navigation__link' | ||
99 | } | ||
100 | > | ||
101 | {intl.formatMessage(messages.availableServices)} | ||
102 | </NavLink> | ||
103 | <NavLink | ||
104 | to="/settings/services" | ||
105 | className={({ isActive }) => | ||
106 | isActive | ||
107 | ? 'settings-navigation__link is-active' | ||
108 | : 'settings-navigation__link' | ||
109 | } | ||
110 | > | ||
111 | {intl.formatMessage(messages.yourServices)}{' '} | ||
112 | <span className="badge">{serviceCount}</span> | ||
113 | </NavLink> | ||
114 | <NavLink | ||
115 | to="/settings/workspaces" | ||
116 | className={({ isActive }) => | ||
117 | isActive | ||
118 | ? 'settings-navigation__link is-active' | ||
119 | : 'settings-navigation__link' | ||
120 | } | ||
121 | > | ||
122 | {intl.formatMessage(messages.yourWorkspaces)}{' '} | ||
123 | <span className="badge">{workspaceCount}</span> | ||
124 | </NavLink> | ||
125 | {!isUsingWithoutAccount && ( | ||
126 | <NavLink | ||
127 | to="/settings/user" | ||
128 | className={({ isActive }) => | ||
129 | isActive | ||
130 | ? 'settings-navigation__link is-active' | ||
131 | : 'settings-navigation__link' | ||
132 | } | ||
133 | > | ||
134 | {intl.formatMessage(messages.account)} | ||
135 | </NavLink> | ||
136 | )} | ||
137 | {isUsingFranzServer && ( | ||
138 | <NavLink | ||
139 | to="/settings/team" | ||
140 | className={({ isActive }) => | ||
141 | isActive | ||
142 | ? 'settings-navigation__link is-active' | ||
143 | : 'settings-navigation__link' | ||
144 | } | ||
145 | > | ||
146 | {intl.formatMessage(messages.team)} | ||
147 | </NavLink> | ||
148 | )} | ||
149 | <NavLink | ||
150 | to="/settings/app" | ||
151 | className={({ isActive }) => | ||
152 | isActive | ||
153 | ? 'settings-navigation__link is-active' | ||
154 | : 'settings-navigation__link' | ||
155 | } | ||
156 | > | ||
157 | {intl.formatMessage(globalMessages.settings)} | ||
158 | {stores.settings.app.automaticUpdates && | ||
159 | (stores.ui.showServicesUpdatedInfoBar || | ||
160 | stores.app.updateStatus === | ||
161 | stores.app.updateStatusTypes.AVAILABLE || | ||
162 | stores.app.updateStatus === | ||
163 | stores.app.updateStatusTypes.DOWNLOADED) && ( | ||
164 | <span className="update-available">•</span> | ||
165 | )} | ||
166 | </NavLink> | ||
167 | <NavLink | ||
168 | to="/settings/support" | ||
169 | className={({ isActive }) => | ||
170 | isActive | ||
171 | ? 'settings-navigation__link is-active' | ||
172 | : 'settings-navigation__link' | ||
173 | } | ||
174 | > | ||
175 | {intl.formatMessage(messages.supportFerdium)} | ||
176 | </NavLink> | ||
177 | <span className="settings-navigation__expander" /> | ||
178 | <button | ||
179 | type="button" | ||
180 | to="/auth/logout" | ||
181 | className="settings-navigation__link" | ||
182 | onClick={this.handleLogout.bind(this)} | ||
183 | > | ||
184 | {!isUsingWithoutAccount | ||
185 | ? intl.formatMessage(messages.logout) | ||
186 | : 'Exit session'} | ||
187 | </button> | ||
188 | </div> | ||
189 | ); | ||
190 | } | ||
191 | } | ||
192 | |||
193 | export default injectIntl(inject('stores', 'actions')(observer(SettingsNavigation))); | ||