Working on profile picture

ui/src/components/Header/HeaderModal.tsx

@@ -14,6 +14,7 @@ import {
   Text
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
+import Cookies from 'js-cookie';
 
 interface HeaderModalProps {
   type?: string;
@@ -72,9 +73,9 @@ export function HeaderModal({ type, toggle, login, register }: HeaderModalProps)
 
   const loginForm = useForm({
     initialValues: {
-      email: '',
+      email: Cookies.get('email') || '',
       password: '',
-      remember: false
+      remember: Cookies.get('remember') === 'true'
     }
   });
 
@@ -173,6 +174,12 @@ export function HeaderModal({ type, toggle, login, register }: HeaderModalProps)
           <Paper withBorder shadow='md' p={30} mt={30} radius='md'>
             <form
               onSubmit={loginForm.onSubmit(async (values) => {
+                Cookies.set('remember', 'true', { expires: 365 });
+                if (values.remember) {
+                  Cookies.set('email', values.email, { expires: 365 });
+                } else {
+                  Cookies.remove('email');
+                }
                 const success = await login(values);
                 if (success) {
                   onClose();
@@ -188,7 +195,7 @@ export function HeaderModal({ type, toggle, login, register }: HeaderModalProps)
                 {...loginForm.getInputProps('password')}
               />
               <Group justify='space-between' mt='lg'>
-                <Checkbox label='Remember me' {...loginForm.getInputProps('remember')} />
+                <Checkbox label='Remember me' defaultChecked={loginForm.values.remember} {...loginForm.getInputProps('remember')} />
                 <Anchor component='a' size='sm' onClick={() => toggle('reset')}>
                   Forgot password?
                 </Anchor>

ui/src/components/Header/header.css

@@ -2,7 +2,7 @@
   display: flex;
   justify-content: space-between;
   height: 46px;
-  background-color: #0057a3;
+  background-color: #242d3e;
   color: white;
 }
 

ui/src/components/Header/index.tsx

@@ -12,6 +12,8 @@ import { HeaderModal } from './HeaderModal';
 import { coordinatesState } from '@/state/map';
 import { User } from '@/api/auth.types';
 import { usePathname, useRouter } from 'next/navigation';
+import { FaMoon } from "react-icons/fa6";
+import { FaSun } from "react-icons/fa6";
 
 interface HeaderProps {
   user: User | undefined;
@@ -106,6 +108,10 @@ function UserSection({ user, profilePicture, setProfilePicture, logout, toggle }
   return (
     <div className='user-section'>
       <>
+        {/* <UnstyledButton> */}
+          {/* <FaMoon /> */}
+          {/* <FaSun /> */}
+        {/* </UnstyledButton> */}
         {user ? (
           <Menu shadow='md' width={200} openDelay={100} closeDelay={400}>
             <Menu.Target>
@@ -136,7 +142,7 @@ function UserSection({ user, profilePicture, setProfilePicture, logout, toggle }
                       });
                     }
                   }}
-                  accept='image/png,image/jpeg,image/jpg'
+                  accept='image/png,image/jpeg,image/svg+xml,image/webp,image/gif,image/apng,image/avif'
                   multiple={false}
                 >
                   {(props) => (

ui/src/components/Loader.tsx

@@ -1,36 +1,33 @@
 'use client';
 
-import { useEffect, useState } from "react";
-import Header from "./Header";
-import { useRecoilState } from "recoil";
-import { refreshIdState, userState } from "@/state/auth";
-import { login, logout, refresh, refreshLoggedIn, register } from "@/api/auth";
-import { getFavorites, getPicture } from "@/api/users";
-import Cookies from "js-cookie";
-import { favoritesState, profilePictureState } from "@/state/user";
-import { notifications } from "@mantine/notifications";
-import { usePathname, useRouter } from "next/navigation";
+import { useEffect, useState } from 'react';
+import Header from './Header';
+import { useRecoilState } from 'recoil';
+import { refreshIdState, userState } from '@/state/auth';
+import { login, logout, refresh, refreshLoggedIn, register } from '@/api/auth';
+import { getFavorites, getPicture } from '@/api/users';
+import Cookies from 'js-cookie';
+import { favoritesState } from '@/state/user';
+import { notifications } from '@mantine/notifications';
+import { usePathname, useRouter } from 'next/navigation';
 
 export default function Loader({ children }: { children: any }) {
   const [loading, setLoading] = useState(true);
   const [user, setUser] = useRecoilState(userState);
   const [refreshId, setRefreshId] = useRecoilState(refreshIdState);
   const [_, setFavorites] = useRecoilState(favoritesState);
-  const [profilePicture, setProfilePicture] = useRecoilState(profilePictureState);
+  const [profilePicture, setProfilePicture] = useState<File | undefined>(undefined);
   const path = usePathname();
   const router = useRouter();
 
   useEffect(() => {
-    setLoading(true);
-    if (!user || !Cookies.get("logged_in")) {
+    if (!user || !Cookies.get('logged_in')) {
       refreshUser();
     }
-    setLoading(false);
-  }, [user]);
+  }, []);
 
   useEffect(() => {
     const p = path.split('/');
-    console.log(p[1], user);
 
     if (p.length > 1) {
       if (p[1] == 'admin' && user?.role != 'admin') {
@@ -41,31 +38,36 @@ export default function Loader({ children }: { children: any }) {
     }
   }, [path]);
 
-  function refreshUser() {
-    refresh().then((response) => {
-      if (response) {
-        setRefreshId(refreshLoggedIn());
-        setUser(response.user);
-        getFavorites().then((response) => {
-          if (response) {
-            setFavorites(response);
-          }
-        });
-        if (response.user.profile_picture) {
-          getPicture().then((response) => {
-            if (response) {
-              setProfilePicture(response as File);
-            }
-          });
+  async function refreshUser() {
+    setLoading(true);
+    const response = await refresh();
+    if (response) {
+      setRefreshId(refreshLoggedIn());
+      setUser(response.user);
+      const favoritesResponse = await getFavorites();
+      if (favoritesResponse) {
+        setFavorites(favoritesResponse);
+      }
+      if (response.user.profile_picture) {
+        const pictureResponse = await getPicture();
+        if (pictureResponse) {
+          setProfilePicture(pictureResponse as File);
         }
       }
-    });
+    }
+    setLoading(false);
   }
 
   async function loginUser({ email, password }: { email: string, password: string}): Promise<boolean> {
     const loginResponse = await login(email, password);
     if (loginResponse) {
       setUser(loginResponse.user);
+      if (loginResponse.user.profile_picture) {
+        const pictureResponse = await getPicture();
+        if (pictureResponse) {
+          setProfilePicture(pictureResponse as File);
+        }
+      }
       setRefreshId(refreshLoggedIn());
       notifications.show({
         title: `Welcome back ${loginResponse.user.first_name}!`,
@@ -89,7 +91,7 @@ export default function Loader({ children }: { children: any }) {
 
   async function logoutUser(): Promise<void> {
     await logout();
-    Cookies.remove("logged_in");
+    Cookies.remove('logged_in');
     setUser(undefined);
     setFavorites([]);
     setProfilePicture(undefined);
@@ -117,6 +119,12 @@ export default function Loader({ children }: { children: any }) {
       const loginResponse = await login(email, password);
       if (loginResponse) {
         setUser(loginResponse.user);
+        if (loginResponse.user.profile_picture) {
+          const pictureResponse = await getPicture();
+          if (pictureResponse) {
+            setProfilePicture(pictureResponse as File);
+          }
+        }
         setRefreshId(refreshLoggedIn());
         notifications.update({
           id,