Skip to content

Commit

Permalink
feat: add closeable sidebar
Browse files Browse the repository at this point in the history 
feat: add password for workspace
refactor: remove account folder
fix: background color for sidebar
  • Loading branch information
@ReddixT
ReddixT committed Jan 3, 2023
1 parent ef3ce5b commit 5167100
Show file tree
Hide file tree
Showing 6 changed files with 145 additions and 82 deletions.
103 changes: 88 additions & 15 deletions lumium-space/pages/[workspaceId]/[[...pageId]].tsx
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -14,46 +14,119 @@ 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();
const { workspaceId, pageId } = router.query;
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}
placement="left"
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 />
Expand Down
0 lumium-space/pages/account/index.tsx → lumium-space/pages/account.tsx
View file
File renamed without changes.
2 changes: 0 additions & 2 deletions lumium-space/pages/auth/signin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand Down
8 changes: 6 additions & 2 deletions lumium-space/src/components/forms/CreateWorkspace.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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>
</>
)}
Expand Down
41 changes: 17 additions & 24 deletions lumium-space/src/sections/workspace/NavBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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) {
Expand All @@ -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"
Expand All @@ -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'}
Expand All @@ -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">
Expand All @@ -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>
Expand All @@ -101,7 +94,7 @@ const MobileNav = ({ onOpen, userInfo, workspace, ...rest }: MobileProps) => {
</Menu>
</Flex>
</HStack>
</Flex>
</Flex >
);
};
export default MobileNav;
73 changes: 34 additions & 39 deletions lumium-space/src/sections/workspace/SideBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
);
Expand Down

0 comments on commit 5167100

Please sign in to comment.