mail page imap connection mime 5 bis rest 16 login page 9

app/api/mail/route.ts

@@ -11,27 +11,19 @@ console.log('Environment Variables:', {
   NODE_ENV: process.env.NODE_ENV
 });
 
+// Store for credentials (in memory, you might want to use a proper storage solution)
+let storedCredentials: {
+  user: string;
+  password: string;
+  host: string;
+  port: string;
+} | null = null;
+
 // Helper function to get stored credentials
 function getStoredCredentials() {
-  // Server-side: use form data
+  // Server-side: use stored credentials
   if (typeof window === 'undefined') {
-    // Get credentials from the request body
+    return storedCredentials;
-    const user = 'alma@governance-labs.org';
-    const password = '8s-hN8u37-IP#-y';
-    const host = 'mail.infomaniak.com';
-    const port = '993';
-
-    if (!user || !password || !host || !port) {
-      console.error('Missing IMAP credentials');
-      return null;
-    }
-
-    return {
-      user,
-      password,
-      host,
-      port
-    };
   }
   
   // Client-side: use localStorage
@@ -381,23 +373,48 @@ export async function GET() {
   }
 }
 
-// Add endpoint to get mailboxes
 export async function POST(request: Request) {
   try {
-    const imap = await createImapConnection(getImapConfig()) as Imap;
+    const body = await request.json();
+    const { email, password, host, port } = body;
 
-    const mailboxes = await new Promise((resolve, reject) => {
+    if (!email || !password || !host || !port) {
-      imap.getBoxes((err, boxes) => {
+      return NextResponse.json(
-        if (err) reject(err);
+        { error: 'Missing required fields' },
-        resolve(boxes);
+        { status: 400 }
-      });
+      );
-    });
+    }
 
+    // Store credentials
+    storedCredentials = {
+      user: email,
+      password,
+      host,
+      port
+    };
+
+    // Test the connection
+    const imap = await createImapConnection(storedCredentials);
     imap.end();
-    return NextResponse.json({ mailboxes });
 
+    return NextResponse.json({ success: true });
   } catch (error) {
-    console.error('Error fetching mailboxes:', error);
+    console.error('Error in POST handler:', error);
-    return NextResponse.json({ error: 'Failed to fetch mailboxes' }, { status: 500 });
+    if (error instanceof Error) {
+      if (error.message.includes('Invalid login or password')) {
+        return NextResponse.json(
+          { error: 'Invalid login or password', details: error.message },
+          { status: 401 }
+        );
+      }
+      return NextResponse.json(
+        { error: 'Failed to connect to email server', details: error.message },
+        { status: 500 }
+      );
+    }
+    return NextResponse.json(
+      { error: 'Unknown error occurred' },
+      { status: 500 }
+    );
   }
 } 

app/mail/login/page.tsx

@@ -2,112 +2,116 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { toast } from 'sonner';
 
-export default function EmailLoginPage() {
+export default function LoginPage() {
   const router = useRouter();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [host, setHost] = useState('mail.infomaniak.com');
+  const [port, setPort] = useState('993');
+  const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
-  const [credentials, setCredentials] = useState({
-    email: '',
-    password: '',
-    host: 'mail.infomaniak.com',
-    port: '993'
-  });
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    setError('');
     setLoading(true);
 
     try {
-      // Store credentials in localStorage
+      const response = await fetch('/api/mail', {
-      localStorage.setItem('imapCredentials', JSON.stringify(credentials));
-      
-      // Test the connection
-      const response = await fetch('/api/mail/test-connection', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify(credentials),
+        body: JSON.stringify({
+          email,
+          password,
+          host,
+          port,
+        }),
       });
 
+      const data = await response.json();
+
       if (!response.ok) {
-        throw new Error('Failed to connect to email server');
+        throw new Error(data.error || 'Failed to connect to email server');
       }
 
-      toast.success('Successfully connected to email server');
+      // Store credentials in localStorage
+      localStorage.setItem('imapCredentials', JSON.stringify({
+        user: email,
+        password,
+        host,
+        port,
+      }));
+
+      // Redirect to mail page
       router.push('/mail');
-    } catch (error) {
+    } catch (err) {
-      console.error('Login error:', error);
+      setError(err instanceof Error ? err.message : 'An error occurred');
-      toast.error('Failed to connect to email server. Please check your credentials.');
     } finally {
       setLoading(false);
     }
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-white">
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
-      <Card className="w-full max-w-md shadow-lg">
+      <Card className="w-full max-w-md">
         <CardHeader>
-          <CardTitle className="text-2xl font-bold text-gray-900">Email Login</CardTitle>
+          <CardTitle>Email Login</CardTitle>
-          <CardDescription className="text-gray-600">
-            Enter your email credentials to access your mailbox
-          </CardDescription>
         </CardHeader>
         <CardContent>
           <form onSubmit={handleSubmit} className="space-y-4">
-            <div className="space-y-2">
+            <div>
-              <Label htmlFor="email" className="text-gray-700">Email Address</Label>
+              <Label htmlFor="email">Email</Label>
               <Input
                 id="email"
                 type="email"
-                placeholder="your@email.com"
+                value={email}
-                value={credentials.email}
+                onChange={(e) => setEmail(e.target.value)}
-                onChange={(e) => setCredentials({ ...credentials, email: e.target.value })}
                 required
-                className="border-gray-300 focus:border-blue-500 focus:ring-blue-500"
               />
             </div>
-            <div className="space-y-2">
+            <div>
-              <Label htmlFor="password" className="text-gray-700">Password</Label>
+              <Label htmlFor="password">Password</Label>
               <Input
                 id="password"
                 type="password"
-                value={credentials.password}
+                value={password}
-                onChange={(e) => setCredentials({ ...credentials, password: e.target.value })}
+                onChange={(e) => setPassword(e.target.value)}
                 required
-                className="border-gray-300 focus:border-blue-500 focus:ring-blue-500"
               />
             </div>
-            <div className="space-y-2">
+            <div>
-              <Label htmlFor="host" className="text-gray-700">IMAP Host</Label>
+              <Label htmlFor="host">IMAP Host</Label>
               <Input
                 id="host"
                 type="text"
-                value={credentials.host}
+                value={host}
-                onChange={(e) => setCredentials({ ...credentials, host: e.target.value })}
+                onChange={(e) => setHost(e.target.value)}
                 required
-                className="border-gray-300 focus:border-blue-500 focus:ring-blue-500"
               />
             </div>
-            <div className="space-y-2">
+            <div>
-              <Label htmlFor="port" className="text-gray-700">IMAP Port</Label>
+              <Label htmlFor="port">IMAP Port</Label>
               <Input
                 id="port"
                 type="text"
-                value={credentials.port}
+                value={port}
-                onChange={(e) => setCredentials({ ...credentials, port: e.target.value })}
+                onChange={(e) => setPort(e.target.value)}
                 required
-                className="border-gray-300 focus:border-blue-500 focus:ring-blue-500"
               />
             </div>
+            {error && (
+              <div className="text-red-500 text-sm">{error}</div>
+            )}
             <Button
               type="submit"
-              className="w-full bg-blue-600 hover:bg-blue-700 text-white" 
+              className="w-full"
               disabled={loading}
             >
               {loading ? 'Connecting...' : 'Connect'}