Auth — Split-Screen Login/Sign-Up Pattern

One component (Auth, app/frontend/src/app/features/auth/auth.ts) serves both /login and /signup — a split-screen layout with a form pane on the left and a stylized visual panel on the right.

Structure

• Left — form pane (.auth__form-pane): logo lockup, h1/subtitle that swap copy based on mode, a tip-input-built form (Full Name only in sign-up mode, Email, Password unless magic-link mode is active), a submit button, a magic-link toggle, an OR divider, Google/Microsoft SSO buttons (inline SVG logos, not tip-icon), and a mode-toggle footer line ("Don't have an account? Sign up").
• Right — visual panel (.auth__visual, aria-hidden="true"): a lightweight stylized wireframe-globe SVG (radial gradient glow + wireframe ellipses + route-node dots) and two floating stat cards ("Active Ocean Freight", "Drayage Execution") — deliberately not a Three.js particle field (the original prototype's approach), to avoid the dependency for a decorative panel.
• Back button (.auth__back, fixed top-left) returns to /home without submitting.

Mode + state

readonly isLogin = signal(true);        // set false when route data.mode === 'signup'
readonly useMagicLink = signal(false);
readonly submitLabel = computed(() => useMagicLink() ? 'Send Magic Link' : isLogin() ? 'Sign In' : 'Create Account');

route.snapshot.data['mode'] drives the initial mode (so /login and /signup can route to the same component with different initial state); toggleMode() flips it in-page without a navigation. Submit runs through AuthService (a stub seam — signIn/signUp/sendMagicLink/signInWithProvider) and always lands on /home.

Composing

• Uses only tip-icon and tip-input from the design system — the submit/SSO buttons are hand-styled native <button>s in auth.css, not tip-button, because their visual treatment (full-width, icon-trailing, brand-colored SSO logos) doesn't map cleanly onto Button's variant set.
• tip-input's label/inputId/autocomplete inputs are all used here (unlike most toolbar usages, which omit them) — auth forms need real accessible labels.
• When adding a new SSO provider or auth step, keep the two-pane shape and route the actual auth call through AuthService, not directly in the component.