Add ability to change user password

Fixes: #21

Author: MrBartusek

apps/api/src/auth/auth.controller.ts

@@ -10,14 +10,17 @@ import {
 } from '@nestjs/common';
 import { ApiTags } from '@nestjs/swagger';
 import { Request } from 'express';
+import { Types } from 'mongoose';
 import { PrivateUserDto } from 'shared-types';
+import { AuthEmailsService } from '../auth-emails/auth-emails.service';
 import { DemoService } from '../demo/demo.service';
+import { NotDemoGuard } from '../models/users/guards/not-demo.guard';
 import { User } from '../models/users/schemas/user.schema';
 import { AuthService } from './auth.service';
+import { ChangePasswordDto } from './dto/change-password.dto';
 import { UserRegisterDto } from './dto/user-register.dto';
 import { AuthenticatedGuard } from './guards/authenticated.guard';
 import { LocalAuthGuard } from './guards/local-auth.guard';
-import { AuthEmailsService } from '../auth-emails/auth-emails.service';
 
 @Controller('auth')
 @ApiTags('auth')
@@ -70,4 +73,16 @@ export class AuthController {
 		const dto = User.toPrivateDto(user);
 		return dto;
 	}
+
+	@Post('change-password')
+	@UseGuards(NotDemoGuard)
+	async changePassword(
+		@Req() request: Request,
+		@Body() body: ChangePasswordDto,
+	): Promise<PrivateUserDto> {
+		const userId = new Types.ObjectId(request.user.id);
+		const user = await this.authService.validateUserByUserId(userId, body.oldPassword);
+		await this.authService.updateUserPassword(user._id, body.newPassword);
+		return User.toPrivateDto(user);
+	}
 }

apps/api/src/auth/dto/change-password.dto.ts

@@ -0,0 +1,10 @@
+import { Length } from 'class-validator';
+import { IChangePasswordDto } from 'shared-types';
+
+export class ChangePasswordDto implements IChangePasswordDto {
+	@Length(4, 32)
+	oldPassword: string;
+
+	@Length(4, 32)
+	newPassword: string;
+}

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

@@ -1,7 +1,10 @@
+import UserChangePasswordForm from '../../User/UserChangePasswordForm';
+
 function UserPasswordChangeTab() {
 	return (
 		<div className="mt-8">
 			<h2 className="mb-4 text-3xl">Change password</h2>
+			<UserChangePasswordForm />
 		</div>
 	);
 }

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

@@ -0,0 +1,89 @@
+import axios from 'axios';
+import { useContext, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import toast from 'react-hot-toast';
+import { IChangePasswordDto } from 'shared-types';
+import { UserContext } from '../../context/UserContext';
+import { Utils } from '../../utils/utils';
+import Form from '../Form/Form';
+import FormField from '../Form/FormField';
+import FormInput from '../Form/FormInput';
+import FormSubmitButton from '../Form/FormSubmitButton';
+import Alert from '../Helpers/Alert';
+
+type Inputs = {
+	oldPassword: string;
+	newPassword: string;
+	newPasswordConfirm: string;
+};
+
+function UserChangePasswordForm() {
+	const { register, handleSubmit } = useForm<Inputs>();
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	const { logout } = useContext(UserContext);
+
+	function onSubmit(inputs: Inputs) {
+		setLoading(true);
+		setError(null);
+
+		const dto: IChangePasswordDto = inputs;
+
+		axios
+			.post<void>(`/api/auth/change-password`, dto)
+			.then(async () => {
+				await logout();
+				toast.success(`Successfully changed password`);
+			})
+			.catch((err) => setError(Utils.requestErrorToString(err)))
+			.finally(() => setLoading(false));
+	}
+
+	return (
+		<Form
+			onSubmit={handleSubmit(onSubmit)}
+			loading={loading}
+		>
+			{error && <Alert>{error}</Alert>}
+
+			<FormField
+				label="Current password"
+				hint="Confirm your current password"
+				required
+			>
+				<FormInput
+					type="password"
+					required
+					{...register('oldPassword', { required: true })}
+				/>
+			</FormField>
+
+			<FormField
+				label="New password"
+				required
+			>
+				<FormInput
+					type="password"
+					required
+					{...register('newPassword', { required: true })}
+				/>
+			</FormField>
+
+			<FormField
+				label="Re-type new password"
+				required
+			>
+				<FormInput
+					type="password"
+					required
+					{...register('newPasswordConfirm', { required: true })}
+				/>
+			</FormField>
+
+			<FormSubmitButton>Change password</FormSubmitButton>
+			<span className="ms-4 text-muted">(You will be logged out)</span>
+		</Form>
+	);
+}
+export default UserChangePasswordForm;

packages/shared-types/src/auth/IChangePasswordDto.ts

@@ -0,0 +1,4 @@
+export interface IChangePasswordDto {
+    oldPassword: string;
+    newPassword: string;
+}

packages/shared-types/src/index.ts

@@ -1,6 +1,7 @@
 import { IImageDto } from './ImageDto';
 import { OrganizationSecurityRole } from './OrganizationSecurityRole';
 import { SimpleResponseDto } from './SimpleResponseDto';
+import { IChangePasswordDto } from './auth/IChangePasswordDto';
 import { IResetPasswordDto } from './auth/IResetPasswordDto';
 import { IUserRegisterDto } from './auth/IUserRegisterDto';
 import { UserLoginDto } from './auth/UserLoginDto';
@@ -67,6 +68,7 @@ export {
     UserDto,
     UserLoginDto,
     WarehouseDto,
-    IResetPasswordDto
+    IResetPasswordDto,
+    IChangePasswordDto
 };