refactoring node 24

src/components/LoginView.js

@@ -0,0 +1,73 @@
+const LoginView = ({ credentials, onCredentialsChange, error, loading, initializing, onSubmit }) => {
+  const handleChange = (field) => (event) => {
+    onCredentialsChange({ ...credentials, [field]: event.target.value });
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-100">
+      <form
+        className="bg-white shadow-lg rounded-lg p-8 w-full max-w-md space-y-6"
+        onSubmit={(event) => {
+          if (initializing) {
+            event.preventDefault();
+            return;
+          }
+          onSubmit(event);
+        }}
+      >
+        <div>
+          <h1 className="text-2xl font-bold mb-2 text-center text-gray-800">Pickup Config Login</h1>
+          <p className="text-sm text-gray-500 text-center">
+            Die Anwendung authentifiziert sich direkt bei foodsharing.de. Bitte verwende deine persönlichen Login-Daten.
+          </p>
+        </div>
+
+        {error && (
+          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
+            <span className="block sm:inline">{error}</span>
+          </div>
+        )}
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="email">
+            E-Mail
+          </label>
+          <input
+            id="email"
+            type="email"
+            name="email"
+            value={credentials.email}
+            onChange={handleChange('email')}
+            className="border rounded p-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            required
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="password">
+            Passwort
+          </label>
+          <input
+            id="password"
+            type="password"
+            name="password"
+            value={credentials.password}
+            onChange={handleChange('password')}
+            className="border rounded p-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            required
+          />
+        </div>
+
+        <button
+          type="submit"
+          disabled={loading || initializing}
+          className="w-full bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-60"
+        >
+          {loading || initializing ? 'Anmeldung läuft...' : 'Anmelden'}
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default LoginView;