133-email form and reset link

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

@@ -0,0 +1,30 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { Button } from '@chakra-ui/react';
+
+export default function ResetLinkSet() {
+    return (
+        <div className="flex flex-col shrink-0 items-start gap-[30px]">
+            <div className="flex flex-col items-start gap-6">
+                <h1 className="![font-family:var(--font-heading)] !text-[36px] !font-bold !ml-5">
+                    Reset Link Sent!
+                </h1>
+                <h5 className="![font-family:var(--font-body)] !text-[16px] !font-bold text-center w-[326px] !mx-[7px] !text-core-black">
+                    We sent a reset link to name@gmail.com with a link to reset your password.
+                </h5>
+            </div>
+            <div className="flex flex-col items-start gap-9">
+                {/* TODO: connect up to backend */}
+                <Button className="![font-family:var(--font-body)] !text-[16px] !font-bold !bg-core-green !text-core-white !py-3 !px-[90px] !rounded !border-0">
+                    Request reset link again
+                </Button>
+                {/* TODO: Update href when login page route is finalized */}
+                <Link href="#" className="![font-family:var(--font-body)] !text-[16px] !font-bold !text-core-green !py-3 !px-[127px]">
+                    Back to login
+                </Link>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,32 @@
+'use client';
+
+import React from 'react';
+import TextInputField from './TextInputField';
+import Link from 'next/link';
+import { Button } from '@chakra-ui/react';
+
+export default function ResetPasswordForm() {
+    return (
+        <div className="flex flex-col shrink-0 items-start gap-[30px]">
+            <div className="flex flex-col items-start gap-6">
+                <h1 className="![font-family:var(--font-heading)] !text-[36px] !font-bold">
+                    Forgot your Password?
+                </h1>
+                <h5 className="![font-family:var(--font-body)] !text-[16px] !font-bold text-center w-[312px] !ml-[41px] !text-core-black">
+                    Please enter the email address you&apos;d like your password reset information sent to
+                </h5>
+            </div>
+            <div className="flex flex-col items-start ml-[26px] gap-9">
+                <TextInputField label="Email *" placeholder="Placeholder" />
+                {/* TODO: connect up to backend */}
+                <Button className="![font-family:var(--font-body)] !text-[16px] !font-bold !bg-core-green !text-core-white !py-3 !px-[110px] !rounded !border-0">
+                    Request reset link
+                </Button>
+                {/* TODO: Update href when login page route is finalized */}
+                <Link href="#" className="![font-family:var(--font-body)] !text-[16px] !font-bold !text-core-green !py-3 !px-[127px]">
+                    Back to login
+                </Link>
+            </div>
+        </div>
+    );
+}

apps/frontend/src/app/globals.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&family=Roboto+Slab:wght@400;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&family=Roboto+Slab:wght@400;600;700&display=swap');
 @import "tailwindcss";
 
 @theme {

apps/frontend/test/components/ResetLinkSet.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from '../utils';
+import ResetLinkSet from '@/app/components/ResetLinkSet';
+
+describe('ResetLinkSet Component', () => {
+    it('renders the heading', () => {
+        render(<ResetLinkSet />);
+        expect(screen.getByText('Reset Link Sent!', { selector: 'h1' })).toBeInTheDocument();
+    });
+
+    it('renders the subheading', () => {
+        render(<ResetLinkSet />);
+        expect(screen.getByText(/we sent a reset link/i, { selector: 'h5' })).toBeInTheDocument();
+    });
+
+    it('renders the request reset link again button', () => {
+        render(<ResetLinkSet />);
+        expect(screen.getByRole('button', { name: 'Request reset link again' })).toBeInTheDocument();
+    });
+
+    it('renders the back to login link', () => {
+        render(<ResetLinkSet />);
+        const link = screen.getByRole('link', { name: 'Back to login' });
+        expect(link).toBeInTheDocument();
+        expect(link).toHaveAttribute('href', '#');
+    });
+});

apps/frontend/test/components/ResetPasswordForm.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '../utils';
+import ResetPasswordForm from '@/app/components/ResetPasswordForm';
+
+describe('ResetPasswordForm Component', () => {
+    it('renders the heading', () => {
+        render(<ResetPasswordForm />);
+        expect(screen.getByText('Forgot your Password?', { selector: 'h1' })).toBeInTheDocument();
+    });
+
+    it('renders the subheading', () => {
+        render(<ResetPasswordForm />);
+        expect(screen.getByText(/please enter the email address/i, { selector: 'h5' })).toBeInTheDocument();
+    });
+
+    it('renders the email input field', () => {
+        render(<ResetPasswordForm />);
+        expect(screen.getByPlaceholderText('Placeholder')).toBeInTheDocument();
+    });
+
+    it('renders the request reset link button', () => {
+        render(<ResetPasswordForm />);
+        expect(screen.getByRole('button', { name: 'Request reset link' })).toBeInTheDocument();
+    });
+
+    it('renders the back to login link', () => {
+        render(<ResetPasswordForm />);
+        const link = screen.getByRole('link', { name: 'Back to login' });
+        expect(link).toBeInTheDocument();
+        expect(link).toHaveAttribute('href', '#');
+    });
+});