Merge pull request #98 from meetfranz/feature/dev-mode-notice

Add dev mode notice to login and signup

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';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 
+import { isDevMode, useLiveAPI } from '../../environment';
 import Form from '../../lib/Form';
 import { required, email } from '../../helpers/validation-helpers';
 import Input from '../ui/Input';
 import Button from '../ui/Button';
 import Link from '../ui/Link';
+import Infobox from '../ui/Infobox';
+
 
 import { globalError as globalErrorPropType } from '../../prop-types';
 
@@ -117,6 +120,11 @@ export default class Login extends Component {
             alt=""
           />
           <h1>{intl.formatMessage(messages.headline)}</h1>
+          {isDevMode && !useLiveAPI && (
+            <Infobox type="warning">
+              In Dev Mode your data is not persistent. Please use the live app for accesing the production API.
+            </Infobox>
+          )}
           {isTokenExpired && (
             <p className="error-message center">{intl.formatMessage(messages.tokenExpired)}</p>
           )}
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';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 
+import { isDevMode, useLiveAPI } from '../../environment';
 import Form from '../../lib/Form';
 import { required, email, minLength } from '../../helpers/validation-helpers';
 import Input from '../ui/Input';
 import Radio from '../ui/Radio';
 import Button from '../ui/Button';
 import Link from '../ui/Link';
+import Infobox from '../ui/Infobox';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
 
@@ -145,6 +147,11 @@ export default class Signup extends Component {
               alt=""
             />
             <h1>{intl.formatMessage(messages.headline)}</h1>
+            {isDevMode && !useLiveAPI && (
+              <Infobox type="warning">
+                In Dev Mode your data is not persistent. Please use the live app for accesing the production API.
+              </Infobox>
+            )}
             <Radio field={form.$('accountType')} showLabel={false} />
             <div className="grid__row">
               <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 @@
     color: #FFF;
   }
 
+  &.infobox--warning {
+    background: $theme-brand-warning;
+    color: #FFF;
+  }
+
   .mdi {
     margin-right: 10px;
   }