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