so far content shows up on profilepage

src/AppRouter.jsx

@@ -10,7 +10,7 @@ const Dashboard = lazy(() => import('./pages/dashboard/Dashboard'));
 const ErrorPage = lazy(() => import('./pages/error/Error'));
 const Login = lazy(() => import('./component/login/Login'));
 const Logout = lazy(() => import('./pages/logout/Logout'));
-const Profile = lazy(() => import('./pages/profile/Profile'));
+const Profile = lazy(() => import('./component/profile/Profile'));
 const Administration = lazy(() => import('./pages/administration/Administration'));
 const Home = lazy(() => import('./pages/home/Home'));
 const SignUp = lazy(() => import('./pages/signup/SignUp'));

src/component/deleteAccount/DeleteAccount.jsx

@@ -1,6 +1,6 @@
 // src/component/DeleteAccount.jsx
 import { useState, useContext } from 'react';
-import { auth } from '../../firebaseConfig';
+import { auth } from '../../utils/firebaseConfig';
 import { deleteUser, reauthenticateWithCredential, EmailAuthProvider } from 'firebase/auth';
 import { useNavigate } from 'react-router-dom';
 import { AuthContext } from '../../context/AuthContext'; // Import AuthContext for å få tilgang til logout-funksjonen

src/component/login/Login.jsx

@@ -1,7 +1,7 @@
 import { useState, useContext, useEffect } from 'react';
 import { AuthContext } from '../../context/AuthContext';
 import { useNavigate } from 'react-router-dom';
-import { auth } from '../../firebaseConfig';
+import { auth } from '../../utils/firebaseConfig';
 import { signInWithEmailAndPassword } from 'firebase/auth';
 import '../../component/login/login.css';
 

src/component/profile/Profile.jsx

@@ -0,0 +1,28 @@
+// src/component/profile/Profile.jsx
+import useProfile from '../../hooks/useProfile';
+
+const Profile = () => {
+  const { profileData, loading } = useProfile();
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  if (!profileData) {
+    return <div>No profile data found.</div>;
+  }
+
+  return (
+    <div>
+      <h1>Your Profile</h1>
+      <p>Name: {profileData.name}</p>
+      <p>Email: {profileData.email}</p>
+      <p>City: {profileData.city}</p>
+      <p>Country: {profileData.country}</p>
+      <p>hh: {profileData.address}</p>
+      {/* Legg til flere felt etter behov */}
+    </div>
+  );
+};
+
+export default Profile;

src/component/profile/ProfileForm.jsx

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+
+const ProfileForm = ({ profileData, setProfileData, isEditing, setIsEditing, uploadProfileImage }) => {
+    return (
+        <form>
+            <div>
+                <label>Name:</label>
+                <input
+                    type="text"
+                    value={profileData.name}
+                    onChange={(e) => setProfileData({ ...profileData, name: e.target.value })}
+                    disabled={!isEditing}
+                />
+            </div>
+            {/* ... andre input-felter ... */}
+            <div>
+                <label>Profile Image:</label>
+                <input
+                    type="file"
+                    accept="image/*"
+                    onChange={(e) => uploadProfileImage(e.target.files[0])} // Kall uploadProfileImage her
+                    disabled={!isEditing}
+                />
+            </div>
+            <button type="button" onClick={() => setIsEditing(true)}>Edit</button>
+        </form>
+    );
+};
+
+ProfileForm.propTypes = {
+    profileData: PropTypes.object.isRequired,
+    setProfileData: PropTypes.func.isRequired,
+    isEditing: PropTypes.bool.isRequired,
+    setIsEditing: PropTypes.func.isRequired,
+    uploadProfileImage: PropTypes.func.isRequired, // Sørg for at denne er inkludert
+};
+
+export default ProfileForm;
+

src/component/profile/ProfileImageUpload.jsx

@@ -0,0 +1 @@
+

src/component/profile/profile.css

