134 password forms

apps/frontend/src/app/components/NewPasswordForm.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import React from 'react';
+import TextInputField from './TextInputField';
+import { Button } from '@chakra-ui/react';
+
+export default function NewPasswordForm() {
+    return (
+        <div className="flex flex-col items-center text-center w-80">
+            <h1 className="![font-family:var(--font-heading)] !text-[36px] !font-semibold !mb-6">Reset Password</h1>
+            <div className="flex flex-col gap-4 w-full !mb-10">
+                <TextInputField label="New Password *" placeholder="Enter new password" errorMessage="Password is not valid"/>
+                <TextInputField label="Confirm Password *" placeholder="Retype password" errorMessage="Password does not match"/>
+            </div>
+            {/* TODO: form validation*/}
+            <Button className="![font-family:var(--font-body)] !rounded !bg-core-green !text-core-white w-full !px-4 !py-1.5 !mb-10">
+                Reset Password
+            </Button>
+        </div>
+    );
+}

apps/frontend/src/app/components/ResetPasswordConfirmation.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import React from 'react';
+import { Button } from '@chakra-ui/react';
+import { useRouter } from 'next/navigation';
+
+
+export default function ResetPasswordConfirmation() {
+    const router = useRouter();
+
+    return (
+        <div className="flex flex-col items-center text-center w-90">
+            <div className="flex flex-col items-start gap-6">
+                <h1 className="![font-family:var(--font-heading)] !text-[36px] !font-semibold">Password Changed</h1>
+                <h5 className="![font-family:var(--font-body)] !text-[16px] !font-bold text-center !text-core-black !mb-6">Your password has been successfully changed!</h5>
+            </div>
+            {/*TODO: figure out how to connect the button to login page */}
+            <Button className="![font-family:var(--font-body)] !rounded !bg-core-green !text-core-white w-full !px-4 !py-1.5 !mb-10"
+                    onClick={() => router.push('/login')}>
+                Back to login
+            </Button>
+        </div>
+    );
+}

apps/frontend/src/app/components/LoginPage.tsx → apps/frontend/src/app/login/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import TextInputField from './TextInputField';
+import TextInputField from '../components/TextInputField';
 import Link from 'next/link';
 import { Button } from '@chakra-ui/react';
 

apps/frontend/test/components/LoginPage.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '../utils';
-import LoginPage from '@/app/components/LoginPage';
+import LoginPage from '@/app/login/page';
 
 
 describe('Login Page Component', () => {

apps/frontend/test/components/NewPasswordForm.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '../utils';
+import NewPasswordForm from '@/app/components/NewPasswordForm';
+
+
+describe('New Password Form Component', () => {
+    it('renders the form heading', () => {
+        render(<NewPasswordForm />);
+        expect(screen.getByText('Reset Password', { selector: 'h1' })).toBeInTheDocument();
+      });
+
+    it('renders the 2 password input fields', () => {
+        render(<NewPasswordForm />);
+        expect(screen.getByPlaceholderText('Enter new password')).toBeInTheDocument();
+        expect(screen.getByPlaceholderText('Retype password')).toBeInTheDocument();
+    });
+
+    it('renders the reset password button', () => {
+        render(<NewPasswordForm />);
+        const button = screen.getByRole('button', { name: 'Reset Password' });
+        expect(button).toBeInTheDocument();
+    })
+});

apps/frontend/test/components/ResetPasswordConfirmation.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from '../utils';
+import ResetPasswordConfirmation from '@/app/components/ResetPasswordConfirmation';
+
+const mockPush = jest.fn();
+
+jest.mock('next/navigation', () => ({
+    useRouter: () => ({
+        push: mockPush,
+    }),
+}));
+
+
+describe('Reset Password Confirmation Page Component', () => {
+
+    it('renders the page heading', () => {
+        render(<ResetPasswordConfirmation />);
+        expect(screen.getByText('Password Changed', { selector: 'h1' })).toBeInTheDocument();
+      });
+
+    it('renders the subheading', () => {
+        render(<ResetPasswordConfirmation />);
+        expect(screen.getByText('Your password has been successfully changed!', { selector: 'h5' })).toBeInTheDocument();
+    });
+
+    it('renders the back to login button', () => {
+        render(<ResetPasswordConfirmation />);
+        const button = screen.getByRole('button', { name: 'Back to login' });
+        expect(button).toBeInTheDocument();
+    })
+
+    it('navigates to login page when back to login button is clicked', () => {
+        render(<ResetPasswordConfirmation />);
+        const button = screen.getByRole('button', { name: 'Back to login' });
+        button.click();
+        expect(mockPush).toHaveBeenCalledWith('/login');
+    });
+});