feat: implement core UI components and build initial dashboard layout with navigation structure

2026-05-10 10:52:12 +02:00
parent 2fb50a19c9
commit b988028cf8
13 changed files with 365 additions and 16 deletions
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useApp } from '../store/AppContext';
+import Card from '../components/ui/Card';
+import Input from '../components/ui/Input';
+import Select from '../components/ui/Select';
+import Button from '../components/ui/Button';
+
+const Login = () => {
+  const { state, login } = useApp();
+  const navigate = useNavigate();
+  
+  const [selectedUser, setSelectedUser] = useState('');
+  const [pin, setPin] = useState('');
+  const [error, setError] = useState('');
+
+  const userOptions = [
+    { value: '', label: 'Selecteer een gebruiker...' },
+    ...state.users.map(u => ({ value: u.id, label: u.name }))
+  ];
+
+  const handleLogin = (e) => {
+    e.preventDefault();
+    setError('');
+    
+    if (!selectedUser || !pin) {
+      setError('Vul alle velden in.');
+      return;
+    }
+
+    const success = login(selectedUser, pin);
+    if (success) {
+      navigate('/');
+    } else {
+      setError('Onjuiste PIN.');
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-bg flex items-center justify-center p-4">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <img src="/images/icon.png" alt="Respellion Icon" className="h-24 mx-auto mb-4" />
+          <h2 className="text-2xl text-teal font-bold tracking-tight">Respellion</h2>
+          <p className="text-fg-muted mt-2">Leerplatform Login</p>
+        </div>
+
+        <Card className="border border-bg-warm">
+          <form onSubmit={handleLogin} className="flex flex-col gap-5">
+            <Select 
+              label="Gebruiker"
+              options={userOptions}
+              value={selectedUser}
+              onChange={(e) => setSelectedUser(e.target.value)}
+            />
+            
+            <Input 
+              label="PIN Code"
+              type="password"
+              inputMode="numeric"
+              pattern="[0-9]*"
+              maxLength={4}
+              placeholder="••••"
+              value={pin}
+              onChange={(e) => setPin(e.target.value)}
+            />
+
+            {error && <div className="text-red-500 text-sm font-medium">{error}</div>}
+
+            <Button type="submit" className="mt-2 w-full">
+              Inloggen
+            </Button>
+          </form>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default Login;