Replace frontend with real working CAD editor source from /data/web-cad-neu (TS, React 18, full ribbon bar, KI, layers, tools)

2026-06-28 10:00:32 +02:00
parent b56c65815a
commit 2109f0544b
117 changed files with 22344 additions and 5121 deletions
@@ -0,0 +1,117 @@
+/**
+ * Register Page – New user registration
+ */
+import { useState, type FormEvent } from 'react';
+import { useAuth } from '../contexts/AuthContext';
+
+interface RegisterProps {
+  onSwitchToLogin: () => void;
+}
+
+export function Register({ onSwitchToLogin }: RegisterProps) {
+  const { register, loading, error, clearError } = useAuth();
+  const [email, setEmail] = useState('');
+  const [name, setName] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [localError, setLocalError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setLocalError(null);
+
+    if (password !== confirmPassword) {
+      setLocalError('Passwörter stimmen nicht überein');
+      return;
+    }
+    if (password.length < 6) {
+      setLocalError('Passwort muss mindestens 6 Zeichen lang sein');
+      return;
+    }
+
+    try {
+      await register(email, password, name);
+    } catch {
+      // error is set in context
+    }
+  };
+
+  const displayError = localError || error;
+
+  return (
+    <div className="auth-page">
+      <div className="auth-card">
+        <h1 className="auth-title">Web CAD</h1>
+        <p className="auth-subtitle">Registrieren</p>
+
+        {displayError && (
+          <div className="auth-error" onClick={() => { clearError(); setLocalError(null); }}>
+            {displayError}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="auth-form">
+          <div className="auth-field">
+            <label htmlFor="reg-name">Name</label>
+            <input
+              id="reg-name"
+              type="text"
+              value={name}
+              onChange={e => setName(e.target.value)}
+              required
+              autoFocus
+              placeholder="Ihr Name"
+            />
+          </div>
+
+          <div className="auth-field">
+            <label htmlFor="reg-email">E-Mail</label>
+            <input
+              id="reg-email"
+              type="email"
+              value={email}
+              onChange={e => setEmail(e.target.value)}
+              required
+              placeholder="name@example.com"
+            />
+          </div>
+
+          <div className="auth-field">
+            <label htmlFor="reg-password">Passwort</label>
+            <input
+              id="reg-password"
+              type="password"
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+              required
+              placeholder="min. 6 Zeichen"
+            />
+          </div>
+
+          <div className="auth-field">
+            <label htmlFor="reg-confirm">Passwort bestätigen</label>
+            <input
+              id="reg-confirm"
+              type="password"
+              value={confirmPassword}
+              onChange={e => setConfirmPassword(e.target.value)}
+              required
+              placeholder="••••••••"
+            />
+          </div>
+
+          <button type="submit" className="auth-button" disabled={loading}>
+            {loading ? 'Wird registriert…' : 'Registrieren'}
+          </button>
+        </form>
+
+        <p className="auth-switch">
+          Bereits ein Konto?{' '}
+          <button type="button" className="auth-link" onClick={onSwitchToLogin}>
+            Anmelden
+          </button>
+        </p>
+      </div>
+    </div>
+  );
+}