Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

807: Authentication for UI in production mode #851

Merged
merged 6 commits into from
Mar 6, 2024
Merged

807: Authentication for UI in production mode #851

merged 6 commits into from
Mar 6, 2024

Conversation

chriswilty
Copy link
Member

@chriswilty chriswilty commented Mar 1, 2024 •
edited
Loading

Description

Adds auth to the UI, in production mode.

When running the UI in dev mode (npm run dev) you shouldn't see the login.
When running in preview mode (npm run build && npm run preview) you should see the login.

Resolves #807

Screenshots

Normal Zoom:
image

150% Zoom:
image

200% Zoom:
image

image

image

Notes

  • A couple of accessibility weaknesses were identified, but unfortunately we don't have access to the Amplify components to correct them. The password show/hide button seems to work fine with NVDA, but it's not great with Narrator. Such is life.

Checklist

Have you done the following?

  • Linked the relevant Issue
  • Added tests
  • Ensured the workflow steps are passing

@chriswilty chriswilty self-assigned this Mar 1, 2024
@chriswilty chriswilty changed the base branch from dev to feature/aws-cloud-infrastructure March 4, 2024 10:14
@chriswilty chriswilty force-pushed the feature/aws-cloud-infrastructure branch from 4b99c87 to 6ef89e1 Compare March 4, 2024 13:43
pmarsh-scottlogic
pmarsh-scottlogic approved these changes Mar 5, 2024
View reviewed changes
Copy link
Contributor

@pmarsh-scottlogic pmarsh-scottlogic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

works well with screen reader and zooms nicely up to 400 zoom (at least on big monitor)!

Didn't check the actual signup functionality (I guess I can't without AD being setup for me), but I'll trust that Amplify is doing its job.

