From 5167100285939356fadf6bc8075ebe71a26d6c1f Mon Sep 17 00:00:00 2001
From: ReddixT <reneottenburg@icloud.com>
Date: Tue, 3 Jan 2023 19:00:26 +0100
Subject: [PATCH] feat: add closeable sidebar

feat: add password for workspace
refactor: remove account folder
fix: background color for sidebar
---
 .../pages/[workspaceId]/[[...pageId]].tsx     | 103 +++++++++++++++---
 .../pages/{account/index.tsx => account.tsx}  |   0
 lumium-space/pages/auth/signin.tsx            |   2 -
 .../src/components/forms/CreateWorkspace.tsx  |   8 +-
 .../src/sections/workspace/NavBar.tsx         |  41 +++----
 .../src/sections/workspace/SideBar.tsx        |  73 ++++++-------
 6 files changed, 145 insertions(+), 82 deletions(-)
 rename lumium-space/pages/{account/index.tsx => account.tsx} (100%)

diff --git a/lumium-space/pages/[workspaceId]/[[...pageId]].tsx b/lumium-space/pages/[workspaceId]/[[...pageId]].tsx
index 68ae28b2..c8b1746a 100644
--- a/lumium-space/pages/[workspaceId]/[[...pageId]].tsx
+++ b/lumium-space/pages/[workspaceId]/[[...pageId]].tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Heading, Button, Divider, Modal } from "@chakra-ui/react";
+import React, { useState } from 'react';
+import { Heading, Button, Divider, Modal, FormControl, FormErrorMessage, FormLabel, Input, InputGroup, InputRightElement, Stack, useColorModeValue } from "@chakra-ui/react";
 import { useWorkspace, useUserInfo } from "@hooks/api";
 import { useRouter } from "next/router";
 import {
@@ -14,6 +14,8 @@ import { Authenticator } from '@components/security/Authenticator';
 import { LumiumRenderer } from '@components/rendering';
 import SideBar from '@sections/workspace/SideBar';
 import MobileNav from '@sections/workspace/NavBar';
+import { useFormik } from 'formik';
+import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
 
 const Workspace: React.FC = () => {
     const router = useRouter();
@@ -21,16 +23,27 @@ const Workspace: React.FC = () => {
     const workspace = useWorkspace(workspaceId);
     const { userInfo } = useUserInfo();
     const { isOpen, onOpen, onClose } = useDisclosure();
+    const [passwordEntered, setPasswordEntered] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
+    const handlePasswordEntered = () => {
+        setPasswordEntered(true);
+    }
+    const formik = useFormik({
+        initialValues: {
+            password: "",
+        },
+        onSubmit: handlePasswordEntered,
+        validateOnChange: (false),
+    });
+    const darkLogo = '/logo/svg/Black logo - no background.svg';
+    const lightLogo = '/logo/svg/White logo - no background.svg';
+    let logo = useColorModeValue(darkLogo, lightLogo);
+    let backgroundColor = useColorModeValue('#ffffff', '#1a1a1a');
+    let disclaimerButtonColor = useColorModeValue('green', 'darkgreen');
 
     return (
         <Authenticator>
             <Box minH="100vh">
-                <SideBar
-                    onSelfClose={() => onClose}
-                    display={{ base: 'none', md: 'block' }}
-                    workspace={workspace}
-                    userInfo={userInfo}
-                />
                 <Drawer
                     autoFocus={false}
                     isOpen={isOpen}
@@ -38,22 +51,82 @@ const Workspace: React.FC = () => {
                     onClose={onClose}
                     returnFocusOnClose={false}
                     onOverlayClick={onClose}
-                    size="full">
+                    size={{ base: "full", md: "xs" }}
+                >
                     <DrawerContent>
-                        <SideBar onSelfClose={onClose} workspace={workspace} />
+                        <SideBar
+                            onSelfClose={onClose}
+                            workspace={workspace}
+                            userInfo={userInfo}
+                            logo={logo}
+                            backgroundColor={backgroundColor}
+                            disclaimerButtonColor={disclaimerButtonColor}
+                        />
                     </DrawerContent>
                 </Drawer>
                 {/* mobilenav */}
                 <MobileNav onOpen={onOpen} userInfo={userInfo} workspace={workspace} />
-                <Box ml={{ base: 0, md: 60 }} p="4">
+                <Box p="4">
                     {
                         (workspace?.name && userInfo?.nickName && !pageId) &&
                         <Heading>
                             Welcome to the <em>{workspace?.name}</em> workspace, {userInfo?.nickName}!
-                        </Heading>
-                    }
-                    {
-                        pageId &&
+                        </Heading> ||
+                        !passwordEntered &&
+                        <Flex
+                            align={'center'}
+                            justify={'center'}
+                        >
+                            <Stack
+                                spacing={4}
+                                w={'full'}
+                                maxW={'md'}
+                                rounded={'xl'}
+                                boxShadow={'lg'}
+                                p={6}
+                                my={12}>
+                                <Heading lineHeight={1.1} fontSize={{ base: '2xl', md: '3xl' }}>
+                                    Enter the password for "{workspace?.name}"
+                                </Heading>
+                                <form onSubmit={formik.handleSubmit} data-cy={"form"}>
+                                    <FormControl id="password" isRequired>
+                                        <FormLabel>Password</FormLabel>
+                                        <InputGroup>
+                                            <Input
+                                                name={"password"}
+                                                type={showPassword ? 'text' : 'password'}
+                                                onChange={formik.handleChange}
+                                                value={formik.values.password}
+                                                data-cy="passwordInput"
+                                            />
+                                            <InputRightElement h={'full'}>
+                                                <Button
+                                                    variant={'ghost'}
+                                                    onClick={() =>
+                                                        setShowPassword((showPassword) => !showPassword)
+                                                    }>
+                                                    {showPassword ? <ViewIcon /> : <ViewOffIcon />}
+                                                </Button>
+                                            </InputRightElement>
+                                        </InputGroup>
+                                        <FormErrorMessage data-cy="credentialError"></FormErrorMessage>
+                                    </FormControl>
+                                    <Stack spacing={6}>
+                                        <Button
+                                            bg={'blue.400'}
+                                            color={'white'}
+                                            _hover={{
+                                                bg: 'blue.500',
+                                            }}
+                                            type="submit"
+                                        >
+                                            Submit
+                                        </Button>
+                                    </Stack>
+                                </form>
+                            </Stack>
+                        </Flex>
+                        || pageId &&
                         <Flex flexDir="row">
                             <Textarea />
                             <LumiumRenderer />
diff --git a/lumium-space/pages/account/index.tsx b/lumium-space/pages/account.tsx
similarity index 100%
rename from lumium-space/pages/account/index.tsx
rename to lumium-space/pages/account.tsx
diff --git a/lumium-space/pages/auth/signin.tsx b/lumium-space/pages/auth/signin.tsx
index 654c718b..71606cfd 100644
--- a/lumium-space/pages/auth/signin.tsx
+++ b/lumium-space/pages/auth/signin.tsx
@@ -16,7 +16,6 @@ import React, { useState } from 'react'
 import { useApi } from '@hooks/api';
 import Router from 'next/router';
 import { AUTH_PASSWORD_RESET, AUTH_SIGNIN, AUTH_SIGNUP, ROOT, SPACES } from '@routes/space';
-import { useUserInfo } from '@hooks/api';
 import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
 import { AuthBox } from '@components/auth/AuthBox';
 import { useFormik } from 'formik';
@@ -26,7 +25,6 @@ const SignIn: React.FC = () => {
     const [showPassword, setShowPassword] = useState(false);
     const [error, setError] = useState<ReasonDTO | null>(null);
     const [api] = useApi();
-    const { refetchUserInfo } = useUserInfo();
 
     const handleSignIn = () => {
         const email = formik.values.email;
diff --git a/lumium-space/src/components/forms/CreateWorkspace.tsx b/lumium-space/src/components/forms/CreateWorkspace.tsx
index 2568f2da..31221623 100644
--- a/lumium-space/src/components/forms/CreateWorkspace.tsx
+++ b/lumium-space/src/components/forms/CreateWorkspace.tsx
@@ -6,7 +6,11 @@ import { create_workspace } from "lumium-renderer";
 import Router from "next/router";
 import { useState } from "react";
 
-const CreateWorkspace: React.FC = () => {
+interface createWorkspaceProps {
+    disclaimerButtonColor: string;
+}
+
+const CreateWorkspace = ({ disclaimerButtonColor }: createWorkspaceProps) => {
     const [showPassword, setShowPassword] = useState(false);
     const [credentialsMatchError, setCredentialsMatchError] = useState(false);
     const [step, setStep] = useState(1);
@@ -139,7 +143,7 @@ const CreateWorkspace: React.FC = () => {
                                 lumium cannot read your workspace content, except for some metadata (information like which users have access to which workspace, your workspace title, which page was created by which user, when was the last time a user has logged in etc.). We cannot read data like the titles/content of pages in your workspace.
                             </Text>
                             <Flex w="100%" mt={"5"} justifyContent="center">
-                                <Button backgroundColor={"darkgreen"} onClick={handleDownloadKeys} data-cy={"downloadButton"}>I have read the above disclaimer and understand my own responsibility</Button>
+                                <Button backgroundColor={disclaimerButtonColor} onClick={handleDownloadKeys} data-cy={"downloadButton"}>I have read the above disclaimer and understand my own responsibility</Button>
                             </Flex>
                         </>
                     )}
diff --git a/lumium-space/src/sections/workspace/NavBar.tsx b/lumium-space/src/sections/workspace/NavBar.tsx
index 6b959daf..0243c071 100644
--- a/lumium-space/src/sections/workspace/NavBar.tsx
+++ b/lumium-space/src/sections/workspace/NavBar.tsx
@@ -1,6 +1,5 @@
 import { MoonIcon, SunIcon } from "@chakra-ui/icons";
-import { Box, Image, Text, FlexProps, Flex, IconButton, Stack, HStack, Button, Menu, MenuButton, Avatar, VStack, MenuList, MenuItem, MenuDivider } from "@chakra-ui/react";
-import { useColorMode, useColorModeValue } from "@chakra-ui/system";
+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 { UserDTO, WorkspaceDTO } from "@types";
 import { FiMenu, FiBell, FiChevronDown } from "react-icons/fi";
 
@@ -13,10 +12,6 @@ interface MobileProps extends FlexProps {
 const MobileNav = ({ onOpen, userInfo, workspace, ...rest }: MobileProps) => {
     const { colorMode, toggleColorMode } = useColorMode();
 
-    const darkLogo = '/logo/svg/Black logo - no background.svg';
-    const lightLogo = '/logo/svg/White logo - no background.svg';
-    let logo = useColorModeValue(darkLogo, lightLogo);
-
     let role = ""
     if (userInfo?.id) {
         if (workspace?.ownerId == userInfo?.id) {
@@ -32,27 +27,24 @@ const MobileNav = ({ onOpen, userInfo, workspace, ...rest }: MobileProps) => {
 
     return (
         <Flex
-            ml={{ base: 0, md: 60 }}
-            px={{ base: 4, md: 4 }}
-            height="20"
-            alignItems="center"
+            alignItems={"Center"}
             borderBottomWidth="1px"
             borderBottomColor={useColorModeValue('gray.200', 'gray.700')}
-            justifyContent={{ base: 'space-between', md: 'flex-end' }}
-            {...rest}>
+            {...rest}
+            pl={{ base: "4%", md: "2%" }}
+            pr={{ base: "4%", md: "2%" }}
+            pt={"1vh"}
+            pb={"1vh"}
+        >
             <IconButton
-                display={{ base: 'flex', md: 'none' }}
+                display={'flex'}
                 onClick={onOpen}
                 variant="outline"
                 aria-label="open menu"
                 icon={<FiMenu />}
             />
-
-            <Stack align={'center'} display={{ base: 'flex', md: 'none' }}>
-                <Image src={logo} minWidth={"70%"} maxWidth={"80%"} maxH={20} alt="lumium logo" />
-            </Stack>
-
-            <HStack spacing={{ base: '0', md: '6' }}>
+            <Spacer />
+            <HStack>
                 <IconButton
                     size="lg"
                     variant="ghost"
@@ -62,12 +54,13 @@ const MobileNav = ({ onOpen, userInfo, workspace, ...rest }: MobileProps) => {
                 <Button onClick={toggleColorMode} data-cy="switchThemeButton" mr="1%">
                     {colorMode === 'light' && <MoonIcon /> || <SunIcon />}
                 </Button>
-                <Flex alignItems={'center'}>
+                <Flex>
                     <Menu>
                         <MenuButton
                             py={2}
                             transition="all 0.3s"
-                            _focus={{ boxShadow: 'none' }}>
+                            _focus={{ boxShadow: 'none' }}
+                        >
                             <HStack>
                                 <Avatar
                                     size={'sm'}
@@ -76,7 +69,7 @@ const MobileNav = ({ onOpen, userInfo, workspace, ...rest }: MobileProps) => {
                                     }
                                 />
                                 <VStack
-                                    display={{ base: 'none', md: 'flex' }}
+                                    display={'flex'}
                                     alignItems="flex-start"
                                     spacing="1px"
                                     ml="2">
@@ -85,7 +78,7 @@ const MobileNav = ({ onOpen, userInfo, workspace, ...rest }: MobileProps) => {
                                         {role}
                                     </Text>
                                 </VStack>
-                                <Box display={{ base: 'none', md: 'flex' }}>
+                                <Box display={'flex'}>
                                     <FiChevronDown />
                                 </Box>
                             </HStack>
@@ -101,7 +94,7 @@ const MobileNav = ({ onOpen, userInfo, workspace, ...rest }: MobileProps) => {
                     </Menu>
                 </Flex>
             </HStack>
-        </Flex>
+        </Flex >
     );
 };
 export default MobileNav;
diff --git a/lumium-space/src/sections/workspace/SideBar.tsx b/lumium-space/src/sections/workspace/SideBar.tsx
index 65ad8179..0a63edf1 100644
--- a/lumium-space/src/sections/workspace/SideBar.tsx
+++ b/lumium-space/src/sections/workspace/SideBar.tsx
@@ -2,7 +2,7 @@ import { BoxProps, Link, Image, useDisclosure, Modal, ModalOverlay, ModalContent
 import { useColorModeValue } from "@chakra-ui/system";
 import CreateWorkspace from "@components/forms/CreateWorkspace";
 import { WorkspaceDTO, UserDTO } from "@types";
-import { ReactText } from "react";
+import { ReactElement, ReactText } from "react";
 import { IconType } from "react-icons";
 import { FiHome, FiTrendingUp, FiCompass, FiStar, FiSettings, FiChevronDown, FiLock, FiPlus } from "react-icons/fi";
 
@@ -32,62 +32,57 @@ const NavItem = ({ icon, children, ...rest }: NavItemProps) => {
 
 interface LinkItemProps {
     name: string;
-    icon: IconType;
+    icon: ReactElement;
 }
 const LinkItems: Array<LinkItemProps> = [
-    { name: 'Home', icon: FiHome },
-    { name: 'Trending', icon: FiTrendingUp },
-    { name: 'Explore', icon: FiCompass },
-    { name: 'Favourites', icon: FiStar },
-    { name: 'Settings', icon: FiSettings },
+    { name: 'Home', icon: <FiHome /> },
+    { name: 'Trending', icon: <FiTrendingUp /> },
+    { name: 'Explore', icon: <FiCompass /> },
+    { name: 'Favourites', icon: <FiStar /> },
+    { name: 'Settings', icon: <FiSettings /> },
 ];
 
 interface SidebarProps extends BoxProps {
     onSelfClose: () => void;
-    workspace?: WorkspaceDTO;
-    userInfo?: UserDTO;
+    workspace: WorkspaceDTO | undefined;
+    userInfo: UserDTO | undefined;
+    logo: string;
+    disclaimerButtonColor: string;
 }
 
-const SideBar = ({ onSelfClose, workspace, userInfo, ...rest }: SidebarProps) => {
-    const darkLogo = '/logo/svg/Black logo - no background.svg';
-    const lightLogo = '/logo/svg/White logo - no background.svg';
-    let logo = useColorModeValue(darkLogo, lightLogo);
+const SideBar = ({ onSelfClose, workspace, userInfo, logo, backgroundColor, disclaimerButtonColor, ...rest }: SidebarProps) => {
 
     const { isOpen, onOpen, onClose } = useDisclosure();
 
-    const workspaceCreateModal = (
-        <Modal isOpen={isOpen} onClose={onClose}>
-            <ModalOverlay />
-            <ModalContent maxW={800}>
-                <ModalHeader>Create a new workspace</ModalHeader>
-                <ModalCloseButton />
-                <ModalBody >
-                    <CreateWorkspace />
-                </ModalBody>
-            </ModalContent>
-        </Modal>
-    );
-
     return (
         <Flex
             flexDir={"column"}
             transition="3s ease"
-            borderRight="1px"
-            borderRightColor={useColorModeValue('gray.200', 'gray.700')}
-            w={{ base: 'full', md: 60 }}
             pos="fixed"
             h="100%"
-            {...rest}>
-            {workspaceCreateModal}
+            width={"100%"}
+            {...rest}
+            backgroundColor={backgroundColor}
+        >
+            <Modal isOpen={isOpen} onClose={onClose}>
+                <ModalOverlay />
+                <ModalContent maxW={800}>
+                    <ModalHeader>Create a new workspace</ModalHeader>
+                    <ModalCloseButton />
+                    <ModalBody >
+                        <CreateWorkspace disclaimerButtonColor={disclaimerButtonColor} />
+                    </ModalBody>
+                </ModalContent>
+            </Modal>
             <Flex h="20" alignItems="center" justifyContent="center">
                 <Stack align={'center'} display={'flex'}>
                     <Image src={logo} minWidth={"70%"} maxWidth={"80%"} maxH={20} alt="lumium logo" />
                 </Stack>
-                <CloseButton display={{ base: 'flex', md: 'none' }} onClick={onSelfClose} />
+                <CloseButton display={'flex'} onClick={onSelfClose} />
             </Flex>
             {workspace?.name &&
                 <Menu>
-                    <MenuButton p={"2"} bg="none" w="100%" as={Button} leftIcon={<FiChevronDown />} overflow={"hidden"}>
+                    <MenuButton bg="none" w="100%" as={Button} leftIcon={<FiChevronDown />} overflow={"hidden"} justifyContent={{ base: "center", md: "flex-start" }}>
                         {workspace?.name}
                     </MenuButton>
                     <MenuList>
@@ -119,15 +114,15 @@ const SideBar = ({ onSelfClose, workspace, userInfo, ...rest }: SidebarProps) =>
                     </MenuList>
                 </Menu>
             }
-            <Divider mb="2" />
-            <NavItem h="1%" w="100%" icon={FiPlus} mb="2" mt="2" as={Button} bg="none">
+            <Divider />
+            <Button leftIcon={<FiPlus />} as={Button} bg="none" justifyContent={{ base: "center", md: "flex-start" }}>
                 New page
-            </NavItem>
-            <Divider mt="2" mb="2" />
+            </Button>
+            <Divider />
             {LinkItems.map((link) => (
-                <NavItem h="1%" w="100%" key={link.name} icon={link.icon} as={Button} bg="none">
+                <Button key={link.name} leftIcon={link.icon} as={Button} bg="none" justifyContent={{ base: "center", md: "flex-start" }}>
                     {link.name}
-                </NavItem>
+                </Button>
             ))}
         </Flex>
     );