Add files via upload

InfinityInnovator · Jul 23, 2024 · 43687ea · 43687ea
1 parent 558a923
commit 43687ea
Show file tree

Hide file tree

Showing 8 changed files with 339 additions and 0 deletions.
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,24 @@
+// src/App.js
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Login from './pages/LoginPage';
+import Dashboard from './pages/DashboadPage';
+import { ChakraProvider, Box } from '@chakra-ui/react';
+import Callback from './pages/CallbackPage'
+
+function App() {
+  return (
+    <ChakraProvider>
+      <Router>
+            <Routes>
+              <Route path="/" element={<Login />} />
+              <Route path="/dashboard" element={<Dashboard />} />
+              {/* <Route path="/dashboard" element={<Dashboard />} /> */}
+              <Route path="/auth/discord/callback" element={<Callback />} />
+            </Routes>
+      </Router>
+    </ChakraProvider>
+  );
+}
+
+export default App;
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -0,0 +1,40 @@
+// src/components/Navbar.js
+import React from 'react';
+import { Flex, Box, Text, Link, Button } from '@chakra-ui/react';
+import { useNavigate } from 'react-router-dom';
+
+const Navbar = () => {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    // Handle logout logic here
+    // For example, clearing session and redirecting to login
+    window.location.href = '/logout'; // Assuming logout is handled by the server
+  };
+
+  return (
+    <Flex
+      as="nav"
+      bg="gray.900"
+      color="white"
+      padding={4}
+      align="center"
+      justify="space-between"
+    >
+      <Box>
+        <Text fontSize="xl" fontWeight="bold">My Dashboard</Text>
+      </Box>
+      <Flex>
+        <Link
+          href="/"
+          mx={4}
+          _hover={{ textDecoration: 'none', color: 'gray.300' }}
+        >
+          Home
+        </Link>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default Navbar;
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
@@ -0,0 +1,104 @@
+import React from 'react';
+import { Box, Flex, Text, Link, VStack, IconButton, useDisclosure, Avatar, Divider, Heading } from '@chakra-ui/react';
+import { HamburgerIcon, CloseIcon, SettingsIcon, InfoOutlineIcon, AtSignIcon, EditIcon, QuestionIcon } from '@chakra-ui/icons';
+import { Link as RouterLink } from 'react-router-dom';
+
+const Sidebar = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  return (
+    <Flex
+      as="nav"
+      direction="column"
+      width={{ base: isOpen ? 'full' : '60px', md: '250px' }}
+      height="100vh"
+      bg="gray.900"
+      color="white"
+      p={4}
+      position="fixed"
+      top={0}
+      left={0}
+      transition="width 0.3s ease"
+      zIndex={1}
+    >
+      <Flex justifyContent="space-between" alignItems="center" mb={4}>
+        <IconButton
+          aria-label="Open Sidebar"
+          icon={<HamburgerIcon />}
+          size="lg"
+          colorScheme="teal"
+          bg="teal.500"
+          _hover={{ bg: "teal.600" }}
+          display={{ base: isOpen ? 'none' : 'block', md: 'none' }}
+          onClick={onOpen}
+        />
+        <IconButton
+          aria-label="Close Sidebar"
+          icon={<CloseIcon />}
+          size="lg"
+          colorScheme="teal"
+          bg="teal.500"
+          _hover={{ bg: "teal.600" }}
+          display={{ base: isOpen ? 'block' : 'none', md: 'none' }}
+          onClick={onClose}
+        />
+        <Avatar size="md" name="User Name" src="https://bit.ly/sage-adebayo" display={{ base: 'block', md: 'none' }} />
+      </Flex>
+
+      <Flex align="center" mb={6} display={{ base: 'none', md: 'flex' }}>
+        <Avatar size="lg" name="User Name" src="https://bit.ly/sage-adebayo" />
+        <Box ml={3}>
+          <Text fontSize="lg" fontWeight="bold">User Name</Text>
+          <Text fontSize="sm" color="gray.400">[email protected]</Text>
+        </Box>
+      </Flex>
+
+      <Divider mb={4} borderColor="gray.600" display={{ base: isOpen ? 'block' : 'none', md: 'block' }} />
+
+      <VStack
+        spacing={4}
+        display={{ base: isOpen ? 'block' : 'none', md: 'block' }}
+        align="start"
+      >
+        <Heading as="h3" size="sm" color="gray.400">General</Heading>
+        <Link as={RouterLink} to="/dashboard" display="flex" alignItems="center">
+          <EditIcon mr={2} />
+          <Text fontSize="lg" _hover={{ textDecoration: 'underline' }}>Dashboard</Text>
+        </Link>
+        <Link as={RouterLink} to="/profile" display="flex" alignItems="center">
+          <AtSignIcon mr={2} />
+          <Text fontSize="lg" _hover={{ textDecoration: 'underline' }}>Profile</Text>
+        </Link>
+
+        <Heading as="h3" size="sm" color="gray.400" mt={4}>Settings</Heading>
+        <Link as={RouterLink} to="/settings" display="flex" alignItems="center">
+          <SettingsIcon mr={2} />
+          <Text fontSize="lg" _hover={{ textDecoration: 'underline' }}>Account Settings</Text>
+        </Link>
+        <Link as={RouterLink} to="/privacy" display="flex" alignItems="center">
+          <InfoOutlineIcon mr={2} />
+          <Text fontSize="lg" _hover={{ textDecoration: 'underline' }}>Privacy Settings</Text>
+        </Link>
+
+        <Heading as="h3" size="sm" color="gray.400" mt={4}>Support</Heading>
+        <Link as={RouterLink} to="/help" display="flex" alignItems="center">
+          <QuestionIcon mr={2} />
+          <Text fontSize="lg" _hover={{ textDecoration: 'underline' }}>Help Center</Text>
+        </Link>
+        <Link as={RouterLink} to="/contact" display="flex" alignItems="center">
+          <AtSignIcon mr={2} />
+          <Text fontSize="lg" _hover={{ textDecoration: 'underline' }}>Contact Us</Text>
+        </Link>
+        {/* Add more categories and links as needed */}
+      </VStack>
+
+      <Divider mt={6} borderColor="gray.600" display={{ base: isOpen ? 'block' : 'none', md: 'block' }} />
+
+      <Box mt={6} display={{ base: isOpen ? 'block' : 'none', md: 'block' }}>
+        <Text fontSize="sm" color="gray.400">© 2024 Your Company</Text>
+      </Box>
+    </Flex>
+  );
+};
+
+export default Sidebar;
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,14 @@
+// src/index.js
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import { ChakraProvider } from '@chakra-ui/react'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <ChakraProvider>
+    <App />
+    </ChakraProvider>
+  </React.StrictMode>,
+  document.getElementById('root')
+);
diff --git a/src/pages/CallbackPage.js b/src/pages/CallbackPage.js
@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Box, Spinner, Text, Progress } from '@chakra-ui/react';
+
+const Callback = () => {
+  const navigate = useNavigate();
+  const [message, setMessage] = useState('');
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      // Simulate a delay to mimic a longer authentication process
+      await new Promise(resolve => setTimeout(resolve, 5000)); // 5-second delay
+
+      // Replace with your actual API call to check authentication
+      const response = await fetch('/auth/check');
+      if (response.ok) {
+        setMessage('Login request authorized');
+        setLoading(false);
+        setTimeout(() => navigate('/dashboard'), 2000); // Redirect after 2 seconds
+      } else {
+        setMessage('Authentication failed');
+        setLoading(false);
+        setTimeout(() => navigate('/'), 2000); // Redirect after 2 seconds
+      }
+    };
+
+    checkAuth();
+  }, [navigate]);
+
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+      height="100vh"
+      bg="gray.800"
+      color="white"
+      textAlign="center"
+    >
+      <Box width="100%" mb={4}>
+        <Progress size="xs" isIndeterminate colorScheme="green" />
+      </Box>
+      <Spinner size="xl" color="green.400" mb={4} />
+      <Text fontSize="xl">
+        {loading ? 'Loading...' : <span style={{ color: 'green' }}>{message}</span>}
+      </Text>
+    </Box>
+  );
+};
+
+export default Callback;
diff --git a/src/pages/DashboadPage.js b/src/pages/DashboadPage.js
@@ -0,0 +1,25 @@
+// DashboardPage.js
+import React from 'react';
+import { Box, Button, Heading, Text } from '@chakra-ui/react';
+import Sidebar from '../components/Sidebar';
+import Navbar from '../components/Navbar';
+
+const DashboardPage = () => {
+
+  return (
+    <Box display="flex" height="100vh">
+          <Sidebar />
+          <Box
+            flex="1"
+            ml={{ base: 0, md: '250px' }} // Adjust margin for larger screens
+            mb="60px" // Ensure space for the navbar
+            p={4}
+            overflow="auto"
+          >
+            <Navbar />
+        </Box>
+    </Box>
+  );
+};
+
+export default DashboardPage;
diff --git a/src/pages/LoginPage.js b/src/pages/LoginPage.js
@@ -0,0 +1,36 @@
+// src/pages/Login.js
+import React from 'react';
+import { Flex, Button, Text, Box } from '@chakra-ui/react';
+
+const Login = () => {
+  const discordAuthURL = `https://discord.com/oauth2/authorize?client_id=1161839731286478989&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Fdiscord%2Fcallback&scope=identify+guilds`;
+
+  return (
+    <Flex
+      align="center"
+      justify="center"
+      height="100vh"
+      bg="gray.800"
+      color="white"
+      direction="column"
+      textAlign="center"
+    >
+      <Box>
+        <Text fontSize="2xl" mb={4}>
+          Welcome to the Discord Bot Dashboard
+        </Text>
+        <Button
+          as="a"
+          href={discordAuthURL}
+          colorScheme="blue"
+          size="lg"
+          variant="solid"
+        >
+          Login with Discord
+        </Button>
+      </Box>
+    </Flex>
+  );
+};
+
+export default Login;