auth with api

src/components/account/AccountButtons.jsx

@@ -5,10 +5,13 @@ import ActionButton from "./ActionButton.jsx";
 const AccountButtons = (props) => {
   return (
       <div className="account-buttons">
-          <ActionButton title={"Exit"} action={props.exitHandler}/>
-          <ActionButton title={"Change Name"} action={props.changeNameHandler}/>
-          <ActionButton title={"Change Pass"} action={props.changePassHandler}/>
-
+          {props.registered ? (
+              <>
+                  <ActionButton title={"Exit"} action={props.exitHandler}/>
+                  <ActionButton title={"Change Name"} action={props.changeNameHandler}/>
+                  <ActionButton title={"Change Pass"} action={props.changePassHandler}/>
+              </>
+          ) : null}
           <a className="MyButton mclaren-regular" href={URLs.home.url}>Back</a>
       </div>
   );

src/components/account/HelloItem.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const HelloItem = (props) => {
+  return (
+      <div className="hello-item-class">
+          {!!props.nickname ? (
+              <>
+                  <h1 className="mclaren-regular">Hello, {props.nickname}!</h1>
+                  <p className="mclaren-regular">Your ID: {props.id}</p>
+              </>
+          ) : (
+              <p className="mclaren-regular">You don't have account :(</p>
+          )}
+      </div>
+  );
+};
+
+export default HelloItem;

src/components/account/index.css

@@ -3,6 +3,8 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+
+    margin-bottom: 30px;
 }
 
 .account-buttons a {
@@ -20,10 +22,33 @@
     color: black;
 }
 
+.hello-item-class {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.hello-item-class h1 {
+    font-size: 4vw;
+    margin-bottom: 0;
+}
+
+.hello-item-class p {
+    font-size: 1.5vw;
+}
+
 @media only screen and (max-width: 800px) {
     .account-buttons a {
         font-size: 2.5vh;
         width: 60vw;
         margin-top: 3vh;
     }
+
+    .hello-item-class h1 {
+        font-size: 5vh;
+    }
+
+    .hello-item-class p {
+        font-size: 2vh;
+    }
 }