Updating dev-#82 with the current state

frontend/src/components/details/navbar.css

@@ -22,8 +22,8 @@
 }
 
 .navbar i {
-    margin-right: auto;
-    margin-left: auto;
+    margin-right: 5px;
+    margin-left: 5px;
 }
 
 .navbar Link {
@@ -67,7 +67,7 @@
 .Addbtn {
     float: left;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     font-weight: bold;
     /* color: var(--global--panel--color); */
     background-color: var(--global--background--color);
@@ -84,7 +84,7 @@
 .Pdfbtn {
     float: left;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     text-decoration: none;
     font-weight: bold;
     /* color: var(--global--panel--color); */

frontend/src/components/login/RecoverPasswordComponent.js

@@ -0,0 +1,56 @@
+import './RecoverPasswordStyle.css';
+import { useContext } from 'react';
+import slugs from 'resources/slugs';
+import { GlobalContext } from 'hooks/GlobalContext';
+import React from 'react';
+
+function RecoverPasswordComponent() {
+    const [, setState] = useContext(GlobalContext);
+
+    return (
+        <div className='flex-container-recover'>
+            <div className='w3-padding-24 w3-auto'>
+                <form
+                    className='recover'
+                    action={slugs.categories}
+                    onSubmit={() => setState({ userIsLoggedIn: true })}
+                >
+                    <div className='w3-container w3-large w3-center'>
+                        <div className='w3-center-align w3-padding-24'>
+                            <h1>Forgot Your Password ?</h1>
+                        </div>
+                    </div>
+
+                    <div className='recoverpassword-container'>
+                        <div className='w3-center-align w3-padding-16'>
+                            <p>
+                                Don't fret! Just type in your email and we will send you a code to
+                                reset the password
+                            </p>
+                        </div>
+                        <label htmlFor='uname'>
+                            <b>Your Email</b>
+                        </label>
+                        <input
+                            className='recover'
+                            type='text'
+                            placeholder='abc@siemens.com'
+                            name='uname'
+                            required
+                        />
+
+                        <button className='recover' type='submit'>
+                            Recover Password
+                        </button>
+
+                        <div className='recoverpassword-container'>
+                            <a href={slugs.login}> Back to SignIn </a>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}
+
+export default RecoverPasswordComponent;

frontend/src/components/login/RecoverPasswordStyle.css

@@ -0,0 +1,67 @@
+/* Stylefile for the RecoverPasswordComponent. */
+
+/* Vertically Centering Container */
+.flex-container-recover {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    overflow: auto;
+    color: 'white';
+    background: radial-gradient(#54386e, #6b26af, #5d0785);
+}
+
+/* Bordered form */
+form.recover {
+    display: flex;
+    flex-direction: column;
+    background-color: #ffffff;
+    border: 3px solid #cf9bff;
+    margin: auto;
+    border-radius: 25px;
+    max-width: 800px;
+}
+button {
+    background-color: #8a00e5;
+}
+
+/* Full-width inputs */
+input[type='text'].recover {
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: inline-block;
+    border: 1px solid #cf9bff;
+    box-sizing: border-box;
+    border-radius: 10px;
+}
+
+/* Making the selected text field appearance also rounded */
+input.recover:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px;
+}
+
+/* Set a style for all buttons */
+button.recover {
+    color: white;
+    padding: 14px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    border-radius: 10px;
+}
+
+/* Add a hover effect for buttons */
+button.recover:hover {
+    opacity: 0.8;
+}
+
+/* Add padding to containers */
+.recoverpassword-container {
+    padding: 16px;
+    max-width: 500px;
+    margin: auto;
+}

frontend/src/components/login/loginstyle.css

@@ -9,9 +9,7 @@
     height: 100%;
     overflow: auto;
     color: 'white';
-    background: radial-gradient(circle at top,
-        #000000,#1b1534,#4d217a,#643082
-      );;
+    background: radial-gradient(circle at top, #000000, #1b1534, #4d217a, #643082);
 }
 
 /* Bordered form */

frontend/src/routes/PublicRoutes.js

@@ -8,13 +8,14 @@ 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';
+import RecoverPasswordComponent from 'components/login/RecoverPasswordComponent';
 function PublicRoutes() {
     return (
         <Router history={useHistory()}>
             <Switch>
                 <Route exact path={SLUGS.login} component={LoginComponent} />
                 <Route path={SLUGS.signup} component={Registration} />
-                <Route path={SLUGS.forgotPassword} render={() => <div>forgotPassword</div>} />
+                <Route path={SLUGS.forgotPassword} component={RecoverPasswordComponent} />
                 <Route path={SLUGS.logout} component={LoginComponent} />
                 <Redirect to={SLUGS.login} />
             </Switch>