feat: Multi-email ticketing system with platform email addresses
- Add PlatformEmailAddress model for managing platform-level email addresses - Add TicketEmailAddress model for tenant-level email addresses - Create MailServerService for IMAP integration with mail.talova.net - Implement PlatformEmailReceiver for processing incoming platform emails - Add email autoconfiguration for Mozilla, Microsoft, and Apple clients - Add configurable email polling interval in platform settings - Add "Check Emails" button on support page for manual refresh - Add ticket counts to status tabs on support page - Add platform email addresses management page - Add Privacy Policy and Terms of Service pages - Add robots.txt for SEO - Restrict email addresses to smoothschedule.com domain only 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
poduck
294
frontend/src/pages/HelpEmailSettings.tsx
Normal file
294
frontend/src/pages/HelpEmailSettings.tsx
Normal file
@@ -0,0 +1,294 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Mail, Server, Lock, Copy, Check, Shield, Smartphone, Monitor, Globe } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
interface CopyButtonProps {
|
||||
text: string;
|
||||
}
|
||||
|
||||
const CopyButton: React.FC<CopyButtonProps> = ({ text }) => {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const handleCopy = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} catch (err) {
|
||||
console.error('Failed to copy:', err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
className="ml-2 p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
|
||||
title="Copy to clipboard"
|
||||
>
|
||||
{copied ? (
|
||||
<Check size={14} className="text-green-500" />
|
||||
) : (
|
||||
<Copy size={14} className="text-gray-400" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
interface SettingRowProps {
|
||||
label: string;
|
||||
value: string;
|
||||
monospace?: boolean;
|
||||
}
|
||||
|
||||
const SettingRow: React.FC<SettingRowProps> = ({ label, value, monospace = true }) => (
|
||||
<div className="flex items-center justify-between py-2 border-b border-gray-100 dark:border-gray-700 last:border-0">
|
||||
<span className="text-gray-600 dark:text-gray-400 text-sm">{label}</span>
|
||||
<div className="flex items-center">
|
||||
<span className={`text-gray-900 dark:text-white ${monospace ? 'font-mono text-sm' : ''}`}>
|
||||
{value}
|
||||
</span>
|
||||
<CopyButton text={value} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const HelpEmailSettings: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="p-8 max-w-4xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
|
||||
<Mail className="text-brand-600" />
|
||||
{t('help.email.title', 'Email Client Settings')}
|
||||
</h1>
|
||||
<p className="text-gray-500 dark:text-gray-400 mt-2">
|
||||
{t('help.email.subtitle', 'Configure your email client to send and receive emails using your SmoothSchedule platform email address')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Quick Start */}
|
||||
<div className="bg-brand-50 dark:bg-brand-900/20 border border-brand-200 dark:border-brand-800 rounded-xl p-6 mb-8">
|
||||
<h2 className="text-lg font-semibold text-brand-900 dark:text-brand-100 mb-3 flex items-center gap-2">
|
||||
<Globe size={20} />
|
||||
Quick Reference
|
||||
</h2>
|
||||
<p className="text-brand-700 dark:text-brand-300 text-sm mb-4">
|
||||
Use these settings to configure any email client. Your username is your full email address, and your password is the one you set when creating the email address.
|
||||
</p>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-4">
|
||||
<h3 className="font-medium text-gray-900 dark:text-white mb-2 flex items-center gap-2">
|
||||
<Server size={16} className="text-blue-500" />
|
||||
Incoming Mail (IMAP)
|
||||
</h3>
|
||||
<div className="space-y-1 text-sm">
|
||||
<SettingRow label="Server" value="mail.talova.net" />
|
||||
<SettingRow label="Port" value="993" />
|
||||
<SettingRow label="Security" value="SSL/TLS" monospace={false} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-4">
|
||||
<h3 className="font-medium text-gray-900 dark:text-white mb-2 flex items-center gap-2">
|
||||
<Server size={16} className="text-green-500" />
|
||||
Outgoing Mail (SMTP)
|
||||
</h3>
|
||||
<div className="space-y-1 text-sm">
|
||||
<SettingRow label="Server" value="mail.talova.net" />
|
||||
<SettingRow label="Port" value="587" />
|
||||
<SettingRow label="Security" value="STARTTLS" monospace={false} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Security Note */}
|
||||
<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-xl p-4 mb-8">
|
||||
<div className="flex gap-3">
|
||||
<Shield className="text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-0.5" size={20} />
|
||||
<div>
|
||||
<h3 className="font-medium text-yellow-800 dark:text-yellow-200">Security Notice</h3>
|
||||
<p className="text-yellow-700 dark:text-yellow-300 text-sm mt-1">
|
||||
Always ensure your email client is configured to use encrypted connections (SSL/TLS or STARTTLS).
|
||||
Never connect using unencrypted ports (25, 110, 143 without encryption).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop Clients */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 mb-6">
|
||||
<div className="p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<Monitor size={20} className="text-gray-500" />
|
||||
Desktop Email Clients
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Outlook */}
|
||||
<div className="p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<h3 className="font-medium text-gray-900 dark:text-white mb-4">Microsoft Outlook</h3>
|
||||
<ol className="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
|
||||
<li>Go to <strong>File</strong> > <strong>Add Account</strong></li>
|
||||
<li>Enter your email address and click <strong>Advanced options</strong></li>
|
||||
<li>Check <strong>Let me set up my account manually</strong></li>
|
||||
<li>Select <strong>IMAP</strong></li>
|
||||
<li>Enter the incoming and outgoing server settings from above</li>
|
||||
<li>Enter your password when prompted</li>
|
||||
<li>Click <strong>Connect</strong> to complete setup</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
{/* Apple Mail */}
|
||||
<div className="p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<h3 className="font-medium text-gray-900 dark:text-white mb-4">Apple Mail (macOS)</h3>
|
||||
<ol className="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
|
||||
<li>Open <strong>Mail</strong> and go to <strong>Mail</strong> > <strong>Add Account</strong></li>
|
||||
<li>Select <strong>Other Mail Account</strong> and click <strong>Continue</strong></li>
|
||||
<li>Enter your name, email address, and password</li>
|
||||
<li>If automatic setup fails, enter the server settings manually:
|
||||
<ul className="list-disc list-inside ml-4 mt-2 space-y-1">
|
||||
<li>Account Type: IMAP</li>
|
||||
<li>Incoming Mail Server: mail.talova.net</li>
|
||||
<li>Outgoing Mail Server: mail.talova.net</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Click <strong>Sign In</strong> to complete</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
{/* Thunderbird */}
|
||||
<div className="p-6">
|
||||
<h3 className="font-medium text-gray-900 dark:text-white mb-4">Mozilla Thunderbird</h3>
|
||||
<ol className="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
|
||||
<li>Go to <strong>Account Settings</strong> > <strong>Account Actions</strong> > <strong>Add Mail Account</strong></li>
|
||||
<li>Enter your name, email address, and password</li>
|
||||
<li>Click <strong>Configure manually</strong></li>
|
||||
<li>Configure incoming server:
|
||||
<ul className="list-disc list-inside ml-4 mt-2 space-y-1">
|
||||
<li>Protocol: IMAP</li>
|
||||
<li>Hostname: mail.talova.net</li>
|
||||
<li>Port: 993</li>
|
||||
<li>Connection Security: SSL/TLS</li>
|
||||
<li>Authentication: Normal password</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Configure outgoing server:
|
||||
<ul className="list-disc list-inside ml-4 mt-2 space-y-1">
|
||||
<li>Hostname: mail.talova.net</li>
|
||||
<li>Port: 587</li>
|
||||
<li>Connection Security: STARTTLS</li>
|
||||
<li>Authentication: Normal password</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Click <strong>Done</strong></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Clients */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 mb-6">
|
||||
<div className="p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<Smartphone size={20} className="text-gray-500" />
|
||||
Mobile Email Apps
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* iOS */}
|
||||
<div className="p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<h3 className="font-medium text-gray-900 dark:text-white mb-4">iPhone / iPad (iOS Mail)</h3>
|
||||
<ol className="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
|
||||
<li>Go to <strong>Settings</strong> > <strong>Mail</strong> > <strong>Accounts</strong> > <strong>Add Account</strong></li>
|
||||
<li>Select <strong>Other</strong> > <strong>Add Mail Account</strong></li>
|
||||
<li>Enter your name, email, password, and a description</li>
|
||||
<li>Tap <strong>Next</strong> and select <strong>IMAP</strong></li>
|
||||
<li>For <strong>Incoming Mail Server</strong>:
|
||||
<ul className="list-disc list-inside ml-4 mt-2 space-y-1">
|
||||
<li>Host Name: mail.talova.net</li>
|
||||
<li>User Name: your full email address</li>
|
||||
<li>Password: your email password</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>For <strong>Outgoing Mail Server</strong>:
|
||||
<ul className="list-disc list-inside ml-4 mt-2 space-y-1">
|
||||
<li>Host Name: mail.talova.net</li>
|
||||
<li>User Name: your full email address</li>
|
||||
<li>Password: your email password</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Tap <strong>Save</strong></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
{/* Android */}
|
||||
<div className="p-6">
|
||||
<h3 className="font-medium text-gray-900 dark:text-white mb-4">Android (Gmail App)</h3>
|
||||
<ol className="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
|
||||
<li>Open the <strong>Gmail</strong> app and tap your profile icon</li>
|
||||
<li>Tap <strong>Add another account</strong> > <strong>Other</strong></li>
|
||||
<li>Enter your email address and tap <strong>Next</strong></li>
|
||||
<li>Select <strong>Personal (IMAP)</strong></li>
|
||||
<li>Enter your password</li>
|
||||
<li>For incoming server settings:
|
||||
<ul className="list-disc list-inside ml-4 mt-2 space-y-1">
|
||||
<li>Server: mail.talova.net</li>
|
||||
<li>Port: 993</li>
|
||||
<li>Security type: SSL/TLS</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>For outgoing server settings:
|
||||
<ul className="list-disc list-inside ml-4 mt-2 space-y-1">
|
||||
<li>Server: mail.talova.net</li>
|
||||
<li>Port: 587</li>
|
||||
<li>Security type: STARTTLS</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Complete the setup</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Troubleshooting */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
|
||||
<div className="p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<Lock size={20} className="text-gray-500" />
|
||||
Troubleshooting
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-6 space-y-4">
|
||||
<div>
|
||||
<h3 className="font-medium text-gray-900 dark:text-white mb-2">Cannot connect to server</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
Make sure you're using the correct port numbers (993 for IMAP, 587 for SMTP) and that your firewall isn't blocking these ports.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-gray-900 dark:text-white mb-2">Authentication failed</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
Verify that your username is your full email address (e.g., support@talova.net) and that you're using the correct password.
|
||||
If you've forgotten your password, you can reset it from the Email Addresses page in Platform Settings.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-gray-900 dark:text-white mb-2">Certificate warnings</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
If you see SSL certificate warnings, ensure your device's date and time are correct. The mail server uses a valid SSL certificate that should be trusted by all modern devices.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-gray-900 dark:text-white mb-2">Emails not syncing</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
Check your sync frequency settings in your email client. Some clients may be set to manual sync by default. Also verify that the email address is active in Platform Settings.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HelpEmailSettings;
|
||||
Reference in New Issue
Block a user