auth with api

src/pages/Account.jsx

@@ -1,19 +1,53 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 import AccountButtons from "../components/account/AccountButtons.jsx";
 import userIcon from "../../images/user.svg";
+import {get} from "../backend/api";
+import {displayMessage} from "../backend/notifications/notifications";
+import {MessageType} from "../backend/notifications/message";
+import HelloItem from "../components/account/HelloItem.jsx";
 
 const Account = () => {
-  const exitHandler = () => {}
-  const changeNameHandler = () => {}
-  const changePassHandler = () => {}
+    const exitHandler = () => {
+        localStorage.removeItem("username");
+        localStorage.removeItem("token");
+
+        localStorage.setItem("message", "Exited successfully!");
+        window.location.href = "/";
+    }
+    const changeNameHandler = () => {}
+    const changePassHandler = () => {}
+
+    const [nickname, setNickname] = useState("");
+    const [id, setId] = useState("");
+
+    async function getUser() {
+      const username = localStorage.getItem("username");
+      if (!username) {
+          displayMessage("You're not logged in!", MessageType.WARN);
+          return;
+      }
+
+      const {ok, data} = await get('/auth/' + username);
+      if (!ok) {
+          displayMessage("Some error with auth", MessageType.ERROR);
+          return;
+      }
+
+      setNickname(data.user.nickname);
+      setId(username);
+    }
+
+    useEffect(() => {getUser().then()}, [])
 
   return (
       <div className="account-items">
         <img src={userIcon} alt="user" />
+        <HelloItem nickname={nickname} id={id} />
         <AccountButtons
             exitHandler={exitHandler}
             changeNameHandler={changeNameHandler}
             changePassHandler={changePassHandler}
+            registered={!!nickname}
         />
       </div>
   );