add login feature

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">