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