feat(react): sign in feature #2683
Merged
Conversation
This file contains 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
partially moved from angularjs service
lacking footer, will probably do footer first then
# Conflicts: # frontend/__tests__/storyshots/jest.config.js # frontend/tsconfig.paths.json
# Conflicts: # frontend/package-lock.json # frontend/package.json
mantariksh
reviewed
Sep 2, 2021
| * Mock Service Worker (0.35.0). | ||
| * @see https://github.com/mswjs/msw | ||
| * - Please do NOT modify this file. | ||
| * - Please do NOT serve this file on production. |
There was a problem hiding this comment.
so I ran npm run build and saw that mockServiceWorker.js is included in frontend/build (which presumably will change to dist/frontend once we configure it correctly). if we use app.use(express.static(path.resolve('dist/frontend'))) (as per #2675) will that mean someone would be able to get this file from form.gov.sg/mockServiceWorker.js?
There was a problem hiding this comment.
Yes they would, but it would be useless because the service worker would not be registered anyways. I guess we can add a .dockerignore entry and it'll not be in the image
# Conflicts: # frontend/package-lock.json # frontend/package.json # frontend/src/app/App.tsx # frontend/src/pages/workspace/WorkspacePage.tsx
3 tasks
mantariksh
approved these changes
Sep 6, 2021
| ) | ||
|
|
||
| // Grid area styling for the left sidebar that only displays on tablet and desktop breakpoints. | ||
| const NonMobileSidebarGridArea: FC = ({ children }) => ( |
we actually have some govt users with non-gov.sg emails
This was referenced Oct 4, 2022
Merged
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.
Problem
This PR implements the sign in feature, with mocked API calls using
msw. This allows for the storybook to be rendered and working almost as close to the real thing (calling server endpoints) as possible.Closes #2489
Solution
Features:
Add LoginPage component and related stories. Subcomponent consists of
useIntervalhook.Add a bunch of new hooks to facilitate this feature:
useLocalStorageused for storing logged in state (in favour of storying the user object, since the user object will be stale and can be fetched from the /user endpoint)useIntervalused for rendering updates in an intervaluseUserbasically a react-query hook to retrieve the current logged in userAuthContext/useAuthhook providing a bunch of authentication related functionsAdd a bunch of services (copy-pasted from AngularJS folder) to facilitate this feature
axios, but may switch towretched?)Add
mswpackage for mocking API calls. Used inside storybook (and locally, can be disabled when the server is up)Before & After Screenshots
Working flow in storybook
No need to scroll on smaller laptop screen resolutions
1366px x 768px desktop layout
1280px x 800px desktop layout
Deploy Notes
New dependencies:
react-queryfor making api callsNew dev dependencies:
mswfor mocking network calls in appmsw-storybook-addonfor mocking network calls in storybook