Build a basic Sign In page

[katyasoup]

PULL REQUEST

Summary

• Add a Sign In button to the header component
• Add /signin page that displays a basic username/password form
  • Hide the Sign In and Data Usage Policy buttons on this page only
  • Hide the Sign In button on /query page as well
• Show error state for incorrect username/password (currently triggers on submit when one or both fields are blank)
• Redirect to /query from Sign In page on button click (regardless of form data)
• Add dropdown menu and gear icon to query page
• Return to landing page when clicking "Log out" from dropdown menu

Related Issue

Fixes #77

Acceptance Criteria

GIVEN the Query Connector landing page
WHEN a user clicks "Sign In"
THEN they are redirected to the /signin page

GIVEN the Query Connector /signin page
WHEN a user clicks Sign In
THEN they are redirected to /query

Note for designers: The data usage policy button wasn't included in the Figma mockup; happy to adjust its placement as needed/desired!

Additional Information

• Dropdown menu gets wonky at smaller screen widths; didn't address for now since the footer could use some work in that area as well
• The username/password fields will accept any string; if one or both are blank it will trigger the error state
• The dropdown menu item "My queries" is commented out for now
• We probably want to discuss using HTTPS if we're going to start handling account data

Checklist

• If this code affects the other scrum team, have they been notified? (In Slack, as reviewers, etc.)

[fzhao99]

Lgtm! Thanks so much for putting this together so quickly

Worth tagging Michelle as well for a design review ☺️

[robertandremitchell]

looks good! one open q, but no other issues

[DanPaseltiner]

Looks great! only blocking because I think as team we need to evaluate our use of "use client"

[bamader]

LGTM, and wow y'all work fast!

[DanPaseltiner]

Unblocking this PR. Nice work @katyasoup!

We can continue discussing SSR vs CSR in Slack.

[mikang]

Thanks @katyasoup ! This looks great. Could you please make these changes?

• Remove the lefthand blue image at the 768px breakpoint
• Stack the footer text on two lines at the 960px breakpoint (right now, they overlap)

I was trying to review the error state, and it seems like I am able to log in with any credential. Is that just because it doesn't work yet?

Is that what this means?

Redirect to /query from Sign In page on button click (regardless of form data)

Also, log out takes me to 404. Also not sure if that's intentional.

[katyasoup]

Thanks @katyasoup ! This looks great. Could you please make these changes?

• Remove the lefthand blue image at the 768px breakpoint
• Stack the footer text on two lines at the 960px breakpoint (right now, they overlap)

I was trying to review the error state, and it seems like I am able to log in with any credential. Is that just because it doesn't work yet?

Is that what this means?

Redirect to /query from Sign In page on button click (regardless of form data)

Also, log out takes me to 404. Also not sure if that's intentional.

@mikang thanks! I'll add in the error state styles (but you are correct, that line about redirecting to /query just means any (or no) credential will work).

For the breakpoints - happy to add those here, though I wonder if it's worth capturing it in a new ticket? There are other areas that could use some adjustment as well to be more responsive. Can bring this up at standup, too :)

[mikang]

Awesome @katyasoup !!! The responsiveness is great, and I also see the error states.

Could you please make these changes?

• 24px vertical whitespace between Username and Password
• 32px vertical whitespace between Password and the Sign In button

Could you also please change the font? This is my fault — I didn't update the designs, sorry! I believe @fzhao99 may have already standardized this in your design system. I've updated the Figma file accordingly.

• Headline ("Sign in to Query Connector") to be 32px Merriweather Bold (H1)
• Text ("This workspace allows you to sign in with your organizational account.") to be 16px Public Sans Regular (Body Medium)

So it should look like this now:

Thank you!!

[fzhao99]

Could you also please change the font? This is my fault — I didn't update the designs, sorry! I believe @fzhao99 may have already standardized this in your design system. I've updated the Figma file accordingly.

I can handle this piece once this PR goes in! We might even get it for free because of the way the styles are tokenized

[mikang]

Woohoo!!! Awesome, thank you @fzhao99 !!!