Merge pull request #1 from KaladinStormBlessed16/2-Create_Project

UI design update
Racks-Community · Sep 2, 2022 · 13153a0 · 13153a0
2 parents a4f8bb3 + 50b073e
commit 13153a0
Show file tree

Hide file tree

Showing 8 changed files with 285 additions and 68 deletions.
diff --git a/pages/_app.js b/pages/_app.js
@@ -58,6 +58,7 @@ function MyApp({ Component, pageProps }) {
         setAuthenticationStatus("authenticated");
         const data = await res.json();
         dispatch(setUserInfo(data.user));
+        setLoginStatus(true);
       }
     };
 
@@ -122,9 +123,9 @@ function MyApp({ Component, pageProps }) {
         <RainbowKitProvider
           chains={chains}
           theme={darkTheme({
-            accentColor: "#55f4b2",
+            accentColor: "#FEFE0E",
             overlayBlur: "small",
-            borderRadius: "small",
+            borderRadius: "none",
             accentColorForeground: "#1A202C",
           })}
           modalSize="compact"

diff --git a/pages/admin.js b/pages/admin.js
@@ -26,6 +26,9 @@ const Admin = () => {
 
   const handleShow = () => setShow(!show);
   const handleInvalidPassword = () => setIsPasswordInvalid(false);
+  const handleClose = () => {
+    router.push("/");
+  };
 
   const handleSubmit = async (event) => {
     event.preventDefault();
@@ -54,61 +57,85 @@ const Admin = () => {
   };
 
   return (
-    <Modal isOpen={true} onClose={() => router.push("/")}>
-      <ModalContent mt="15%">
-        <ModalHeader className="text-center">ADMIN LOGIN</ModalHeader>
-        <ModalCloseButton colorScheme="teal" />
-        <form onSubmit={handleSubmit}>
-          <ModalBody pb={6}>
-            <FormControl isRequired>
-              <FormLabel>Email</FormLabel>
-              <Input
-                type="email"
-                placeholder="Email"
-                focusBorderColor="teal.400"
-                pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
-              />
-            </FormControl>
-
-            <FormControl mt={4} isRequired isInvalid={isPasswordInvalid}>
-              <FormLabel>Password</FormLabel>
-              <InputGroup size="md">
+    <div className="bg-overlay">
+      <Modal isOpen={true} onClose={handleClose}>
+        <ModalContent mt="15%">
+          <ModalHeader className="text-center">ADMIN LOGIN</ModalHeader>
+          <ModalCloseButton colorScheme="teal" />
+          <form onSubmit={handleSubmit}>
+            <ModalBody pb={6}>
+              <FormControl isRequired>
+                <FormLabel>Email</FormLabel>
                 <Input
-                  type={show ? "text" : "password"}
-                  placeholder="Password"
-                  focusBorderColor="teal.400"
-                  pattern="[A-Za-z0-9_]{5,15}"
-                  onChange={handleInvalidPassword}
+                  type="email"
+                  placeholder="Email"
+                  focusBorderColor="white"
+                  borderRadius={"none"}
+                  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
                 />
-                <InputRightElement width="4.5rem">
-                  <Button h="1.75rem" size="sm" onClick={handleShow}>
-                    {show ? "Hide" : "Show"}
-                  </Button>
-                </InputRightElement>
-              </InputGroup>
-              {isPasswordInvalid && (
-                <FormErrorMessage mb="-1.7rem">
-                  Wrong Credentials
-                </FormErrorMessage>
-              )}
-            </FormControl>
-          </ModalBody>
+              </FormControl>
+
+              <FormControl mt={4} isRequired isInvalid={isPasswordInvalid}>
+                <FormLabel>Password</FormLabel>
+                <InputGroup size="md">
+                  <Input
+                    type={show ? "text" : "password"}
+                    placeholder="Password"
+                    focusBorderColor="white"
+                    borderRadius={"none"}
+                    pattern="[A-Za-z0-9_]{5,15}"
+                    onChange={handleInvalidPassword}
+                  />
+                  <InputRightElement width="4.5rem">
+                    <Button h="1.75rem" size="sm" onClick={handleShow}>
+                      {show ? "Hide" : "Show"}
+                    </Button>
+                  </InputRightElement>
+                </InputGroup>
+                {isPasswordInvalid && (
+                  <FormErrorMessage mb="-1.7rem">
+                    Wrong Credentials
+                  </FormErrorMessage>
+                )}
+              </FormControl>
+            </ModalBody>
 
-          <ModalFooter>
-            <Button type="submit" colorScheme="whatsapp" variant="solid" mr={3}>
-              Login
-            </Button>
-            <Button
-              onClick={() => router.push("/")}
-              colorScheme="teal"
-              variant="outline"
-            >
-              Cancel
-            </Button>
-          </ModalFooter>
-        </form>
-      </ModalContent>
-    </Modal>
+            <ModalFooter>
+              <Button
+                type="submit"
+                bg="white"
+                color="black"
+                variant="solid"
+                borderRadius={"none"}
+                _hover={{
+                  bg: "#dddfe2",
+                }}
+                _active={{
+                  bg: "#dddfe2",
+                  transform: "scale(1.05)",
+                }}
+                mr={3}
+              >
+                Login
+              </Button>
+              <Button
+                onClick={handleClose}
+                colorScheme="white"
+                variant="outline"
+                borderRadius={"none"}
+                _hover={{ bg: "#dddfe236" }}
+                _active={{
+                  bg: "#dddfe236",
+                  transform: "scale(1.05)",
+                }}
+              >
+                Cancel
+              </Button>
+            </ModalFooter>
+          </form>
+        </ModalContent>
+      </Modal>
+    </div>
   );
 };
 

diff --git a/pages/chakra_theme/theme.js b/pages/chakra_theme/theme.js
@@ -20,6 +20,9 @@ function CustomChakraProvider({ children }) {
       <ColorModeProvider
         options={{
           initialColorMode: "dark",
+          colors: {
+            accent: "#FEFE0E",
+          },
         }}
         value={resolvedTheme}
       >

diff --git a/pages/components/CreateProjectComponent.js b/pages/components/CreateProjectComponent.js
@@ -0,0 +1,117 @@
+import React, { useState } from "react";
+import { useSelector } from "react-redux";
+import { selectUserInfo } from "../../store/userSlice";
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  ModalCloseButton,
+  ModalBody,
+  FormControl,
+  FormLabel,
+  Input,
+  ModalFooter,
+  Button,
+} from "@chakra-ui/react";
+
+const CreateProjectComponent = ({ isOpen, setIsOpen }) => {
+  const user = useSelector(selectUserInfo);
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    const projectData = {
+      email: event?.target[0]?.value,
+      password: event?.target[1]?.value,
+    };
+
+    if (user.role === "admin") {
+      const res = await fetch(API_URL + "login", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(projectData),
+      });
+
+      if (res?.ok) {
+        const data = await res.json();
+        localStorage.setItem("token", "Bearer " + data.token);
+        localStorage.setItem("manualLogin", true);
+        dispatch(setUserInfo(data.user));
+        router.push("/");
+      } else {
+        setIsPasswordInvalid(true);
+      }
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+      <ModalOverlay />
+      <ModalContent mt="15%">
+        <ModalHeader className="text-center">CREATE PROJECT</ModalHeader>
+        <ModalCloseButton colorScheme="teal" />
+        <form onSubmit={handleSubmit}>
+          <ModalBody pb={6}>
+            <FormControl isRequired>
+              <FormLabel>Email</FormLabel>
+              <Input
+                type="email"
+                placeholder="Email"
+                focusBorderColor="white"
+                borderRadius={"none"}
+              />
+            </FormControl>
+
+            <FormControl mt={4} isRequired>
+              <FormLabel>Password</FormLabel>
+              <Input
+                type="text"
+                placeholder="Password"
+                focusBorderColor="white"
+                borderRadius={"none"}
+              />
+            </FormControl>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button
+              type="submit"
+              bg="white"
+              color="black"
+              variant="solid"
+              borderRadius={"none"}
+              _hover={{
+                bg: "#dddfe2",
+              }}
+              _active={{
+                bg: "#dddfe2",
+                transform: "scale(1.05)",
+              }}
+              mr={3}
+            >
+              Login
+            </Button>
+            <Button
+              onClick={() => setIsOpen(false)}
+              colorScheme="white"
+              variant="outline"
+              borderRadius={"none"}
+              _hover={{ bg: "#dddfe236" }}
+              _active={{
+                bg: "#dddfe236",
+                transform: "scale(1.05)",
+              }}
+            >
+              Cancel
+            </Button>
+          </ModalFooter>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default CreateProjectComponent;
diff --git a/pages/components/Footer.jsx b/pages/components/Footer.jsx
@@ -4,7 +4,12 @@ import React from "react";
 function Footer() {
   return (
     <>
-      <Divider w={"80%"} mx={"auto"} style={{ borderColor: "#55f4b2" }} />
+      <Divider
+        w={"80%"}
+        mx={"auto"}
+        mt="4rem"
+        style={{ borderColor: "#FEFE0E" }}
+      />
       <Container py={"2rem"}>
         <Text textAlign={"center"} fontSize={"1rem"}>
           <Link isExternal href="https://twitter.com/rackslabs">

diff --git a/pages/components/Navbar.jsx b/pages/components/Navbar.jsx
@@ -1,16 +1,17 @@
 import React from "react";
 import { Flex, Image, Box, Spacer, Button } from "@chakra-ui/react";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
-import { useSelector } from "react-redux";
-import { selectUserInfo } from "../../store/userSlice";
+import { useSelector, useDispatch } from "react-redux";
+import { selectUserInfo, setUserInfo } from "../../store/userSlice";
 
 function Navbar() {
   const user = useSelector(selectUserInfo);
-  // console.log(user);
+  const dispatch = useDispatch();
+
   const handleLogout = () => {
     localStorage.removeItem("token");
     localStorage.removeItem("manualLogin");
-    window.location.reload(false);
+    dispatch(setUserInfo({}));
   };
 
   return (
@@ -28,9 +29,18 @@ function Navbar() {
           {user.role === "admin" && localStorage.getItem("manualLogin") ? (
             <Button
               onClick={handleLogout}
-              colorScheme="teal"
-              variant="outline"
+              variant="solid"
               mr="1rem"
+              bg="#FEFE0E"
+              color="black"
+              borderRadius={"none"}
+              _hover={{
+                bg: "#d8d80e",
+              }}
+              _active={{
+                bg: "#d8d80e",
+                transform: "scale(1.05)",
+              }}
             >
               Logout
             </Button>