# Kanvaro - Email Configuration Setup ## Overview Kanvaro supports multiple email service providers for sending notifications, invitations, and system emails. The setup wizard includes comprehensive email configuration for SMTP, Azure Communication Services, and other popular email providers. ## Supported Email Providers ### 1. SMTP (Simple Mail Transfer Protocol) - **Gmail SMTP** - **Outlook SMTP** - **Custom SMTP Server** - **Office 365 SMTP** ### 2. Azure Communication Services - **Azure Email Service** - **Azure Communication Services** - **Azure SendGrid Integration** ### 3. Third-party Services - **SendGrid** - **Mailgun** - **Amazon SES** ## Email Configuration Interface ### Provider Selection UI ```typescript // components/setup/EmailProviderSelection.tsx interface EmailProvider { id: string; name: string; description: string; icon: LucideIcon; popular: boolean; features: string[]; } const emailProviders: EmailProvider[] = [ { id: 'smtp', name: 'SMTP Server', description: 'Use your own SMTP server or email provider', icon: Mail, popular: true, features: ['Custom server', 'Full control', 'Any email provider'] }, { id: 'azure', name: 'Azure Communication Services', description: 'Microsoft Azure email service', icon: Cloud, popular: true, features: ['High deliverability', 'Scalable', 'Enterprise grade'] }, { id: 'sendgrid', name: 'SendGrid', description: 'Popular email delivery service', icon: Send, popular: true, features: ['High deliverability', 'Analytics', 'Templates'] }, { id: 'mailgun', name: 'Mailgun', description: 'Developer-friendly email service', icon: Zap, popular: false, features: ['Developer API', 'Webhooks', 'Analytics'] } ]; ``` ## SMTP Configuration ### SMTP Settings Interface ```typescript // components/setup/SMTPConfiguration.tsx interface SMTPConfig { host: string; port: number; secure: boolean; username: string; password: string; fromEmail: string; fromName: string; authMethod: 'login' | 'plain' | 'cram-md5'; } const SMTPConfigurationForm = () => { const [config, setConfig] = useState({ host: '', port: 587, secure: false, username: '', password: '', fromEmail: '', fromName: '', authMethod: 'login' }); const [testing, setTesting] = useState(false); const [testResult, setTestResult] = useState(null); const handleTestConnection = async () => { setTesting(true); try { const result = await testSMTPConnection(config); setTestResult(result); } catch (error) { setTestResult({ success: false, message: error.message }); } finally { setTesting(false); } }; return (

SMTP Host setConfig({ ...config, host: e.target.value })} placeholder="smtp.gmail.com" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" />

Port

Username setConfig({ ...config, username: e.target.value })} placeholder="your-email@gmail.com" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" />

Password setConfig({ ...config, password: e.target.value })} placeholder="App password or account password" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" />

From Email setConfig({ ...config, fromEmail: e.target.value })} placeholder="noreply@yourcompany.com" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" />

From Name setConfig({ ...config, fromName: e.target.value })} placeholder="Kanvaro System" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" />

{testResult && (

{testResult.success ? ( ) : ( )} {testResult.message}

)}

); }; ``` ### SMTP Connection Testing ```typescript // lib/email/smtp-test.ts import nodemailer from 'nodemailer'; export interface TestResult { success: boolean; message: string; details?: any; } export async function testSMTPConnection(config: SMTPConfig): Promise { try { const transporter = nodemailer.createTransporter({ host: config.host, port: config.port, secure: config.secure, auth: { user: config.username, pass: config.password } }); // Verify connection await transporter.verify(); // Send test email const testEmail = { from: `${config.fromName} <${config.fromEmail}>`, to: config.username, // Send test email to the same user subject: 'Kanvaro Email Test', html: `

Kanvaro Email Test

This is a test email from your Kanvaro instance.

If you received this email, your SMTP configuration is working correctly!

Sent from Kanvaro Setup Wizard

` }; await transporter.sendMail(testEmail); return { success: true, message: 'SMTP connection successful! Test email sent.', details: { host: config.host, port: config.port, secure: config.secure } }; } catch (error) { return { success: false, message: `SMTP connection failed: ${error.message}`, details: error }; } } ``` ## Azure Communication Services Configuration ### Azure Setup Interface ```typescript // components/setup/AzureConfiguration.tsx interface AzureConfig { connectionString: string; fromEmail: string; fromName: string; resourceGroup: string; serviceName: string; region: string; } const AzureConfigurationForm = () => { const [config, setConfig] = useState({ connectionString: '', fromEmail: '', fromName: '', resourceGroup: '', serviceName: '', region: 'eastus' }); const [testing, setTesting] = useState(false); const [testResult, setTestResult] = useState(null); const handleTestConnection = async () => { setTesting(true); try { const result = await testAzureConnection(config); setTestResult(result); } catch (error) { setTestResult({ success: false, message: error.message }); } finally { setTesting(false); } }; return (

Azure Communication Services Setup

To use Azure Communication Services, you need to:

Create an Azure Communication Services resource
Get the connection string from Azure portal
Configure your domain for email sending
Verify your domain with Azure

Connection String setConfig({ ...config, connectionString: e.target.value })} placeholder="endpoint=https://your-resource.communication.azure.com/;accesskey=..." className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" />

