Merge pull request #73 from amosproj/frontend-dev-#10

Implementation of #10

frontend/src/components/login/LoginComponent.js

@@ -0,0 +1,85 @@
+import './Loginstyle.css';
+import { useContext } from 'react';
+import CarbonFootprintLogo from 'assets/logo/LogoCarbonteam.png';
+import { uniformStyle, color } from 'resources/theme';
+import slugs from 'resources/slugs';
+import { GlobalContext } from 'hooks/GlobalContext';
+import React from 'react';
+
+/**
+ * The LoginComponent realizes the Login Page.
+ *
+ * @author Mani Anand, Martin Wagner
+ */
+function LoginComponent() {
+    const [, setState] = useContext(GlobalContext);
+
+    return (
+        <div
+            className='flex-container'
+            style={{ backgroundColor: uniformStyle.color.secondaryBackgroundColor }}
+        >
+            <div className='w3-padding-24 w3-auto'>
+                <form
+                    className='login'
+                    action={slugs.categories}
+                    onSubmit={() => setState({ userIsLoggedIn: true })}
+                    style={{
+                        backgroundColor: uniformStyle.color.primaryBackgroundColor,
+                        borderColor: uniformStyle.color.accentColor
+                    }}
+                >
+                    <div className='imgcontainer'>
+                        <img src={CarbonFootprintLogo} alt='Carbon Footprint' className='avatar' />
+                    </div>
+                    <div className='login-container'>
+                        <label htmlFor='uname'>
+                            <b>Username</b>
+                        </label>
+                        <input
+                            className='login'
+                            type='text'
+                            placeholder='Enter Username'
+                            name='uname'
+                            required
+                        />
+                        <label htmlFor='psw'>
+                            <b>Password</b>
+                        </label>
+                        <input
+                            className='login'
+                            type='password'
+                            placeholder='Enter Password'
+                            name='psw'
+                            required
+                        />
+                        <button
+                            className='login'
+                            style={{ backgroundColor: uniformStyle.color.accentColor }}
+                            type='submit'
+                        >
+                            Login
+                        </button>
+                        <label>
+                            <input type='checkbox' defaultChecked='checked' name='remember' />{' '}
+                            Remember me
+                        </label>
+                        <div
+                            className='login-container'
+                            style={{
+                                marginTop: '10px',
+                                marginBottom: '10px',
+                                textAlign: 'right',
+                                backgroundColor: color.lightGray
+                            }}
+                        >
+                            <a href={slugs.forgotPassword}>Forgot password?</a>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}
+
+export default LoginComponent;

frontend/src/components/login/Loginstyle.css

@@ -0,0 +1,106 @@
+/**
+* Stylefile for the LoginComponent.
+*
+*/
+
+html,
+body,
+#root,
+.App {
+    height: 100%;
+}
+
+/* Vertically Centering Container */
+.flex-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    overflow: auto;
+}
+
+/* Bordered form */
+form.login {
+    display: flex;
+    flex-direction: column;
+    border: 3px solid;
+    margin: auto;
+    border-radius: 25px;
+    max-width: 800px;
+}
+
+/* Full-width inputs */
+input[type='text'].login,
+input[type='password'].login {
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: inline-block;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    border-radius: 10px;
+}
+
+/* Making the selected text field appearance also rounded */
+input.login:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px;
+}
+
+/* Set a style for all buttons */
+button.login {
+    color: white;
+    padding: 14px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    border-radius: 10px;
+}
+
+/* Add a hover effect for buttons */
+button.login:hover {
+    opacity: 0.8;
+}
+
+/* Center the logo inside this container */
+.imgcontainer {
+    height: fit-content;
+    text-align: center;
+    margin: 24px 0 12px 0;
+}
+
+/* Avatar image */
+img.avatar {
+    width: 25%;
+    margin: auto;
+}
+
+/* Add padding to containers */
+.login-container {
+    padding: 16px;
+    max-width: 500px;
+    margin: auto;
+}
+
+/* The "Forgot password" text */
+span.psw {
+    float: right;
+    padding-top: 16px;
+}
+
+/* Change styles for span and cancel button on extra small screens */
+@media screen and (max-width: 450px) {
+    img.avatar {
+        width: 75%;
+        margin: auto;
+    }
+    span.psw {
+        display: block;
+        float: none;
+    }
+    .cancelbtn {
+        width: 100%;
+    }
+}

frontend/src/components/productGrid/ModelDropdownComponent.js

