Add mock user change password page

Author: MrBartusek

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

@@ -1,7 +1,7 @@
 function UserDeleteTab() {
 	return (
 		<div className="mt-8">
-			<h2 className="mb-4 text-3xl">Delete user account</h2>
+			<h2 className="mb-4 text-3xl">Delete account</h2>
 		</div>
 	);
 }

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

@@ -2,7 +2,6 @@ import { BsPencil } from 'react-icons/bs';
 import { Link } from 'react-router-dom';
 import IconButton from '../../IconButton';
 import UserProfileCard from '../../UserProfileCard';
-import UserDangerZone from '../../User/UserDangerZone';
 
 function UserDetailsTab() {
 	return (
@@ -15,7 +14,6 @@ function UserDetailsTab() {
 			>
 				<IconButton icon={BsPencil}>Edit profile</IconButton>
 			</Link>
-			<UserDangerZone />
 		</div>
 	);
 }

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

@@ -0,0 +1,8 @@
+function UserPasswordChangeTab() {
+	return (
+		<div className="mt-8">
+			<h2 className="mb-4 text-3xl">Change password</h2>
+		</div>
+	);
+}
+export default UserPasswordChangeTab;

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

@@ -1,10 +1,20 @@
+import { BsShieldLock } from 'react-icons/bs';
+import IconButton from '../../IconButton';
+import UserDangerZone from '../../User/UserDangerZone';
+import { Link } from 'react-router-dom';
+
 function UserSecurityTab() {
 	return (
 		<div className="mt-8">
 			<h2 className="mb-4 text-3xl">Privacy & Security</h2>
-			<p className="mb-4 text-muted">
+			<p className="mb-6 text-muted">
 				Manage options to secure your account and protect your privacy.
 			</p>
+			<Link to="../change-password">
+				<IconButton icon={BsShieldLock}>Change password</IconButton>
+			</Link>
+
+			<UserDangerZone />
 		</div>
 	);
 }

apps/client/src/components/Router.tsx

@@ -49,6 +49,7 @@ import UserUpdateTab from './Pages/User/UserUpdateTab';
 import UserConfirmEmailTab from './Pages/User/UserConfirmEmailTab';
 import UserEmailChangeTab from './Pages/User/UserEmailChangeTab';
 import UserDeleteTab from './Pages/User/UserDeleteTab';
+import UserPasswordChangeTab from './Pages/User/UserPasswordChangeTab';
 
 function Router() {
 	const router = createBrowserRouter([
@@ -148,6 +149,10 @@ function Router() {
 									path: 'change-email',
 									element: <UserEmailChangeTab />,
 								},
+								{
+									path: 'change-password',
+									element: <UserPasswordChangeTab />,
+								},
 							],
 						},
 					],

apps/client/src/components/User/UserDangerZone.tsx

@@ -8,7 +8,7 @@ function UserDangerZone() {
 			<h2 className="mb-4 text-2xl">Danger Zone</h2>
 			<p className="text-muted">Potentially destructive actions, be cautious!</p>
 			<div className="mt-6 inline-flex flex-col gap-6">
-				<Link to="delete">
+				<Link to="../delete">
 					<IconButton
 						variant="danger"
 						icon={BsPersonXFill}