From ddda23717867cc74010ace99a76877f0f0cc59d4 Mon Sep 17 00:00:00 2001 From: Lakhan Samani Date: Wed, 19 Jan 2022 22:20:25 +0530 Subject: [PATCH] fix(dashboard): layout --- app/src/App.tsx | 4 - dashboard/src/App.tsx | 1 + dashboard/src/components/Menu.tsx | 215 ++++++++++++++++++++++ dashboard/src/components/Sidebar.tsx | 78 -------- dashboard/src/layouts/AuthLayout.tsx | 35 ++-- dashboard/src/layouts/DashboardLayout.tsx | 43 ++++- dashboard/src/pages/Auth.tsx | 43 ++++- dashboard/src/pages/Environment.tsx | 6 + dashboard/src/pages/Home.tsx | 13 +- dashboard/src/pages/Users.tsx | 8 +- dashboard/src/routes/index.tsx | 45 +++-- 11 files changed, 350 insertions(+), 141 deletions(-) create mode 100644 dashboard/src/components/Menu.tsx delete mode 100644 dashboard/src/components/Sidebar.tsx create mode 100644 dashboard/src/pages/Environment.tsx diff --git a/app/src/App.tsx b/app/src/App.tsx index e902d35..de1c9c7 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -42,11 +42,7 @@ export default function App() { >>>>>> main redirectURL: globalState.redirectURL, }} > diff --git a/dashboard/src/App.tsx b/dashboard/src/App.tsx index 24fe062..15d433d 100644 --- a/dashboard/src/App.tsx +++ b/dashboard/src/App.tsx @@ -18,6 +18,7 @@ const theme = extendTheme({ styles: { global: { 'html, body, #root': { + fontFamily: 'Avenir, Helvetica, Arial, sans-serif', height: '100%', }, }, diff --git a/dashboard/src/components/Menu.tsx b/dashboard/src/components/Menu.tsx new file mode 100644 index 0000000..384edd2 --- /dev/null +++ b/dashboard/src/components/Menu.tsx @@ -0,0 +1,215 @@ +import React, { ReactNode } from 'react'; +import { + IconButton, + Avatar, + Box, + CloseButton, + Flex, + Image, + HStack, + VStack, + Icon, + useColorModeValue, + Link, + Text, + BoxProps, + FlexProps, + Menu, + MenuButton, + MenuItem, + MenuList, +} from '@chakra-ui/react'; +import { + FiHome, + FiTrendingUp, + FiCompass, + FiStar, + FiSettings, + FiMenu, + FiUser, + FiUsers, + FiChevronDown, +} from 'react-icons/fi'; +import { IconType } from 'react-icons'; +import { ReactText } from 'react'; +import { useMutation } from 'urql'; +import { NavLink, useNavigate, useLocation } from 'react-router-dom'; +import { useAuthContext } from '../contexts/AuthContext'; +import { AdminLogout } from '../graphql/mutation'; + +interface LinkItemProps { + name: string; + icon: IconType; + route: string; +} +const LinkItems: Array = [ + { name: 'Home', icon: FiHome, route: '/' }, + { name: 'Users', icon: FiUsers, route: '/users' }, + { name: 'Environment Variables', icon: FiSettings, route: '/environment' }, +]; + +interface SidebarProps extends BoxProps { + onClose: () => void; +} + +export const Sidebar = ({ onClose, ...rest }: SidebarProps) => { + const { pathname } = useLocation(); + return ( + + + + + logo + + AUTHORIZER + + + + + + {LinkItems.map((link) => ( + + + {link.name} + + + ))} + + ); +}; + +interface NavItemProps extends FlexProps { + icon: IconType; + children: ReactText; +} +export const NavItem = ({ icon, children, ...rest }: NavItemProps) => { + return ( + + + {icon && ( + + )} + {children} + + + ); +}; + +interface MobileProps extends FlexProps { + onOpen: () => void; +} +export const MobileNav = ({ onOpen, ...rest }: MobileProps) => { + const [_, logout] = useMutation(AdminLogout); + const { setIsLoggedIn } = useAuthContext(); + const navigate = useNavigate(); + + const handleLogout = async () => { + await logout(); + setIsLoggedIn(false); + navigate('/', { replace: true }); + }; + + return ( + + } + /> + + logo + + + + + + + + + Admin + + + + + + + + Sign out + + + + + + ); +}; diff --git a/dashboard/src/components/Sidebar.tsx b/dashboard/src/components/Sidebar.tsx deleted file mode 100644 index ab82762..0000000 --- a/dashboard/src/components/Sidebar.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { Box, Image, Link, Text, Button } from '@chakra-ui/react'; -import { NavLink, useLocation, useNavigate } from 'react-router-dom'; -import React from 'react'; -import { LOGO_URL } from '../constants'; -import { useMutation } from 'urql'; -import { AdminLogout } from '../graphql/mutation'; -import { useAuthContext } from '../contexts/AuthContext'; - -const routes = [ - { - route: '/users', - name: 'Users', - }, - { - route: '/', - name: 'Environment Variable', - }, -]; - -export const Sidebar = () => { - const { pathname } = useLocation(); - const [_, logout] = useMutation(AdminLogout); - const { setIsLoggedIn } = useAuthContext(); - const navigate = useNavigate(); - - const handleLogout = async () => { - await logout(); - setIsLoggedIn(false); - navigate('/', { replace: true }); - }; - - return ( - - - - - - Authorizer - - - - {routes.map(({ route, name }: any) => ( - - {name} - - ))} - - - - - - ); -}; diff --git a/dashboard/src/layouts/AuthLayout.tsx b/dashboard/src/layouts/AuthLayout.tsx index 4ce69e5..f115b38 100644 --- a/dashboard/src/layouts/AuthLayout.tsx +++ b/dashboard/src/layouts/AuthLayout.tsx @@ -4,23 +4,28 @@ import { LOGO_URL } from '../constants'; export function AuthLayout({ children }: { children: React.ReactNode }) { return ( - -
- - - - Authorizer + + + logo + + AUTHORIZER -
-
+ + + {children} -
+ ); } diff --git a/dashboard/src/layouts/DashboardLayout.tsx b/dashboard/src/layouts/DashboardLayout.tsx index 03ce24f..98cac39 100644 --- a/dashboard/src/layouts/DashboardLayout.tsx +++ b/dashboard/src/layouts/DashboardLayout.tsx @@ -1,16 +1,39 @@ -import { Box, Flex } from '@chakra-ui/react'; -import React from 'react'; -import { Sidebar } from '../components/Sidebar'; +import { + Box, + Drawer, + DrawerContent, + useDisclosure, + useColorModeValue, +} from '@chakra-ui/react'; +import React, { ReactNode } from 'react'; +import { Sidebar, MobileNav } from '../components/Menu'; -export function DashboardLayout({ children }: { children: React.ReactNode }) { +export function DashboardLayout({ children }: { children: ReactNode }) { + const { isOpen, onOpen, onClose } = useDisclosure(); return ( - - - - - + + onClose} + display={{ base: 'none', md: 'block' }} + /> + + + + + + {/* mobilenav */} + + {children} - + ); } diff --git a/dashboard/src/pages/Auth.tsx b/dashboard/src/pages/Auth.tsx index f8f7574..36b8b75 100644 --- a/dashboard/src/pages/Auth.tsx +++ b/dashboard/src/pages/Auth.tsx @@ -5,6 +5,8 @@ import { Input, useToast, VStack, + Text, + Divider, } from '@chakra-ui/react'; import React, { useEffect } from 'react'; import { useMutation } from 'urql'; @@ -15,7 +17,7 @@ import { useNavigate } from 'react-router-dom'; import { useAuthContext } from '../contexts/AuthContext'; import { capitalizeFirstLetter, hasAdminSecret } from '../utils'; -export const Auth = () => { +export default function Auth() { const [loginResult, login] = useMutation(AdminLogin); const [signUpResult, signup] = useMutation(AdminSignup); const { setIsLoggedIn } = useAuthContext(); @@ -40,8 +42,8 @@ export const Auth = () => { (isLogin ? login : signup)({ secret: formValues['admin-secret'], }).then((res) => { - setIsLoggedIn(true); if (res.data) { + setIsLoggedIn(true); navigate('/', { replace: true }); } }); @@ -64,12 +66,24 @@ export const Auth = () => { return ( + + Hi there 👋
+ + + Welcome to Authorizer Administrative Dashboard +
- + - - {isLogin ? 'Enter' : 'Setup'} Admin Secret - + {/* + {isLogin ? 'Enter' : 'Configure'} Admin Secret + */} { > {isLogin ? 'Login' : 'Sign up'} + {isLogin ? ( + + Note: In case if you have forgot your admin secret, you can + reset it by updating ADMIN_SECRET environment + variable. For more information, please refer to the{' '} + documentation. + + ) : ( + + Note: You can also configure admin secret by setting{' '} + ADMIN_SECRET environment variable. For more + information, please refer to the{' '} + documentation. + + )}
); -}; +} diff --git a/dashboard/src/pages/Environment.tsx b/dashboard/src/pages/Environment.tsx new file mode 100644 index 0000000..8f4300e --- /dev/null +++ b/dashboard/src/pages/Environment.tsx @@ -0,0 +1,6 @@ +import { Box } from '@chakra-ui/react'; +import React from 'react'; + +export default function Environment() { + return Welcome to Environment Page; +} diff --git a/dashboard/src/pages/Home.tsx b/dashboard/src/pages/Home.tsx index 2fd4335..f530244 100644 --- a/dashboard/src/pages/Home.tsx +++ b/dashboard/src/pages/Home.tsx @@ -1,6 +1,11 @@ -import { Box } from "@chakra-ui/react"; -import React from "react"; +import { Box } from '@chakra-ui/react'; +import React from 'react'; -export function Home() { - return Welcome to Authorizer dashboard!; +export default function Home() { + return ( + + Hi there 👋
+ Welcome to Authorizer administrative dashboard! + + ); } diff --git a/dashboard/src/pages/Users.tsx b/dashboard/src/pages/Users.tsx index 3f97712..88b41ce 100644 --- a/dashboard/src/pages/Users.tsx +++ b/dashboard/src/pages/Users.tsx @@ -1,6 +1,6 @@ -import { Box } from "@chakra-ui/react"; -import React from "react"; +import { Box } from '@chakra-ui/react'; +import React from 'react'; -export function Users() { - return users; +export default function Users() { + return Welcome to Users Page; } diff --git a/dashboard/src/routes/index.tsx b/dashboard/src/routes/index.tsx index a967160..b4636af 100644 --- a/dashboard/src/routes/index.tsx +++ b/dashboard/src/routes/index.tsx @@ -1,34 +1,41 @@ -import React from 'react'; +import React, { lazy, Suspense } from 'react'; import { Outlet, Route, Routes } from 'react-router-dom'; import { useAuthContext } from '../contexts/AuthContext'; import { DashboardLayout } from '../layouts/DashboardLayout'; -import { Auth } from '../pages/Auth'; -import { Home } from '../pages/Home'; -import { Users } from '../pages/Users'; + +const Auth = lazy(() => import('../pages/Auth')); +const Environment = lazy(() => import('../pages/Environment')); +const Home = lazy(() => import('../pages/Home')); +const Users = lazy(() => import('../pages/Users')); export const AppRoutes = () => { const { isLoggedIn } = useAuthContext(); if (isLoggedIn) { return ( - - - - - } - > - } /> - } /> - - + }> + + + + + } + > + } /> + } /> + } /> + + + ); } return ( - - } /> - + }> + + } /> + + ); };