diff options
author | 2017-10-24 16:15:59 +0200 | |
---|---|---|
committer | 2017-10-24 16:15:59 +0200 | |
commit | 6e1447cb1e58912cd5a57eb45364e482808101a5 (patch) | |
tree | 54591b90b18d97bede9f8d2ec07aae29402a90c3 | |
parent | Merge pull request #94 from meetfranz/feature/recipe-manager (diff) | |
parent | Add API notice to users who run the app in dev mode (diff) | |
download | ferdium-app-6e1447cb1e58912cd5a57eb45364e482808101a5.tar.gz ferdium-app-6e1447cb1e58912cd5a57eb45364e482808101a5.tar.zst ferdium-app-6e1447cb1e58912cd5a57eb45364e482808101a5.zip |
Merge pull request #98 from meetfranz/feature/dev-mode-notice
Add dev mode notice to login and signup
-rw-r--r-- | src/components/auth/Login.js | 8 | ||||
-rw-r--r-- | src/components/auth/Signup.js | 7 | ||||
-rw-r--r-- | src/styles/infobox.scss | 5 |
3 files changed, 20 insertions, 0 deletions
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js index 015079f02..67e92849d 100644 --- a/src/components/auth/Login.js +++ b/src/components/auth/Login.js | |||
@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'; | |||
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
5 | 5 | ||
6 | import { isDevMode, useLiveAPI } from '../../environment'; | ||
6 | import Form from '../../lib/Form'; | 7 | import Form from '../../lib/Form'; |
7 | import { required, email } from '../../helpers/validation-helpers'; | 8 | import { required, email } from '../../helpers/validation-helpers'; |
8 | import Input from '../ui/Input'; | 9 | import Input from '../ui/Input'; |
9 | import Button from '../ui/Button'; | 10 | import Button from '../ui/Button'; |
10 | import Link from '../ui/Link'; | 11 | import Link from '../ui/Link'; |
12 | import Infobox from '../ui/Infobox'; | ||
13 | |||
11 | 14 | ||
12 | import { globalError as globalErrorPropType } from '../../prop-types'; | 15 | import { globalError as globalErrorPropType } from '../../prop-types'; |
13 | 16 | ||
@@ -117,6 +120,11 @@ export default class Login extends Component { | |||
117 | alt="" | 120 | alt="" |
118 | /> | 121 | /> |
119 | <h1>{intl.formatMessage(messages.headline)}</h1> | 122 | <h1>{intl.formatMessage(messages.headline)}</h1> |
123 | {isDevMode && !useLiveAPI && ( | ||
124 | <Infobox type="warning"> | ||
125 | In Dev Mode your data is not persistent. Please use the live app for accesing the production API. | ||
126 | </Infobox> | ||
127 | )} | ||
120 | {isTokenExpired && ( | 128 | {isTokenExpired && ( |
121 | <p className="error-message center">{intl.formatMessage(messages.tokenExpired)}</p> | 129 | <p className="error-message center">{intl.formatMessage(messages.tokenExpired)}</p> |
122 | )} | 130 | )} |
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js index 71ca16111..a990a112e 100644 --- a/src/components/auth/Signup.js +++ b/src/components/auth/Signup.js | |||
@@ -3,12 +3,14 @@ import PropTypes from 'prop-types'; | |||
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
5 | 5 | ||
6 | import { isDevMode, useLiveAPI } from '../../environment'; | ||
6 | import Form from '../../lib/Form'; | 7 | import Form from '../../lib/Form'; |
7 | import { required, email, minLength } from '../../helpers/validation-helpers'; | 8 | import { required, email, minLength } from '../../helpers/validation-helpers'; |
8 | import Input from '../ui/Input'; | 9 | import Input from '../ui/Input'; |
9 | import Radio from '../ui/Radio'; | 10 | import Radio from '../ui/Radio'; |
10 | import Button from '../ui/Button'; | 11 | import Button from '../ui/Button'; |
11 | import Link from '../ui/Link'; | 12 | import Link from '../ui/Link'; |
13 | import Infobox from '../ui/Infobox'; | ||
12 | 14 | ||
13 | import { globalError as globalErrorPropType } from '../../prop-types'; | 15 | import { globalError as globalErrorPropType } from '../../prop-types'; |
14 | 16 | ||
@@ -145,6 +147,11 @@ export default class Signup extends Component { | |||
145 | alt="" | 147 | alt="" |
146 | /> | 148 | /> |
147 | <h1>{intl.formatMessage(messages.headline)}</h1> | 149 | <h1>{intl.formatMessage(messages.headline)}</h1> |
150 | {isDevMode && !useLiveAPI && ( | ||
151 | <Infobox type="warning"> | ||
152 | In Dev Mode your data is not persistent. Please use the live app for accesing the production API. | ||
153 | </Infobox> | ||
154 | )} | ||
148 | <Radio field={form.$('accountType')} showLabel={false} /> | 155 | <Radio field={form.$('accountType')} showLabel={false} /> |
149 | <div className="grid__row"> | 156 | <div className="grid__row"> |
150 | <Input field={form.$('firstname')} focus /> | 157 | <Input field={form.$('firstname')} focus /> |
diff --git a/src/styles/infobox.scss b/src/styles/infobox.scss index ad363314d..7ab094058 100644 --- a/src/styles/infobox.scss +++ b/src/styles/infobox.scss | |||
@@ -31,6 +31,11 @@ | |||
31 | color: #FFF; | 31 | color: #FFF; |
32 | } | 32 | } |
33 | 33 | ||
34 | &.infobox--warning { | ||
35 | background: $theme-brand-warning; | ||
36 | color: #FFF; | ||
37 | } | ||
38 | |||
34 | .mdi { | 39 | .mdi { |
35 | margin-right: 10px; | 40 | margin-right: 10px; |
36 | } | 41 | } |