From f6ac322edf9392d8e847ec3855eab4184b401b6c Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Tue, 24 Oct 2017 16:11:42 +0200
Subject: Add `warning` styles to infobox

---
 src/styles/infobox.scss | 5 +++++
 1 file changed, 5 insertions(+)

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;
   }
-- 
cgit v1.2.3-70-g09d2


From 880da2de3097d60e97d38c86476b0db4e2016820 Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Tue, 24 Oct 2017 16:12:40 +0200
Subject: Add API notice to users who run the app in dev mode

---
 src/components/auth/Login.js  | 8 ++++++++
 src/components/auth/Signup.js | 7 +++++++
 2 files changed, 15 insertions(+)

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 />
-- 
cgit v1.2.3-70-g09d2