Visual edit in Lovable

Edited UI in Lovable

src/components/auth/LoginForm.tsx

@@ -1,11 +1,9 @@
-
 import React from "react";
 import { Link } from "react-router-dom";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { ArrowRight, Mail, KeyRound, Eye, EyeOff, AlertTriangle, Loader2 } from "lucide-react";
-
 interface LoginFormProps {
   email: string;
   setEmail: (email: string) => void;
@@ -18,7 +16,6 @@ interface LoginFormProps {
   loginError: string | null;
   handleLogin: (e: React.FormEvent) => Promise<void>;
 }
-
 const LoginForm: React.FC<LoginFormProps> = ({
   email,
   setEmail,
@@ -32,28 +29,15 @@ const LoginForm: React.FC<LoginFormProps> = ({
   handleLogin
 }) => {
   // CORS 또는 JSON 관련 오류인지 확인
-  const isCorsOrJsonError = loginError && 
+  const isCorsOrJsonError = loginError && (loginError.includes('JSON') || loginError.includes('CORS') || loginError.includes('프록시') || loginError.includes('서버 응답') || loginError.includes('네트워크') || loginError.includes('404') || loginError.includes('Not Found'));
-    (loginError.includes('JSON') || loginError.includes('CORS') || 
+  return <div className="neuro-flat p-8 mb-6">
-     loginError.includes('프록시') || loginError.includes('서버 응답') || 
-     loginError.includes('네트워크') ||
-     loginError.includes('404') || loginError.includes('Not Found'));
-
-  return (
-    <div className="neuro-flat p-8 mb-6">
       <form onSubmit={handleLogin}>
         <div className="space-y-6">
           <div className="space-y-2">
             <Label htmlFor="email" className="text-base">이메일</Label>
             <div className="relative">
               <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 h-5 w-5" />
-              <Input 
+              <Input id="email" type="email" placeholder="your@email.com" value={email} onChange={e => setEmail(e.target.value)} className="pl-10 neuro-pressed" />
-                id="email" 
-                type="email" 
-                placeholder="your@email.com" 
-                value={email} 
-                onChange={e => setEmail(e.target.value)} 
-                className="pl-10 neuro-pressed" 
-              />
             </div>
           </div>
           
@@ -61,42 +45,27 @@ const LoginForm: React.FC<LoginFormProps> = ({
             <Label htmlFor="password" className="text-base">비밀번호</Label>
             <div className="relative">
               <KeyRound className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 h-5 w-5" />
-              <Input 
+              <Input id="password" type={showPassword ? "text" : "password"} placeholder="••••••••" value={password} onChange={e => setPassword(e.target.value)} className="pl-10 neuro-pressed" />
-                id="password" 
+              <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500">
-                type={showPassword ? "text" : "password"} 
-                placeholder="••••••••" 
-                value={password} 
-                onChange={e => setPassword(e.target.value)} 
-                className="pl-10 neuro-pressed" 
-              />
-              <button 
-                type="button" 
-                onClick={() => setShowPassword(!showPassword)} 
-                className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500"
-              >
                 {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
               </button>
             </div>
           </div>
           
-          {loginError && (
+          {loginError && <div className={`p-3 ${isCorsOrJsonError ? 'bg-amber-50 text-amber-800' : 'bg-red-50 text-red-600'} rounded-md text-sm`}>
-            <div className={`p-3 ${isCorsOrJsonError ? 'bg-amber-50 text-amber-800' : 'bg-red-50 text-red-600'} rounded-md text-sm`}>
               <div className="flex items-start gap-2">
                 <AlertTriangle className="h-5 w-5 flex-shrink-0 mt-0.5 text-amber-500" />
                 <div>
                   <p className="font-medium">{loginError}</p>
                   
-                  {isCorsOrJsonError && (
+                  {isCorsOrJsonError && <ul className="mt-2 list-disc pl-5 text-xs space-y-1 text-amber-700">
-                    <ul className="mt-2 list-disc pl-5 text-xs space-y-1 text-amber-700">
                       <li>설정 페이지에서 다른 CORS 프록시 유형을 시도해 보세요.</li>
                       <li>HTTPS URL을 사용하는 Supabase 인스턴스로 변경해 보세요.</li>
                       <li>네트워크 연결 상태를 확인하세요.</li>
-                    </ul>
+                    </ul>}
-                  )}
                 </div>
               </div>
-            </div>
+            </div>}
-          )}
           
           <div className="text-right">
             <Link to="/forgot-password" className="text-sm text-neuro-income hover:underline">
@@ -104,22 +73,12 @@ const LoginForm: React.FC<LoginFormProps> = ({
             </Link>
           </div>
           
-          <Button 
+          <Button type="submit" disabled={isLoading || isSettingUpTables} className="w-full hover:bg-neuro-income/80 text-white h-auto bg-neuro-income text-lg py-[10px]">
-            type="submit" 
+            {isLoading ? "로그인 중..." : isSettingUpTables ? "데이터베이스 설정 중..." : "로그인"} 
-            disabled={isLoading || isSettingUpTables} 
+            {!isLoading && !isSettingUpTables ? <ArrowRight className="ml-2 h-5 w-5" /> : <Loader2 className="ml-2 h-5 w-5 animate-spin" />}
-            className="w-full hover:bg-neuro-income/80 text-white py-6 h-auto bg-neuro-income"
-          >
-            {isLoading ? "로그인 중..." : 
-             isSettingUpTables ? "데이터베이스 설정 중..." : 
-             "로그인"} 
-            {!isLoading && !isSettingUpTables ? 
-              <ArrowRight className="ml-2 h-5 w-5" /> : 
-              <Loader2 className="ml-2 h-5 w-5 animate-spin" />}
           </Button>
         </div>
       </form>
-    </div>
+    </div>;
-  );
 };
-
 export default LoginForm;