feat-#38: Implemented User Authentication UI #126

0xmohitsen · 2024-04-03T11:31:07Z

Summary

This PR introduces the implementation of the signin-page UI.

Description

This PR aims to enhance the user experience by providing a dedicated signin-page UI. It uses react-hook-form + zod validation.

Images

Include any relevant images or diagrams that can help reviewers visualize the changes, if applicable

Issue(s) Addressed

Closes #38

Template should be strictly Closes <issue_number>
Example: Closes Centralised Error Handling #1

Prerequisites

Have you followed all the CONTRIBUTING GUIDELINES?

vercel · 2024-04-03T11:31:11Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
wanderlust	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 7, 2024 1:02pm
wanderlust-backend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 7, 2024 1:02pm

0xmohitsen · 2024-04-03T11:56:39Z

@krishnaacharyaa , I made this PR to get some feedbacks.

krishnaacharyaa

It has come out really nice, just couple of things

React hook form the validation part we might have to double check all the corner cases
Please look into indentation and alignment and font weight in mobile screen, give it a try, hopefully you'll get it...
The width of complete container should be 50% width in desktop screen...
Really appreciate the fast commits, thank you 😊
Post this we can go ahead with the sign up form

…idth + made changes in alignment for mobile screen

0xmohitsen · 2024-04-04T16:45:03Z

It has come out really nice, just couple of things

React hook form the validation part we might have to double check all the corner cases

Please look into indentation and alignment and font weight in mobile screen, give it a try, hopefully you'll get it...

The width of complete container should be 50% width in desktop screen...
Really appreciate the fast commits, thank you 😊
Post this we can go ahead with the sign up form

I made some changes.

…idth + made changes in alignment for mobile screen

krishnaacharyaa

Looks almost good to me. Just couple of changes I have commented and we need changes for the mobile screen devices.
In mobile screen the heading should be 22px rest all 16px and you can play with the font-weight for bifurcation. Use the equivalent tailwind-css styles and these are the standard font sizes FYI. Feel free to explore more

frontend/src/pages/signin-page.tsx

krishnaacharyaa · 2024-04-05T02:56:15Z

Post this, we can work on the signup form, it shouldn't take much time... in my opinion, once this is sorted :)

krishnaacharyaa

Thats great, we are almost done, just couple of observation, can you try if it is possible to achieve, else LGTM.

krishnaacharyaa · 2024-04-06T16:53:54Z

frontend/src/App.tsx

@@ -15,6 +17,8 @@ function App() {
            <Route index element={<HomePage />} />
            <Route path="add-blog" element={<AddBlog />} />
            <Route path="details-page/:title/:postId" element={<DetailsPage />} />
+            <Route path="user-auth" element={<SignIn />} />


Lets make it signin, so that we are consistent to signup

krishnaacharyaa · 2024-04-06T16:56:20Z

frontend/src/pages/signin-page.tsx

+            )}
+          </div>
+
+          <div className="mb-4">


This has a same pattern of classnames for both signin and signup pages. Can we extract a component out and reuse in both the pages?

krishnaacharyaa · 2024-04-06T16:56:54Z

frontend/src/pages/signup-page.tsx

+
+          <div className="mb-2">
+            <input
+              {...register('email')}


Here even if we have scope to reuse the component somehow.. it would have been great refactor.

krishnaacharyaa · 2024-04-07T06:56:27Z

@Mohitsen11 did we have any scope for the refactoring?

0xmohitsen · 2024-04-07T07:01:03Z

@Mohitsen11 did we have any scope for the refactoring?

Yeah, we can refactor.

We can see that both the files have same auth-form layout only form fields are diff.
I am working on it.

krishnaacharyaa · 2024-04-07T07:05:50Z

I am working on it.

Awesome, yeah that is there , on top of it, I also am thinking if we can refactor those individual form elements like the mail, password, confirm password , username ones, almost use similar code... Can that even we somehow nicely refactor

0xmohitsen · 2024-04-07T07:12:11Z

I am working on it.

Awesome, yeah that is there , on top of it, I also am thinking if we can refactor those individual form elements like the mail, password, confirm password , username ones, almost use similar code... Can that even we somehow nicely refactor

Yes, fields are using similar code just their types are diff.
Yeah this requires smooth refactor.
First I am trying to extract the layout logic then I'll try to nicely refactor form elements.

krishnaacharyaa · 2024-04-07T07:13:14Z

Sounds like a plan :)

…th pages + created auth-form-layout

0xmohitsen · 2024-04-07T12:10:34Z

Sounds like a plan :)

I have segregated out 'auth-form' code successfully.

'Form element extraction' work is ongoing. I am getting some issues but I'll try to make it.
Plus, from tomorrow my minors are starting.

0xmohitsen · 2024-04-07T12:15:38Z

Sounds like a plan :)

I have segregated out auth-form code successfully.

