fixed the ui , yet to fix the login

4rjunc · Mar 10, 2024 · d835893 · d835893
1 parent 74fd7c4
commit d835893
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 101 deletions.
diff --git a/public/manifest.json b/public/manifest.json
@@ -16,6 +16,6 @@
     "default_width": 4000,
     "default_height": 6000
   },
-  "permissions": ["identity", "storage"],
+  "permissions": ["identity", "storage", "tabs"],
   "host_permissions": ["http://*/*", "https://*/*"]
 }
diff --git a/src/components/Login.jsx b/src/components/Login.jsx
@@ -5,6 +5,8 @@ import { login } from "./api";
 import Navbar from "./Navbar";
 import Form from "./Form";
 import SearchBar from "./SearchBar";
+import { useEffect } from "react";
+import turtleLogo from "/turtle.png";
 
 const Login = () => {
   const [loggedIn, setLoggedIn] = useState(false);
@@ -14,50 +16,63 @@ const Login = () => {
     try {
       const userID = await login();
       console.log("User ID Response", userID);
+      const data = userID 
+      localStorage.setItem('turtleUser', JSON.stringify(data));
       if (userID) {
-        setUser(userID)
+        setUser(userID);
         setLoggedIn(true);
       }
-
     } catch (error) {
       console.error("Error logging in:", error);
     }
   };
 
+  useEffect(()=>{
+    const userID = localStorage.getItem('turtleUser')
+    if (userID) {
+      setUser(userID);
+      setLoggedIn(true);
+    }
+
+  },[])
   if (loggedIn) {
     console.log("Logged In");
-    return (<>
-    <Navbar/>
-    <Form user={user}/>
-    <SearchBar user={user}/>
-    </>)
+    return (
+      <>
+        <Navbar />
+        <Form user={user} />
+        <SearchBar user={user} />
+      </>
+    );
   }
 
   return (
-<>
-<Button
-  onClick={handleClick}
-  style={{
-    position: "absolute",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    padding: "10px",
-    backgroundImage: "url('https://www.gstatic.com/images/icons/material/product/2x/google_identity_grey600_24dp.png')",
-    backgroundRepeat: "no-repeat",
-    backgroundPosition: "center",
-    backgroundSize: "24px 24px",
-    border: "none",
-    borderRadius: "5px",
-    cursor: "pointer",
-    boxShadow: "0px 0px 5px 0px rgba(255, 255, 255, 0.993)",
-  }}
->
-  Sign In Using Google
-</Button>
-
-</>
-
+    <>
+      <Button
+        onClick={handleClick}
+        style={{
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          padding: "10px",
+          backgroundImage:
+            "url('https://www.gstatic.com/images/icons/material/product/2x/google_identity_grey600_24dp.png')",
+          backgroundRepeat: "no-repeat",
+          backgroundPosition: "center",
+          backgroundSize: "24px 24px",
+          border: "none",
+          borderRadius: "5px",
+          cursor: "pointer",
+          boxShadow: "0px 0px 5px 0px rgba(255, 255, 255, 0.993)",
+        }}
+      >
+                  <a href="https://github.com/H4K3R13" target="_blank">
+            <img src={turtleLogo} className="logo" alt="turtle logo" />
+          </a>
+        Sign In Using Google
+      </Button>
+    </>
   );
 };
 

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -1,37 +1,19 @@
-import * as React from "react";
 import AppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import Toolbar from "@mui/material/Toolbar";
-import IconButton from "@mui/material/IconButton";
 import Typography from "@mui/material/Typography";
-import Menu from "@mui/material/Menu";
-import MenuIcon from "@mui/icons-material/Menu";
+import Login from "./Login";
 import Container from "@mui/material/Container";
-import Avatar from "@mui/material/Avatar";
 import Button from "@mui/material/Button";
-import Tooltip from "@mui/material/Tooltip";
-import MenuItem from "@mui/material/MenuItem";
-import AdbIcon from "@mui/icons-material/Adb";
 import turtleLogo from "/turtle.png";
-import { googleLogout } from "@react-oauth/google";
 