@@ -54,6 +54,7 @@ const ModelDropdownComponent = (props) => {
                         {variables.map((item) => (
                             <button
                                 onClick={(props) => {
+                                    // Set the Selected Product to the one that has been clicked.
                                     const newSelectedProducts = [
                                         {
                                             productID: productID,

frontend/src/components/productGrid/ProductGridComponent.js

@@ -45,7 +45,7 @@ function ProductGridComponent() {
                 <Column key={'Column' + index} horizontal='center'>
                     <Link
                         onClick={(props) => {
-                            // Save selection to ContextProvider
+                            // Save selection to ContextProvider (Which it currently does not do)
                             NewSelectedProducts[0].productID = product.productID;
                             NewSelectedProducts[0].productName = product.productName;
                         }}

frontend/src/hooks/GlobalContext.js

@@ -0,0 +1,22 @@
+/**
+ * The GlobalContext enables cross-Component State-Management
+ *
+ * @author Martin Wagner
+ */
+
+import React, { useState, createContext } from 'react';
+
+export const GlobalContext = createContext();
+
+/**
+ * Defines a StateProvider, that passes down all its data to every child component.
+ *
+ * @param {*} props the previous state that has been used.
+ */
+export const GlobalStateProvider = (props) => {
+    const [state, setState] = useState({ userIsLoggedIn: false });
+
+    return (
+        <GlobalContext.Provider value={[state, setState]}>{props.children}</GlobalContext.Provider>
+    );
+};

frontend/src/index.css

@@ -87,4 +87,23 @@ body {
     font-size: 20px;
     line-height: 26px;
     color: #424147;
+    overflow: hidden;
+}
+
+/* Custom Scrollbar */
+
+/* width */
+::-webkit-scrollbar {
+    width: 5px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+    border-radius: 10px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+    background: #b5b4b9;
+    border-radius: 10px;
 }

frontend/src/index.js

@@ -6,12 +6,15 @@ import Theme from 'resources/theme';
 import Routes from 'routes';
 import './index.css';
 import * as serviceWorker from './serviceWorker';
+import { GlobalStateProvider } from 'hooks/GlobalContext';
 
 ReactDOM.render(
     <ThemeProvider theme={Theme}>
-        <Router>
-            <Routes />
-        </Router>
+        <GlobalStateProvider>
+            <Router>
+                <Routes />
+            </Router>
+        </GlobalStateProvider>
     </ThemeProvider>,
     document.getElementById('root')
 );

frontend/src/resources/theme.js

@@ -4,19 +4,21 @@
  * @author Martin Wagner
  */
 
-const color = {
+export const color = {
     brightBlue: '#3498db',
     darkGrayishBlue: '#8b8d94',
     whitish: '#b5b4b9',
-    white: '#000000',
+    white: '#ffffff',
     darkGray: '#262625',
     darkRed: '#a90000',
     grayishBlue: '#A4A6B3',
     grayishBlue2: '#9fa2b4',
     grayishBlue3: '#bdc3c7',
     limeGreen: '#00b300',
+    darkLimeGreen: '#38792D',
     blueGray: '#33b3a6', //687f8c016064018788019799
     lightBlue: '#3751FF',
+    lightGray: '#f1f1f1',
     lightGrayishBlue: '#F7F8FC', // background color
     lightGrayishBlue2: '#DFE0EB',
     paleBlue: '#DDE2FF',
@@ -123,12 +125,13 @@ const typography = {
 /**
  * Defining uniform Colors.
  */
-const uniformStyle = {
+export const uniformStyle = {
     color: {
         primaryFontColor: color.darkGrayishBlue,
         primaryIconColor: 'white',
         secondaryFontColor: color.whitish,
         highlightingColor: color.limeGreen,
+        accentColor: color.darkLimeGreen,
         primaryBackgroundColor: color.white,
         secondaryBackgroundColor: color.darkGray,
         barChartColor: color.darkBlue,

frontend/src/routes/PublicRoutes.js

@@ -7,12 +7,13 @@ import React from 'react';
 import { Redirect, Route, Router, Switch, useHistory } from 'react-router-dom';
 import SLUGS from 'resources/slugs';
 import Registration from 'components/login/Registration.js';
+import LoginComponent from 'components/login/LoginComponent';
 function PublicRoutes() {
     return (
         <Router history={useHistory()}>
             <Switch>
                 {/* <img src={logo} style={{padding:20}} /> */}
-                <Route path={SLUGS.login} render={() => <div>login</div>} />
+                <Route path={SLUGS.login} component={LoginComponent} />
                 {/* <button onClick={activateLasers}>
             Activate Lasers
             </button> */}

frontend/src/routes/index.js

@@ -1,8 +1,9 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useContext } from 'react';
 import { useLocation } from 'react-router-dom';
 import useWindowSize from 'hooks/useWindowSize';
 import PrivateSection from 'routes/PrivateSection';
 import PublicRoutes from 'routes/PublicRoutes';
+import { GlobalContext } from 'hooks/GlobalContext';
 
 function Routes() {
     const { pathname } = useLocation();
@@ -13,8 +14,9 @@ function Routes() {
         window.scrollTo(0, 0);
     }, [pathname]);
 
-    const isUserLoggedIn = true; // log in page e git
-    return isUserLoggedIn ? <PrivateSection /> : <PublicRoutes />;
+    const [state] = useContext(GlobalContext);
+
+    return state.userIsLoggedIn ? <PrivateSection /> : <PublicRoutes />;
 }
 
 export default Routes;