Rework user profile

Author: MrBartusek

apps/client/src/components/Pages/User/UserDetailsTab.tsx

@@ -1,10 +1,21 @@
-import UserDetailsForm from '../../User/UserDetailsForm';
+import { Link } from 'react-router-dom';
+import IconButton from '../../IconButton';
+import { BsPencil } from 'react-icons/bs';
+import UserProfileCard from '../../UserProfileCard';
 
 function UserDetailsTab() {
 	return (
 		<div className="mt-8">
-			<h2 className="mb-4 text-3xl">User Details</h2>
-			<UserDetailsForm />
+			<h2 className="mb-6 text-3xl">My account</h2>
+			<UserProfileCard />
+			<div className="py-6">
+				<Link
+					to="update"
+					className="inline-block"
+				>
+					<IconButton icon={BsPencil}>Edit profile</IconButton>
+				</Link>
+			</div>
 		</div>
 	);
 }

apps/client/src/components/Pages/User/UserSettingsPage.tsx

@@ -13,7 +13,7 @@ function UserSettingsPage() {
 				icon={BsSliders}
 				title="User Settings"
 			>
-				<GoBackButton />
+				<GoBackButton to="/dashboard" />
 			</SecondaryNavbar>
 			<SettingsLayout sidebar={<UserSettingsSidebar />}>
 				<Outlet />

apps/client/src/components/Pages/User/UserUpdateTab.tsx

@@ -0,0 +1,11 @@
+import UserDetailsForm from '../../User/UserDetailsForm';
+
+function UserUpdateTab() {
+	return (
+		<div className="mt-8">
+			<h2 className="mb-4 text-3xl">Edit user Details</h2>
+			<UserDetailsForm />
+		</div>
+	);
+}
+export default UserUpdateTab;

apps/client/src/components/Router.tsx

@@ -45,6 +45,7 @@ import RegisterSelect from './RegisterSelect';
 import { ProtectedRoute, PublicRoute } from './SpecialRoutes';
 import EmailConfirmPage from './Pages/EmailConfirmPage';
 import PasswordResetPage from './Pages/PasswordResetPage';
+import UserUpdateTab from './Pages/User/UserUpdateTab';
 
 function Router() {
 	const router = createBrowserRouter([
@@ -124,6 +125,10 @@ function Router() {
 									path: '',
 									element: <UserDetailsTab />,
 								},
+								{
+									path: 'update',
+									element: <UserUpdateTab />,
+								},
 								{
 									path: 'security',
 									element: <UserSecurityTab />,

apps/client/src/components/UserAvatar.tsx

@@ -11,8 +11,8 @@ function UserAvatar({ user, variant = 'square', size = 6 }: UserAvatarProps) {
 	return (
 		<div style={{ width: `${size / 4}rem` }}>
 			<img
-				height={64}
-				width={64}
+				height={size * 4}
+				width={size * 4}
 				className={classNames(
 					'w-100',
 					{

apps/client/src/components/UserInfo.tsx

@@ -32,7 +32,7 @@ function UserInfo() {
 					user={user}
 					variant="circle"
 				/>
-				<div>{user.email}</div>
+				<div>{user.username}</div>
 				{user.isDemo && (
 					<Badge>
 						<BsPerson />

apps/client/src/components/UserProfileCard.tsx

@@ -0,0 +1,41 @@
+import { useContext } from 'react';
+import { UserContext } from '../context/UserContext';
+import UserAvatar from './UserAvatar';
+
+function UserProfileCard() {
+	const { user } = useContext(UserContext);
+
+	console.log(user);
+
+	return (
+		<div className="my-4 flex flex-col overflow-hidden rounded-md border">
+			<div className="flex gap-5 bg-gray-150 p-6">
+				<UserAvatar
+					user={user}
+					variant="circle"
+					size={22}
+				/>
+				<div className="flex flex-col justify-center">
+					<div className="text-lg font-semibold">{user.username}</div>
+					<div className="text-muted">{user.email}</div>
+					{user.isDemo && <div className="text-danger">(Temporary demonstration account)</div>}
+				</div>
+			</div>
+			<div className="flex flex-col gap-4 px-8 py-6">
+				<div>
+					<div className="font-medium">Username</div>
+					<div className="text-muted">{user.username}</div>
+				</div>
+				<div>
+					<div className="font-medium">E-mail</div>
+					<div className="text-muted">{user.email}</div>
+				</div>
+				<div>
+					<div className="font-medium">Internal ID</div>
+					<code>{user.id}</code>
+				</div>
+			</div>
+		</div>
+	);
+}
+export default UserProfileCard;