dimitar/imk
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

password change and password resert implemented

Browse Source
This commit is contained in:
dimitar 2024-11-02 21:56:32 +01:00
parent 7ecb1fea2e
commit de05b2ccbe
7 changed files with 260 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
backend/imk-backend/.env
View File

@ -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

18
backend/imk-backend/src/auth/auth.controller.ts
View File

@ -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')

56
backend/imk-backend/src/auth/auth.service.ts
View File

@ -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) {

4
frontend/imk/src/App.jsx
View File

@ -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 />

69
frontend/imk/src/components/ForgotPassword.jsx Normal file
View File

@ -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>
);
}

94
frontend/imk/src/components/ResetPassword.jsx Normal file
View File

@ -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>
);
}

52
frontend/imk/src/components/dashboard/Dashboard.jsx
View File

@ -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 ? (
@ -148,6 +193,7 @@ function Dashboard() {
</div>
</div>
</div>
</div>
);
}