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.jsx | |
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.jsx')
-rw-r--r-- | src/components/auth/AuthLayout.jsx | 124 |
1 files changed, 124 insertions, 0 deletions
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 @@ | |||
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 | constructor() { | ||
40 | super(); | ||
41 | |||
42 | this.state = { | ||
43 | shouldShowAppUpdateInfoBar: true, | ||
44 | }; | ||
45 | } | ||
46 | |||
47 | render() { | ||
48 | const { | ||
49 | children, | ||
50 | error, | ||
51 | isOnline, | ||
52 | isAPIHealthy, | ||
53 | retryHealthCheck, | ||
54 | isHealthCheckLoading, | ||
55 | isFullScreen, | ||
56 | installAppUpdate, | ||
57 | appUpdateIsDownloaded, | ||
58 | } = this.props; | ||
59 | |||
60 | const { intl } = this.props; | ||
61 | |||
62 | let serverNameParse = serverName(); | ||
63 | serverNameParse = | ||
64 | serverNameParse === 'Custom' ? 'your Custom Server' : serverNameParse; | ||
65 | |||
66 | return ( | ||
67 | <> | ||
68 | {isWindows && !isFullScreen && ( | ||
69 | <TitleBar | ||
70 | menu={window['ferdium'].menu.template} | ||
71 | icon="assets/images/logo.svg" | ||
72 | /> | ||
73 | )} | ||
74 | <div className="auth"> | ||
75 | {!isOnline && ( | ||
76 | <InfoBar type="warning"> | ||
77 | <Icon icon={mdiFlash} /> | ||
78 | {intl.formatMessage(globalMessages.notConnectedToTheInternet)} | ||
79 | </InfoBar> | ||
80 | )} | ||
81 | {appUpdateIsDownloaded && this.state.shouldShowAppUpdateInfoBar && ( | ||
82 | <AppUpdateInfoBar | ||
83 | onInstallUpdate={installAppUpdate} | ||
84 | onHide={() => { | ||
85 | this.setState({ shouldShowAppUpdateInfoBar: false }); | ||
86 | }} | ||
87 | /> | ||
88 | )} | ||
89 | {isOnline && !isAPIHealthy && ( | ||
90 | <InfoBar | ||
91 | type="danger" | ||
92 | ctaLabel="Try again" | ||
93 | ctaLoading={isHealthCheckLoading} | ||
94 | sticky | ||
95 | onClick={retryHealthCheck} | ||
96 | > | ||
97 | <Icon icon={mdiFlash} /> | ||
98 | {intl.formatMessage(globalMessages.APIUnhealthy, { | ||
99 | serverNameParse, | ||
100 | })} | ||
101 | </InfoBar> | ||
102 | )} | ||
103 | <div className="auth__layout"> | ||
104 | {/* Inject globalError into children */} | ||
105 | {cloneElement(children, { | ||
106 | error, | ||
107 | })} | ||
108 | </div> | ||
109 | {/* </div> */} | ||
110 | <Link | ||
111 | to={`${GITHUB_FERDIUM_URL}/ferdium-app`} | ||
112 | className="auth__adlk" | ||
113 | target="_blank" | ||
114 | > | ||
115 | <img src="./assets/images/adlk.svg" alt="" /> | ||
116 | </Link> | ||
117 | </div> | ||
118 | <PublishDebugInfo /> | ||
119 | </> | ||
120 | ); | ||
121 | } | ||
122 | } | ||
123 | |||
124 | export default injectIntl(observer(AuthLayout)); | ||