@@ -0,0 +1,93 @@
+/* ProfileForm.css */
+
+.profile-form-container {
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    padding: 20px;
+    max-width: 600px;
+    margin: auto;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+
+
+.profile-header {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.profile-header h2 {
+    margin: 10px 0 5px;
+    font-size: 24px;
+}
+
+.profile-header h3 {
+    margin: 0;
+    font-size: 16px;
+    color: #666;
+}
+
+.profile-image {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-bottom: 15px;
+}
+
+.profile-form {
+    display: flex;
+    flex-direction: column;
+}
+
+.input-group {
+    margin-bottom: 15px;
+}
+
+.input-group label {
+    margin-bottom: 5px;
+    font-weight: bold;
+    color: #333;
+}
+
+.input-group input {
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 16px;
+}
+
+.input-group input:focus {
+    border-color: #007bff;
+    outline: none;
+}
+
+.action-button, .save-button {
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    background-color: #007bff;
+    color: white;
+    font-size: 16px;
+    cursor: pointer;
+    margin-top: 10px;
+}
+
+.action-button:hover, .save-button:hover {
+    background-color: #0056b3;
+}
+
+/* Responsiv design */
+@media (max-width: 600px) {
+    .profile-form-container {
+        padding: 10px;
+    }
+
+    .profile-image {
+        width: 80px;
+        height: 80px;
+    }
+
+    .action-button, .save-button {
+        width: 100%;
+    }
+}
+}

src/context/AuthContext.jsx

@@ -31,7 +31,7 @@
 // src/context/AuthContext.jsx
 import { createContext, useState, useContext, useEffect } from 'react';
 import PropTypes from 'prop-types'; // Importer PropTypes
-import { auth } from '../firebaseConfig'; // Importer Firebase-authentisering
+import { auth } from '../utils/firebaseConfig'; // Importer Firebase-authentisering
 import { onAuthStateChanged, setPersistence, browserLocalPersistence } from 'firebase/auth';
 
 export const AuthContext = createContext();

src/hooks/useAuth.js

@@ -0,0 +1,41 @@
+// src/hooks/useAuth.js
+import { useState, useEffect } from 'react';
+import { auth } from '../utils/firebaseConfig';
+import { updateEmail, updatePassword, onAuthStateChanged } from 'firebase/auth';
+
+const useAuth = () => {
+  const [currentUser, setCurrentUser] = useState(null);
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (user) => {
+      console.log("User state changed:", user); // Logg brukerstatusendringer
+      setCurrentUser(user); // Oppdaterer currentUser når autentiseringstilstanden endres
+    });
+
+    return () => unsubscribe(); // Rydder opp abonnementet når komponenten avmonteres
+  }, []);
+
+  const updateUserEmail = async (newEmail) => {
+    if (newEmail !== auth.currentUser.email) {
+      await updateEmail(auth.currentUser, newEmail);
+      console.log("User email updated to:", newEmail); // Logg når e-post oppdateres
+    }
+  };
+
+  const updateUserPassword = async (newPassword) => {
+    if (newPassword) {
+      await updatePassword(auth.currentUser, newPassword);
+      console.log("User password updated."); // Logg når passord oppdateres
+    }
+  };
+
+  return {
+    currentUser, // Returner currentUser for bruk i komponentene
+    updateUserEmail,
+    updateUserPassword,
+  };
+};
+
+export default useAuth;
+
+

src/hooks/useProfile.js

@@ -0,0 +1,46 @@
+// src/hooks/useProfile.js
+import { useState, useEffect } from 'react';
+import { firestore } from '../utils/firebaseConfig';
+import { doc, getDoc } from 'firebase/firestore';
+import useAuth from './useAuth';
+
+const useProfile = () => {
+  const [profileData, setProfileData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const { currentUser } = useAuth();
+
+  useEffect(() => {
+    const fetchProfileData = async () => {
+      if (!currentUser) {
+        console.log("No current user found, setting loading to false."); // Logging if no user is found
+        setLoading(false);
+        return;
+      }
+
+      console.log("Current User UID:", currentUser.uid); // Logg UID-en her
+
+      try {
+        const userDocRef = doc(firestore, 'users', currentUser.uid);
+        const userDoc = await getDoc(userDocRef);
+
+        if (userDoc.exists()) {
+          setProfileData(userDoc.data());
+          console.log("Profile data loaded:", userDoc.data()); // Logg profildata ved henting
+        } else {
+          console.error("User document does not exist.");
+        }
+      } catch (error) {
+        console.error("Error fetching user profile:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProfileData();
+  }, [currentUser]);
+
+  return { profileData, loading };
+};
+
+export default useProfile;
+

src/pages/administration/Administration.jsx

@@ -1,6 +1,6 @@
 // src/pages/Administration/Administration.jsx
 import { useEffect, useState } from 'react';
-import { firestore } from '../../firebaseConfig';
+import { firestore } from '../../utils/firebaseConfig';
 import { collection, getDocs, deleteDoc, doc } from 'firebase/firestore';
 import './Administration.css';
 

src/pages/nav/Navigation.jsx

@@ -44,6 +44,7 @@ const Navigation = () => {
         <li><Link to="/dashboard" onClick={handleLinkClick}>Dashboard</Link></li>
         <li><Link to="/signup" onClick={handleLinkClick}>Sign up</Link></li>
         <li><Link to="/deleteAccount" onClick={handleLinkClick}>Delete Account</Link></li>
+        <li><Link to="/profile" onClick={handleLinkClick}>profile</Link></li>
       </ul>
 
       <div className="auth-buttons">