password change and password resert implemented

frontend/imk/src/App.jsx

@@ -16,6 +16,8 @@ import AdminPanel from './components/adminPanel/AdminPanel';
 import Dashboard from './components/dashboard/Dashboard';
 import Login from './components/login/login';
 import ProtectedRoute from './components/protectedRoute/ProtectedRoute';
+import ForgotPassword from './components/ForgotPassword';
+import ResetPassword from './components/ResetPassword';
 
 function App() {
 
@@ -33,6 +35,8 @@ function App() {
           <Route path='/ultrasound' element={<UltraSound />} />
           <Route path='/gallery' element={<Gallery />} />
           <Route path='/certificates' element={<Certificates />} />
+          <Route path='/forgot-password' element={<ForgotPassword />} />
+          <Route path='/reset-password' element={<ResetPassword />} />
           <Route path='/clients' element={
             <ProtectedRoute>
               <Clients />

frontend/imk/src/components/ForgotPassword.jsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import axios from 'axios';
+
+export default function ForgotPassword() {
+  const [email, setEmail] = useState('');
+  const [status, setStatus] = useState({ type: '', message: '' });
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setStatus({ type: 'loading', message: 'Sending reset instructions...' });
+
+    try {
+      await axios.post(`http://localhost:3000/auth/forgot-password`, { email });
+      setStatus({
+        type: 'success',
+        message: 'Password reset instructions have been sent to your email.',
+      });
+    } catch (error) {
+      setStatus({
+        type: 'error',
+        message: error.response?.data?.message || 'An error occurred. Please try again.',
+      });
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+        <h2 className="text-center text-3xl font-extrabold text-white">
+          Reset your password
+        </h2>
+      </div>
+
+      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10">
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-white">
+                Email address
+              </label>
+              <input
+                id="email"
+                type="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="mt-1 block w-full rounded-md border-gray-300 bg-gray-700 text-white shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+              />
+            </div>
+
+            {status.message && (
+              <div className={`text-sm ${status.type === 'error' ? 'text-red-400' : 'text-green-400'}`}>
+                {status.message}
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={status.type === 'loading'}
+              className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+            >
+              {status.type === 'loading' ? 'Sending...' : 'Send Reset Instructions'}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/imk/src/components/ResetPassword.jsx

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import axios from 'axios';
+
+export default function ResetPassword() {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [status, setStatus] = useState({ type: '', message: '' });
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (password !== confirmPassword) {
+      setStatus({ type: 'error', message: 'Passwords do not match' });
+      return;
+    }
+
+    setStatus({ type: 'loading', message: 'Resetting password...' });
+    const token = searchParams.get('token');
+
+    try {
+      await axios.post(`http://localhost:3000/auth/reset-password`, {
+        token,
+        newPassword: password,
+      });
+      setStatus({ type: 'success', message: 'Password reset successful!' });
+      setTimeout(() => navigate('/login'), 2000);
+    } catch (error) {
+      setStatus({
+        type: 'error',
+        message: error.response?.data?.message || 'An error occurred. Please try again.',
+      });
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+        <h2 className="text-center text-3xl font-extrabold text-white">
+          Reset your password
+        </h2>
+      </div>
+
+      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10">
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-white">
+                New Password
+              </label>
+              <input
+                id="password"
+                type="password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="mt-1 block w-full rounded-md border-gray-300 bg-gray-700 text-white shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="confirmPassword" className="block text-sm font-medium text-white">
+                Confirm Password
+              </label>
+              <input
+                id="confirmPassword"
+                type="password"
+                required
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                className="mt-1 block w-full rounded-md border-gray-300 bg-gray-700 text-white shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+              />
+            </div>
+
+            {status.message && (
+              <div className={`text-sm ${status.type === 'error' ? 'text-red-400' : 'text-green-400'}`}>
+                {status.message}
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={status.type === 'loading'}
+              className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+            >
+              {status.type === 'loading' ? 'Resetting...' : 'Reset Password'}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/imk/src/components/dashboard/Dashboard.jsx

@@ -1,8 +1,9 @@
 import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
 import { useAuth } from '../../hooks/useAuth';
 import { getSharedDocuments } from '../../services/api';
 import { format } from 'date-fns';
-import { FiFolder, FiFile, FiDownload, FiChevronRight, FiLoader } from 'react-icons/fi';
+import { FiFolder, FiFile, FiDownload, FiChevronRight, FiLoader, FiUser, FiKey, FiMail } from 'react-icons/fi';
 import { downloadDocument } from '../../services/api';
 
 function Dashboard() {
@@ -11,6 +12,13 @@ function Dashboard() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
   const { user } = useAuth();
+  const [userInfo, setUserInfo] = useState(null);
+
+  useEffect(() => {
+    if (user) {
+      setUserInfo(user);
+    }
+  }, [user]);
 
   useEffect(() => {
     const fetchDocuments = async () => {
@@ -88,10 +96,47 @@ function Dashboard() {
   return (
     <div className="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 p-6">
       <div className="max-w-7xl mx-auto">
-        <header className="mb-8 mt-20">
+        {/* <header className="mb-8 mt-20">
           <h1 className="text-3xl font-bold text-white mb-2">Your Documents</h1>
           <p className="text-gray-400">Access and manage your shared documents</p>
-        </header>
+        </header> */}
+        {/* User Info Card */}
+        <div className="bg-gray-800 rounded-lg shadow-lg p-6 mb-8">
+          <div className="flex items-center space-x-4">
+            <div className="p-3 bg-indigo-600 rounded-full">
+              <FiUser className="w-6 h-6 text-white" />
+            </div>
+            <div>
+              <h2 className="text-xl font-bold text-white">Welcome, {userInfo?.name}</h2>
+              <p className="text-gray-400">{userInfo?.email}</p>
+            </div>
+          </div>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <Link 
+            to="/reset-password"
+            className="flex items-center space-x-3 p-4 bg-gray-800 rounded-lg hover:bg-gray-700 transition-colors"
+          >
+            <FiKey className="w-5 h-5 text-indigo-500" />
+            <div>
+              <h3 className="text-white font-semibold">Reset Password</h3>
+              <p className="text-sm text-gray-400">Change your current password</p>
+            </div>
+          </Link>
+
+          <Link 
+            to="/forgot-password"
+            className="flex items-center space-x-3 p-4 bg-gray-800 rounded-lg hover:bg-gray-700 transition-colors"
+          >
+            <FiMail className="w-5 h-5 text-indigo-500" />
+            <div>
+              <h3 className="text-white font-semibold">Forgot Password</h3>
+              <p className="text-sm text-gray-400">Request a password reset link</p>
+            </div>
+          </Link>
+        </div>
+
+        <div className="mt-8">
 
         <div className="grid gap-6">
           {Object.entries(documents).length > 0 ? (
@@ -144,7 +189,8 @@ function Dashboard() {
             <div className="text-center py-12">
               <p className="text-gray-400">No documents available</p>
             </div>
-          )}
+            )}
+          </div>
         </div>
       </div>
     </div>