From 6415f2746e38ebe5cb328c2af94413a4d4e5da07 Mon Sep 17 00:00:00 2001
From: André Oliveira <37463445+SpecialAro@users.noreply.github.com>
Date: Tue, 12 Jul 2022 17:59:43 +0100
Subject: Refactor the 'Welcome' screen and the 'SetupAssistant' for better UX
 (#472)

* Change auth styling and add back button
* Add Skip button on 'SetupAssistant'
---
 src/components/auth/AuthLayout.jsx | 124 +++++++++++++++++++++++++++++++++++++
 1 file changed, 124 insertions(+)
 create mode 100644 src/components/auth/AuthLayout.jsx

(limited to 'src/components/auth/AuthLayout.jsx')

diff --git a/src/components/auth/AuthLayout.jsx b/src/components/auth/AuthLayout.jsx
new file mode 100644
index 000000000..8a88cedb1
--- /dev/null
+++ b/src/components/auth/AuthLayout.jsx
@@ -0,0 +1,124 @@
+import { cloneElement, Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { TitleBar } from 'electron-react-titlebar/renderer';
+
+import { injectIntl } from 'react-intl';
+import { mdiFlash } from '@mdi/js';
+import Link from '../ui/Link';
+import InfoBar from '../ui/InfoBar';
+
+import { Component as PublishDebugInfo } from '../../features/publishDebugInfo';
+
+import {
+  oneOrManyChildElements,
+  globalError as globalErrorPropType,
+} from '../../prop-types';
+import globalMessages from '../../i18n/globalMessages';
+
+import { isWindows } from '../../environment';
+import AppUpdateInfoBar from '../AppUpdateInfoBar';
+import { GITHUB_FERDIUM_URL } from '../../config';
+import Icon from '../ui/icon';
+
+import { serverName } from '../../api/apiBase';
+
+class AuthLayout extends Component {
+  static propTypes = {
+    children: oneOrManyChildElements.isRequired,
+    error: globalErrorPropType.isRequired,
+    isOnline: PropTypes.bool.isRequired,
+    isAPIHealthy: PropTypes.bool.isRequired,
+    retryHealthCheck: PropTypes.func.isRequired,
+    isHealthCheckLoading: PropTypes.bool.isRequired,
+    isFullScreen: PropTypes.bool.isRequired,
+    installAppUpdate: PropTypes.func.isRequired,
+    appUpdateIsDownloaded: PropTypes.bool.isRequired,
+  };
+
+  constructor() {
+    super();
+
+    this.state = {
+      shouldShowAppUpdateInfoBar: true,
+    };
+  }
+
+  render() {
+    const {
+      children,
+      error,
+      isOnline,
+      isAPIHealthy,
+      retryHealthCheck,
+      isHealthCheckLoading,
+      isFullScreen,
+      installAppUpdate,
+      appUpdateIsDownloaded,
+    } = this.props;
+
+    const { intl } = this.props;
+
+    let serverNameParse = serverName();
+    serverNameParse =
+      serverNameParse === 'Custom' ? 'your Custom Server' : serverNameParse;
+
+    return (
+      <>
+        {isWindows && !isFullScreen && (
+          <TitleBar
+            menu={window['ferdium'].menu.template}
+            icon="assets/images/logo.svg"
+          />
+        )}
+        <div className="auth">
+          {!isOnline && (
+            <InfoBar type="warning">
+              <Icon icon={mdiFlash} />
+              {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
+            </InfoBar>
+          )}
+          {appUpdateIsDownloaded && this.state.shouldShowAppUpdateInfoBar && (
+            <AppUpdateInfoBar
+              onInstallUpdate={installAppUpdate}
+              onHide={() => {
+                this.setState({ shouldShowAppUpdateInfoBar: false });
+              }}
+            />
+          )}
+          {isOnline && !isAPIHealthy && (
+            <InfoBar
+              type="danger"
+              ctaLabel="Try again"
+              ctaLoading={isHealthCheckLoading}
+              sticky
+              onClick={retryHealthCheck}
+            >
+              <Icon icon={mdiFlash} />
+              {intl.formatMessage(globalMessages.APIUnhealthy, {
+                serverNameParse,
+              })}
+            </InfoBar>
+          )}
+          <div className="auth__layout">
+            {/* Inject globalError into children  */}
+            {cloneElement(children, {
+              error,
+            })}
+          </div>
+          {/* </div> */}
+          <Link
+            to={`${GITHUB_FERDIUM_URL}/ferdium-app`}
+            className="auth__adlk"
+            target="_blank"
+          >
+            <img src="./assets/images/adlk.svg" alt="" />
+          </Link>
+        </div>
+        <PublishDebugInfo />
+      </>
+    );
+  }
+}
+
+export default injectIntl(observer(AuthLayout));
-- 
cgit v1.2.3-70-g09d2