Get this from your Azure Communication Services resource in the Azure portal

From Email setConfig({ ...config, fromEmail: e.target.value })} placeholder="noreply@yourdomain.com" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" />

Resource Group setConfig({ ...config, resourceGroup: e.target.value })} placeholder="my-resource-group" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" />

Service Name setConfig({ ...config, serviceName: e.target.value })} placeholder="my-communication-service" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" />

{testResult && (

{testResult.success ? ( ) : ( )} {testResult.message}

)}

); }; ``` ### Azure Connection Testing ```typescript // lib/email/azure-test.ts import { EmailClient } from '@azure/communication-email'; export async function testAzureConnection(config: AzureConfig): Promise { try { const emailClient = new EmailClient(config.connectionString); // Create test email message const emailMessage = { senderAddress: config.fromEmail, content: { subject: 'Kanvaro Email Test', html: `

Kanvaro Email Test

This is a test email from your Kanvaro instance using Azure Communication Services.

If you received this email, your Azure configuration is working correctly!

Sent from Kanvaro Setup Wizard via Azure Communication Services

` }, recipients: { to: [{ address: config.fromEmail, displayName: 'Test Recipient' }] } }; // Send test email const poller = await emailClient.beginSend(emailMessage); const result = await poller.pollUntilDone(); return { success: true, message: 'Azure Communication Services connection successful! Test email sent.', details: { messageId: result.id, serviceName: config.serviceName, resourceGroup: config.resourceGroup } }; } catch (error) { return { success: false, message: `Azure connection failed: ${error.message}`, details: error }; } } ``` ## Email Service Configuration Storage ### Database Schema ```typescript // models/EmailConfiguration.ts export interface IEmailConfiguration extends Document { organization: mongoose.Types.ObjectId; provider: 'smtp' | 'azure' | 'sendgrid' | 'mailgun'; config: { // SMTP config host?: string; port?: number; secure?: boolean; username?: string; password?: string; // Azure config connectionString?: string; resourceGroup?: string; serviceName?: string; // Common config fromEmail: string; fromName: string; }; isActive: boolean; lastTested: Date; testResult: { success: boolean; message: string; testedAt: Date; }; createdAt: Date; updatedAt: Date; } const EmailConfigurationSchema = new Schema({ organization: { type: Schema.Types.ObjectId, ref: 'Organization', required: true }, provider: { type: String, enum: ['smtp', 'azure', 'sendgrid', 'mailgun'], required: true }, config: { host: String, port: Number, secure: Boolean, username: String, password: String, connectionString: String, resourceGroup: String, serviceName: String, fromEmail: { type: String, required: true }, fromName: { type: String, required: true } }, isActive: { type: Boolean, default: true }, lastTested: Date, testResult: { success: Boolean, message: String, testedAt: Date } }, { timestamps: true }); export const EmailConfiguration = mongoose.model('EmailConfiguration', EmailConfigurationSchema); ``` ## Email Templates ### Default Email Templates ```typescript // lib/email/templates.ts export const emailTemplates = { welcome: { subject: 'Welcome to Kanvaro!', html: `

Welcome to Kanvaro!

Hello {{userName}},

Welcome to Kanvaro! Your account has been successfully created.

You can now start managing your projects and collaborating with your team.

Get Started

` }, invitation: { subject: 'You\'ve been invited to join {{organizationName}} on Kanvaro', html: `

You're Invited!

Hello,

{{inviterName}} has invited you to join {{organizationName}} on Kanvaro.

Click the button below to accept the invitation and create your account:

Accept Invitation

This invitation will expire in 7 days.

` }, passwordReset: { subject: 'Reset your Kanvaro password', html: `

Password Reset

Hello,

You requested to reset your password for your Kanvaro account.

Click the button below to reset your password:

Reset Password

This link will expire in 1 hour for security reasons.

` } }; ``` ## Email Service Implementation ### Email Service Factory ```typescript // lib/email/EmailService.ts export class EmailService { private transporter: any; private config: IEmailConfiguration; constructor(config: IEmailConfiguration) { this.config = config; this.transporter = this.createTransporter(); } private createTransporter() { switch (this.config.provider) { case 'smtp': return nodemailer.createTransporter({ host: this.config.config.host, port: this.config.config.port, secure: this.config.config.secure, auth: { user: this.config.config.username, pass: this.config.config.password } }); case 'azure': return new EmailClient(this.config.config.connectionString!); default: throw new Error(`Unsupported email provider: ${this.config.provider}`); } } async sendEmail(to: string, subject: string, html: string): Promise { try { if (this.config.provider === 'smtp') { await this.transporter.sendMail({ from: `${this.config.config.fromName} <${this.config.config.fromEmail}>`, to, subject, html }); } else if (this.config.provider === 'azure') { const emailMessage = { senderAddress: this.config.config.fromEmail, content: { subject, html }, recipients: { to: [{ address: to }] } }; await this.transporter.beginSend(emailMessage); } return true; } catch (error) { console.error('Email sending failed:', error); return false; } } } ``` --- *This email configuration documentation will be updated as new email providers are added and existing ones are enhanced.*

Documentation

Email Configuration

Table of Contents