profile page and navigation links

frontend/src/components/SignUp.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { useState } from 'react'
 import axios from 'axios'
 import styles from '../styles/login.module.css'
+import { useNavigate } from "react-router-dom";
 const SignUp = () => {
 
 
@@ -9,7 +10,9 @@ const SignUp = () => {
   const [password, setPassword] = useState("")
   const [email, setEmail] = useState("")
   const [imageData,setImageData] = useState("")
+  const navigate = useNavigate()
 
+  
   const handleSignup = () => {
 
 
@@ -30,6 +33,7 @@ const SignUp = () => {
         console.log(res.data)
       })
 
+      navigate('/login')
   }
 
   return (

frontend/src/index.css

@@ -21,6 +21,12 @@ h1{
   font-family: 'Inter', sans-serif;
   font-weight: bold;
 }
+p{
+  font-family: 'Poppins', sans-serif;
+}
+h2{
+  font-family: 'Poppins', sans-serif;
+}
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',

frontend/src/pages/Profile.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { useEffect, useState } from 'react';
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
-
+import styles from '../styles/profile.module.css'
 const Profile = () => {
 
   const [profileData, setProfileData] = useState()
@@ -12,66 +12,87 @@ const Profile = () => {
   const navigate = useNavigate();
 
   const checkLoggedIn = async () => {
-   
-      const token = localStorage.getItem('token');
-      if (!token) {
-        setIsLoggedIn(false);
-        navigate('/login');
-        return;
-      }
-      const response = await axios.get('http://localhost:5000/profile', {
-        headers: { Authorization: `Bearer ${token}` },
-      }).then((res) => {
-        setIsLoggedIn(true);
-      }).catch(err => {
-        localStorage.removeItem("token")
-        setIsLoggedIn(false)
-        navigate('/login')
-      })
+
+    const token = localStorage.getItem('token');
+    if (!token) {
+      setIsLoggedIn(false);
+      navigate('/login');
+      return;
+    }
+    const response = await axios.get('http://localhost:5000/profile', {
+      headers: { Authorization: `Bearer ${token}` },
+    }).then((res) => {
+      setIsLoggedIn(true);
+    }).catch(err => {
+      localStorage.removeItem("token")
+      setIsLoggedIn(false)
+      navigate('/login')
+    })
   }
 
   const fetchProfile = async () => {
 
     setLoading(true)
-    
-      const token = localStorage.getItem('token');
-      console.log(token)
-      
-      axios.get('http://localhost:5000/profile', {
-        headers: {
-          Authorization: `Bearer ${token}`
-        }
-      }).then((res) => {
-        setProfileData(res.data);
-        console.log(profileData)
-      }).catch(err => console.log(err))
-
-      setLoading(false)
-      
-   
+
+    const token = localStorage.getItem('token');
+    console.log(token)
+
+    axios.get('http://localhost:5000/profile', {
+      headers: {
+        Authorization: `Bearer ${token}`
+      }
+    }).then((res) => {
+      setProfileData(res.data);
+      console.log(profileData)
+    }).catch(err => console.log(err))
+
+    setLoading(false)
+
+
   }
 
   useEffect(() => {
     checkLoggedIn()
     fetchProfile()
-    
-   
+
+
   }, [])
 
-  if(!profileData){
-    return(
+  if (!profileData) {
+    return (
       <div>Loading...</div>
     )
-  }else if(profileData){
+  } else if (profileData) {
     return (
-  <div>
-    <h1>{profileData.username}</h1>
-    <h1>{profileData.email}</h1>
-   <img src={`http://localhost:5000/uploads/${profileData.photo}`}/>
-  </div>
- )
+      <>
+        <div className={styles.header}>
+          <h1>Welcome to your profile page</h1>
+          <h3>Redirect through these links 👍</h3>
+
+          <div className={styles.text_container}>
+            <h3>Discover</h3>
+            <h3>|</h3>
+            <h3>Settings</h3>
+            <h3>|</h3>
+            <h3>Log out</h3>
+          </div>
+        </div>
+        <div className={styles.profile}>
+          <img className={styles.picture} src={`http://localhost:5000/uploads/${profileData.photo}`} />
+          <h2>{profileData.username}</h2>
+          <h3>{profileData.email}</h3>
+          <div className={styles.text_container}>
+            <h3>Posts: 0</h3>
+            <h3>Upvotes: 0</h3>
+          </div>
+        </div>
+        <div>
+          <h1>Your Posts:</h1>
+        </div>
+      </>
+    )
   }
- 
+
 
 }
 

frontend/src/styles/profile.module.css

+body{
+    text-align: center;
+    
+}
+h1{
+    color: rgb(255, 240, 153);
+    font-size: 300%;
+    font-weight: 900;
+}
+h2{
+    margin: 0;
+}
+h3{
+    margin: 20px;
+}
+
+.picture {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    object-fit: cover;
+    display: block;
+    overflow: hidden;
+    margin: 20px auto;
+    
+}
+.profile{
+    background: rgb(49, 117, 121);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-radius: 10px;
+    border: 2px solid rgba(169, 173, 173, 0.2);
+    box-shadow: 0 8px 23px 0 rgba(37, 37, 37, 0.562);
+    text-align: center;
+    width: 40vw;
+    margin: 100px auto;
+    min-height: 50vh;
+}
+.header{
+    max-width: 100vw;
+    min-height: 10vh;
+    margin: 0;
+    background-color: rgb(49, 117, 121);
+    box-sizing: border-box;
+
+}
+.text_container{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    text-align: center;
+    
+}
\ No newline at end of file

frontend/src/styles/styles.module.css

@@ -75,19 +75,17 @@ object-fit: cover;
 }
 
 .Header2{
-    height: 60vh;
+    height: 70vh;
     display: flex;
     justify-content: center;
-    align-items: center;
     background: rgb(49, 117, 121);
     flex-wrap: wrap; /* Add flex-wrap property to allow text to wrap */
 
 }
 .card {
-    flex: 1;
-    margin: 0 45px;
-    max-width: 400px;
-    aspect-ratio: 1/1; /* Set aspect ratio to 1:1 */
+    margin: 40px;
+    width: 500px;
+    height: 500px;
     background: rgb(62, 121, 124);
     border-radius: 10px;
     box-shadow: 0 8px 13px 0 rgba(41, 41, 43, 0.548);