From 715b7cf69a558c522869fc68c82ea5ea71093d08 Mon Sep 17 00:00:00 2001 From: irismarie Date: Fri, 12 Mar 2021 14:28:28 +0100 Subject: [PATCH] changed login page --- src/app.js | 52 +------------------ src/branding/branding.js | 83 +++++++++++++++++++++++++++++++ src/branding/slew/slew-values.js | 2 + src/branding/slew/slew-welcome.js | 33 ++++++++++++ src/styles/app.css | 31 ++++++++++-- src/user/login.js | 18 +++++-- 6 files changed, 160 insertions(+), 59 deletions(-) create mode 100644 src/branding/slew/slew-welcome.js diff --git a/src/app.js b/src/app.js index 57f24ba..a39196f 100644 --- a/src/app.js +++ b/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); diff --git a/src/branding/branding.js b/src/branding/branding.js index d243160..04611ee 100644 --- a/src/branding/branding.js +++ b/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 (

Welcome!

); + } + + 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; diff --git a/src/branding/slew/slew-values.js b/src/branding/slew/slew-values.js index 5d38a8d..574f595 100644 --- a/src/branding/slew/slew-values.js +++ b/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" } } diff --git a/src/branding/slew/slew-welcome.js b/src/branding/slew/slew-welcome.js new file mode 100644 index 0000000..a37dd96 --- /dev/null +++ b/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 . + ******************************************************************************/ + import React from 'react'; + + export function slew_welcome() { + + return ( +
+

Welcome!

+ +

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.

+ + +
) + + } + + \ No newline at end of file diff --git a/src/styles/app.css b/src/styles/app.css index 16a0245..3cd2277 100644 --- a/src/styles/app.css +++ b/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; diff --git a/src/user/login.js b/src/user/login.js index f265342..0ad75f5 100644 --- a/src/user/login.js +++ b/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 {
+
+
+ {Branding.instance.getWelcome()} +
-
- Login +
+ Login - + +