Merge pull request #26 from DevOps-Cloud-Team5/SCRUM-39-import-profile-page

fix profile page branch and fix profile page

Author: Imafe

src/pages/profile/index.tsx

@@ -9,6 +9,7 @@ import { backend_get, deleteAuthCookies } from "../../utils";
 import { useNavigate, useParams } from "react-router-dom";
 import { JwtPayload, jwtDecode } from "jwt-decode";
 import { CookieJWT } from "../../types/common";
+import { Button, capitalize } from "@mui/material";
 
 const Profile = () => {
     const navigate = useNavigate();
@@ -20,7 +21,7 @@ const Profile = () => {
         role: "",
         first_name: "",
         last_name: "",
-        avatarUrl: "https://randomuser.me/api/portraits/men/5.jpg"
+        avatarUrl: ""
     });
 
     const getProfileData = async () => {
@@ -37,6 +38,17 @@ const Profile = () => {
         const resp = await backend_get("user/get/" + username, true);
         return resp.json();
     };
+    
+    const updateProfilePicture = async () => {
+        console.log('Update Profile Picture function triggered');
+    };
+
+    // const [loggedInUsername, setLoggedInUsername] = useState("");
+    //store image inside a storage solution (S3 bucket)!
+    // After, we collect the url from the s3
+    // store url in database
+    // it will be retrieved in getprofile data via url
+    // 1 image per profile, therefore, override the previous one
 
     useEffect(() => {
         const fetchUserProfile = async () => {
@@ -48,8 +60,7 @@ const Profile = () => {
                     navigate(0);
                     return;
                 }
-                // profile[0]["avaterUrl"] =
-                //     "https://randomuser.me/api/portraits/men/5.jpg";
+                profile["avatarUrl"] = "https://randomuser.me/api/portraits/men/5.jpg";
                 setProfileData(profile);
             } catch (error) {
                 console.error("Error fetching profile:", error);
@@ -69,20 +80,30 @@ const Profile = () => {
                         src={profileData.avatarUrl}
                         alt="User Avatar"
                     />
+
+
                     <div className="profile-info">
                         <Typography component="h1" variant="h5">
                             {profileData.first_name} {profileData.last_name}
                         </Typography>
-                        <Typography component="p" variant="body1">
-                            Username: {profileData.username}
-                        </Typography>
-                        <Typography component="p" variant="body1">
-                            Email: {profileData.email}
-                        </Typography>
-                        <Typography component="p" variant="body1">
-                            Role: {profileData.role}
-                        </Typography>
+                        <p><span className="label">Username:</span>{profileData.username}</p>
+                        <p><span className="label">Email:</span>{profileData.email}</p>
+                        <p><span className="label">Role:</span>{capitalize(profileData.role)}</p>
+                    </div>
+                    
+                    <div style={{ marginTop:"3%" }} >
+                        <Button variant="contained" sx={{ textTransform:"none" }}>
+                            Change Picture
+                        </Button>
+                        <Button variant="contained" sx={{ textTransform:"none" }}>
+                            Change Password
+                        </Button>
                     </div>
+
+                    <Button variant="contained" sx={{ marginTop:"3%", textTransform:"none" }}>
+                        Log Out
+                    </Button>
+
                 </div>
             </Container>
         </RootPage>

src/pages/profile/profile.css

@@ -1,44 +1,73 @@
+/* profile.css */
+
 .profile {
-    background: rgba(
-        255,
-        255,
-        255,
-        0.1
-    ); /* Semi-transparent white for profile background */
-    backdrop-filter: blur(5px); /* Blur effect for the background */
+    margin: 0px 1em 1em -100px; /* Top, Right, Bottom, Left */
+    min-width: 550px;
+    min-height: 550px;
+    background-color: transparent;
     border-radius: 15px;
+    padding: 2em;
     display: flex;
+    flex-direction: column;
     align-items: center;
-    padding: 2em;
-    margin: 1em;
-    gap: 1em;
+    /* Set a min-width and min-height if necessary */
+    
+    
 }
 
 .avatar {
-    width: 100px;
-    height: 100px;
+    
+    width: 200px;
+    height: 200px;
     border-radius: 50%;
-    border: 3px solid #fff; /* White border for the avatar */
-    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3); /* subtle glow to the avatar */
+    border: 5px solid #fff; /* White border for the avatar */
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); /* Enhanced glow effect for the avatar */
+    /* margin-right: 2em;  */
+    /*Spacing between avatar and profile info*/
+    margin-bottom: 20px;
 }
 
 .profile-info {
-    color: #fff; /* Light text for readability */
-}
-
-.profile-info h1,
-.profile-info p {
-    margin: 0.3em 0; /* Add some vertical spacing between text elements */
+    min-width: 300px;
+    background-color: #222; /* Dark background for profile info */
+    border-radius: 10px;
+    padding: 1.5em;
+    color: #fff; /* White text for profile info */
+    text-align: left; 
 }
 
 .profile-info h1 {
     color: #29b6f6; /* A brighter color for the user's name */
-    font-size: 1.5em;
+    font-size: 2.5em; /* Larger font size for the user's name */
+    margin-bottom: 0.5em; /* Add some space below the name */
+    font-weight: bold; /* Bold font for the name */
 }
 
 .profile-info p {
+    font-size: 1.3em; /* Slightly larger font size for other info */
+    margin: 0.5em 0; /* Add spacing between elements */
+}
+
+.label {
+    font-weight: bold; /* Make the label text bold */
+    color: #29b6f6; /* Set color for labels */
+    margin-right: 0.5em; /* Add spacing between label and data */
+}
+
+.update-btn {
+    background-color: #29b6f6; /* Example primary color */
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 10px 20px;
     font-size: 1em;
-    color: #bbb; /* Slightly dimmed color for less important text */
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    transition: background-color 0.3s;
+    outline: none;
+    margin-bottom: 1em; /* Spacing between button and profile info */
 }
 
-/* You can add more styles or customize the colors as you see fit */
+.update-btn:hover {
+    background-color: #1c85c7; /* Darker shade for hover effect */
+}