Created Header

Author: Zerofour04

package-lock.json

@@ -13,9 +13,11 @@
     "@types/react": "^17.0.41",
     "@types/react-dom": "^17.0.14",
     "axios": "^0.26.1",
+    "bootstrap": "^5.1.3",
     "i": "^0.3.7",
     "npm": "^8.5.5",
     "react": "^17.0.2",
+    "react-bootstrap": "^2.2.1",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.2.2",

package.json

@@ -28,6 +28,7 @@
   color: #61dafb;
 }
 
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);
@@ -36,3 +37,4 @@
     transform: rotate(360deg);
   }
 }
+

src/App.css

@@ -1,24 +1,41 @@
 import React from 'react';
-import {BrowserRouter as Router} from 'react-router-dom';
-import {MsalAuthenticationTemplate} from '@azure/msal-react';
-import {InteractionType} from "@azure/msal-browser";
-import {authRequest} from "./config/msalConfig";
+import { MsalAuthenticationTemplate, useMsal } from '@azure/msal-react';
+import { InteractionType } from "@azure/msal-browser";
+import { authRequest } from "./config/msalConfig";
+import Header from './component/Header';
+import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
+import headerLogo from './pictures/logo-dialogdata.png'
+import { Button, Container, Nav, Navbar, NavbarBrand, NavDropdown } from 'react-bootstrap';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import { useSelector } from 'react-redux';
+import { selectLoggedInUser } from './store/employee/employeeSelectors';
+import Input from './component/projects/input';
+import ProjectList from './component/projects/list';
+import Page from './component/page';
+
 
 const App = () => {
 
-    // @ts-ignore
-    const ErrorComponent = ({error}) => {
-        return <p>An Error Occurred: {error}</p>;
-    }
-
-    return (
-            <MsalAuthenticationTemplate
-                    interactionType={InteractionType.Redirect}
-                    authenticationRequest={authRequest}
-                    errorComponent={ErrorComponent}>
-                      <h1>Test</h1>
-            </MsalAuthenticationTemplate>
-    );
+
+  // @ts-ignore
+  const ErrorComponent = (error:any) => {
+    return <p>An Error Occurred: {error.error}</p>;
+  }
+
+
+
+
+
+
+
+  return (
+    <MsalAuthenticationTemplate
+      interactionType={InteractionType.Redirect}
+      authenticationRequest={authRequest}
+      errorComponent={ErrorComponent}>
+        <Page/>
+    </MsalAuthenticationTemplate>
+  );
 };
 
 export default App;

src/App.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { useMsal } from "@azure/msal-react";
+import { selectLoggedInUser } from "../store/employee/employeeSelectors";
+import headerLogo from '../pictures/logo-dialogdata.png'
+import { msalConfiguration } from "../config/msalConfig";
+
+const Header = () => {
+    
+    const msal = useMsal()
+
+    return (
+        <h1>Welcome back {msal.accounts[0].name}</h1>
+    )
+};
+
+export default Header;

src/component/Header.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { useMsal } from "@azure/msal-react";
+import Button from "react-bootstrap/Button";
+import { loginRequest } from "../config/msalConfig";
+
+function handleLogin(instance) {
+    instance.loginPopup(loginRequest).catch(e => {
+        console.error(e);
+    });
+}
+
+export const SignInButton = () => {
+    const { instance } = useMsal();
+    
+    return (
+        <Button variant="secondary" className="ml-auto" onClick={() => handleLogin(instance)}>Sign In</Button>
+    )
+
+}

