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 @@
+import { Component } from 'react';
+import { observer } from 'mobx-react';
+import {defineMessages, injectIntl, WrappedComponentProps} from 'react-intl';
+import ReactTooltip from 'react-tooltip';
+import { H1, H2 } from '../../ui/headline';
+
+import Loader from '../../ui/Loader';
+import Button from '../../ui/button';
+import Infobox from '../../ui/infobox';
+import { LOCAL_SERVER, LIVE_FRANZ_API } from '../../../config';
+import User from "../../../models/User";
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.account.headline',
+    defaultMessage: 'Account',
+  },
+  headlineDangerZone: {
+    id: 'settings.account.headlineDangerZone',
+    defaultMessage: 'Danger Zone',
+  },
+  accountEditButton: {
+    id: 'settings.account.account.editButton',
+    defaultMessage: 'Edit account',
+  },
+  invoicesButton: {
+    id: 'settings.account.headlineInvoices',
+    defaultMessage: 'Invoices',
+  },
+  userInfoRequestFailed: {
+    id: 'settings.account.userInfoRequestFailed',
+    defaultMessage: 'Could not load user information',
+  },
+  tryReloadUserInfoRequest: {
+    id: 'settings.account.tryReloadUserInfoRequest',
+    defaultMessage: 'Try again',
+  },
+  deleteAccount: {
+    id: 'settings.account.deleteAccount',
+    defaultMessage: 'Delete account',
+  },
+  deleteInfo: {
+    id: 'settings.account.deleteInfo',
+    defaultMessage:
+      "If you don't need your Ferdium account any longer, you can delete your account and all related data here.",
+  },
+  deleteEmailSent: {
+    id: 'settings.account.deleteEmailSent',
+    defaultMessage:
+      'You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!',
+  },
+  yourLicense: {
+    id: 'settings.account.yourLicense',
+    defaultMessage: 'Your Ferdium License:',
+  },
+  accountUnavailable: {
+    id: 'settings.account.accountUnavailable',
+    defaultMessage: 'Account is unavailable',
+  },
+  accountUnavailableInfo: {
+    id: 'settings.account.accountUnavailableInfo',
+    defaultMessage:
+      '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.',
+  },
+});
+
+interface IProp extends WrappedComponentProps {
+  user: User;
+  isLoading: boolean;
+  userInfoRequestFailed: boolean;
+  isLoadingDeleteAccount: boolean;
+  isDeleteAccountSuccessful: boolean;
+  server: string;
+  retryUserInfoRequest: () => void;
+  deleteAccount: () => void;
+  openEditAccount: () => void;
+  openInvoices: () => void;
+}
+
+@observer
+class AccountDashboard extends Component<IProp> {
+
+  render() {
+    const {
+      user,
+      isLoading,
+      userInfoRequestFailed,
+      retryUserInfoRequest,
+      deleteAccount,
+      isLoadingDeleteAccount,
+      isDeleteAccountSuccessful,
+      openEditAccount,
+      openInvoices,
+      server,
+    } = this.props;
+    const { intl } = this.props;
+
+    const isUsingWithoutAccount = server === LOCAL_SERVER;
+    const isUsingFranzServer = server === LIVE_FRANZ_API;
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            {intl.formatMessage(messages.headline)}
+          </span>
+        </div>
+        <div className="settings__body">
+          {isUsingWithoutAccount && (
+            <>
+              <H1 className=".no-bottom-margin">
+                {intl.formatMessage(messages.accountUnavailable)}
+              </H1>
+              <p
+                className="settings__message"
+                style={{
+                  borderTop: 0,
+                  marginTop: 0,
+                }}
+              >
+                {intl.formatMessage(messages.accountUnavailableInfo)}
+              </p>
+            </>
+          )}
+          {!isUsingWithoutAccount && (
+            <>
+              {isLoading && <Loader />}
+
+              {!isLoading && userInfoRequestFailed && (
+                <Infobox
+                  icon="alert"
+                  type="danger"
+                  ctaLabel={intl.formatMessage(
+                    messages.tryReloadUserInfoRequest,
+                  )}
+                  ctaOnClick={retryUserInfoRequest}
+                >
+                  {intl.formatMessage(messages.userInfoRequestFailed)}
+                </Infobox>
+              )}
+
+              {!userInfoRequestFailed && (
+                <>
+                  {!isLoading && (
+                    <>
+                      <div className="account">
+                        <div className="account__box account__box--flex">
+                          <div className="account__avatar">
+                            <img src="./assets/images/logo.svg" alt="" />
+                          </div>
+                          <div className="account__info">
+                            <H1>
+                              <span className="username">{`${user.firstname} ${user.lastname}`}</span>
+                            </H1>
+                            <p>
+                              {user.organization && `${user.organization}, `}
+                              {user.email}
+                            </p>
+                            <div className="manage-user-links">
+                              <Button
+                                label={intl.formatMessage(
+                                  messages.accountEditButton,
+                                )}
+                                className="franz-form__button--inverted"
+                                onClick={openEditAccount}
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      {user.isSubscriptionOwner && isUsingFranzServer && (
+                        <div className="account">
+                          <div className="account__box">
+                            <H2>{intl.formatMessage(messages.yourLicense)}</H2>
+                            <p>Franz</p>
+                            <div className="manage-user-links">
+                              <Button
+                                label={intl.formatMessage(
+                                  messages.invoicesButton,
+                                )}
+                                className="franz-form__button--inverted"
+                                onClick={openInvoices}
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </>
+                  )}
+
+                  {isUsingFranzServer && (
+                    <div className="account franz-form">
+                      <div className="account__box">
+                        <H2>
+                          {intl.formatMessage(messages.headlineDangerZone)}
+                        </H2>
+                        {!isDeleteAccountSuccessful && (
+                          <div className="account__subscription">
+                            <p>{intl.formatMessage(messages.deleteInfo)}</p>
+                            <Button
+                              label={intl.formatMessage(messages.deleteAccount)}
+                              buttonType="danger"
+                              onClick={() => deleteAccount()}
+                              loaded={!isLoadingDeleteAccount}
+                            />
+                          </div>
+                        )}
+                        {isDeleteAccountSuccessful && (
+                          <p>{intl.formatMessage(messages.deleteEmailSent)}</p>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </>
+              )}
+            </>
+          )}
+        </div>
+        <ReactTooltip place="right" type="dark" effect="solid" />
+      </div>
+    );
+  }
+}
+
+export default injectIntl(AccountDashboard);