Add more auth pages #17
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Missing API functionality, but the layout and page switching is there.
Mostly just checking for the reset token, but also checking that all the fields are filled in.
Since the auth flow includes email verification, this tells the user to verify, as well as give them an option to resend the email.
This just adds another input validation step.
For completing the sign up flow. The layout is there, the logic is on its way.
Right now it's simulated with Math.random just to show both outcomes.
Since all the new auth pages had the same layout, it made more sense to make a component to manage the format on all of them.
This makes the "browser asks you to save password" flow more consistent with other sites.
Even if it was funny, this will just make testing easier.
I thought it would be used more externally. Guess not, so let's keep the codebase clean.
Very subjective, needs more opinions.
Contributor
There was a problem hiding this comment.
Pull Request Overview
Adds the missing auth flow pages and a reusable MessagePage component, and tweaks existing pages for better UX.
- Introduces pages for email verification, password reset, and sign-up confirmation.
- Creates a reusable MessagePage component for consistent success/info screens.
- Updates login/sign-up inputs to type="email" and wires sign-up to the new email-sent page.
Reviewed Changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| app/verify-email/page.tsx | New email verification page that reads a code from the URL and renders success/failure states. |
| app/ui/components/message-page.tsx | New reusable component for simple title/description/button layouts. |
| app/sign-up/page.tsx | Redirects to the new email-sent page and sets email input type to email. |
| app/sign-up/email-sent/page.tsx | New page showing email confirmation and a resend action. |
| app/reset-password/page.tsx | New page to set a new password from a tokenized URL. |
| app/reset-password/success/page.tsx | New success page after resetting password. |
| app/login/page.tsx | Changes email input type to email. |
| app/forgot-password/page.tsx | Implements the forgot password page with inline email-sent state. |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
Co-authored-by: Copilot <[email protected]>
Even though there's a rate limit on the backend, this is just better for the user experience.
Contributor
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
Before it would reset if the component was re-rendered.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
This PR adds more pages necessary for the authentication flow. A few small tweaks were also added to the existing auth pages.
New Pages
/forgot-password- This page did have a file, but it wasn't implemented until now./reset-password- Reached via a URL sent by email from the/forgot-passwordpage./reset-password/success- Displayed after a successful password reset./sign-up/email-sent- Displayed after a sign up is requested, and allows the user to resend the email./verify-email- Reached via a URL sent by email from the/sign-uppage.Existing Page Tweaks
/login- The email input field now has a type ofemailjust to help with input validation./sign-up- Also changed the email input field type, but also now redirects to the/sign-up/email-sentpage after submission.New Components
A new component,
MessagePagewas also created to help with the layout on some of these pages (/successand/email-sent). Since they all have the same format, it made sense to create a reusable component.Why?
The auth flow needed more pages to support all the functionality required.
How?
🤷♂️
Testing?
There aren't any API calls yet, but the pages look fine and the buttons navigate properly.