Unfortunately, this is a fairly significant rework, since the
<FixView> needed access to the data required to determine the next
step, which often was already available in the relevant page.tsx,
so to be able to pass that data into the <FixView>, I had to move
it from the layout into every individual page.
In addition to the right-arrow skip links, this also sets the
correct target for the skip link in the manual broker resolution.
Accessing next/headers in tests results in an error because it's
not in a Server Component context, so calling our regular
`getL10n()` functions from inside Storybook would result in test
failures. Instead, I replaced that call with a function that just
loads the English strings directly, rather than looking at request
headers.
Apparently ESLint ignores hidden files (i.e. whose filename, or
that of the directory they're in, starts with a period), and adding
"ignorePatterns": [
"!/.storybook/**/*"
]
to our .eslintrc.json didn't change that. To avoid spending too
much time on this, I just added these manually for now.
This is especially useful for stories that demonstrate full pages.
Individual stories can still override this by setting
parameters: { layout: "centered" }
or
parameters: { layout: "padded" }
on a per-story basis. See
https://storybook.js.org/docs/react/configure/story-layout.
* Initialise Next.js app using create-next-app
Command run: npx create-next-app@latest
* Also tell VSCode to format TS and TSX files
* WIP: Sign in with next-auth
* Add Fluent
Unfortunately, since the ReactLocalization object contains
functions, it can't be shared between client and server (because
functions can't be serialized), so in effect every page that uses
localisation has to be a client component.
But at least we can set the correct `lang` attribute on <html> on
the server, so there's that :)
* Copy-paste public breach scan into Next.js
* Halfway migrate public breach list
Did not do: breach icons and getLocale() (for list and date
formatting).
* Enable SSR for localised strings
This allows our pages to be Server Components now.
* Download breach logos in Next.js server
* Tell search engines not to index non-prod envs
* Port existing security headers from Helmet to Next
* Add a 404 page
* Relax CSP in local development
* Set up Next-Auth for server components
It still doesn't work at the moment because the correct redirect
URL hasn't yet been set up on FxA.
* Apply Prettier to Next.js files on commit
* Enable Sass
* feat: Port existing landing page
* fix: Set hibp footer as html
* Wire up Next.js to FxA using iron-session
* feat: Port main layout for authenticated pages
* chore: Get session in layout
* Set up Prettier for VSCode users
* fix: Provide fxa user menu with data
* chore: Format Create Next App template
* Make Next-Auth work with FxA
To test, add the following two variables to your .env:
NEXTAUTH_URL=http://localhost:6060
NEXTAUTH_SECRET=<generate using `openssl rand -base64 32`>
You can then add <SignInButton/> to e.g. the landing page to kick
off authentication.
* Port breach-detail page to Next.js
* Add pending translations
* Access session data in React components
* Use Prettier as the formatter in VSCode
* Port Nebula & Protocol tokens into tokens file
* merge: Resolve conflicts
* fix: Move hr into li element
* feat: Handle authenticated users
* chore: Add todo note
* chore: Don’t use default exports for SignInButton and UserMenu
* chore: Move site navigation to client-side component
* Make mozlog work with Next.js
Unfortunately, this required patching the `intel` package. That
said, since that package hasn't been updated in six years, this
should be relatively safe.
The problem is that `intel` was trying to dynamically determine
which modules to load based on which files were present in its
directory. However, since Next.js moves (and presumably bundles)
Node modules into the `.next` folder, it was unable to find the
modules that `mozlog` was expecting to use.
The patch fixes this by simply explicitly importing those four
modules.
* Add back a couple of authentication logs
* add woff files and metropolis css file
* add right font path
* format scss file to include camelcase
* chore: Move components into (nextjs_migration) and remove redundant layout file
* chore: Remove redirect landing page -> dashboard
* chore: Redirect to dashboard upon signin
* add title and body copy variables
* use token variables in landing scss file instead of old variables from variables.css
* feat: Add basic dashboard page elements
* chore: Add circle chart web component
* chore: Add custom select web component
* breaches get and put calls
* cleanup
* get rid of debug logs
* Add sentry to nextJS branch (#3075)
MNTOR-1641 - enable Sentry for NextJS, for front- and back-end code
* chore: Render user breaches
* feat: Port breach resolution api
* fix: Check breach resolution filter by default
* chore: Add redirect /user/dashboard -> /user/breaches
* feat: Add breach page types
* chore: Remove breach resolution API call headers
* fix: Rename changed API response data key
* add template button component
* remove assets
* add button styling
* chore: Trigger auto signIn for pages that require authentication
* chore: Update breach types
* chore: Repurpose HIBP BreachDataTypes
* chore: Don’t capitalize first letter of chart label
* chore: Remove duplicate font size
* chore: Rename BreachResolutionApiBody -> BreachResolutionRequest
* Add a redirect from /security-tips for Next.js
This was already present in the Express-based website.
* Add the app shell for the React-based website
* chore: Re-enable gtag
* use old font code and add status pill component
* remove unnecessary package additions and style status pills
* lint
* test exposurecard data func
* MNTOR-1765 - set title, favicon, and meta tag correctly for nextjs app (#3082)
* Port unsubscribe-monthly page to Next.js
* add toggle to exposurecard accordion
* add icons to exposure type
* Ease transition from `getMessage`
This adds a `getStringLookup` API to ease the transition from old
Fluent functions (which depend on the user's locale being stored in
AsyncLocalStorage). It will behave the same as the old getMessage()
when called as-is, but when passed an instance of ReactLocalization
(which we have access to in Next.js routes), it will retrieve the
localised string from that.
* Add preliminary Subscriber table type definition
* Process new user sign-in
This does a couple of things:
- It updates the code that sends the breach check email on
first sign-in to pass an instance of ReactLocalization.
- It splits session data and JWT properties to separate data
provided to use by FxA from data we store in our own database.
- It checks if the user that signs in is already known in our
database, and if not, it adds them. It does so using mostly the
same code as in /src/controllers/auth.js's `confirmed` function.
* dockerflow endpoints
* remove introduction.mdx for now, refine button states
* apply some changes
* Move new components out of migration dir
* Delete .bash_profile
* Delete storybook.log
* Delete main.js
* Delete preview.js
* remove use of inter for now
* feat: add email api
* feat: remove email api
* verify email
* update comms options
* light refactoring
* take shared function out to util
* send verification email
* add another property to EmailRow
* add some types
* rename route
* fix review comment
* Fix MNTOR-1634: Stub /settings page (auth)
* Remove commented code, add CSS, match HTML markup from previous iterations
* Remove/comment out logic dependent on session info
* Wire up settings page and new APIs
* Work around radio button unchecking on page load
* Adding a catch all 404
Not ideal but the best solution at the moment
Co-authored-by: Vincent <Vinnl@users.noreply.github.com>
* version route
* remove log
* Port admin pages to Next.js
The Notification email doesn't work yet, because it's not clear yet
how to trigger the Cloud Function.
* Add Storybook build output folder to gitignore
* Set up Netlify
* Group Storybook ignores together
* add node env
Co-authored-by: Vincent <Vinnl@users.noreply.github.com>
* fix test
* fix npm test
* fix css lint
* fix lint js
* exclude sentry.*
* Set up the actual linting we'll use
* Prettier-ignore appropriate files, format the rest
* Fix/ignore ESLint and TypeScript errors
* Make tests work with getStringLookup
* Remove now-unused dependencies and build scripts
* Update CI scripts for Next.js
* Add missing Next.js dependencies to the lockfile
These were added when running `next build`.
* Tag Next.js migration TODOs
* Make "add email" dialog work on dashboard
* Load client-side scripts as modules
This is the same the old website did, and avoids e.g. different
`init` functions overriding each other.
* Fix loading of FxA avatar
* Use <BreachLogo> component
* Allow Next.js's inline scripts/styles in prod
For `style-src`, the current website already enables
'unsafe-inline'. For script-src, it looks like we currently cannot
avoid that: https://github.com/vercel/next.js/discussions/51039
* Debug Playwright (#3118)
---------
Co-authored-by: Florian Zia <zia.florian@gmail.com>
Co-authored-by: Kaitlyn <kandres@mozilla.com>
Co-authored-by: Joey Zhou <jozhou@mozilla.com>
Co-authored-by: Robert Helmer <rhelmer@mozilla.com>
Co-authored-by: maxxcrawford <maxx.crawford@gmail.com>
Vincent
Florian Zia
Robert Helmer
Vincent