diff options
Diffstat (limited to 'src/components/settings/account/AccountDashboard.tsx')
-rw-r--r-- | src/components/settings/account/AccountDashboard.tsx | 225 |
1 files changed, 225 insertions, 0 deletions
diff --git a/src/components/settings/account/AccountDashboard.tsx b/src/components/settings/account/AccountDashboard.tsx new file mode 100644 index 000000000..8d6cfdfe6 --- /dev/null +++ b/src/components/settings/account/AccountDashboard.tsx | |||
@@ -0,0 +1,225 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import {defineMessages, injectIntl, WrappedComponentProps} from 'react-intl'; | ||
4 | import ReactTooltip from 'react-tooltip'; | ||
5 | import { H1, H2 } from '../../ui/headline'; | ||
6 | |||
7 | import Loader from '../../ui/Loader'; | ||
8 | import Button from '../../ui/button'; | ||
9 | import Infobox from '../../ui/infobox'; | ||
10 | import { LOCAL_SERVER, LIVE_FRANZ_API } from '../../../config'; | ||
11 | import User from "../../../models/User"; | ||
12 | |||
13 | const messages = defineMessages({ | ||
14 | headline: { | ||
15 | id: 'settings.account.headline', | ||
16 | defaultMessage: 'Account', | ||
17 | }, | ||
18 | headlineDangerZone: { | ||
19 | id: 'settings.account.headlineDangerZone', | ||
20 | defaultMessage: 'Danger Zone', | ||
21 | }, | ||
22 | accountEditButton: { | ||
23 | id: 'settings.account.account.editButton', | ||
24 | defaultMessage: 'Edit account', | ||
25 | }, | ||
26 | invoicesButton: { | ||
27 | id: 'settings.account.headlineInvoices', | ||
28 | defaultMessage: 'Invoices', | ||
29 | }, | ||
30 | userInfoRequestFailed: { | ||
31 | id: 'settings.account.userInfoRequestFailed', | ||
32 | defaultMessage: 'Could not load user information', | ||
33 | }, | ||
34 | tryReloadUserInfoRequest: { | ||
35 | id: 'settings.account.tryReloadUserInfoRequest', | ||
36 | defaultMessage: 'Try again', | ||
37 | }, | ||
38 | deleteAccount: { | ||
39 | id: 'settings.account.deleteAccount', | ||
40 | defaultMessage: 'Delete account', | ||
41 | }, | ||
42 | deleteInfo: { | ||
43 | id: 'settings.account.deleteInfo', | ||
44 | defaultMessage: | ||
45 | "If you don't need your Ferdium account any longer, you can delete your account and all related data here.", | ||
46 | }, | ||
47 | deleteEmailSent: { | ||
48 | id: 'settings.account.deleteEmailSent', | ||
49 | defaultMessage: | ||
50 | 'You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!', | ||
51 | }, | ||
52 | yourLicense: { | ||
53 | id: 'settings.account.yourLicense', | ||
54 | defaultMessage: 'Your Ferdium License:', | ||
55 | }, | ||
56 | accountUnavailable: { | ||
57 | id: 'settings.account.accountUnavailable', | ||
58 | defaultMessage: 'Account is unavailable', | ||
59 | }, | ||
60 | accountUnavailableInfo: { | ||
61 | id: 'settings.account.accountUnavailableInfo', | ||
62 | defaultMessage: | ||
63 | 'You are using Ferdium without an account. If you want to use Ferdium with an account and keep your services synchronized across installations, please select a server in the Settings tab then login.', | ||
64 | }, | ||
65 | }); | ||
66 | |||
67 | interface IProp extends WrappedComponentProps { | ||
68 | user: User; | ||
69 | isLoading: boolean; | ||
70 | userInfoRequestFailed: boolean; | ||
71 | isLoadingDeleteAccount: boolean; | ||
72 | isDeleteAccountSuccessful: boolean; | ||
73 | server: string; | ||
74 | retryUserInfoRequest: () => void; | ||
75 | deleteAccount: () => void; | ||
76 | openEditAccount: () => void; | ||
77 | openInvoices: () => void; | ||
78 | } | ||
79 | |||
80 | @observer | ||
81 | class AccountDashboard extends Component<IProp> { | ||
82 | |||
83 | render() { | ||
84 | const { | ||
85 | user, | ||
86 | isLoading, | ||
87 | userInfoRequestFailed, | ||
88 | retryUserInfoRequest, | ||
89 | deleteAccount, | ||
90 | isLoadingDeleteAccount, | ||
91 | isDeleteAccountSuccessful, | ||
92 | openEditAccount, | ||
93 | openInvoices, | ||
94 | server, | ||
95 | } = this.props; | ||
96 | const { intl } = this.props; | ||
97 | |||
98 | const isUsingWithoutAccount = server === LOCAL_SERVER; | ||
99 | const isUsingFranzServer = server === LIVE_FRANZ_API; | ||
100 | |||
101 | return ( | ||
102 | <div className="settings__main"> | ||
103 | <div className="settings__header"> | ||
104 | <span className="settings__header-item"> | ||
105 | {intl.formatMessage(messages.headline)} | ||
106 | </span> | ||
107 | </div> | ||
108 | <div className="settings__body"> | ||
109 | {isUsingWithoutAccount && ( | ||
110 | <> | ||
111 | <H1 className=".no-bottom-margin"> | ||
112 | {intl.formatMessage(messages.accountUnavailable)} | ||
113 | </H1> | ||
114 | <p | ||
115 | className="settings__message" | ||
116 | style={{ | ||
117 | borderTop: 0, | ||
118 | marginTop: 0, | ||
119 | }} | ||
120 | > | ||
121 | {intl.formatMessage(messages.accountUnavailableInfo)} | ||
122 | </p> | ||
123 | </> | ||
124 | )} | ||
125 | {!isUsingWithoutAccount && ( | ||
126 | <> | ||
127 | {isLoading && <Loader />} | ||
128 | |||
129 | {!isLoading && userInfoRequestFailed && ( | ||
130 | <Infobox | ||
131 | icon="alert" | ||
132 | type="danger" | ||
133 | ctaLabel={intl.formatMessage( | ||
134 | messages.tryReloadUserInfoRequest, | ||
135 | )} | ||
136 | ctaOnClick={retryUserInfoRequest} | ||
137 | > | ||
138 | {intl.formatMessage(messages.userInfoRequestFailed)} | ||
139 | </Infobox> | ||
140 | )} | ||
141 | |||
142 | {!userInfoRequestFailed && ( | ||
143 | <> | ||
144 | {!isLoading && ( | ||
145 | <> | ||
146 | <div className="account"> | ||
147 | <div className="account__box account__box--flex"> | ||
148 | <div className="account__avatar"> | ||
149 | <img src="./assets/images/logo.svg" alt="" /> | ||
150 | </div> | ||
151 | <div className="account__info"> | ||
152 | <H1> | ||
153 | <span className="username">{`${user.firstname} ${user.lastname}`}</span> | ||
154 | </H1> | ||
155 | <p> | ||
156 | {user.organization && `${user.organization}, `} | ||
157 | {user.email} | ||
158 | </p> | ||
159 | <div className="manage-user-links"> | ||
160 | <Button | ||
161 | label={intl.formatMessage( | ||
162 | messages.accountEditButton, | ||
163 | )} | ||
164 | className="franz-form__button--inverted" | ||
165 | onClick={openEditAccount} | ||
166 | /> | ||
167 | </div> | ||
168 | </div> | ||
169 | </div> | ||
170 | </div> | ||
171 | {user.isSubscriptionOwner && isUsingFranzServer && ( | ||
172 | <div className="account"> | ||
173 | <div className="account__box"> | ||
174 | <H2>{intl.formatMessage(messages.yourLicense)}</H2> | ||
175 | <p>Franz</p> | ||
176 | <div className="manage-user-links"> | ||
177 | <Button | ||
178 | label={intl.formatMessage( | ||
179 | messages.invoicesButton, | ||
180 | )} | ||
181 | className="franz-form__button--inverted" | ||
182 | onClick={openInvoices} | ||
183 | /> | ||
184 | </div> | ||
185 | </div> | ||
186 | </div> | ||
187 | )} | ||
188 | </> | ||
189 | )} | ||
190 | |||
191 | {isUsingFranzServer && ( | ||
192 | <div className="account franz-form"> | ||
193 | <div className="account__box"> | ||
194 | <H2> | ||
195 | {intl.formatMessage(messages.headlineDangerZone)} | ||
196 | </H2> | ||
197 | {!isDeleteAccountSuccessful && ( | ||
198 | <div className="account__subscription"> | ||
199 | <p>{intl.formatMessage(messages.deleteInfo)}</p> | ||
200 | <Button | ||
201 | label={intl.formatMessage(messages.deleteAccount)} | ||
202 | buttonType="danger" | ||
203 | onClick={() => deleteAccount()} | ||
204 | loaded={!isLoadingDeleteAccount} | ||
205 | /> | ||
206 | </div> | ||
207 | )} | ||
208 | {isDeleteAccountSuccessful && ( | ||
209 | <p>{intl.formatMessage(messages.deleteEmailSent)}</p> | ||
210 | )} | ||
211 | </div> | ||
212 | </div> | ||
213 | )} | ||
214 | </> | ||
215 | )} | ||
216 | </> | ||
217 | )} | ||
218 | </div> | ||
219 | <ReactTooltip place="right" type="dark" effect="solid" /> | ||
220 | </div> | ||
221 | ); | ||
222 | } | ||
223 | } | ||
224 | |||
225 | export default injectIntl(AccountDashboard); | ||