diff options
author | 2022-07-12 17:59:43 +0100 | |
---|---|---|
committer | 2022-07-12 16:59:43 +0000 | |
commit | 6415f2746e38ebe5cb328c2af94413a4d4e5da07 (patch) | |
tree | 58cdabbcc7fe9c8ceec58780b73d2528210fdaff /src/components/auth/AuthLayout.js | |
parent | 6.0.0-nightly.98 [skip ci] (diff) | |
download | ferdium-app-6415f2746e38ebe5cb328c2af94413a4d4e5da07.tar.gz ferdium-app-6415f2746e38ebe5cb328c2af94413a4d4e5da07.tar.zst ferdium-app-6415f2746e38ebe5cb328c2af94413a4d4e5da07.zip |
Refactor the 'Welcome' screen and the 'SetupAssistant' for better UX (#472)
* Change auth styling and add back button
* Add Skip button on 'SetupAssistant'
Diffstat (limited to 'src/components/auth/AuthLayout.js')
-rw-r--r-- | src/components/auth/AuthLayout.js | 118 |
1 files changed, 0 insertions, 118 deletions
diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js deleted file mode 100644 index 41bda2f67..000000000 --- a/src/components/auth/AuthLayout.js +++ /dev/null | |||
@@ -1,118 +0,0 @@ | |||
1 | import { cloneElement, Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import { TitleBar } from 'electron-react-titlebar/renderer'; | ||
5 | |||
6 | import { injectIntl } from 'react-intl'; | ||
7 | import { mdiFlash } from '@mdi/js'; | ||
8 | import Link from '../ui/Link'; | ||
9 | import InfoBar from '../ui/InfoBar'; | ||
10 | |||
11 | import { Component as PublishDebugInfo } from '../../features/publishDebugInfo'; | ||
12 | |||
13 | import { | ||
14 | oneOrManyChildElements, | ||
15 | globalError as globalErrorPropType, | ||
16 | } from '../../prop-types'; | ||
17 | import globalMessages from '../../i18n/globalMessages'; | ||
18 | |||
19 | import { isWindows } from '../../environment'; | ||
20 | import AppUpdateInfoBar from '../AppUpdateInfoBar'; | ||
21 | import { GITHUB_FERDIUM_URL } from '../../config'; | ||
22 | import Icon from '../ui/icon'; | ||
23 | |||
24 | import { serverName } from '../../api/apiBase'; | ||
25 | |||
26 | class AuthLayout extends Component { | ||
27 | static propTypes = { | ||
28 | children: oneOrManyChildElements.isRequired, | ||
29 | error: globalErrorPropType.isRequired, | ||
30 | isOnline: PropTypes.bool.isRequired, | ||
31 | isAPIHealthy: PropTypes.bool.isRequired, | ||
32 | retryHealthCheck: PropTypes.func.isRequired, | ||
33 | isHealthCheckLoading: PropTypes.bool.isRequired, | ||
34 | isFullScreen: PropTypes.bool.isRequired, | ||
35 | installAppUpdate: PropTypes.func.isRequired, | ||
36 | appUpdateIsDownloaded: PropTypes.bool.isRequired, | ||
37 | }; | ||
38 | |||
39 | state = { | ||
40 | shouldShowAppUpdateInfoBar: true, | ||
41 | }; | ||
42 | |||
43 | render() { | ||
44 | const { | ||
45 | children, | ||
46 | error, | ||
47 | isOnline, | ||
48 | isAPIHealthy, | ||
49 | retryHealthCheck, | ||
50 | isHealthCheckLoading, | ||
51 | isFullScreen, | ||
52 | installAppUpdate, | ||
53 | appUpdateIsDownloaded, | ||
54 | } = this.props; | ||
55 | |||
56 | const { intl } = this.props; | ||
57 | |||
58 | let serverNameParse = serverName(); | ||
59 | serverNameParse = | ||
60 | serverNameParse === 'Custom' ? 'your Custom Server' : serverNameParse; | ||
61 | |||
62 | return ( | ||
63 | <> | ||
64 | {isWindows && !isFullScreen && ( | ||
65 | <TitleBar | ||
66 | menu={window['ferdium'].menu.template} | ||
67 | icon="assets/images/logo.svg" | ||
68 | /> | ||
69 | )} | ||
70 | <div className="auth"> | ||
71 | {!isOnline && ( | ||
72 | <InfoBar type="warning"> | ||
73 | <Icon icon={mdiFlash} /> | ||
74 | {intl.formatMessage(globalMessages.notConnectedToTheInternet)} | ||
75 | </InfoBar> | ||
76 | )} | ||
77 | {appUpdateIsDownloaded && this.state.shouldShowAppUpdateInfoBar && ( | ||
78 | <AppUpdateInfoBar | ||
79 | onInstallUpdate={installAppUpdate} | ||
80 | onHide={() => { | ||
81 | this.setState({ shouldShowAppUpdateInfoBar: false }); | ||
82 | }} | ||
83 | /> | ||
84 | )} | ||
85 | {isOnline && !isAPIHealthy && ( | ||
86 | <InfoBar | ||
87 | type="danger" | ||
88 | ctaLabel="Try again" | ||
89 | ctaLoading={isHealthCheckLoading} | ||
90 | sticky | ||
91 | onClick={retryHealthCheck} | ||
92 | > | ||
93 | <Icon icon={mdiFlash} /> | ||
94 | {intl.formatMessage(globalMessages.APIUnhealthy, { serverNameParse })} | ||
95 | </InfoBar> | ||
96 | )} | ||
97 | <div className="auth__layout"> | ||
98 | {/* Inject globalError into children */} | ||
99 | {cloneElement(children, { | ||
100 | error, | ||
101 | })} | ||
102 | </div> | ||
103 | {/* </div> */} | ||
104 | <Link | ||
105 | to={`${GITHUB_FERDIUM_URL}/ferdium-app`} | ||
106 | className="auth__adlk" | ||
107 | target="_blank" | ||
108 | > | ||
109 | <img src="./assets/images/adlk.svg" alt="" /> | ||
110 | </Link> | ||
111 | </div> | ||
112 | <PublishDebugInfo /> | ||
113 | </> | ||
114 | ); | ||
115 | } | ||
116 | } | ||
117 | |||
118 | export default injectIntl(observer(AuthLayout)); | ||