userName displayed when logged in

elixir-europe · Dec 14, 2023 · 7457f5b · 7457f5b
1 parent 7ef37f5
commit 7457f5b
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 36 deletions.
diff --git a/frontend/src/components/NavBar/Navbar.css b/frontend/src/components/NavBar/Navbar.css
@@ -8,6 +8,35 @@
     display: none;
   }
 
+  .containerUserName h5 {
+    color: rgb(138 160 232);
+    font-weight: bold;
+    /* width: 150%; */
+    display: flex;
+    justify-content: center;
+    font-size: 11px;
+    width: 120px;
+    margin-top: 19px;
+    align-content: center;
+    align-items: center;
+  }
+
+  .containerLogOut {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 8vw;
+  }
+
+  .containerUserName {
+    width: 20vw;
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+  }
+
   .navB {
     display: flex;
     width: 100vw;
@@ -23,7 +52,7 @@
     justify-content: flex-start;
   }
   .nav3 {
-    width: 30%;
+    width: 35%;
     display: flex;
     justify-content: flex-end;
     align-items: center;
@@ -125,7 +154,7 @@
   }
 
   .Members {
-    width: 150px;
+    width: 146px;
   }
 
   .Members2 {
@@ -134,12 +163,11 @@
   }
 
   .Members3 {
-    width: 200px;
-    margin-right: 10px;
+    width: 156px;
   }
 
   .Members4 {
-    width: 186px;
+    width: 156px;
     background-color: #4961b8;
   }
 
@@ -152,6 +180,11 @@
     background-color: #e575dd;
   }
 
+  .About6 {
+    width: 60px;
+    background-color: #e575dd;
+  }
+
   .Sign-in6 {
     width: 140px;
   }
@@ -173,7 +206,7 @@
     justify-content: center;
     align-content: center;
     width: fit-content;
-    margin-right: 50px;
+    width: 96px;
   }
 
   .nav3 .Sign-in4 {
@@ -185,26 +218,24 @@
     margin-right: 50px;
   }
 
-  .Sign-in3 {
-    width: 176px;
-    margin-left: 40px;
-  }
+
 
-  .Sign-in3:hover ~ .animation {
-    width: 176px;
-    right: 8px;
-    background-color: #e575dd;
+  .Sign-in3:hover {
+    width: 96px;
+    border-radius: 2px;
+    background-color: #7a9f9f;
   }
 
   .Sign-in4 {
     width: 176px;
     right: 0px;
-    background-color: #e575dd;
+    background-color: #7a9f9f;
   }
 
   .ls-login-image2 {
-    width: 24px;
-    margin-right: 10px;
+    width: 19px;
+    margin-right: 6px;
+    margin-top: 1px;
   }
 
   .nav3 .About {
@@ -217,22 +248,32 @@
 
   .Members:hover ~ .animation {
     width: 146px;
-    right: 19.1%;
+    right: 18.8%;
     background-color: #4961b8;
   }
 
   .Members3:hover ~ .animation {
-    width: 180px;
-    right: 200px;
+    width: 150px;
+    right: 349px;
     background-color: #4961b8;
   }
 
   .About:hover ~ .animation {
     width: 116px;
-    left: 81.7%;
+    right: 10%;
     background-color: #e575dd;
   }
 
+  .About5:hover ~ .animation {
+    width: 76px;
+    right: 277px;
+    background-color: #e575dd;
+  }
+
+  .About5 {
+    width: 60px;
+  }
+
   .Individuals:hover ~ .animation {
     width: 120px !important;
     left: 0px !important;
@@ -298,6 +339,7 @@
     justify-content: center;
     align-items: center;
     text-decoration: none;
+    width: 96px;
   }
 
   .Sign-in4 {

diff --git a/frontend/src/components/NavBar/Navbar.js b/frontend/src/components/NavBar/Navbar.js
@@ -15,12 +15,13 @@ function Navbar () {
     setIsLoggedIn,
     logOutUser,
     authenticateUser,
-    getStoredToken
+    getStoredToken,
+    userNameToShare
   } = useContext(AuthContext)
   const auth = useAuth()
 
   useEffect(() => {
-
+    console.log(auth)
     authenticateUser()
     let token = getStoredToken()
     let isAuthenticated = false
@@ -129,7 +130,7 @@ function Navbar () {
             About
           </NavLink>
         )}
-     
+
         {!isLoggedIn && (
           <NavLink
             exact
@@ -152,21 +153,34 @@ function Navbar () {
 
         {isLoggedIn && (
           <NavLink
-            exact
-            to='/'
-            className={({ isActive }) => (isActive ? 'Sign-in3' : 'Sign-in3')}
-            onClick={handleClik}
+            to='/about'
+            className={({ isActive }) => (isActive ? 'About6' : 'About5')}
           >
-            <img
-              className='ls-login-image2'
-              src='/../logout.png'
-              alt='ls-login-image2'
-            />
-            Log out
+            About
           </NavLink>
         )}
 
+        {isLoggedIn && (
+          <div className='containerUserName'>
+            <NavLink
+              exact
+              to='/'
+              className={({ isActive }) => (isActive ? 'Sign-in3' : 'Sign-in3')}
+              onClick={handleClik}
+            >
+              <img
+                className='ls-login-image2'
+                src='/../logout.png'
+                alt='ls-login-image2'
+              />
+              Log out
+            </NavLink>
+            <h5>{userNameToShare}</h5>
+          </div>
+        )}
+
         <div class='animation nav3'></div>
+
       </nav>
       <nav className='nav4'>
         <button className='buttonMenu' onClick={handleMenu}>

diff --git a/frontend/src/components/SignIn/SignInFormNoLS.js b/frontend/src/components/SignIn/SignInFormNoLS.js
@@ -15,10 +15,9 @@ export default function SignInFormNoLS () {
   const {
     storeToken,
     setIsLoggedIn,
-    isLoggedIn,
     refreshTokenFunction,
     authenticateUser,
-    expirationMessage,
+    setUserNameToShare,
     setExpirationTime,
     setStartTime,
     setExpirationTimeRefresh
@@ -78,6 +77,7 @@ export default function SignInFormNoLS () {
       if (readableResponse.access_token) {
         navigate('/')
         setIsLoggedIn(true)
+        setUserNameToShare(userName)
       } else {
         setError(
           'User not found. Please check the username and the password and retry'

diff --git a/frontend/src/components/context/AuthContext.js b/frontend/src/components/context/AuthContext.js
@@ -7,6 +7,7 @@ const AuthContext = createContext()
 function AuthProviderWrapper (props) {
   // Store the variables we want to share
   const [user, setUser] = useState(null)
+  const [userNameToShare, setUserNameToShare] = useState('')
   const [expirationMessage, setExpirationMessage] = useState('')
   const [isLoggedIn, setIsLoggedIn] = useState(false)
   const navigate = useNavigate()
@@ -130,6 +131,8 @@ function AuthProviderWrapper (props) {
       value={{
         setIsLoggedIn,
         isLoggedIn,
+        userNameToShare,
+        setUserNameToShare,
         getStoredToken,
         setExpirationTime,
         expirationMessage,