Create templates/message.html

templates/message.html

@@ -0,0 +1,172 @@
+{{template "base" .}}
+{{define "content"}}
+<div class="min-h-screen flex flex-col bg-gray-50">
+    <!-- Header -->
+    <header class="bg-white shadow-sm sticky top-0 z-40">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+            <div class="flex items-center justify-between">
+                <a href="/inbox/{{.SessionID}}" class="flex items-center gap-3 text-gray-600 hover:text-gray-900 transition-colors">
+                    <i class="fas fa-arrow-left"></i>
+                    <span>Back to Inbox</span>
+                </a>
+                <div class="flex items-center gap-3">
+                    <button 
+                        onclick="deleteMessage()"
+                        class="p-2 text-gray-400 hover:text-red-500 transition-colors"
+                        title="Delete message"
+                    >
+                        <i class="fas fa-trash-alt"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="flex-1 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 w-full">
+        <div class="bg-white rounded-2xl shadow-lg overflow-hidden animate-fade-in">
+            <!-- Message Header -->
+            <div class="px-6 py-6 border-b border-gray-100">
+                <h1 class="text-2xl font-bold text-gray-900 mb-4">
+                    {{.Message.Subject}}
+                </h1>
+                
+                <div class="flex items-start gap-4">
+                    <div class="w-12 h-12 bg-gradient-to-br from-indigo-400 to-purple-500 rounded-full flex items-center justify-center text-white font-bold text-lg flex-shrink-0">
+                        {{if .Message.From.Name}}
+                            {{slice .Message.From.Name 0 1}}
+                        {{else}}
+                            {{slice .Message.From.Address 0 1}}
+                        {{end}}
+                    </div>
+                    <div class="flex-1">
+                        <div class="flex flex-wrap items-center gap-2 mb-1">
+                            <span class="font-semibold text-gray-900">
+                                {{if .Message.From.Name}}{{.Message.From.Name}}{{else}}{{.Message.From.Address}}{{end}}
+                            </span>
+                            <span class="text-gray-400">&lt;{{.Message.From.Address}}&gt;</span>
+                        </div>
+                        <div class="text-sm text-gray-500">
+                            <span>To: {{.Email}}</span>
+                            <span class="mx-2">•</span>
+                            <span>{{.Message.CreatedAt.Format "Jan 02, 2006 at 15:04"}}</span>
+                        </div>
+                    </div>
+                </div>
+
+                {{if .Message.HasAttachments}}
+                <div class="mt-4 p-4 bg-gray-50 rounded-lg">
+                    <h4 class="text-sm font-semibold text-gray-700 mb-3">
+                        <i class="fas fa-paperclip mr-2"></i>
+                        Attachments ({{len .Message.Attachments}})
+                    </h4>
+                    <div class="flex flex-wrap gap-2">
+                        {{range .Message.Attachments}}
+                        <a 
+                            href="https://api.mail.tm{{.DownloadURL}}"
+                            target="_blank"
+                            class="flex items-center gap-2 px-3 py-2 bg-white border border-gray-200 rounded-lg hover:border-indigo-500 hover:text-indigo-600 transition-colors text-sm"
+                        >
+                            <i class="fas fa-file"></i>
+                            <span>{{.Filename}}</span>
+                            <span class="text-gray-400">({{.Size}} bytes)</span>
+                        </a>
+                        {{end}}
+                    </div>
+                </div>
+                {{end}}
+            </div>
+
+            <!-- Message Body -->
+            <div class="px-6 py-6">
+                {{if .HTMLContent}}
+                <div class="prose max-w-none" id="htmlContent">
+                    {{.HTMLContent}}
+                </div>
+                {{else if .Message.Text}}
+                <div class="whitespace-pre-wrap text-gray-700 leading-relaxed">
+                    {{.Message.Text}}
+                </div>
+                {{else}}
+                <div class="text-center py-12 text-gray-500">
+                    <i class="fas fa-file-alt text-4xl mb-4"></i>
+                    <p>No content available</p>
+                </div>
+                {{end}}
+            </div>
+        </div>
+
+        <!-- Actions -->
+        <div class="mt-6 flex justify-center gap-4">
+            <a 
+                href="/inbox/{{.SessionID}}"
+                class="px-6 py-3 bg-white border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors flex items-center gap-2"
+            >
+                <i class="fas fa-arrow-left"></i>
+                Back to Inbox
+            </a>
+            <button 
+                onclick="deleteMessage()"
+                class="px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors flex items-center gap-2"
+            >
+                <i class="fas fa-trash-alt"></i>
+                Delete Message
+            </button>
+        </div>
+    </main>
+
+    <!-- Footer -->
+    <footer class="bg-white border-t border-gray-100 py-6 mt-auto">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-gray-500 text-sm">
+            <p>© 2024 TempMail. All rights reserved.</p>
+        </div>
+    </footer>
+</div>
+
+<script>
+    const sessionId = '{{.SessionID}}';
+    const messageId = '{{.Message.ID}}';
+
+    // Delete message
+    async function deleteMessage() {
+        if (!confirm('Are you sure you want to delete this message?')) {
+            return;
+        }
+        
+        try {
+            const response = await fetch(`/api/message/${sessionId}/${messageId}`, {
+                method: 'DELETE'
+            });
+            
+            if (response.ok) {
+                showToast('Message deleted', 'success');
+                setTimeout(() => {
+                    window.location.href = `/inbox/${sessionId}`;
+                }, 500);
+            } else {
+                const data = await response.json();
+                showToast(data.error || 'Failed to delete message', 'error');
+            }
+        } catch (error) {
+            showToast('Network error', 'error');
+        }
+    }
+
+    // Sanitize HTML content (basic XSS prevention)
+    document.addEventListener('DOMContentLoaded', () => {
+        const htmlContent = document.getElementById('htmlContent');
+        if (htmlContent) {
+            // Remove potentially dangerous elements
+            const scripts = htmlContent.querySelectorAll('script');
+            scripts.forEach(s => s.remove());
+            
+            // Handle external links
+            const links = htmlContent.querySelectorAll('a');
+            links.forEach(link => {
+                link.setAttribute('target', '_blank');
+                link.setAttribute('rel', 'noopener noreferrer');
+            });
+        }
+    });
+</script>
+{{end}}