- 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
58 lines
2.2 KiB
TypeScript
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>
|
|
);
|
|
}
|