diff options
Diffstat (limited to 'src/components/auth/AuthLayout.js')
-rw-r--r-- | src/components/auth/AuthLayout.js | 94 |
1 files changed, 52 insertions, 42 deletions
diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js index 4c991797c..4fb0e6a59 100644 --- a/src/components/auth/AuthLayout.js +++ b/src/components/auth/AuthLayout.js | |||
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; | |||
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import { RouteTransition } from 'react-router-transition'; | 4 | import { RouteTransition } from 'react-router-transition'; |
5 | import { intlShape } from 'react-intl'; | 5 | import { intlShape } from 'react-intl'; |
6 | import { TitleBar } from 'electron-react-titlebar'; | ||
6 | 7 | ||
7 | import Link from '../ui/Link'; | 8 | import Link from '../ui/Link'; |
8 | import InfoBar from '../ui/InfoBar'; | 9 | import InfoBar from '../ui/InfoBar'; |
@@ -10,6 +11,8 @@ import InfoBar from '../ui/InfoBar'; | |||
10 | import { oneOrManyChildElements, globalError as globalErrorPropType } from '../../prop-types'; | 11 | import { oneOrManyChildElements, globalError as globalErrorPropType } from '../../prop-types'; |
11 | import globalMessages from '../../i18n/globalMessages'; | 12 | import globalMessages from '../../i18n/globalMessages'; |
12 | 13 | ||
14 | import { isWindows } from '../../environment'; | ||
15 | |||
13 | export default @observer class AuthLayout extends Component { | 16 | export default @observer class AuthLayout extends Component { |
14 | static propTypes = { | 17 | static propTypes = { |
15 | children: oneOrManyChildElements.isRequired, | 18 | children: oneOrManyChildElements.isRequired, |
@@ -19,6 +22,8 @@ export default @observer class AuthLayout extends Component { | |||
19 | isAPIHealthy: PropTypes.bool.isRequired, | 22 | isAPIHealthy: PropTypes.bool.isRequired, |
20 | retryHealthCheck: PropTypes.func.isRequired, | 23 | retryHealthCheck: PropTypes.func.isRequired, |
21 | isHealthCheckLoading: PropTypes.bool.isRequired, | 24 | isHealthCheckLoading: PropTypes.bool.isRequired, |
25 | isFullScreen: PropTypes.bool.isRequired, | ||
26 | darkMode: PropTypes.bool.isRequired, | ||
22 | }; | 27 | }; |
23 | 28 | ||
24 | static contextTypes = { | 29 | static contextTypes = { |
@@ -34,53 +39,58 @@ export default @observer class AuthLayout extends Component { | |||
34 | isAPIHealthy, | 39 | isAPIHealthy, |
35 | retryHealthCheck, | 40 | retryHealthCheck, |
36 | isHealthCheckLoading, | 41 | isHealthCheckLoading, |
42 | isFullScreen, | ||
43 | darkMode, | ||
37 | } = this.props; | 44 | } = this.props; |
38 | const { intl } = this.context; | 45 | const { intl } = this.context; |
39 | 46 | ||
40 | return ( | 47 | return ( |
41 | <div className="auth"> | 48 | <div className={darkMode ? 'theme__dark' : ''}> |
42 | {!isOnline && ( | 49 | {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon={'assets/images/logo.svg'} />} |
43 | <InfoBar | 50 | <div className={'auth'}> |
44 | type="warning" | 51 | {!isOnline && ( |
45 | > | 52 | <InfoBar |
46 | <span className="mdi mdi-flash" /> | 53 | type="warning" |
47 | {intl.formatMessage(globalMessages.notConnectedToTheInternet)} | 54 | > |
48 | </InfoBar> | 55 | <span className="mdi mdi-flash" /> |
49 | )} | 56 | {intl.formatMessage(globalMessages.notConnectedToTheInternet)} |
50 | {isOnline && !isAPIHealthy && ( | 57 | </InfoBar> |
51 | <InfoBar | 58 | )} |
52 | type="danger" | 59 | {isOnline && !isAPIHealthy && ( |
53 | ctaLabel="Try again" | 60 | <InfoBar |
54 | ctaLoading={isHealthCheckLoading} | 61 | type="danger" |
55 | sticky | 62 | ctaLabel="Try again" |
56 | onClick={retryHealthCheck} | 63 | ctaLoading={isHealthCheckLoading} |
57 | > | 64 | sticky |
58 | <span className="mdi mdi-flash" /> | 65 | onClick={retryHealthCheck} |
59 | {intl.formatMessage(globalMessages.APIUnhealthy)} | 66 | > |
60 | </InfoBar> | 67 | <span className="mdi mdi-flash" /> |
61 | )} | 68 | {intl.formatMessage(globalMessages.APIUnhealthy)} |
62 | <div className="auth__layout"> | 69 | </InfoBar> |
63 | <RouteTransition | 70 | )} |
64 | pathname={pathname} | 71 | <div className="auth__layout"> |
65 | atEnter={{ opacity: 0 }} | 72 | <RouteTransition |
66 | atLeave={{ opacity: 0 }} | 73 | pathname={pathname} |
67 | atActive={{ opacity: 1 }} | 74 | atEnter={{ opacity: 0 }} |
68 | mapStyles={styles => ({ | 75 | atLeave={{ opacity: 0 }} |
69 | transform: `translateX(${styles.translateX}%)`, | 76 | atActive={{ opacity: 1 }} |
70 | opacity: styles.opacity, | 77 | mapStyles={styles => ({ |
71 | })} | 78 | transform: `translateX(${styles.translateX}%)`, |
72 | component="span" | 79 | opacity: styles.opacity, |
73 | > | 80 | })} |
74 | {/* Inject globalError into children */} | 81 | component="span" |
75 | {React.cloneElement(children, { | 82 | > |
76 | error, | 83 | {/* Inject globalError into children */} |
77 | })} | 84 | {React.cloneElement(children, { |
78 | </RouteTransition> | 85 | error, |
86 | })} | ||
87 | </RouteTransition> | ||
88 | </div> | ||
89 | {/* </div> */} | ||
90 | <Link to="https://adlk.io" className="auth__adlk" target="_blank"> | ||
91 | <img src="./assets/images/adlk.svg" alt="" /> | ||
92 | </Link> | ||
79 | </div> | 93 | </div> |
80 | {/* </div> */} | ||
81 | <Link to="https://adlk.io" className="auth__adlk" target="_blank"> | ||
82 | <img src="./assets/images/adlk.svg" alt="" /> | ||
83 | </Link> | ||
84 | </div> | 94 | </div> |
85 | ); | 95 | ); |
86 | } | 96 | } |