Stylize Profile Page UI and small cleanup for auth components

clients/plan-it-web/src/App.tsx

@@ -17,6 +17,7 @@ import { useJwtAuth } from './hooks/useJwtAuth';
 import { Register } from './components/Register/Register';
 import { ProfilePage } from './components/Profile/ProfilePage';
 import { ProtectedRoute } from './router/ProtectedRoute';
+import { Flex, Loader } from '@mantine/core';
 
 export default function App() {
   const dispatch = useAppDispatch();
@@ -30,7 +31,11 @@ export default function App() {
     }
   },[data, dispatch]);
 
-  if (isLoading) return <div>Loading...</div>;
+  if (isLoading)
+  {
+    return <Flex style={{width: "100%", height: "100vh"}}justify='center' align='center'><Loader /></Flex>
+  }
+
   if (error) return <div>Error occurred while fetching workspaces</div>;
 
   return (

clients/plan-it-web/src/components/Login/Login.tsx

@@ -76,7 +76,7 @@ import { notifications } from '@mantine/notifications';
         </Text>
 
         <Paper withBorder shadow="md" p={30} mt={30} radius="md">
-          <TextInput label="Email" placeholder="you@mantine.dev" value={email} onChange={(e) => setEmail(e.target.value) } required />
+          <TextInput label="Email" placeholder="you@email.com" value={email} onChange={(e) => setEmail(e.target.value) } required />
           <PasswordInput label="Password" placeholder="Your password" onChange={(e) => setPassword(e.target.value)} required mt="md" />
           <Group justify="space-between" mt="lg">
             <Checkbox label="Remember me" />

clients/plan-it-web/src/components/Navbar/Navbar.tsx

@@ -15,7 +15,7 @@ import {
   import { IconBulb, IconUser, IconCheckbox, IconSearch, IconPlus} from '@tabler/icons-react';
   import { UserButton } from '../UserButton/UserButton';
   import classes from './Navbar.module.css';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useNavigate } from 'react-router-dom';
 import {  useCreateWorkspaceMutation } from '../../services/planit-api';
 import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks';
 import { addWorkspace } from '../../redux/workspacesSlice';
@@ -31,6 +31,7 @@ import { addWorkspace } from '../../redux/workspacesSlice';
 
   export function Navbar() {
     const dispatch = useAppDispatch();
+    const navigate = useNavigate();
     const workspaces = useAppSelector( state => state.workspaces.workspaces);
     const [ createWorkspace ]= useCreateWorkspaceMutation();
 
@@ -46,6 +47,10 @@ import { addWorkspace } from '../../redux/workspacesSlice';
       dispatch(addWorkspace(newWorkspace.data));
     }
 
+    const handleUserButtonClick = () => {
+      navigate('/profile');
+    }
+
     const mainLinks = links.map((link) => (
       <UnstyledButton key={link.label} className={classes.mainLink}>
         <div className={classes.mainLinkInner}>
@@ -77,7 +82,7 @@ import { addWorkspace } from '../../redux/workspacesSlice';
     return (
       <nav className={classes.navbar}>
         <div className={classes.section}>
-          <UserButton />
+          <UserButton onClick={handleUserButtonClick}/>
         </div>
 
         <TextInput

clients/plan-it-web/src/components/Profile/ProfilePage.tsx

@@ -1,6 +1,8 @@
-import React, { useState, useEffect } from 'react';
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+
+import { useState, useEffect } from 'react';
 import {
-  Container,
   Title,
   TextInput,
   PasswordInput,
@@ -9,12 +11,12 @@ import {
   Box,
   Avatar,
   FileInput,
+  Flex,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useGetUserQuery, useUpdateUserMutation, useUploadAvatarMutation } from '../../services/planit-api';
 import { showNotification } from '@mantine/notifications';
 import { useAppSelector } from '../../hooks/reduxHooks';
-import { useNavigate } from 'react-router-dom';
 
 interface ProfileFormValues {
   firstName: string;
@@ -88,7 +90,7 @@ export function ProfilePage() {
         message: 'Profile updated successfully',
         color: 'green',
       });
-    } catch (error) {
+    } catch {
       showNotification({
         title: 'Error',
         message: 'Failed to update profile',
@@ -98,8 +100,8 @@ export function ProfilePage() {
   };
 
   return (
-    <Container size="sm">
-      <Title order={2} mb="xl">Edit Profile</Title>
+    <Flex style={{width:"100%"}} justify='center' direction='column' align='center'>
+      <Title order={3} mb="xl" mt={25} >Edit Profile</Title>
       <Box mb="xl">
         <Group justify="center">
           <Avatar 
@@ -148,6 +150,6 @@ export function ProfilePage() {
           </Button>
         </Group>
       </form>
-    </Container>
+      </Flex>
   );
 }

clients/plan-it-web/src/components/UserButton/UserButton.tsx

@@ -2,9 +2,13 @@ import { UnstyledButton, Group, Avatar, Text } from '@mantine/core';
 import { IconChevronRight } from '@tabler/icons-react';
 import classes from './UserButton.module.css';
 
-export function UserButton() {
+interface UserButton {
+  onClick: () => void;
+}
+
+export function UserButton({onClick} : UserButton) {
   return (
-    <UnstyledButton className={classes.user}>
+    <UnstyledButton onClick={onClick} className={classes.user}>
       <Group className={classes.container}>
         <Avatar
           src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-8.png"

clients/plan-it-web/src/types/User.ts

@@ -3,4 +3,5 @@ export interface User {
     email: string;
     firstName: string;
     lastName: string;
+    avatarUrl: string | null;
 }