52 - Add navigation links between login and register

frontend/src/auth/LoginPage.test.tsx

@@ -122,4 +122,24 @@ describe('LoginPage', () => {
 
     expect(await screen.findByText('SCENARIOS')).toBeInTheDocument()
   })
+
+  it('links to the register page', async () => {
+    server.use(
+      http.get('http://localhost/api/me', () =>
+        HttpResponse.json({ message: 'unauthorized' }, { status: 401 }),
+      ),
+    )
+
+    render(
+      <MemoryRouter initialEntries={['/login']}>
+        <AppWithLogin />
+      </MemoryRouter>,
+    )
+
+    const registerLink = await screen.findByRole('link', {
+      name: /register|sign up|create account/i,
+    })
+
+    expect(registerLink).toHaveAttribute('href', '/register')
+  })
 })

frontend/src/auth/LoginPage.tsx

@@ -1,4 +1,5 @@
 import { useState, type FormEvent } from 'react'
+import { Link } from 'react-router'
 import AppLayout from '../components/layout/AppLayout'
 import Button from '../components/ui/Button'
 import Input from '../components/ui/Input'
@@ -73,6 +74,13 @@ export default function LoginPage() {
             {pending ? 'Logging In…' : 'Log In'}
           </Button>
         </form>
+
+        <p className="text-muted-foreground font-mono text-sm">
+          No account?{' '}
+          <Link to="/register" className="text-primary underline">
+            Register
+          </Link>
+        </p>
       </Panel>
     </AppLayout>
   )

frontend/src/auth/RegisterPage.test.tsx

@@ -169,4 +169,24 @@ describe('RegisterPage', () => {
 
     expect(await screen.findByText('LOGIN')).toBeInTheDocument()
   })
+
+  it('links to the login page', async () => {
+    server.use(
+      http.get('http://localhost/api/me', () =>
+        HttpResponse.json({ message: 'unauthorized' }, { status: 401 }),
+      ),
+    )
+
+    render(
+      <MemoryRouter initialEntries={['/register']}>
+        <AppWithRegister />
+      </MemoryRouter>,
+    )
+
+    const loginLink = await screen.findByRole('link', {
+      name: /log ?in|sign in/i,
+    })
+
+    expect(loginLink).toHaveAttribute('href', '/login')
+  })
 })

frontend/src/auth/RegisterPage.tsx

@@ -1,5 +1,5 @@
 import { useState, type FormEvent } from 'react'
-import { useNavigate } from 'react-router'
+import { Link, useNavigate } from 'react-router'
 import AppLayout from '../components/layout/AppLayout'
 import Button from '../components/ui/Button'
 import FieldError from '../components/ui/FieldError'
@@ -87,6 +87,13 @@ export default function RegisterPage() {
             {pending ? 'Registering…' : 'Register'}
           </Button>
         </form>
+
+        <p className="text-muted-foreground font-mono text-sm">
+          Already have an account?{' '}
+          <Link to="/login" className="text-primary underline">
+            Log In
+          </Link>
+        </p>
       </Panel>
     </AppLayout>
   )