diff options
Diffstat (limited to 'src/components/auth/AuthLayout.js')
-rw-r--r-- | src/components/auth/AuthLayout.js | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js new file mode 100644 index 000000000..2741b8a15 --- /dev/null +++ b/src/components/auth/AuthLayout.js | |||
@@ -0,0 +1,88 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import { RouteTransition } from 'react-router-transition'; | ||
5 | import { intlShape } from 'react-intl'; | ||
6 | |||
7 | import Link from '../ui/Link'; | ||
8 | import InfoBar from '../ui/InfoBar'; | ||
9 | |||
10 | import { oneOrManyChildElements, globalError as globalErrorPropType } from '../../prop-types'; | ||
11 | import globalMessages from '../../i18n/globalMessages'; | ||
12 | |||
13 | @observer | ||
14 | export default class AuthLayout extends Component { | ||
15 | static propTypes = { | ||
16 | children: oneOrManyChildElements.isRequired, | ||
17 | pathname: PropTypes.string.isRequired, | ||
18 | error: globalErrorPropType.isRequired, | ||
19 | isOnline: PropTypes.bool.isRequired, | ||
20 | isAPIHealthy: PropTypes.bool.isRequired, | ||
21 | retryHealthCheck: PropTypes.func.isRequired, | ||
22 | isHealthCheckLoading: PropTypes.bool.isRequired, | ||
23 | }; | ||
24 | |||
25 | static contextTypes = { | ||
26 | intl: intlShape, | ||
27 | }; | ||
28 | |||
29 | render() { | ||
30 | const { | ||
31 | children, | ||
32 | pathname, | ||
33 | error, | ||
34 | isOnline, | ||
35 | isAPIHealthy, | ||
36 | retryHealthCheck, | ||
37 | isHealthCheckLoading, | ||
38 | } = this.props; | ||
39 | const { intl } = this.context; | ||
40 | |||
41 | return ( | ||
42 | <div className="auth"> | ||
43 | {!isOnline && ( | ||
44 | <InfoBar | ||
45 | type="warning" | ||
46 | > | ||
47 | <span className="mdi mdi-flash" /> | ||
48 | {intl.formatMessage(globalMessages.notConnectedToTheInternet)} | ||
49 | </InfoBar> | ||
50 | )} | ||
51 | {isOnline && !isAPIHealthy && ( | ||
52 | <InfoBar | ||
53 | type="danger" | ||
54 | ctaLabel="Try again" | ||
55 | ctaLoading={isHealthCheckLoading} | ||
56 | sticky | ||
57 | onClick={retryHealthCheck} | ||
58 | > | ||
59 | <span className="mdi mdi-flash" /> | ||
60 | {intl.formatMessage(globalMessages.APIUnhealthy)} | ||
61 | </InfoBar> | ||
62 | )} | ||
63 | <div className="auth__layout"> | ||
64 | <RouteTransition | ||
65 | pathname={pathname} | ||
66 | atEnter={{ opacity: 0 }} | ||
67 | atLeave={{ opacity: 0 }} | ||
68 | atActive={{ opacity: 1 }} | ||
69 | mapStyles={styles => ({ | ||
70 | transform: `translateX(${styles.translateX}%)`, | ||
71 | opacity: styles.opacity, | ||
72 | })} | ||
73 | component="span" | ||
74 | > | ||
75 | {/* Inject globalError into children */} | ||
76 | {React.cloneElement(children, { | ||
77 | error, | ||
78 | })} | ||
79 | </RouteTransition> | ||
80 | </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> | ||
86 | ); | ||
87 | } | ||
88 | } | ||