src/component/SignInButton.jsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Button, Container, Nav, Navbar, NavbarBrand, NavDropdown } from 'react-bootstrap';
+import { useSelector } from 'react-redux';
+import { selectLoggedInUser } from '../store/employee/employeeSelectors';
+import { MsalAuthenticationTemplate, useMsal } from '@azure/msal-react';
+import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
+import Header from "./Header";
+import ProjectList from "./projects/list";
+
+const Page = () => {
+    const msal = useMsal()
+    console.log(msal)
+    // @ts-ignore
+    const ErrorComponent = ({ error }) => {
+      return <p>An Error Occurred: {error}</p>;
+    }
+  
+    const employee = useSelector(selectLoggedInUser)
+    const {instance, accounts} = useMsal();
+  
+    const logOutHandler = () => {
+        const logOutRequest = {
+            account: accounts[0],
+            postLogoutRedirectUri: "/projects"
+        }
+        instance.logoutRedirect(logOutRequest)
+        
+    };
+
+    return (
+        <div>
+        <Button onClick={logOutHandler}>Log out</Button>
+        <Navbar bg="light" expand="lg">
+          <Container>
+            <Navbar.Brand href="#home">
+            </Navbar.Brand>
+            <Navbar.Toggle aria-controls="basic-navbar-nav" />
+            <Navbar.Collapse id="basic-navbar-nav">
+              <Nav className="me-auto">
+                <Nav.Link href="">Home</Nav.Link>
+                <Nav.Link href="projects">Projects</Nav.Link>
+                <Nav.Link href="mission-assignments">Mission assignments</Nav.Link>
+                <Nav.Link href="business-domains">Business Domains</Nav.Link>
+                <NavDropdown title="Dropdown" id="basic-nav-dropdown">
+                  <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
+                  <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
+                  <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
+                  <NavDropdown.Divider />
+                </NavDropdown>
+              </Nav>
+            </Navbar.Collapse>
+          </Container>
+        </Navbar>
+
+
+        <Routes>
+          <Route path="" element={<Header />} />
+          <Route path="/projects" element={<ProjectList/>} />
+          <Route path="/mission-assignments" />
+          <Route path="/business-domains" />
+        </Routes>
+      </div>
+    )
+
+}
+
+export default Page;

src/component/page.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+
+const Input = (props:any) => {
+    const [userInput, setUserInput] = useState('');
+
+    function removeUserInput() {
+        setUserInput('')
+    }
+
+    return (
+        <div>
+            <input type="text" placeholder="New Project" value={props.userInput} onChange={ (event) => setUserInput(event.target.value)} />
+            <span onClick={ () => {props.addToDo(userInput); removeUserInput()} }/>Add Project
+            
+        </div>
+    )
+}
+
+export default Input;

src/component/projects/input.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import { Button } from "react-bootstrap";
+import Input from "./input";
+
+const ProjectList = () => {
+
+/*     const testObject = {
+        text: "Hallo"
+
+    }   
+
+    const [projectListArray, setprojectListArry] = useState([testObject]) */
+
+
+    return (
+
+
+        <div>
+        <h2>Test</h2>
+        <Button>Test</Button>
+        </div>
+
+
+    )
+
+
+}
+
+export default ProjectList;

src/component/projects/list.tsx

@@ -0,0 +1,14 @@
+import React, { useState } from "react";
+
+function projectListItem(props:any) {
+
+    const [isEditModeOn, setEditModeOn] = useState(false);
+
+    return (
+        <li>
+            
+        </li>
+    )
+
+
+}

src/component/projects/listItem.tsx

@@ -2,11 +2,15 @@ import {Configuration} from '@azure/msal-browser';
 
 export const msalConfiguration: Configuration = {
     auth: {
-        clientId: '',
-        authority: ''
+        clientId: 'c30dc17f-54f5-4c59-98c3-83a254a5264a',
+        authority: 'https://login.microsoftonline.com/3bed001c-7aa5-43a6-becc-1fc2f7c94a75'
     }
 };
 
 export const authRequest = {
     scopes: ['openid', 'profile']
+};
+
+export  const loginRequest = {
+    scopes: ["User.Read"]
 };

src/config/msalConfig.ts

@@ -6,14 +6,17 @@ import App from "./App";
 import React from "react";
 import {MsalProvider} from "@azure/msal-react";
 import ReactDOM from "react-dom";
+import { BrowserRouter } from "react-router-dom";
 
 const pca = new PublicClientApplication(msalConfiguration);
 
 const ProjectsApp = () => (
         <React.StrictMode>
             <Provider store={store}>
                 <MsalProvider instance={pca}>
-                    <App/>
+                    <BrowserRouter>
+                    <App/>           
+                    </BrowserRouter>
                 </MsalProvider>
             </Provider>
         </React.StrictMode>