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>
   );

src/pages/SignIn.jsx

@@ -3,12 +3,41 @@ import InputField from "../components/reg/InputField.jsx";
 import LoginButtons from "../components/reg/LoginButtons.jsx";
 import LoginTitle from "../components/reg/loginTitle.jsx";
 
+import {MessageType} from "../backend/notifications/message.tsx";
+import {displayMessage} from "../backend/notifications/notifications.js";
+import {post} from "../backend/api.js";
+
 const SignIn = () => {
     const [name, setName] = useState("");
     const [password, setPassword] = useState("");
 
-    const submit = (e) => {
-      console.log('Sign In!')
+    const [nameErrorsCounter, setNameErrorsCounter] = useState(0);
+
+    async function submit() {
+        console.log('Sign In!')
+
+        const {ok, data} = await post('/auth/login', {name: name, password: password});
+
+        if (!ok) {
+            displayMessage(data.message, MessageType.ERROR);
+
+            if (nameErrorsCounter >= 1) {
+                displayMessage("Note that you need to enter your ID name", MessageType.INFO);
+                setNameErrorsCounter(0);
+            } else {
+                setNameErrorsCounter(nameErrorsCounter + 1);
+            }
+
+            return;
+        }
+
+        localStorage.setItem('token', data.token);
+        localStorage.setItem('username', name);
+
+        setNameErrorsCounter(0);
+
+        localStorage.setItem('message', 'Successfully logged in!');
+        window.location.href = "/";
     }
 
   return (

src/pages/SignUp.jsx

@@ -2,20 +2,59 @@ import React, {useState} from 'react';
 import InputField from "../components/reg/InputField.jsx";
 import LoginButtons from "../components/reg/LoginButtons.jsx";
 import LoginTitle from "../components/reg/loginTitle.jsx";
+import {post} from "../backend/api";
+import {displayMessage} from "../backend/notifications/notifications";
+import {MessageType} from "../backend/notifications/message";
+
 
 const SignUp = () => {
     const [name, setName] = useState("");
+    const [nickname, setNickname] = useState("");
     const [password, setPassword] = useState("");
     const [repeatPassword, setRepeatPassword] = useState("");
 
-    const submit = (e) => {
-        console.log('Sign Up!')
+    async function login(name, password) {
+        const {ok, data} = await post('/auth/login', {name: name, password: password});
+        return {loginStatus: ok, loginData: data};
+    }
+
+    async function submit () {
+        console.log('Sign Up!');
+
+        if (password !== repeatPassword) {
+            displayMessage("Passwords don't match", MessageType.WARN);
+            return;
+        }
+
+        const {ok, data} = await post('/auth/reg',
+            {name: name, password: password, nickname: nickname});
+
+        if (!ok) {
+            displayMessage(data.message, MessageType.ERROR);
+            return;
+        }
+
+        const { loginStatus, loginData } = await login(name, password);
+
+        console.log(loginStatus, loginData)
+
+        if (!loginStatus) {
+            displayMessage(loginData.message, MessageType.ERROR);
+            return;
+        }
+
+        localStorage.setItem('token', loginData.token);
+        localStorage.setItem('username', name);
+
+        localStorage.setItem('message', 'Successfully signed up!');
+        window.location.href = "/";
     }
 
     return (
         <div className="LoginList">
             <LoginTitle/>
             <InputField title="Name" setValue={setName} value={name}/>
+            <InputField title="Nickname (for others)" setValue={setNickname} value={nickname}/>
             <InputField title="Password" setValue={setPassword} value={password}/>
             <InputField title="Repeat Password" setValue={setRepeatPassword} value={repeatPassword}/>