Merge pull request #41 from Nidboj132/main

login test

4 files changed, 100 insertions, 12 deletions

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 ? (
+    <Link to="/profile" tabIndex={-1} className='login'>
+        <button>
+            <img src={img2} alt="" />
+            <span>Username</span>
+        </button>
+        <button onClick={logout}><img src={img3} alt="" /><span></span></button>
+    </Link>
+    ) : (
+    <Link to="/api/v1/login" className='login'>
+        <button>
+            <img src={img2} alt="" />
+            <span><img src={img1} alt="Sign in through Steam" /></span>
+        </button>
+        <button disabled><span></span></button>
+    </Link>
+    )}
+     </>   
+        )
+}
+
+
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 (

     <div id='sidebar'>

         <div id='logo'> {/* logo */}

@@ -124,9 +136,7 @@ return (
             <div id='sidebar-bottomlist'>

                 <span></span>

 

-                <Link to="/profile" tabIndex={-1}>

-                    <button><img src={img1} alt="" /><span>Login</span></button>

-                </Link>

+                <Login/>

 

                 <Link to="/rules" tabIndex={-1}>

                     <button><img src={img8} alt="" /><span>Leaderboard&nbsp;Rules</span></button>