From 379599bb7e3c892f2046466587eb4b23fd2dd767 Mon Sep 17 00:00:00 2001
From: ReddixT <reneottenburg@icloud.com>
Date: Tue, 3 Jan 2023 20:26:25 +0100
Subject: [PATCH 1/3] fix: build errors

---
 lumium-space/pages/[workspaceId]/[[...pageId]].tsx | 2 +-
 lumium-space/pages/spaces/create.tsx               | 4 +++-
 lumium-space/src/sections/workspace/SideBar.tsx    | 1 -
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/lumium-space/pages/[workspaceId]/[[...pageId]].tsx b/lumium-space/pages/[workspaceId]/[[...pageId]].tsx
index c8b1746a..19e3bd41 100644
--- a/lumium-space/pages/[workspaceId]/[[...pageId]].tsx
+++ b/lumium-space/pages/[workspaceId]/[[...pageId]].tsx
@@ -86,7 +86,7 @@ const Workspace: React.FC = () => {
                                 p={6}
                                 my={12}>
                                 <Heading lineHeight={1.1} fontSize={{ base: '2xl', md: '3xl' }}>
-                                    Enter the password for "{workspace?.name}"
+                                    Enter the password for <em>{workspace?.name}</em>
                                 </Heading>
                                 <form onSubmit={formik.handleSubmit} data-cy={"form"}>
                                     <FormControl id="password" isRequired>
diff --git a/lumium-space/pages/spaces/create.tsx b/lumium-space/pages/spaces/create.tsx
index ea984f42..c072842e 100644
--- a/lumium-space/pages/spaces/create.tsx
+++ b/lumium-space/pages/spaces/create.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import { Authenticator } from '@components/security/Authenticator';
 import CreateWorkspace from '@components/forms/CreateWorkspace';
+import { useColorModeValue } from '@chakra-ui/react';
 
 const MultistepForm: React.FC = () => {
+    let disclaimerButtonColor = useColorModeValue('green', 'darkgreen');
     return (
         <Authenticator>
-            <CreateWorkspace />
+            <CreateWorkspace disclaimerButtonColor={disclaimerButtonColor} />
         </Authenticator >
     );
 };
diff --git a/lumium-space/src/sections/workspace/SideBar.tsx b/lumium-space/src/sections/workspace/SideBar.tsx
index 0a63edf1..c17c9c4a 100644
--- a/lumium-space/src/sections/workspace/SideBar.tsx
+++ b/lumium-space/src/sections/workspace/SideBar.tsx
@@ -1,5 +1,4 @@
 import { BoxProps, Link, Image, useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Flex, Stack, CloseButton, Menu, MenuButton, Button, MenuList, MenuItem, Divider, Icon, FlexProps } from "@chakra-ui/react";
-import { useColorModeValue } from "@chakra-ui/system";
 import CreateWorkspace from "@components/forms/CreateWorkspace";
 import { WorkspaceDTO, UserDTO } from "@types";
 import { ReactElement, ReactText } from "react";

From 775d3f261663d1ff2d72a9f95db48e00bb72d33b Mon Sep 17 00:00:00 2001
From: ReddixT <reneottenburg@icloud.com>
Date: Tue, 3 Jan 2023 20:51:47 +0100
Subject: [PATCH 2/3] feat: add working workspace switch

---
 lumium-space/src/sections/workspace/SideBar.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/lumium-space/src/sections/workspace/SideBar.tsx b/lumium-space/src/sections/workspace/SideBar.tsx
index c17c9c4a..cd8abfa4 100644
--- a/lumium-space/src/sections/workspace/SideBar.tsx
+++ b/lumium-space/src/sections/workspace/SideBar.tsx
@@ -1,6 +1,7 @@
 import { BoxProps, Link, Image, useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Flex, Stack, CloseButton, Menu, MenuButton, Button, MenuList, MenuItem, Divider, Icon, FlexProps } from "@chakra-ui/react";
 import CreateWorkspace from "@components/forms/CreateWorkspace";
 import { WorkspaceDTO, UserDTO } from "@types";
+import Router from "next/router";
 import { ReactElement, ReactText } from "react";
 import { IconType } from "react-icons";
 import { FiHome, FiTrendingUp, FiCompass, FiStar, FiSettings, FiChevronDown, FiLock, FiPlus } from "react-icons/fi";
@@ -88,7 +89,7 @@ const SideBar = ({ onSelfClose, workspace, userInfo, logo, backgroundColor, disc
                         {userInfo?.ownedWorkspaces?.length != 0 &&
                             <>
                                 {userInfo?.ownedWorkspaces.map((w) => {
-                                    return <MenuItem key={w.id} as={Button} icon={<FiLock />}>{w.name}</MenuItem>;
+                                    return <MenuItem key={w.id} as={Button} icon={<FiLock />} onClick={() => { Router.push("/" + w.id) }}>{w.name}</MenuItem>;
                                 })}
                                 <Divider />
                             </>
@@ -96,7 +97,7 @@ const SideBar = ({ onSelfClose, workspace, userInfo, logo, backgroundColor, disc
                         {userInfo?.administratedWorkspaces?.length != 0 &&
                             <>
                                 {userInfo?.administratedWorkspaces.map((w) => {
-                                    return <MenuItem key={w.id} as={Button} icon={<FiLock />}>{w.name}</MenuItem>;
+                                    return <MenuItem key={w.id} as={Button} icon={<FiLock />} onClick={() => { Router.push("/" + w.id) }}>{w.name}</MenuItem>;
                                 })}
                                 <Divider />
                             </>
@@ -104,7 +105,7 @@ const SideBar = ({ onSelfClose, workspace, userInfo, logo, backgroundColor, disc
                         {userInfo?.visitorWorkspaces?.length != 0 &&
                             <>
                                 {userInfo?.visitorWorkspaces.map((w) => {
-                                    return <MenuItem key={w.id} as={Button} icon={<FiLock />}>{w.name}</MenuItem>;
+                                    return <MenuItem key={w.id} as={Button} icon={<FiLock />} onClick={() => { Router.push("/" + w.id) }}>{w.name}</MenuItem>;
                                 })}
                                 <Divider />
                             </>

From ac6f0f7785ad2b3a8da9342391873e5fae1d3550 Mon Sep 17 00:00:00 2001
From: ReddixT <reneottenburg@icloud.com>
Date: Tue, 3 Jan 2023 21:08:36 +0100
Subject: [PATCH 3/3] feat: add profile menu functionality

fix: logo in navbar landingpage
refactor: rename mobile nav to navbar
---
 .../pages/[workspaceId]/[[...pageId]].tsx       |  6 +++---
 lumium-space/pages/index.tsx                    |  6 +++++-
 lumium-space/src/sections/landing/NavBar.tsx    | 10 +++-------
 lumium-space/src/sections/workspace/NavBar.tsx  | 17 ++++++++++-------
 lumium-space/src/sections/workspace/SideBar.tsx |  7 ++++---
 5 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/lumium-space/pages/[workspaceId]/[[...pageId]].tsx b/lumium-space/pages/[workspaceId]/[[...pageId]].tsx
index 19e3bd41..f14afe88 100644
--- a/lumium-space/pages/[workspaceId]/[[...pageId]].tsx
+++ b/lumium-space/pages/[workspaceId]/[[...pageId]].tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Heading, Button, Divider, Modal, FormControl, FormErrorMessage, FormLabel, Input, InputGroup, InputRightElement, Stack, useColorModeValue } from "@chakra-ui/react";
+import { Heading, Button, FormControl, FormErrorMessage, FormLabel, Input, InputGroup, InputRightElement, Stack, useColorModeValue } from "@chakra-ui/react";
 import { useWorkspace, useUserInfo } from "@hooks/api";
 import { useRouter } from "next/router";
 import {
@@ -13,7 +13,7 @@ import {
 import { Authenticator } from '@components/security/Authenticator';
 import { LumiumRenderer } from '@components/rendering';
 import SideBar from '@sections/workspace/SideBar';
-import MobileNav from '@sections/workspace/NavBar';
+import NavBar from '@sections/workspace/NavBar';
 import { useFormik } from 'formik';
 import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
 
@@ -65,7 +65,7 @@ const Workspace: React.FC = () => {
                     </DrawerContent>
                 </Drawer>
                 {/* mobilenav */}
-                <MobileNav onOpen={onOpen} userInfo={userInfo} workspace={workspace} />
+                <NavBar onOpen={onOpen} userInfo={userInfo} workspace={workspace} />
                 <Box p="4">
                     {
                         (workspace?.name && userInfo?.nickName && !pageId) &&
diff --git a/lumium-space/pages/index.tsx b/lumium-space/pages/index.tsx
index 7233649f..c42fb7f5 100644
--- a/lumium-space/pages/index.tsx
+++ b/lumium-space/pages/index.tsx
@@ -1,11 +1,15 @@
+import { useColorModeValue } from "@chakra-ui/react";
 import { CallToAction } from "@sections/landing/CallToAction";
 import { Footer } from "@sections/landing/Footer";
 import { NavBar } from "@sections/landing/NavBar";
 
 const LandingPage = () => {
+    const darkLogo = '/logo/svg/Black logo - no background.svg';
+    const lightLogo = '/logo/svg/White logo - no background.svg';
+    let logo = useColorModeValue(darkLogo, lightLogo);
     return (
         <>
-            <NavBar />
+            <NavBar logo={logo} />
             <CallToAction />
             <Footer />
         </>
diff --git a/lumium-space/src/sections/landing/NavBar.tsx b/lumium-space/src/sections/landing/NavBar.tsx
index 6e79163a..e29dfabf 100644
--- a/lumium-space/src/sections/landing/NavBar.tsx
+++ b/lumium-space/src/sections/landing/NavBar.tsx
@@ -35,20 +35,16 @@ import {
 import Router from 'next/router';
 import { ACCOUNT, AUTH_SIGNIN, AUTH_SIGNUP } from '@routes/space';
 import packageInfo from 'package.json';
-import { useEffect, useState } from "react";
+import { ReactElement, useEffect, useState } from "react";
 import { useApi } from "@hooks/api";
 import { SECURE_AUTH_SIGNOUT, SECURE_PONG } from '@routes/api/v1';
 
-export const NavBar = () => {
+export const NavBar = (logo) => {
     const { isOpen, onToggle } = useDisclosure();
     const { colorMode, toggleColorMode } = useColorMode();
     const [loginStatus, setLoginStatus] = useState(false);
     const [api] = useApi();
 
-    const darkLogo = '/logo/svg/Black logo - no background.svg';
-    const lightLogo = '/logo/svg/White logo - no background.svg';
-    const logo = useColorModeValue(darkLogo, lightLogo);
-
     const handleLogout = () => {
         api.post(SECURE_AUTH_SIGNOUT).then(() => Router.reload());
     };
@@ -280,7 +276,7 @@ const MobileNavItem = ({ label, children, href }: NavItem) => {
                             <Link key={child.label} py={2} href={child.href}>
                                 {child.label}
                             </Link>
-                    ))}
+                        ))}
                 </Stack>
             </Collapse>
         </Stack>
diff --git a/lumium-space/src/sections/workspace/NavBar.tsx b/lumium-space/src/sections/workspace/NavBar.tsx
index 0243c071..f6a8a06e 100644
--- a/lumium-space/src/sections/workspace/NavBar.tsx
+++ b/lumium-space/src/sections/workspace/NavBar.tsx
@@ -1,17 +1,21 @@
 import { MoonIcon, SunIcon } from "@chakra-ui/icons";
 import { useColorMode, useColorModeValue, Box, Image, Text, FlexProps, Flex, IconButton, Stack, HStack, Button, Menu, MenuButton, Avatar, VStack, MenuList, MenuItem, MenuDivider, Spacer } from "@chakra-ui/react";
+import { useApi } from "@hooks/api";
+import { SECURE_AUTH_SIGNOUT } from "@routes/api/v1";
+import { ACCOUNT, ROOT } from "@routes/space";
 import { UserDTO, WorkspaceDTO } from "@types";
+import Router from "next/router";
 import { FiMenu, FiBell, FiChevronDown } from "react-icons/fi";
 
-interface MobileProps extends FlexProps {
+interface NavBarProps extends FlexProps {
     onOpen: () => void;
     userInfo?: UserDTO;
     workspace?: WorkspaceDTO;
 }
 
-const MobileNav = ({ onOpen, userInfo, workspace, ...rest }: MobileProps) => {
+const NavBar = ({ onOpen, userInfo, workspace, ...rest }: NavBarProps) => {
     const { colorMode, toggleColorMode } = useColorMode();
-
+    const [api] = useApi();
     let role = ""
     if (userInfo?.id) {
         if (workspace?.ownerId == userInfo?.id) {
@@ -86,10 +90,9 @@ const MobileNav = ({ onOpen, userInfo, workspace, ...rest }: MobileProps) => {
                         <MenuList
                             borderColor={useColorModeValue('gray.200', 'gray.700')}>
                             <MenuItem>Profile</MenuItem>
-                            <MenuItem>Settings</MenuItem>
-                            <MenuItem>Billing</MenuItem>
+                            <MenuItem onClick={() => { Router.push(ACCOUNT) }}>Settings</MenuItem>
                             <MenuDivider />
-                            <MenuItem>Sign out</MenuItem>
+                            <MenuItem onClick={() => { api.post(SECURE_AUTH_SIGNOUT).then(() => Router.push(ROOT)); }}>Sign out</MenuItem>
                         </MenuList>
                     </Menu>
                 </Flex>
@@ -97,4 +100,4 @@ const MobileNav = ({ onOpen, userInfo, workspace, ...rest }: MobileProps) => {
         </Flex >
     );
 };
-export default MobileNav;
+export default NavBar;
diff --git a/lumium-space/src/sections/workspace/SideBar.tsx b/lumium-space/src/sections/workspace/SideBar.tsx
index cd8abfa4..41c2105b 100644
--- a/lumium-space/src/sections/workspace/SideBar.tsx
+++ b/lumium-space/src/sections/workspace/SideBar.tsx
@@ -1,5 +1,6 @@
 import { BoxProps, Link, Image, useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Flex, Stack, CloseButton, Menu, MenuButton, Button, MenuList, MenuItem, Divider, Icon, FlexProps } from "@chakra-ui/react";
 import CreateWorkspace from "@components/forms/CreateWorkspace";
+import { ROOT } from "@routes/space";
 import { WorkspaceDTO, UserDTO } from "@types";
 import Router from "next/router";
 import { ReactElement, ReactText } from "react";
@@ -89,7 +90,7 @@ const SideBar = ({ onSelfClose, workspace, userInfo, logo, backgroundColor, disc
                         {userInfo?.ownedWorkspaces?.length != 0 &&
                             <>
                                 {userInfo?.ownedWorkspaces.map((w) => {
-                                    return <MenuItem key={w.id} as={Button} icon={<FiLock />} onClick={() => { Router.push("/" + w.id) }}>{w.name}</MenuItem>;
+                                    return <MenuItem key={w.id} as={Button} icon={<FiLock />} onClick={() => { Router.push(ROOT + w.id) }}>{w.name}</MenuItem>;
                                 })}
                                 <Divider />
                             </>
@@ -97,7 +98,7 @@ const SideBar = ({ onSelfClose, workspace, userInfo, logo, backgroundColor, disc
                         {userInfo?.administratedWorkspaces?.length != 0 &&
                             <>
                                 {userInfo?.administratedWorkspaces.map((w) => {
-                                    return <MenuItem key={w.id} as={Button} icon={<FiLock />} onClick={() => { Router.push("/" + w.id) }}>{w.name}</MenuItem>;
+                                    return <MenuItem key={w.id} as={Button} icon={<FiLock />} onClick={() => { Router.push(ROOT + w.id) }}>{w.name}</MenuItem>;
                                 })}
                                 <Divider />
                             </>
@@ -105,7 +106,7 @@ const SideBar = ({ onSelfClose, workspace, userInfo, logo, backgroundColor, disc
                         {userInfo?.visitorWorkspaces?.length != 0 &&
                             <>
                                 {userInfo?.visitorWorkspaces.map((w) => {
-                                    return <MenuItem key={w.id} as={Button} icon={<FiLock />} onClick={() => { Router.push("/" + w.id) }}>{w.name}</MenuItem>;
+                                    return <MenuItem key={w.id} as={Button} icon={<FiLock />} onClick={() => { Router.push(ROOT + w.id) }}>{w.name}</MenuItem>;
                                 })}
                                 <Divider />
                             </>