password change and password resert implemented

backend/imk-backend/.env

@@ -6,6 +6,7 @@
 
 DATABASE_URL="postgresql://root:admin@localhost:5432/imk?schema=public"
 JWT_SECRET=some-secret
+JWT_RESET_SECRET=some-reset-secret-key
 AWS_REGION=EU2
 AWS_ACCESS_KEY_ID=4d2f5655369a02100375e3247d7e1fe6
 AWS_SECRET_ACCESS_KEY=6d4723e14c0d799b89948c24dbe983e4

backend/imk-backend/src/auth/auth.controller.ts

@@ -6,6 +6,7 @@ import {
   UseGuards,
   Get,
   Request,
+  BadRequestException,
 } from '@nestjs/common';
 import { AuthService } from './auth.service';
 import { LoginDto } from '../dto/login.dto';
@@ -39,6 +40,23 @@ export class AuthController {
   async createAdmin(@Body() createUserDto: CreateUserDto) {
     return this.authService.createUser(createUserDto);
   }
+  @Post('forgot-password')
+  async forgotPassword(@Body('email') email: string) {
+    if (!email) {
+      throw new BadRequestException('Email is required');
+    }
+    return this.authService.requestPasswordReset(email);
+  }
+
+  @Post('reset-password')
+  async resetPassword(
+    @Body() body: { token: string; newPassword: string },
+  ) {
+    if (!body.token || !body.newPassword) {
+      throw new BadRequestException('Token and new password are required');
+    }
+    return this.authService.resetPassword(body.token, body.newPassword);
+  }
 
   @UseGuards(JwtAuthGuard)
   @Get('user-info')

backend/imk-backend/src/auth/auth.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, ConflictException } from '@nestjs/common';
+import { Injectable, ConflictException, NotFoundException, BadRequestException } from '@nestjs/common';
 import { JwtService } from '@nestjs/jwt';
 import { PrismaService } from '../prisma/prisma.service';
 import * as bcrypt from 'bcrypt';
@@ -41,35 +41,6 @@ export class AuthService {
     };
   }
 
-  // async createUser(
-  //   createUserDto: CreateUserDto,
-  //   isAdmin: boolean = false,
-  // ): Promise<any> {
-  //   const existingUser = await this.prisma.user.findUnique({
-  //     where: { email: createUserDto.email },
-  //   });
-
-  //   if (existingUser) {
-  //     throw new ConflictException('Email already exists');
-  //   }
-
-  //   const hashedPassword = await bcrypt.hash(createUserDto.password, 10);
-
-  //   const newUser = await this.prisma.user.create({
-  //     data: {
-  //       email: createUserDto.email,
-  //       password: hashedPassword,
-  //       name: createUserDto.name,
-  //       isAdmin: isAdmin,
-  //     },
-  //   });
-
-  //   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  //   const { password, ...result } = newUser;
-  //   console.log(result);
-  //   return result;
-  // }
-
   async createUser(createUserDto: CreateUserDto) {
     const user = await this.prisma.user.create({
       data: {
@@ -85,14 +56,35 @@ export class AuthService {
 
   async requestPasswordReset(email: string) {
     const user = await this.prisma.user.findUnique({ where: { email } });
-    if (!user) return;
+    if (!user) {
+      throw new NotFoundException('User not found');
+    }
 
     const resetToken = this.jwtService.sign(
-      { email },
+      { email, userId: user.id },
       { expiresIn: '1h', secret: process.env.JWT_RESET_SECRET },
     );
 
     await this.emailService.sendPasswordResetEmail(email, resetToken);
+    return { message: 'Password reset instructions sent to your email' };
+  }
+
+  async resetPassword(token: string, newPassword: string) {
+    try {
+      const payload = this.jwtService.verify(token, {
+        secret: process.env.JWT_RESET_SECRET,
+      });
+
+      const hashedPassword = await bcrypt.hash(newPassword, 10);
+      await this.prisma.user.update({
+        where: { email: payload.email },
+        data: { password: hashedPassword },
+      });
+
+      return { message: 'Password reset successful' };
+    } catch (error) {
+     throw new BadRequestException('Invalid or expired reset token');
+    }
   }
   async getUserInfo(userId: number) {
     if (!userId) {

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>