Form element extraction work is ongoing. I am getting some issues but I'll try to make it. Plus, from tomorrow my minors are starting.

After the completion of 'form element exctraction' we don't require to keep 'auth-form-layout' as a wrapper component.

krishnaacharyaa · 2024-04-07T12:26:36Z

Hey @Mohitsen11, thats great efforts, thank you. I was visioning it differently actually, not as a wrapper component, but like you know just the form elements, We got this from here. I'll probably refactor and let you know as you have exams :)
Very Best for your exams. Rock it. And have to say the efforts are truely appreciated.

Can you please do me a favor, for now can you revert the previous commit. Will get this merged, and the refactoring part we can take post your exams or if I get time to do it myself, I'll just let you know :)

0xmohitsen · 2024-04-07T12:29:34Z

Hey @Mohitsen11, thats great efforts, thank you. I was visioning it differently actually, not as a wrapper component, but like you know just the form elements, We got this from here. I'll probably refactor and let you know as you have exams :) Very Best for your exams. Rock it. And have to say the efforts are truely appreciated.

Can you please do me a favor, for now can you revert the previous commit. Will get this merged, and the refactoring part we can take post your exams or if I get time to do it myself, I'll just let you know :)

Alright and thank you mentor @krishnaacharyaa .

… from auth pages + created auth-form-layout" This reverts commit 7312064.

0xmohitsen · 2024-04-07T13:03:27Z

Hey @Mohitsen11, thats great efforts, thank you. I was visioning it differently actually, not as a wrapper component, but like you know just the form elements, We got this from here. I'll probably refactor and let you know as you have exams :) Very Best for your exams. Rock it. And have to say the efforts are truely appreciated.

Can you please do me a favor, for now can you revert the previous commit. Will get this merged, and the refactoring part we can take post your exams or if I get time to do it myself, I'll just let you know :)

I have reverted successfully and made one more commit that for consistent routes name.

krishnaacharyaa

LGTM, Thank you for all of your efforts, much appreciated. And all the best for your exams :)

0xmohitsen added 6 commits April 3, 2024 16:40

feat: Added required svg icons

e93bb9f

feat: Added zod for validation

fc9065e

feat: Installed react-hook-form + zod + @hookform/resolver

f65842a

feat: Added /user-auth route

7c855b2

feat: Added colors

3d65cb5

feat: Added signin-page

3fdc8f6

vercel bot deployed to Preview – wanderlust-backend April 3, 2024 11:31 View deployment

vercel bot had a problem deploying to Preview – wanderlust April 3, 2024 11:31 Failure

feat: Correction in imported signin page name

4bf0483

vercel bot had a problem deploying to Preview – wanderlust April 3, 2024 11:46 Failure

vercel bot deployed to Preview – wanderlust-backend April 3, 2024 11:46 View deployment

feat: Added signin-page

88e0863

vercel bot deployed to Preview – wanderlust-backend April 3, 2024 11:47 View deployment

vercel bot had a problem deploying to Preview – wanderlust April 3, 2024 11:47 Failure

feat: Added signin-page

84720e3

vercel bot deployed to Preview – wanderlust April 3, 2024 11:53 View deployment

vercel bot deployed to Preview – wanderlust-backend April 3, 2024 11:53 View deployment

0xmohitsen changed the title ~~feat: Implemented SignIn UI~~ feat-#38: Implemented SignIn UI Apr 3, 2024

krishnaacharyaa reviewed Apr 3, 2024

View reviewed changes

feat-krishnaacharyaa#38: Added email validation check + reduced the w…

5b6f6bb

…idth + made changes in alignment for mobile screen

vercel bot deployed to Preview – wanderlust-backend April 4, 2024 16:43 View deployment

vercel bot deployed to Preview – wanderlust April 4, 2024 16:43 View deployment

feat-krishnaacharyaa#38: Added email validation check + reduced the w…

a3d5010

…idth + made changes in alignment for mobile screen

vercel bot deployed to Preview – wanderlust-backend April 4, 2024 17:17 View deployment

vercel bot deployed to Preview – wanderlust April 4, 2024 17:17 View deployment

krishnaacharyaa requested changes Apr 5, 2024

View reviewed changes

frontend/src/pages/signin-page.tsx Show resolved Hide resolved

frontend/src/pages/signin-page.tsx Show resolved Hide resolved

vercel bot deployed to Preview – wanderlust-backend April 6, 2024 15:09 View deployment

feat-krishnaacharyaa#38: Removed custom corner case

dc5ce21

vercel bot deployed to Preview – wanderlust-backend April 6, 2024 16:31 View deployment

vercel bot deployed to Preview – wanderlust April 6, 2024 16:31 View deployment

feat-krishnaacharyaa#38: Added signup page

b5b590a

vercel bot deployed to Preview – wanderlust-backend April 6, 2024 16:44 View deployment

