changed login page

src/app.js

@@ -51,60 +51,10 @@ class App extends React.Component {
       type: 'config/load',
     });
 
-    this.setBrandingStyle();
+    Branding.instance.applyBranding();
     this.state = {} 
   }
 
-  changeHead() {
-    if (Branding.instance.default) {
-      console.log("default branding");
-      return;
-    }
-    document.title = Branding.instance.values.title + " " + Branding.instance.values.subtitle;
-    var oldlink = document.getElementById('dynamic-favicon');
-
-    var link = document.createElement('link');
-    link.id = 'dynamic-favicon';
-    link.rel = 'shortcut icon'
-    link.href = '/' + Branding.instance.values.icon;
-
-    if (oldlink) {
-      document.head.removeChild(oldlink);
-    }
-    document.head.appendChild(link);
-  }
-
-  setBrandingStyle() {
-    this.changeHead();
-
-    const rootEl = document.querySelector(':root');
-    let background = Branding.instance.getBackgroundColor();
-
-    if (background) {
-      document.body.style.backgroundColor = background;
-    }
-
-    let highlight = Branding.instance.getHighlightColor();
-    if (highlight) {
-      rootEl.style.setProperty('--highlights', highlight);
-    }
-
-    let primary = Branding.instance.getPrimaryTextColor();
-    if (primary) {
-      rootEl.style.setProperty('--primarytext', primary);
-    }
-
-    let secondary = Branding.instance.getSecondaryTextColor();
-    if (secondary) {
-      rootEl.style.setProperty('--secondarytext', secondary);
-    }
-
-    let font = Branding.instance.getFont();
-    if (font) {
-      rootEl.style.setProperty('--mainfont', font);
-    }
-  }
-
   componentDidMount() {
     NotificationsDataManager.setSystem(this.refs.notificationSystem);
 

src/branding/branding.js

@@ -19,6 +19,7 @@ import { villasweb_home } from './villasweb/villasweb-home';
 import villasweb_values from './villasweb/villasweb-values';
 
 import { slew_home } from './slew/slew-home';
+import { slew_welcome } from './slew/slew-welcome';
 import slew_values from './slew/slew-values';
 
 class Branding {
@@ -39,6 +40,7 @@ class Branding {
         *****/
 
         this.brand = chosenbrand;
+        this.isSet = false;
         this.setValues();
     }
 
@@ -74,6 +76,80 @@ class Branding {
         return homepage;
     }
 
+    getWelcome() {
+        var welcome = '';
+        switch (this.brand) {
+            case 'slew':
+                welcome = slew_welcome();
+                break;
+            default:
+                welcome = this.defaultWelcome();
+                break;
+        }
+        return welcome;
+    }
+
+    defaultWelcome() {
+        return (<h1>Welcome!</h1>);
+    }
+
+    changeHead() {
+        if (this.default) {
+          console.log("default branding");
+          return;
+        }
+        document.title = this.values.title + " " + this.values.subtitle;
+        var oldlink = document.getElementById('dynamic-favicon');
+
+        var link = document.createElement('link');
+        link.id = 'dynamic-favicon';
+        link.rel = 'shortcut icon'
+        link.href = '/' + this.values.icon;
+
+        if (oldlink) {
+          document.head.removeChild(oldlink);
+        }
+        document.head.appendChild(link);
+      }
+
+      applyBranding() {
+        this.changeHead();
+
+        const rootEl = document.querySelector(':root');
+        let background = this.getBackgroundColor();
+
+        if (background) {
+          document.body.style.backgroundColor = background;
+        }
+
+        let maincolor = this.getMainColor();
+        if (maincolor) {
+            rootEl.style.setProperty('--maincolor', maincolor);
+        }
+
+        let highlight = this.getHighlightColor();
+        if (highlight) {
+          rootEl.style.setProperty('--highlights', highlight);
+        }
+
+        let primary = this.getPrimaryTextColor();
+        if (primary) {
+          rootEl.style.setProperty('--primarytext', primary);
+        }
+
+        let secondary = this.getSecondaryTextColor();
+        if (secondary) {
+          rootEl.style.setProperty('--secondarytext', secondary);
+        }
+
+        let font = this.getFont();
+        if (font) {
+          rootEl.style.setProperty('--mainfont', font);
+        }
+
+        this.isSet = false;
+      }
+
     getBackgroundColor() {
         if (this.values.style && this.values.style.bgcolor) {
             return this.values.style.bgcolor;
@@ -81,6 +157,13 @@ class Branding {
         return null;
     }
 
+    getMainColor() {
+        if (this.values.style && this.values.style.maincolor) {
+            return this.values.style.maincolor;
+        }
+        return null;
+    }
+
     getHighlightColor() {
         if (this.values.style && this.values.style.highlights) {
             return this.values.style.highlights;

src/branding/slew/slew-values.js

@@ -34,9 +34,11 @@ const slew_values = {
    style: {
       bgcolor: 'rgba(107,29,26, 0.8)',
       highlights: '#610C04',
+      maincolor: 'rgba(40,0,0,0.8)',
       primarytext: '#472120',
       secondarytext: '#472120',
       font: "16px Roboto, sans-serif",
+      borderradius: "8px"
    }
 }
 

src/branding/slew/slew-welcome.js

@@ -0,0 +1,33 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+ import React from 'react';
+ 
+ export function slew_welcome() {
+ 
+     return (
+         <div >
+             <h1>Welcome!</h1>
+
+             <p>SLEW is a learning platform for running experiments in a virtual power engineering world.
+                 The platform enables to interact with the experiments in real time and perform analyses on the experimental results.</p>
+                 
+ 
+         </div>)
+ 
+ }
+ 
+ 

src/styles/app.css

@@ -27,6 +27,10 @@
   --mainfont: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
+* {
+  color: var(--maincolor);
+}
+
 body {
   background-color: var(--bg);
 }
@@ -41,8 +45,6 @@ body {
 
 .app-header {
   width: 100%;
-
-  color: var(--highlights);
   background-color: #fff;
 }
 
@@ -51,6 +53,7 @@ body {
   margin: 0;
   width: 100%;
   text-align: center;
+  color: var(--highlights);
 }
 
 .btn-link {
@@ -213,10 +216,28 @@ body {
 /**
  * Login form
  */
-.login-container {
-  max-width: 400px;
+ .login-parent {
+   display: flex;
+   max-width: 800px;
 
-  margin: 30px auto;
+   margin: 30px auto;
+ }
+
+ .login-welcome {
+  float: right;
+  max-width: 400px;
+  padding: 15px 20px;
+ /*++++++++++++ border-radius: 8px 0px 0px 8px;****/
+
+  background-color: #fff;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+              0 9px 18px 0 rgba(0, 0, 0, 0.1);
+}
+
+.login-container {
+  float: left;
+  max-width: 400px;
+ /* border-radius: 0px 8px 8px 0px;*/
   padding: 15px 20px;
 
   background-color: #fff;

src/user/login.js

@@ -27,6 +27,8 @@ import Footer from '../common/footer';
 import NotificationsDataManager from '../common/data-managers/notifications-data-manager';
 import LoginStore from './login-store'
 import AppDispatcher from '../common/app-dispatcher';
+import Branding from '../branding/branding';
+
 
 class Login extends Component {
   constructor(props) {
@@ -37,6 +39,11 @@ class Login extends Component {
     AppDispatcher.dispatch({
       type: 'config/load',
     });
+
+    // set branding in case the login page gets refreshed
+    if (!Branding.instance.isSet) {
+      Branding.instance.applyBranding();
+    }
   }
 
   static getStores() {
@@ -69,11 +76,16 @@ class Login extends Component {
         <NotificationSystem ref="notificationSystem" />
 
         <Header />
+        <div className="login-parent">
+          <div className="login-welcome">
+            {Branding.instance.getWelcome()}
+          </div>
 
-        <div className="login-container">
-          <NavbarBrand>Login</NavbarBrand>
+          <div className="login-container">
+            <NavbarBrand>Login</NavbarBrand>
 
-          <LoginForm loginMessage={this.state.loginMessage} config={this.state.config}/>
+            <LoginForm loginMessage={this.state.loginMessage} config={this.state.config} />
+          </div>
         </div>
 
         <Footer />