-const settings = ["Logout"];
 
 const Navbar = () => {
-  const [anchorElUser, setAnchorElUser] = React.useState(null);
-
-  const handleOpenUserMenu = (event) => {
-    setAnchorElUser(event.currentTarget);
-  };
-
-
-  const handleCloseUserMenu = () => {
-    setAnchorElUser(null);
-  };
 
   const handleLogout = () => {
-    googleLogout();
+    localStorage.removeItem("turtleUser")
     console.log("Logout");
+    return <Login/>
   };
 
   return (
@@ -76,36 +58,9 @@ const Navbar = () => {
           >
             turtle
           </Typography>
-          {/* <Box sx={{ flexGrow: 0 }}>
-            <Tooltip title="Open settings">
-              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
-                <Avatar alt="Remy Sharp" src={props.user.picture} />
-              </IconButton>
-            </Tooltip>
-            <Menu
-              sx={{ mt: "45px" }}
-              id="menu-appbar"
-              anchorEl={anchorElUser}
-              anchorOrigin={{
-                vertical: "top",
-                horizontal: "right",
-              }}
-              keepMounted
-              transformOrigin={{
-                vertical: "top",
-                horizontal: "right",
-              }}
-              open={Boolean(anchorElUser)}
-              onClose={handleCloseUserMenu}
-            >
-              {settings.map((setting) => (
-                <MenuItem key={setting} onClick={handleCloseUserMenu}>
-                  <Button onClick={handleLogout}>HELLO</Button>
-                  <Typography textAlign="center">{setting}</Typography>
-                </MenuItem>
-              ))}
-            </Menu>
-          </Box> */}
+          <Box sx={{ flexGrow: 0 }}>
+            <Button onClick={handleLogout}>Logout</Button>
+          </Box>
         </Toolbar>
       </Container>
     </AppBar>

diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.jsx
@@ -8,7 +8,7 @@ const SearchBar = (props) => {
   const [filteredUrls, setFilteredUrls] = useState([]);
   const [tagOptions, setTagOptions] = useState();
   const [data, setData] = useState();
-  const [user, setUser] = useState()
+  const [user, setUser] = useState();
   const handleTagsChange = (selectedOptions) => {
     setSelectedTags(selectedOptions);
     filterUrls(selectedOptions);
@@ -55,14 +55,14 @@ const SearchBar = (props) => {
     };
 
     fetchData();
-    setUser(props.user)
+    setUser(props.user);
   }, []);
 
   return (
-    <div>
+    <div style={{marginTop:".5rem"}}>
       <Typography style={{ color: "white" }}>
-      Select the required tags to explore your bookmarks!
-    </Typography>
+        Explore your bookmarks using tags!
+      </Typography>
       <Select
         isMulti
         options={tagOptions}
@@ -75,20 +75,25 @@ const SearchBar = (props) => {
           backgroundColor: "lightgray",
           padding: "10px",
           borderRadius: "5px",
+          listStylePosition: "inside", // Move list bullets inside
         }}
       >
- {selectedTags.length === 0 ? (
-      <li style={{ color: "gray" }}>Select tags</li>
-    ) : (
-      filteredUrls.map((item) => (
-        <li key={item.id}>
-          <a href={item.Url} target="_blank" rel="noreferrer">
-            <strong>{item.Url}</strong> -{" "}
-            {item.Tags.map((tag) => tag.value).join(", ")}
-          </a>
-        </li>
-      ))
-    )}
+        {selectedTags.length === 0 ? (
+          <li style={{ color: "gray" }}>
+            Select the your tags to explore your bookmarks!
+          </li>
+        ) : (
+          filteredUrls.map((item) => (
+            <li key={item.id} style={{ marginLeft: "20px" }}>
+              {" "}
+              {/* Adjust left padding for bullets */}
+              <a href={item.Url} target="_blank" rel="noreferrer">
+                <strong>{item.Url}</strong> -{" "}
+                {item.Tags.map((tag) => tag.value).join(", ")}
+              </a>
+            </li>
+          ))
+        )}
       </ul>
     </div>
   );

diff --git a/src/index.css b/src/index.css
@@ -22,7 +22,6 @@ body {
   margin: 0.2rem;
   height: 650px;
   width: 500px;
-  border: 3px solid rgb(187, 8, 8);
   background-color: rgb(61, 59, 59);
 }