feat(react): sign in feature (#2683)

* feat(LoginPage): add initial LoginForm component

* feat(LoginPage): add initial OtpForm component

* feat: copy AuthService to new frontend

* feat(ApiService): add initial ApiService for transforming axios errors

* feat: add app ApiService with own axios instance

* feat: add onSubmit prop to accept email form input

* feat: add useInterval hook

* feat: add useLocalStorage hook

* feat: update ApiService to remove login key in localStorage on 401s

* feat: add UserService

partially moved from angularjs service

* feat: add ResendOtpButton component for handling otp resend

* feat: add business logic to OtpForm component

* feat: add brand assets and login image

* feat(LoginPage): add desktop layout and styling

* feat: add initial mobile styling

lacking footer, will probably do footer first then

* feat: add demo login landing page

* feat: add responsive styling to fit design

* feat: add links to LoginPage

* feat: setup msw and login mocks

* chore: add msw-storybook-addon

* feat: extract useUser from useAuth

* feat: update storybook decorators

* feat: add LoginPage responsive stories

* chore: add alias for shared imports

# Conflicts:
#	frontend/__tests__/storyshots/jest.config.js
#	frontend/tsconfig.paths.json

* chore: add react-query package (missed from all the rebasing)

* feat: update AuthContext to return isAuthenticated state

* test: update msw return for wrong otp, add todo marker for logging

* chore: add validator package

* fix: add BrowserRouter to app, use correct export from useUser

rebase conflicts

* feat: make mobile view use full height for displaying login screen

* feat: change textstyle of desktop footer to caption-2

* feat(LoginForm): sign in -> log in

* feat: add mock server delay for msw routes

* feat(OtpForm): show otp email in form label description

* feat: add loading state for resend button

* feat: allow `as` prop in custom Link component

see https://chakra-ui.com/guides/as-prop

* feat: add link back to landing page on form logo

* chore: add react router package for storybook

* refactor: simplify AuthContext to only hold isAuthenticated state

* chore: add aliases for templates and features folder

* feat: move useUser hook into features/user/queries file

* refactor:  extract components with style props spam to own component

* fix: update typing of msw-storybook-addon

* feat: only enable msw mocks during test environment

* feat: add InvalidAgencyResponse story

* feat: add "link" variant to Button style and use in ResendOtpButton

* style: add caption-2 textStyle, update Typography story

* fix: add explicit xs breakpoint when deciding to show desktop footer

* style: update paddings for desktop LoginPage

* feat: remove gov domain restriction, use backend to validate

we actually have some govt users with non-gov.sg emails

* feat: update login image

* feat: update styling of login page to fit design

* style: update sizing of login image

* style: make login form more centered by reducing padding

* feat: fix alignment of desktop footer links

* fix: constrain Form brand link to smaller box area

frontend/.eslintrc

@@ -59,9 +59,10 @@
             "^(~hooks)(/.*|$)",
             "^(~utils)(/.*|$)",
             "^(~services)(/.*|$)",
-            "^(~components)(/.*|$)"
+            "^(~components)(/.*|$)",
+            "^(~templates)(/.*|$)"
           ],
-          ["^(~pages)(/.*|$)"],
+          ["^(~pages)(/.*|$)", "^(~features)(/.*|$)"],
           // Parent imports. Put `..` last.
           ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
           // Other relative imports. Put same-folder imports and `.` last.

frontend/.storybook/foundations/Typography/Typography.tsx

@@ -208,6 +208,19 @@ export const Typography: FC = () => {
           </WrapItem>
           <WrapItem>{prettyPrint(theme.textStyles['caption-1'])}</WrapItem>
         </Wrap>
+        <Wrap justify="space-between">
+          <WrapItem>
+            <Box w="43rem" textStyle="caption-2" color="secondary.700">
+              <Text>Caption 2</Text>
+              <Text maxW="33rem">
+                Sign up with your government email, and build your form in
+                minutes. It's free and no approval is required. Together let's
+                make the Singapore government paperless.
+              </Text>
+            </Box>
+          </WrapItem>
+          <WrapItem>{prettyPrint(theme.textStyles['caption-2'])}</WrapItem>
+        </Wrap>
         <Wrap justify="space-between">
           <WrapItem>
             <Box w="43rem" textStyle="legal" color="secondary.700">

frontend/.storybook/preview.tsx

@@ -1,20 +1,35 @@
 import 'focus-visible/dist/focus-visible.min.js'
 import '../src/assets/fonts/inter.css'
 
+import { QueryClient, QueryClientProvider } from 'react-query'
 import { ChakraProvider } from '@chakra-ui/react'
 import { DecoratorFn } from '@storybook/react'
+import { initialize, mswDecorator } from 'msw-storybook-addon'
+
+import { AuthProvider } from '~contexts/AuthContext'
 
 import { theme } from '../src/theme'
 
 import { StorybookTheme } from './themes'
 
+initialize()
+
+const withReactQuery: DecoratorFn = (storyFn) => {
+  const queryClient = new QueryClient()
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AuthProvider>{storyFn()}</AuthProvider>
+    </QueryClientProvider>
+  )
+}
+
 const withChakra: DecoratorFn = (storyFn) => (
   <ChakraProvider resetCSS theme={theme}>
     {storyFn()}
   </ChakraProvider>
 )
 
-export const decorators = [withChakra]
+export const decorators = [withReactQuery, withChakra, mswDecorator]
 
 export const parameters = {
   docs: {

frontend/__tests__/storyshots/jest.config.js

@@ -17,6 +17,8 @@ module.exports = {
     '~contexts/(.*)': '<rootDir>/../../src/contexts/$1',
     '~constants/(.*)': '<rootDir>/../../src/constants/$1',
     '~components/(.*)': '<rootDir>/../../src/components/$1',
+    '~templates/(.*)': '<rootDir>/../../src/templates/$1',
+    '~features/(.*)': '<rootDir>/../../src/features/$1',
     '~hooks/(.*)': '<rootDir>/../../src/hooks/$1',
     '~utils/(.*)': '<rootDir>/../../src/utils/$1',
     '~pages/(.*)': '<rootDir>/../../src/pages/$1',