diff --git a/components/Settings/ChangePassword.tsx b/components/Settings/ChangePassword.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/Settings/EditProfile.tsx b/components/Settings/EditProfile.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/Settings/EmailNotif.tsx b/components/Settings/EmailNotif.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/pages/api/users/change-password.ts b/pages/api/users/change-password.ts
new file mode 100644
index 0000000..fb56024
--- /dev/null
+++ b/pages/api/users/change-password.ts
@@ -0,0 +1,32 @@
+// /api/users/change-password.ts
+import type { NextApiRequest, NextApiResponse } from 'next';
+import dbConnect from '@/lib/dbConnect';
+import Users from 'bookem-shared/src/models/Users';
+import { compare, hash } from 'bcrypt';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+ if (req.method !== 'POST') {
+ return res.status(405).json({ message: 'Method Not Allowed' });
+ }
+
+ try {
+ const { oldPassword, newPassword } = JSON.parse(req.body);
+ await dbConnect();
+
+ const userId = 'the-authenticated-users-id'; // Replace with actual logic to retrieve user ID
+ const user = await Users.findById(userId);
+
+ const passwordMatch = await compare(oldPassword, user.password);
+ if (!passwordMatch) {
+ return res.status(403).json({ message: 'Incorrect old password' });
+ }
+
+ const hashedNewPassword = await hash(newPassword, 12);
+ user.password = hashedNewPassword;
+ await user.save();
+
+ res.status(200).json({ message: 'Password changed successfully' });
+ } catch (error) {
+ res.status(500).json({ message: 'An error occurred while changing the password.', error });
+ }
+}
diff --git a/pages/api/users/update.ts b/pages/api/users/update.ts
new file mode 100644
index 0000000..9f66929
--- /dev/null
+++ b/pages/api/users/update.ts
@@ -0,0 +1,26 @@
+// /api/users/update.ts
+import type { NextApiRequest, NextApiResponse } from 'next';
+import dbConnect from '@/lib/dbConnect';
+import Users from 'bookem-shared/src/models/Users';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+ if (req.method !== 'POST') {
+ return res.status(405).json({ message: 'Method Not Allowed' });
+ }
+
+ try {
+ const userUpdates = JSON.parse(req.body);
+ await dbConnect();
+
+ // Assuming you have a method to authenticate and get user ID
+ const userId = 'the-authenticated-users-id'; // Replace with actual logic to retrieve user ID
+
+ const updateResult = await Users.findByIdAndUpdate(userId, userUpdates, {
+ new: true,
+ });
+
+ res.status(200).json({ message: 'User updated', user: updateResult });
+ } catch (error) {
+ res.status(500).json({ message: 'An error occurred while updating the user.', error });
+ }
+}
diff --git a/pages/settings.tsx b/pages/settings.tsx
index 91caa01..382bd6d 100644
--- a/pages/settings.tsx
+++ b/pages/settings.tsx
@@ -1,22 +1,105 @@
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
import { signOut, useSession } from 'next-auth/react';
-import React from 'react';
+import { getServerSideProps } from '@/lib/getServerSideProps';
+import {
+ SettingsContainer,
+ Form,
+ Button,
+ ErrorMsg,
+ Input,
+ Sidebar,
+ SidebarItem, // Make sure to remove this if you're importing ActiveSidebarItem separately
+ ContentArea,
+ SettingsH1,
+ SignOutButton, // Ensure this is imported
+} from '@/styles/settings.styles';
const SettingsPage = () => {
const { data: session } = useSession();
+ // Added state to keep track of the active component
+ const [activeComponent, setActiveComponent] = useState('editProfile');
+
+ const profileForm = useForm();
+ const passwordForm = useForm();
+ const notificationsForm = useForm(); // Assuming you might have a form for this
+
+ const handleProfileUpdate = async data => {
+ // Profile update logic...
+ };
+
+ const handlePasswordChange = async data => {
+ // Password change logic...
+ };
+
+ const handleNotificationsChange = async data => {
+ // Dummy function for email notifications changes
+ };
+
+ if (!session) {
+ return You need to be signed in to view this page.
;
+ }
+
+ const renderActiveComponent = () => {
+ switch (activeComponent) {
+ case 'editProfile':
+ return (
+
+ );
+ case 'changePassword':
+ return (
+
+ );
+ case 'emailNotifications':
+ return (
+
+ );
+ default:
+ return Select a setting to edit
;
+ }
+ };
return (
-
- {session && (
- <>
-
You have signed in as {session.user?.email}
-
-
- )}
-