From e0333ef261ffde6d208edeec7154570249ed244c Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <256895@studenti.unimore.it>
Date: Mon, 26 Apr 2021 16:40:25 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Make=20BoxLoggedIn=20into=20its?=
 =?UTF-8?q?=20own=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 code/frontend/src/components/BoxLoggedIn.js   | 30 +++++++++++++++++++
 .../src/components/BoxLoggedIn.module.css     |  5 ++++
 code/frontend/src/routes/PageSettings.js      | 23 ++------------
 3 files changed, 38 insertions(+), 20 deletions(-)
 create mode 100644 code/frontend/src/components/BoxLoggedIn.js
 create mode 100644 code/frontend/src/components/BoxLoggedIn.module.css

diff --git a/code/frontend/src/components/BoxLoggedIn.js b/code/frontend/src/components/BoxLoggedIn.js
new file mode 100644
index 0000000..5205bf8
--- /dev/null
+++ b/code/frontend/src/components/BoxLoggedIn.js
@@ -0,0 +1,30 @@
+import React, { useContext } from "react"
+import BoxFull from "./BoxFull"
+import LoggedInUser from "./LoggedInUser"
+import Button from "./Button"
+import { faSignOutAlt } from "@fortawesome/free-solid-svg-icons"
+import ContextLogin from "../contexts/ContextLogin"
+import { useHistory } from "react-router"
+import Style from "./BoxLoggedIn.module.css"
+
+
+export default function BoxLoggedIn({ ...props }) {
+    const {logout} = useContext(ContextLogin)
+    const history = useHistory()
+
+    return (
+        <BoxFull header={"Logged in"} {...props}>
+            <div className={Style.BoxLoggedInContents}>
+                <div>
+                    You are currently logged in as <LoggedInUser/>.
+                </div>
+                <div>
+                    <Button color={"Red"} onClick={e => {
+                        logout()
+                        history.push("/login")
+                    }} icon={faSignOutAlt}>Logout</Button>
+                </div>
+            </div>
+        </BoxFull>
+    )
+}
diff --git a/code/frontend/src/components/BoxLoggedIn.module.css b/code/frontend/src/components/BoxLoggedIn.module.css
new file mode 100644
index 0000000..2d36a09
--- /dev/null
+++ b/code/frontend/src/components/BoxLoggedIn.module.css
@@ -0,0 +1,5 @@
+.BoxLoggedInContents {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
diff --git a/code/frontend/src/routes/PageSettings.js b/code/frontend/src/routes/PageSettings.js
index 1eeae00..92c633c 100644
--- a/code/frontend/src/routes/PageSettings.js
+++ b/code/frontend/src/routes/PageSettings.js
@@ -1,34 +1,17 @@
-import React, { useContext } from "react"
+import React from "react"
 import Style from "./PageSettings.module.css"
 import classNames from "classnames"
 import BoxHeader from "../components/BoxHeader"
 import BoxFull from "../components/BoxFull"
 import SelectTheme from "../components/SelectTheme"
-import ContextLogin from "../contexts/ContextLogin"
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
-import { faSignOutAlt, faUser } from "@fortawesome/free-solid-svg-icons"
-import Button from "../components/Button"
-import LoggedInUser from "../components/LoggedInUser"
-import { useHistory } from "react-router"
+import BoxLoggedIn from "../components/BoxLoggedIn"
 
 
 export default function PageSettings({ children, className, ...props }) {
-    const {logout} = useContext(ContextLogin)
-    const history = useHistory()
 
     return (
         <div className={classNames(Style.PageSettings, className)} {...props}>
-            <BoxFull header={"Logged in"}>
-                <div>
-                    You are currently logged in as <LoggedInUser/>.
-                </div>
-                <div>
-                    <Button color={"Red"} onClick={e => {
-                        logout()
-                        history.push("/login")
-                    }} icon={faSignOutAlt}>Logout</Button>
-                </div>
-            </BoxFull>
+            <BoxLoggedIn/>
             <BoxHeader>
                 Switch theme: <SelectTheme/>
             </BoxHeader>