Skip to content

Commit bed62ac

Browse files
Bhuvan HospetBhuvan Hospet
Bhuvan Hospet
authored and
Bhuvan Hospet
committed
email form and reset link
1 parent e0a34d5 commit bed62ac

5 files changed

Lines changed: 120 additions & 1 deletion

File tree

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
'use client';
2+
3+
import React from 'react';
4+
import Link from 'next/link';
5+
import { Button } from '@chakra-ui/react';
6+
7+
export default function ResetLinkSet() {
8+
return (
9+
<div className="flex flex-col shrink-0 items-start gap-[30px]">
10+
<div className="flex flex-col items-start gap-6">
11+
<h1 className="![font-family:var(--font-heading)] !text-[36px] !font-bold !ml-5">
12+
Reset Link Sent!
13+
</h1>
14+
<h5 className="![font-family:var(--font-body)] !text-[16px] !font-bold text-center w-[326px] !mx-[7px] !text-core-black">
15+
We sent a reset link to name@gmail.com with a link to reset your password.
16+
</h5>
17+
</div>
18+
<div className="flex flex-col items-start gap-9">
19+
{/* TODO: connect up to backend */}
20+
<Button className="![font-family:var(--font-body)] !text-[16px] !font-bold !bg-core-green !text-core-white !py-3 !px-[90px] !rounded !border-0">
21+
Request reset link again
22+
</Button>
23+
{/* TODO: Update href when login page route is finalized */}
24+
<Link href="#" className="![font-family:var(--font-body)] !text-[16px] !font-bold !text-core-green !py-3 !px-[127px]">
25+
Back to login
26+
</Link>
27+
</div>
28+
</div>
29+
);
30+
}

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
'use client';
2+
3+
import React from 'react';
4+
import TextInputField from './TextInputField';
5+
import Link from 'next/link';
6+
import { Button } from '@chakra-ui/react';
7+
8+
export default function ResetPasswordForm() {
9+
return (
10+
<div className="flex flex-col shrink-0 items-start gap-[30px]">
11+
<div className="flex flex-col items-start gap-6">
12+
<h1 className="![font-family:var(--font-heading)] !text-[36px] !font-bold">
13+
Forgot your Password?
14+
</h1>
15+
<h5 className="![font-family:var(--font-body)] !text-[16px] !font-bold text-center w-[312px] !ml-[41px] !text-core-black">
16+
Please enter the email address you&apos;d like your password reset information sent to
17+
</h5>
18+
</div>
19+
<div className="flex flex-col items-start ml-[26px] gap-9">
20+
<TextInputField label="Email *" placeholder="Placeholder" />
21+
{/* TODO: connect up to backend */}
22+
<Button className="![font-family:var(--font-body)] !text-[16px] !font-bold !bg-core-green !text-core-white !py-3 !px-[110px] !rounded !border-0">
23+
Request reset link
24+
</Button>
25+
{/* TODO: Update href when login page route is finalized */}
26+
<Link href="#" className="![font-family:var(--font-body)] !text-[16px] !font-bold !text-core-green !py-3 !px-[127px]">
27+
Back to login
28+
</Link>
29+
</div>
30+
</div>
31+
);
32+
}

‎apps/frontend/src/app/globals.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&family=Roboto+Slab:wght@400;600&display=swap');
1+
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&family=Roboto+Slab:wght@400;600;700&display=swap');
22
@import "tailwindcss";
33

44
@theme {

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { render, screen } from '../utils';
2+
import ResetLinkSet from '@/app/components/ResetLinkSet';
3+
4+
describe('ResetLinkSet Component', () => {
5+
it('renders the heading', () => {
6+
render(<ResetLinkSet />);
7+
expect(screen.getByText('Reset Link Sent!', { selector: 'h1' })).toBeInTheDocument();
8+
});
9+
10+
it('renders the subheading', () => {
11+
render(<ResetLinkSet />);
12+
expect(screen.getByText(/we sent a reset link/i, { selector: 'h5' })).toBeInTheDocument();
13+
});
14+
15+
it('renders the request reset link again button', () => {
16+
render(<ResetLinkSet />);
17+
expect(screen.getByRole('button', { name: 'Request reset link again' })).toBeInTheDocument();
18+
});
19+
20+
it('renders the back to login link', () => {
21+
render(<ResetLinkSet />);
22+
const link = screen.getByRole('link', { name: 'Back to login' });
23+
expect(link).toBeInTheDocument();
24+
expect(link).toHaveAttribute('href', '#');
25+
});
26+
});

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { render, screen } from '../utils';
2+
import ResetPasswordForm from '@/app/components/ResetPasswordForm';
3+
4+
describe('ResetPasswordForm Component', () => {
5+
it('renders the heading', () => {
6+
render(<ResetPasswordForm />);
7+
expect(screen.getByText('Forgot your Password?', { selector: 'h1' })).toBeInTheDocument();
8+
});
9+
10+
it('renders the subheading', () => {
11+
render(<ResetPasswordForm />);
12+
expect(screen.getByText(/please enter the email address/i, { selector: 'h5' })).toBeInTheDocument();
13+
});
14+
15+
it('renders the email input field', () => {
16+
render(<ResetPasswordForm />);
17+
expect(screen.getByPlaceholderText('Placeholder')).toBeInTheDocument();
18+
});
19+
20+
it('renders the request reset link button', () => {
21+
render(<ResetPasswordForm />);
22+
expect(screen.getByRole('button', { name: 'Request reset link' })).toBeInTheDocument();
23+
});
24+
25+
it('renders the back to login link', () => {
26+
render(<ResetPasswordForm />);
27+
const link = screen.getByRole('link', { name: 'Back to login' });
28+
expect(link).toBeInTheDocument();
29+
expect(link).toHaveAttribute('href', '#');
30+
});
31+
});

0 commit comments

Comments
 (0)