Files
nkode-web/src/pages/DeveloperPage.tsx
Hammer a4de830313 feat: nKode React + TypeScript SPA scaffold
- React + Vite + Tailwind CSS v4 + React Router
- Keypad component: 10-digit pad with dot indicators, keyboard support, haptic feel
- Auth pages: Login (email → keypad), Signup (email → method → keypad/key)
- Home page: session info, practice keypad
- Admin dashboard: placeholder stats + user management
- Developer dashboard: OIDC client registration UI placeholder
- WASM client wrapper: lazy loads from /wasm/, falls back to mock client
- TypeScript type declarations for nkode-client-wasm package
- Dark mode with system preference detection
- Auth state management with localStorage persistence + auto-expiry
- Code splitting: lazy-loaded route pages (~236KB main bundle)
- Inter font, clean indigo/slate design system
2026-01-29 14:39:27 +00:00

58 lines
2.2 KiB
TypeScript

import { useAuth } from '@/hooks/useAuth';
import { Navigate } from 'react-router-dom';
import { ROUTES } from '@/lib/types';
export function DeveloperPage() {
const { isAuthenticated } = useAuth();
if (!isAuthenticated) {
return <Navigate to={ROUTES.LOGIN} replace />;
}
return (
<div className="space-y-6">
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">Developer Dashboard</h1>
<div className="p-6 rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 space-y-4">
<h2 className="font-semibold text-slate-900 dark:text-white">OIDC Client Setup</h2>
<p className="text-sm text-slate-500 dark:text-slate-400">
Register your application to use nKode as an identity provider. Configure redirect URIs, scopes, and authentication flows.
</p>
<div className="space-y-3">
<div>
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
Application Name
</label>
<input
type="text"
placeholder="My App"
className="w-full px-4 py-2 rounded-lg border border-slate-200 dark:border-slate-700
bg-white dark:bg-slate-900 text-slate-900 dark:text-white
placeholder:text-slate-400 dark:placeholder:text-slate-500"
disabled
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
Redirect URI
</label>
<input
type="text"
placeholder="https://myapp.com/callback"
className="w-full px-4 py-2 rounded-lg border border-slate-200 dark:border-slate-700
bg-white dark:bg-slate-900 text-slate-900 dark:text-white
placeholder:text-slate-400 dark:placeholder:text-slate-500"
disabled
/>
</div>
</div>
<p className="text-xs text-slate-400 dark:text-slate-500 italic">
Client registration coming soon. This will generate client_id and client_secret for OAuth2/OIDC integration.
</p>
</div>
</div>
);
}