initial commit

frontend/src/components/LoginPage.js

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { login, setToken } from '../api/dns';
+
+export default function LoginPage({ onLogin }) {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading]   = useState(false);
+  const [error, setError]       = useState('');
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+    try {
+      const data = await login(username, password);
+      setToken(data.token);
+      onLogin(data.user);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="login-wrapper">
+      <div className="login-box">
+        <div className="login-logo">🦥</div>
+        <h1 className="login-title">Sloth Manager</h1>
+        <form onSubmit={handleSubmit} className="login-form">
+          <label>
+            Username
+            <input
+              type="text"
+              value={username}
+              onChange={e => setUsername(e.target.value)}
+              autoFocus
+              autoComplete="username"
+              required
+            />
+          </label>
+          <label>
+            Password
+            <input
+              type="password"
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+              autoComplete="current-password"
+              required
+            />
+          </label>
+          {error && <p className="error">{error}</p>}
+          <button type="submit" className="btn-primary login-btn" disabled={loading}>
+            {loading ? 'Signing in…' : 'Sign in'}
+          </button>
+        </form>
+        <p className="login-footer">By <a href="https://bobbantech.com" target="_blank" rel="noreferrer">bobbantech</a></p>
+      </div>
+    </div>
+  );
+}