feat(auth): main skeleton DEV-1871

[magicznyleszek]

🗒️ Checklist

1. run linter locally
2. update developer docs (API, README, inline, etc.), if any
3. for user-facing doc changes create a Zulip thread at #Support Docs Updates, if any
4. draft PR with a title <type>(<scope>)<!>: <title> DEV-1234
5. assign yourself, tag PR: at least Front end and/or Back end or workflow
6. fill in the template below and delete template comments
7. review thyself: read the diff and repro the preview as written
8. open PR & confirm that CI passes & request reviewers, if needed
9. act on any greptile review below a 5/5 score or leave comment explaining why you won't
10. delete this checklist section from the final squash commit before merging

📣 Summary

Groundwork for the redesigned sign-in and account creation screens. Hidden behind a feature flag.

💭 Notes

Changes here:

• New jsapp/js/auth/ — where the redesigned authentication screens will live
  • routes.tsx — /auth mounts as a sibling of <App />, so none of the logged-in layout (main header, drawer, ToS and password blockers) applies
  • AuthAppProviders.tsx — what basicLayout sets up, minus the chrome. Kept separate from the container so stories can pass a fresh QueryClient instead of the app singleton, which would leak one story's /environment response into the next
  • AuthContainer/AuthContainer.tsx — the frame: background, logo, language picker, <Outlet/>, legal links
  • AuthContainer/AuthCard.tsx — Mantine Paper plus a real vertical Divider; passing aside turns on the second column. The stacking is a container query, not a media query, so it can be tested in storybook. Plus it's a nice feature ;)
  • AuthTestRoute/ — placeholder at #/auth/test to be replaced by first real route
  • StandaloneUILanguageSelector/ moved here from #/components/
• router/router.tsx — now wrapping authRoutes() and the existing App route - everything else is reindentation
• router/routerConstants.ts — ROUTES.AUTH_ROOT and an AUTH_ROUTES group shaped like PROJECTS_ROUTES
• endpoints/environment.mocks.ts — makeEnvironmentMock(override) so stories can vary auth_configuration
• stores/session.mocks.ts — setAnonymousSessionForStories(), for screens a visitor sees before logging in (it has to override the default in preview.tsx that applies logged-in state for every story)
• New scss/pageFrame.scss — the frame shared by the auth screens and the standalone error pages
• errorApp/ErrorPage.module.scss — uses shared mixin now
• Stories — Features/AuthContainer: logged out, both themes, the stacked card, and the config that hides the logo or the legal links

👀 Preview steps

1. ℹ️ use a private/incognito window so you're logged out, and have Django admin access on the side
2. open <your instance>/#/auth/test?ff_authRedesignEnabled=true
3. 🔴 [on main] you get "Section not found"
4. 🟢 [on PR] you get the new frame: KoboToolbox logo top-left, language picker top-right, white card in the middle, and Terms of Service · Privacy Policy at the bottom (each link only shows if it's configured on your instance)
5. 🟢 notice the card is a placeholder with nothing to sign you into — that part arrives later
6. pick another language in the top-right picker → the page reloads in that language and the picker keeps it
7. narrow the browser window down to phone width → (less than 460px) the card padding shrinks and nothing overlaps or clips
8. press Tab repeatedly starting from the address bar → focus moves logo → language picker → card → footer links, with a visible ring on each
9. log in as usual in a normal window, then open the same URL with ?ff_authRedesignEnabled=true → 🟢 the same screen appears
10. in a fresh private window, open <your instance>/#/auth/test without the ?ff_authRedesignEnabled=true part → 🟢 you land on Projects instead (the flag sticks per browser tab, so it has to be a fresh window)
11. custom theme: Django admin → Hub → Configuration files → add a login_background image, then reload the auth URL → 🟢 the photo fills the page behind a dark overlay, the logo turns white, the footer links turn white and the language picker goes dark
12. Django admin → Constance → Config → turn off SHOW_KOBOTOOLBOX_LOGO → reload → 🟢 the logo is gone and the language picker stays where it was

[greptile-apps]

Greptile Summary

The PR introduces a feature-flagged authentication application shell outside the signed-in layout.

• Adds the authentication route, providers, responsive card, themed frame, language selector, and placeholder screen.
• Adds environment and session story helpers, shared standalone-page styling, and WebP asset handling.
• Restructures the router so authentication routes are siblings of the existing application route.

Confidence Score: 5/5

The PR appears safe to merge because no blocking failure remains.

No blocking failure remains.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
  Router[Hash Router] --> Flag{Auth redesign enabled?}
  Flag -->|Yes| Providers[Auth App Providers]
  Providers --> Frame[Auth Container]
  Frame --> Header[Logo and language selector]
  Frame --> Outlet[Authentication route outlet]
  Frame --> Footer[Legal links]
  Router --> App[Existing signed-in application]

Loading

_{Reviews (3): Last reviewed commit: "cr fixes" | Re-trigger Greptile}

[jamesrkiger]

Can we make the non-custom storybook stories use the same logo as the app itself?

[jamesrkiger]

Left a minor few comments, but otherwise LGTM