vercel bot deployed to Preview – wanderlust April 6, 2024 16:45 View deployment

krishnaacharyaa reviewed Apr 6, 2024

View reviewed changes

0xmohitsen changed the title ~~feat-#38: Implemented SignIn UI~~ feat-#38: Implemented User Authentication UI Apr 7, 2024

feat-krishnaacharyaa#38: Refactored the auth-form layout code from au…

7312064

…th pages + created auth-form-layout

vercel bot deployed to Preview – wanderlust April 7, 2024 12:07 View deployment

vercel bot deployed to Preview – wanderlust-backend April 7, 2024 12:08 View deployment

Revert "feat-krishnaacharyaa#38: Refactored the auth-form layout code…

7c67e72

… from auth pages + created auth-form-layout" This reverts commit 7312064.

vercel bot deployed to Preview – wanderlust-backend April 7, 2024 12:59 View deployment

vercel bot deployed to Preview – wanderlust April 7, 2024 13:00 View deployment

feat-krishnaacharyaa#38: Changed /user-auth route name to /signin route

1d88d5b

vercel bot deployed to Preview – wanderlust April 7, 2024 13:01 View deployment

vercel bot deployed to Preview – wanderlust-backend April 7, 2024 13:02 View deployment

krishnaacharyaa approved these changes Apr 7, 2024

View reviewed changes

krishnaacharyaa merged commit a4df8c2 into krishnaacharyaa:main Apr 7, 2024
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat-#38: Implemented User Authentication UI #126

feat-#38: Implemented User Authentication UI #126

0xmohitsen commented Apr 3, 2024 •

edited by krishnaacharyaa

Loading

vercel bot commented Apr 3, 2024 •

edited

Loading

0xmohitsen commented Apr 3, 2024

krishnaacharyaa left a comment

0xmohitsen commented Apr 4, 2024

krishnaacharyaa left a comment

krishnaacharyaa commented Apr 5, 2024

krishnaacharyaa left a comment

krishnaacharyaa Apr 6, 2024

0xmohitsen Apr 6, 2024

krishnaacharyaa Apr 6, 2024

krishnaacharyaa Apr 6, 2024

krishnaacharyaa commented Apr 7, 2024

0xmohitsen commented Apr 7, 2024 •

edited

Loading

krishnaacharyaa commented Apr 7, 2024 •

edited

Loading

0xmohitsen commented Apr 7, 2024

krishnaacharyaa commented Apr 7, 2024

0xmohitsen commented Apr 7, 2024 •

edited

Loading

0xmohitsen commented Apr 7, 2024

krishnaacharyaa commented Apr 7, 2024

0xmohitsen commented Apr 7, 2024 •

edited

Loading

0xmohitsen commented Apr 7, 2024

krishnaacharyaa left a comment

feat-#38: Implemented User Authentication UI #126

feat-#38: Implemented User Authentication UI #126

Conversation

0xmohitsen commented Apr 3, 2024 • edited by krishnaacharyaa Loading

Summary

Description

Images

Issue(s) Addressed

Prerequisites

vercel bot commented Apr 3, 2024 • edited Loading

0xmohitsen commented Apr 3, 2024

krishnaacharyaa left a comment

Choose a reason for hiding this comment

0xmohitsen commented Apr 4, 2024

krishnaacharyaa left a comment

Choose a reason for hiding this comment

krishnaacharyaa commented Apr 5, 2024

krishnaacharyaa left a comment

Choose a reason for hiding this comment

krishnaacharyaa Apr 6, 2024

Choose a reason for hiding this comment

0xmohitsen Apr 6, 2024

Choose a reason for hiding this comment

krishnaacharyaa Apr 6, 2024

Choose a reason for hiding this comment

krishnaacharyaa Apr 6, 2024

Choose a reason for hiding this comment

krishnaacharyaa commented Apr 7, 2024

0xmohitsen commented Apr 7, 2024 • edited Loading

krishnaacharyaa commented Apr 7, 2024 • edited Loading

0xmohitsen commented Apr 7, 2024

krishnaacharyaa commented Apr 7, 2024

0xmohitsen commented Apr 7, 2024 • edited Loading

0xmohitsen commented Apr 7, 2024

krishnaacharyaa commented Apr 7, 2024

0xmohitsen commented Apr 7, 2024 • edited Loading

0xmohitsen commented Apr 7, 2024

krishnaacharyaa left a comment

Choose a reason for hiding this comment

0xmohitsen commented Apr 3, 2024 •

edited by krishnaacharyaa

Loading

vercel bot commented Apr 3, 2024 •

edited

Loading

0xmohitsen commented Apr 7, 2024 •

edited

Loading

krishnaacharyaa commented Apr 7, 2024 •

edited

Loading

0xmohitsen commented Apr 7, 2024 •

edited

Loading

0xmohitsen commented Apr 7, 2024 •

edited

Loading