Files
nkode-web/src/App.tsx
Hammer 5c3217e3d5 fix: replace frontend with Rust OPAQUE API + Flutter keypad UI
- Full OPAQUE auth flow via WASM client SDK (client-wasm crate)
- New user: Key Register → Key Login → Code Register (icon selection) → done
- Existing user: Key Login → get login-data → icon keypad → Code Login → done
- Icon-based keypad matching Flutter design:
  - 2 cols portrait, 3 cols landscape
  - Key tiles with 3-col sub-grid of icons
  - Navy border press feedback
  - Dot display with backspace + submit
- SVGs rendered as-is (no color manipulation)
- SusiPage with Login/Signup tabs
- LoginKeypadPage and SignupKeypadPage for code flows
- Secret key display/copy on signup
- Unit tests for Keypad component
- WASM pkg bundled locally (no external dep)
2026-01-29 17:05:32 +00:00

42 lines
1.4 KiB
TypeScript

import { Routes, Route, Navigate } from 'react-router-dom'
import { AuthProvider, useAuth } from './hooks/useAuth'
import Layout from './components/Layout'
import SusiPage from './pages/SusiPage'
import LoginKeypadPage from './pages/LoginKeypadPage'
import SignupKeypadPage from './pages/SignupKeypadPage'
import HomePage from './pages/HomePage'
import NotFoundPage from './pages/NotFoundPage'
function ProtectedRoute({ children }: { children: React.ReactNode }) {
const { isAuthenticated } = useAuth()
if (!isAuthenticated) return <Navigate to="/" replace />
return <>{children}</>
}
function GuestRoute({ children }: { children: React.ReactNode }) {
const { isAuthenticated } = useAuth()
if (isAuthenticated) return <Navigate to="/home" replace />
return <>{children}</>
}
export default function App() {
return (
<AuthProvider>
<Routes>
<Route element={<Layout />}>
{/* Guest routes */}
<Route path="/" element={<GuestRoute><SusiPage /></GuestRoute>} />
<Route path="/login-keypad" element={<GuestRoute><LoginKeypadPage /></GuestRoute>} />
<Route path="/signup-keypad" element={<GuestRoute><SignupKeypadPage /></GuestRoute>} />
{/* Protected routes */}
<Route path="/home" element={<ProtectedRoute><HomePage /></ProtectedRoute>} />
{/* 404 */}
<Route path="*" element={<NotFoundPage />} />
</Route>
</Routes>
</AuthProvider>
)
}