From 369f16e78ea958c9a536ea4ee7791ad9d469a770 Mon Sep 17 00:00:00 2001 From: Nidboj132 Date: Sat, 6 May 2023 16:10:49 +0200 Subject: login test --- frontend/package-lock.json | 14 ++++++++++ frontend/package.json | 1 + frontend/src/components/login.css | 26 +++++++++++++++++ frontend/src/components/login.js | 54 ++++++++++++++++++++++++++++++++++++ frontend/src/components/sidebar.css | 6 ++-- frontend/src/components/sidebar.js | 26 +++++++++++------ frontend/src/imgs/10.png | Bin 0 -> 1601 bytes frontend/src/imgs/11.png | Bin 0 -> 1294 bytes frontend/src/imgs/login.png | Bin 0 -> 4871 bytes 9 files changed, 115 insertions(+), 12 deletions(-) create mode 100644 frontend/src/components/login.css create mode 100644 frontend/src/components/login.js create mode 100644 frontend/src/imgs/10.png create mode 100644 frontend/src/imgs/11.png create mode 100644 frontend/src/imgs/login.png (limited to 'frontend') diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 0c4569a..9bfe340 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -11,6 +11,7 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "js-cookie": "^3.0.5", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", @@ -11530,6 +11531,14 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, + "node_modules/js-cookie": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz", + "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==", + "engines": { + "node": ">=14" + } + }, "node_modules/js-sdsl": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.3.0.tgz", @@ -25457,6 +25466,11 @@ } } }, + "js-cookie": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz", + "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==" + }, "js-sdsl": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.3.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 123a434..72e2117 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -6,6 +6,7 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "js-cookie": "^3.0.5", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", diff --git a/frontend/src/components/login.css b/frontend/src/components/login.css new file mode 100644 index 0000000..633145e --- /dev/null +++ b/frontend/src/components/login.css @@ -0,0 +1,26 @@ +span>img { + scale: 1.1; + padding-top: 4px; +} +.login>button>span{ + max-width: 22ch; + overflow: hidden; +} +.login>button:nth-child(2){ + position: relative; + left: 210px; + width: 50px !important; + + padding-left: 10px; + background-color: #00000000 !important; + transition: opacity .1s; +} + +.login{ + display: grid; + grid-template-columns: 50px auto 200px ; +} + +button:disabled { + display: none; +} \ No newline at end of file diff --git a/frontend/src/components/login.js b/frontend/src/components/login.js new file mode 100644 index 0000000..4ef1e2a --- /dev/null +++ b/frontend/src/components/login.js @@ -0,0 +1,54 @@ +import React from 'react'; +import { Link } from "react-router-dom"; +import Cookies from "js-cookie"; + +import "./login.css"; +import img1 from "../imgs/login.png" +import img2 from "../imgs/10.png" +import img3 from "../imgs/11.png" + + +export default function Login() { + +const isLoggedIn = Cookies.get('token') !== undefined; + +function logout() { + Cookies.remove('token') + window.location.href="/" +} + +const [data, setData] = React.useState(); +React.useEffect(() => { + fetch(`/api/v1/profile`,{ + headers: { + 'Content-Type': 'application/json', + Authorization: Cookies.get('token') + }}) + .then(r => {console.log(r)}) + .then(d => {setData(d);console.log(d)}) + }, []); + +return ( + <> + {isLoggedIn ? ( + + + + + ) : ( + + + + + )} + + ) +} + + diff --git a/frontend/src/components/sidebar.css b/frontend/src/components/sidebar.css index 23d46ad..84600fb 100644 --- a/frontend/src/components/sidebar.css +++ b/frontend/src/components/sidebar.css @@ -40,9 +40,10 @@ span>b{ } #sidebar-toplist>button:nth-child(1){margin-top: 5px;} #sidebar-toplist{ + display: grid; margin: 0 5px 0 5px; - display: grid; + justify-items: left; height: 400px; grid-template-rows: 45px 50px 50px 50px 50px 50px 50px 50px auto; } @@ -53,7 +54,6 @@ span>b{ margin: 0 5px 0 5px; justify-items: left; grid-template-rows: calc(100vh - 670px) 50px 50px 50px; - grid-template-rows: calc(100vh - 670px) 50px 50px 50px; } button>span{ font-family: BarlowSemiCondensed-Regular; @@ -80,9 +80,7 @@ button{ transition: width .3s, background-color .3s; - /* outline: red dotted 1px; */ } -/* button>*{outline: red 1px dotted;} */ button>img { scale: 1.1; diff --git a/frontend/src/components/sidebar.js b/frontend/src/components/sidebar.js index d5a55fd..aaaf196 100644 --- a/frontend/src/components/sidebar.js +++ b/frontend/src/components/sidebar.js @@ -13,8 +13,9 @@ import img6 from "../imgs/6.png" import img7 from "../imgs/7.png" import img8 from "../imgs/8.png" import img9 from "../imgs/9.png" +import Login from "./login.js" -export default function Sidebar(x) { +export default function Sidebar() { // Locks search button for 300ms before it can be clicked again, prevents spam const [isLocked, setIsLocked] = React.useState(false); @@ -48,13 +49,18 @@ function SidebarHide(){ const btn = document.querySelectorAll("button"); const span = document.querySelectorAll("button>span"); const side = document.querySelector("#sidebar-list"); +const login = document.querySelectorAll(".login>button")[1]; if(sidebar===1){ setSidebar(0) side.style.width="320px" btn.forEach((e, i) =>{ e.style.width="310px" - setTimeout(() => {span[i].style.opacity="1"}, 100) + setTimeout(() => { + span[i].style.opacity="1" + login.style.opacity="1" + + }, 100) }) side.style.zIndex="2" } else { @@ -64,10 +70,14 @@ if(sidebar===1){ e.style.width="40px" span[i].style.opacity="0" }) - setTimeout(() => {side.style.zIndex="0"}, 300); + login.style.opacity="0" + setTimeout(() => { + side.style.zIndex="0" + }, 300); } } +// Links const location = useLocation() React.useEffect(()=>{ if(location.pathname==="/"){SidebarClick(1)} @@ -77,12 +87,14 @@ React.useEffect(()=>{ if(location.pathname.includes("discussions")){SidebarClick(5)} if(location.pathname.includes("scorelog")){SidebarClick(6)} if(location.pathname.includes("profile")){SidebarClick(7)} - if(location.pathname.includes("rules")){SidebarClick(8)} - if(location.pathname.includes("about")){SidebarClick(9)} + if(location.pathname.includes("rules")){SidebarClick(9)} + if(location.pathname.includes("about")){SidebarClick(10)} + // console.log(location.pathname) // eslint-disable-next-line react-hooks/exhaustive-deps }, [location]) + return (