frontend/src/AuthenticatedApp.tsx Outdated
},
formFields: {
forgotPassword: {
username: {
Copy link
Contributor

@pmarsh-scottlogic pmarsh-scottlogic Mar 5, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image
The username label matched with "enter your email" is mildy confusing. I don't suppose you can change "username" to "email" easily though

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually we can! But then we should probably use the same placeholder for all the Username fields, as they will always be an email address.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Following our teams discussion, I'm going to use "Email address" as label, and an example placeholder to reduce cognitive load / act as a visual hint.

frontend/src/service/backendService.ts Outdated
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice cleanup!

@chriswilty
Copy link
Member Author

FYI @pmarsh-scottlogic, @dhinrichs-scottlogic

image

image

@chriswilty chriswilty merged commit 5e97100 into feature/aws-cloud-infrastructure Mar 6, 2024
1 check passed
@chriswilty chriswilty deleted the 807-auth-frontend branch March 6, 2024 14:00
chriswilty added a commit that referenced this pull request Mar 8, 2024
@chriswilty
807: Authentication for UI in production mode (#851)
3265251 
* Reinstate auth stack in CDK app, but without Azure as IdP
* Add login to UI in prod mode only
* Add authentication header to UI requests in prod mode only
chriswilty added a commit that referenced this pull request Mar 19, 2024
@chriswilty
807: Authentication for UI in production mode (#851)
67883c7 
* Reinstate auth stack in CDK app, but without Azure as IdP
* Add login to UI in prod mode only
* Add authentication header to UI requests in prod mode only
chriswilty added a commit that referenced this pull request Mar 21, 2024
@chriswilty
807: Authentication for UI in production mode (#851)
fb5a1de 
* Reinstate auth stack in CDK app, but without Azure as IdP
* Add login to UI in prod mode only
* Add authentication header to UI requests in prod mode only
chriswilty added a commit that referenced this pull request Mar 28, 2024
@chriswilty
807: Authentication for UI in production mode (#851)
8919f4b 
* Reinstate auth stack in CDK app, but without Azure as IdP
* Add login to UI in prod mode only
* Add authentication header to UI requests in prod mode only
chriswilty added a commit that referenced this pull request Apr 11, 2024
@chriswilty
807: Authentication for UI in production mode (#851)
4b7740e 
* Reinstate auth stack in CDK app, but without Azure as IdP
* Add login to UI in prod mode only
* Add authentication header to UI requests in prod mode only
chriswilty added a commit that referenced this pull request Apr 15, 2024
@chriswilty
807: Authentication for UI in production mode (#851)
9a2c9dc 
* Reinstate auth stack in CDK app, but without Azure as IdP
* Add login to UI in prod mode only
* Add authentication header to UI requests in prod mode only
chriswilty added a commit that referenced this pull request Apr 24, 2024
@chriswilty
807: Authentication for UI in production mode (#851)
4816821 
* Reinstate auth stack in CDK app, but without Azure as IdP
* Add login to UI in prod mode only
* Add authentication header to UI requests in prod mode only
chriswilty added a commit that referenced this pull request Apr 25, 2024
@chriswilty
807: Authentication for UI in production mode (#851)
eb8e8b0 
* Reinstate auth stack in CDK app, but without Azure as IdP
* Add login to UI in prod mode only
* Add authentication header to UI requests in prod mode only
chriswilty added a commit that referenced this pull request Apr 29, 2024
@chriswilty
807: Authentication for UI in production mode (#851)
36c6a48 
* Reinstate auth stack in CDK app, but without Azure as IdP
* Add login to UI in prod mode only
* Add authentication header to UI requests in prod mode only
chriswilty added a commit that referenced this pull request Jul 5, 2024
@chriswilty
807: Authentication for UI in production mode (#851)
abe4329 
* Reinstate auth stack in CDK app, but without Azure as IdP
* Add login to UI in prod mode only
* Add authentication header to UI requests in prod mode only
chriswilty added a commit that referenced this pull request Jul 15, 2024
@chriswilty
807: Authentication for UI in production mode (#851)
97e3f45 
* Reinstate auth stack in CDK app, but without Azure as IdP
* Add login to UI in prod mode only
* Add authentication header to UI requests in prod mode only
chriswilty added a commit that referenced this pull request Jul 16, 2024
@chriswilty
807: Authentication for UI in production mode (#851)
bebfec8 
* Reinstate auth stack in CDK app, but without Azure as IdP
* Add login to UI in prod mode only
* Add authentication header to UI requests in prod mode only
chriswilty added a commit that referenced this pull request Sep 25, 2024
@chriswilty
807: Authentication for UI in production mode (#851)
9ed92bc 
* Reinstate auth stack in CDK app, but without Azure as IdP
* Add login to UI in prod mode only
* Add authentication header to UI requests in prod mode only
chriswilty added a commit that referenced this pull request Sep 25, 2024
@chriswilty
807: Authentication for UI in production mode (#851)
583818b 
* Reinstate auth stack in CDK app, but without Azure as IdP
* Add login to UI in prod mode only
* Add authentication header to UI requests in prod mode only
chriswilty added a commit that referenced this pull request Oct 22, 2024
@chriswilty
807: Authentication for UI in production mode (#851)
35f10b5 
* Reinstate auth stack in CDK app, but without Azure as IdP
* Add login to UI in prod mode only
* Add authentication header to UI requests in prod mode only
chriswilty added a commit that referenced this pull request Oct 22, 2024
@chriswilty
807: Authentication for UI in production mode (#851)
d30d47b 
* Reinstate auth stack in CDK app, but without Azure as IdP
* Add login to UI in prod mode only
* Add authentication header to UI requests in prod mode only
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@pmarsh-scottlogic pmarsh-scottlogic pmarsh-scottlogic approved these changes

@AAloshine-scottlogic AAloshine-scottlogic Awaiting requested review from AAloshine-scottlogic

@dhinrichs-scottlogic dhinrichs-scottlogic Awaiting requested review from dhinrichs-scottlogic

Assignees

@chriswilty chriswilty

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Cognito Authentication for UI
2 participants
@chriswilty @pmarsh-scottlogic