add login feature

frontend/.npmrc

@@ -0,0 +1,3 @@
+package-lock=false
+save-exact=true
+@techniker-me:registry="https://npm.techniker.me"

frontend/.nvmrc

@@ -0,0 +1 @@
+20

frontend/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "arrowParens": "avoid",
+  "bracketSameLine": true,
+  "bracketSpacing": false,
+  "printWidth": 160,
+  "semi": true,
+  "singleAttributePerLine": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "useTabs": false
+}

frontend/src/components/LoginDialog.tsx

@@ -6,21 +6,21 @@ import {Button} from '@/components/ui/button';
 interface LoginDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  onLogin: (email: string, password: string) => boolean;
+  onLogin: (username: string, password: string) => Promise<boolean>;
 }
 
 export const LoginDialog = ({open, onOpenChange, onLogin}: LoginDialogProps) => {
-  const [email, setEmail] = useState('');
+  const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError('');
 
-    const success = onLogin(email, password);
+    const success = await onLogin(username, password);
     if (success) {
-      setEmail('');
+      setUsername('');
       setPassword('');
       onOpenChange(false);
     } else {
@@ -37,10 +37,10 @@ export const LoginDialog = ({open, onOpenChange, onLogin}: LoginDialogProps) =>
         </DialogHeader>
         <form onSubmit={handleSubmit} className="space-y-4 mt-4">
           <div className="space-y-2">
-            <label htmlFor="email" className="text-sm font-medium">
-              Email
+            <label htmlFor="username" className="text-sm font-medium">
+              Username
             </label>
-            <Input id="email" type="email" placeholder="artist@example.com" value={email} onChange={e => setEmail(e.target.value)} required />
+            <Input id="username" type="text" placeholder="username" value={username} onChange={e => setUsername(e.target.value)} required />
           </div>
           <div className="space-y-2">
             <label htmlFor="password" className="text-sm font-medium">

frontend/src/hooks/useAuth.ts

@@ -14,17 +14,38 @@ export const useAuth = () => {
     setLoading(false);
   }, []);
 
-  const login = (email: string, password: string) => {
-    // Simple authentication (in production, use a real backend)
-    if (email && password) {
-      const newUser: User = {
-        email,
-        isAuthenticated: true
-      };
-      localStorage.setItem('user', JSON.stringify(newUser));
-      setUser(newUser);
-      return true;
+  const login = async (username: string, password: string) => {
+    if (username && password) {
+      const response = await fetch('/api/users/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          username,
+          password,
+        }),
+      });
+
+      if (!response.ok) {
+        return false;
+      }
+
+      const responseData = await response.json();
+      
+      if (responseData.status === 'ok') {
+        setUser({username, isAuthenticated: true});
+        localStorage.setItem('user', JSON.stringify({username, isAuthenticated: true}));
+        return true;
+      } else {
+        setUser({username, isAuthenticated: false});
+        localStorage.setItem('user', JSON.stringify({username, isAuthenticated: false}));
+        return false;
+      }
     }
+
+    setUser({username, isAuthenticated: false});
+    localStorage.setItem('user', JSON.stringify({username, isAuthenticated: false}));
     return false;
   };
 

frontend/src/types/index.ts

@@ -6,6 +6,6 @@ export interface Artwork {
 }
 
 export interface User {
-  email: string;
+  username: string;
   isAuthenticated: boolean;
 }