solve mail backend

app/mail/login/page.tsx

@@ -7,7 +7,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 
-export default function LoginPage() {
+export default function MailLoginPage() {
   const router = useRouter();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
@@ -22,8 +22,7 @@ export default function LoginPage() {
     setLoading(true);
 
     try {
-      // Test the connection first
+      const response = await fetch('/api/mail/login', {
-      const testResponse = await fetch('/api/mail/test-connection', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -36,30 +35,10 @@ export default function LoginPage() {
         }),
       });
 
-      const testData = await testResponse.json();
+      const data = await response.json();
 
-      if (!testResponse.ok) {
+      if (!response.ok) {
-        throw new Error(testData.error || 'Failed to connect to email server');
+        throw new Error(data.error || 'Failed to connect to email server');
-      }
-
-      // Store credentials using the API endpoint
-      const loginResponse = await fetch('/api/mail/login', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          email,
-          password,
-          host,
-          port,
-        }),
-      });
-
-      const loginData = await loginResponse.json();
-
-      if (!loginResponse.ok) {
-        throw new Error(loginData.error || 'Failed to store credentials');
       }
 
       // Redirect to mail page
@@ -75,7 +54,7 @@ export default function LoginPage() {
     <div className="min-h-screen flex items-center justify-center bg-gray-50">
       <Card className="w-full max-w-md">
         <CardHeader>
-          <CardTitle>Email Login</CardTitle>
+          <CardTitle>Email Configuration</CardTitle>
         </CardHeader>
         <CardContent>
           <form onSubmit={handleSubmit} className="space-y-4">

components/mail/mail-list.tsx

@@ -0,0 +1,36 @@
+import { Mail } from '@/hooks/use-mail';
+
+interface MailListProps {
+  mails: Mail[];
+  onMailClick: (mail: Mail) => void;
+}
+
+export const MailList = ({ mails, onMailClick }: MailListProps) => {
+  return (
+    <div className="flex flex-col space-y-2">
+      {mails.map((mail) => (
+        <div
+          key={mail.id}
+          className={`p-4 border rounded-lg cursor-pointer hover:bg-gray-50 ${
+            !mail.read ? 'font-semibold' : ''
+          }`}
+          onClick={() => onMailClick(mail)}
+        >
+          <div className="flex justify-between items-start">
+            <div className="flex-1">
+              <div className="flex items-center space-x-2">
+                <span className="text-sm text-gray-600">{mail.from}</span>
+                {mail.starred && (
+                  <span className="text-yellow-400">★</span>
+                )}
+              </div>
+              <h3 className="text-lg font-medium">{mail.subject}</h3>
+              <p className="text-sm text-gray-500 truncate">{mail.body}</p>
+            </div>
+            <span className="text-sm text-gray-400">{new Date(mail.date).toLocaleDateString()}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}; 

hooks/use-mail.ts

@@ -0,0 +1,46 @@
+import { useState, useCallback } from 'react';
+
+export interface Mail {
+  id: string;
+  from: string;
+  to: string;
+  subject: string;
+  body: string;
+  date: string;
+  read: boolean;
+  starred: boolean;
+  folder: string;
+  cc?: string[];
+  bcc?: string[];
+  flags?: string[];
+}
+
+export const useMail = () => {
+  const [mails, setMails] = useState<Mail[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchMails = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await fetch('/api/mail');
+      if (!response.ok) {
+        throw new Error('Failed to fetch mails');
+      }
+      const data = await response.json();
+      setMails(data.emails);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch mails');
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  return {
+    mails,
+    isLoading,
+    error,
+    fetchMails,
+  };
+};