@social-mail/social-mail-client 1.2.9 → 1.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.2.9",
+  "version": "1.2.11",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/common/pages/mailboxes/MailboxEditorPage.tsx

@@ -22,14 +22,12 @@ export default class MailboxEditorPage extends PopupWindowPage {
 
     private model: IMailbox;
 
-    private domain: IDomain = null;
-
     @InjectProperty
     private mailboxService: MailboxService;
 
     async init() {
 
-        this.title = "Add Mailbox";
+        this.title = "Add Hosted Mailbox";
 
         this.model = this.parameters?.model ?? Mailbox.create({
             emailAddress: EmailAddress.create({
@@ -48,8 +46,7 @@ export default class MailboxEditorPage extends PopupWindowPage {
 
         this.model.username = "";
 
-        const domains = await this.mailboxService.domains();
-        this.model.domain = domains[0];
+        const domains = await this.mailboxService.domains(true);
 
         this.model.name = SocialMailApp.user.displayName;
 
@@ -66,7 +63,7 @@ export default class MailboxEditorPage extends PopupWindowPage {
                         />
                 </FormField>
                 <FormField label="Email Address">
-                    <span text={Bind.oneWay(() => `${this.model.username}@${this.model.domain.domain}`)}/>
+                    <span text={Bind.oneWay(() => `${this.model.username}@${this.model.domain.domain.name}`)}/>
                 </FormField>
                 <FormField label="Create Channel">
                     <Checkbox

package/src/common/pages/mailboxes/MailboxListPage.tsx

@@ -5,7 +5,7 @@ import { ContentPage, isMobileView } from "@web-atoms/web-controls/dist/mobile-a
 import InfiniteRepeater from "../../controls/repeater/InfiniteRepeater";
 import MailboxService from "./services/MailboxService";
 import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
-import { IDomain, IHostedDomain, IMailbox } from "../../../model/model";
+import { Domain, HostedDomain, IDomain, IHostedDomain, IMailbox } from "../../../model/model";
 import Action from "@web-atoms/core/dist/view-model/Action";
 import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
 import MailboxEditorPage from "./MailboxEditorPage";
@@ -16,6 +16,9 @@ import styled from "@web-atoms/core/dist/style/styled";
 import MailboxDetailPage from "./MailboxDetailPage";
 import ComboBox from "@web-atoms/web-controls/dist/basic/ComboBox";
 import { Icon } from "../../icons/Icons";
+import { InlinePopupButton } from "@web-atoms/web-controls/dist/basic/InlinePopup";
+import { MenuItem } from "@web-atoms/web-controls/dist/basic/PopupButton";
+import AddExternalMailboxPage from "./external-mailboxes/AddExternalMailboxPage";
 
 const css = styled.css `
     &[data-page-type=master-detail] > [data-page-element=content][data-mode=desktop] {
@@ -37,13 +40,16 @@ export default class MailboxListPage extends MasterDetailPage {
 
     private version = 0;
 
-    private domainID: number;
+    private domainID: number = 0;
 
     async init() {
 
         this.domains = await this.mailboxService.domains();
 
-        this.domainID = this.domains[0].domainID;
+        this.domains.insert(0, Domain.create({
+            name: "Any",
+            domainID: 0,
+        }));
 
         this.titleRenderer = () => <div data-layout="row">
             <ComboBox
@@ -52,12 +58,21 @@ export default class MailboxListPage extends MasterDetailPage {
                 items={this.domains}
                 value={Bind.twoWaysImmediate(() => this.domainID)}
                 />
-            <i class="fas fa-plus" data-click-event="add-mailbox"/>
+            { this.domains.length > 1
+                &&  <i class="fas fa-plus" data-click-event="add-mailbox"/> }
         </div>;
 
 
         this.headerRenderer = () => <div data-layout="row">
             <input value={Bind.twoWaysImmediate(() => this.search)}/>
+            <InlinePopupButton
+                icon="fas fa-plus"
+                label="Add"
+                popup={() => <div>
+                    <MenuItem data-click-event="add-mailbox" label="Hosted Mailbox"/>
+                    <MenuItem data-click-event="add-external-mailbox" label="External Mailbox"/>
+                </div>}
+                />
         </div>;
 
         this.renderer = <div>
@@ -104,6 +119,13 @@ export default class MailboxListPage extends MasterDetailPage {
 
     @Action({ onEvent: "add-mailbox"})
     async addMailbox() {
+
+        const domains = await this.mailboxService.domains(true);
+        if (!domains.length) {
+            alert("There are no hosted domains available, please create domain name from the admin console.");
+            return;
+        }
+
         await PageNavigator.pushPageForResult(MailboxEditorPage, { domainID: this.domainID });
         this.version++;
     }
@@ -113,4 +135,9 @@ export default class MailboxListPage extends MasterDetailPage {
         this.openDetail(MailboxDetailPage, mailbox);
     }
 
+    @Action({ onEvent: "add-external-mailbox"})
+    async addExternalMailbox() {
+        await PageNavigator.pushPageForResult(AddExternalMailboxPage);
+    }
+
 }

package/src/common/pages/mailboxes/external-mailboxes/AddExternalMailboxPage.tsx

@@ -0,0 +1,125 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import Form from "@web-atoms/web-controls/dist/basic/Form";
+import FormField from "@web-atoms/web-controls/dist/basic/FormField";
+import PasswordBox from "@web-atoms/web-controls/dist/basic/PasswordBox";
+import { PopupWindowPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import { AddIconButton } from "../../../controls/buttons/IconButton";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import EntityService from "../../../../services/EntityService";
+import { HostedDomain } from "../../../../model/model";
+import ExternalMailboxService from "../services/ExternalMailboxService";
+import Checkbox from "@web-atoms/web-controls/dist/basic/Checkbox";
+
+export default class AddExternalMailboxPage extends PopupWindowPage {
+
+    model = {
+        emailAddress: "",
+        displayName: "",
+        imapHost: "",
+        imapPort: 993,
+        imapSecure: true,
+        smtpHost: "",
+        smtpPort: 465,
+        smtpSecure: true,
+        username: "",
+        password: "",
+        smtpUsername: "",
+        smtpPassword: ""
+    };
+
+    @InjectProperty
+    private externalMailboxService: ExternalMailboxService;
+
+    async init() {
+
+        this.title = "Add External Mailbox";
+
+        this.renderer = <div style-max-width="400px">
+            <div>
+                Use this form only if you do not own the domain of the email address.
+                If you plan to migrate domain back to this server, we recommend creating
+                hosted mailbox and add sync account to migrate your emails.
+            </div>
+            <hr/>
+            <Form>
+                <FormField label="Display/From Name">
+                    <input
+                        autofocus={true}
+                        value={Bind.twoWaysImmediate(() => this.model.displayName)}/>
+                </FormField>
+                <FormField label="Email Address">
+                    <input
+                        value={Bind.twoWaysImmediate(() => this.model.emailAddress)}/>
+                </FormField>
+                <FormField label="Username">
+                    <input value={Bind.twoWaysImmediate(() => this.model.username)}/>
+                </FormField>
+                <FormField label="Password">
+                    <PasswordBox
+                        value={Bind.twoWaysImmediate(() => this.model.password)}/>
+                </FormField>
+                <FormField label="IMAP (Server/Host)">
+                    <input value={Bind.twoWaysImmediate(() => this.model.imapHost)}/>
+                </FormField>
+                <FormField label="IMAP Port">
+                    <div data-layout="row">
+                        <input value={Bind.twoWaysImmediate(() => this.model.imapPort)}/>
+                        <Checkbox checked={Bind.twoWaysImmediate(() => this.model.imapSecure)} text="Secure"/>
+                    </div>
+                </FormField>
+                <FormField label="SMTP (Server/Host)">
+                    <input value={Bind.twoWaysImmediate(() => this.model.smtpHost)}/>
+                </FormField>
+                <FormField label="SMTP Port">
+                <div data-layout="row">
+                        <input value={Bind.twoWaysImmediate(() => this.model.smtpPort)}/>
+                        <Checkbox checked={Bind.twoWaysImmediate(() => this.model.smtpSecure)} text="Secure"/>
+                    </div>
+                </FormField>
+                <div data-layout="sticky-command-row">
+                    <AddIconButton
+                        data-submit-event="add-new-mailbox"
+                        text="Add Mailbox"
+                        />
+                </div>
+            </Form>
+        </div>;
+
+    }
+
+    @Action({
+        onEvent: "input",
+        defer: 1000
+    })
+    async onInput() {
+        if(this.model.imapHost) {
+            return;
+        }
+        const { emailAddress } = this.model;
+        if(!emailAddress) {
+            return;
+        }
+        if (emailAddress.indexOf("@") === -1) {
+            return;
+        }
+        const domain = emailAddress.split("@").pop();
+        if (domain.length <= 5) {
+            return;
+        }
+
+        this.model.imapHost = `imap.${domain}`;
+        this.model.smtpHost = `smtp.${domain}`;
+        this.model.username = emailAddress;
+    }
+
+    @Action({
+        onEvent: "add-new-mailbox",
+        close: true
+    })
+    addNewMailbox() {
+        return this.externalMailboxService.createMailbox(this.model);
+    }
+
+}

package/src/common/pages/mailboxes/services/ExternalMailboxService.ts

@@ -0,0 +1,111 @@
+import DITransient from "@web-atoms/core/dist/di/DITransient";
+import { Inject } from "@web-atoms/core/dist/di/Inject";
+import EntityService from "../../../../services/EntityService";
+import { Domain, HostedDomain, Mailbox, MailboxSyncTarget } from "../../../../model/model";
+import DateTime from "@web-atoms/date-time/dist/DateTime";
+
+export interface IExternalMailbox {
+    emailAddress: string,
+    displayName: string,
+    imapHost: string,
+    imapPort: number,
+    imapSecure: boolean,
+    smtpHost: string,
+    smtpPort: number,
+    smtpSecure: boolean,
+    username: string,
+    password: string,
+    smtpUsername: string,
+    smtpPassword: string
+}
+
+@DITransient()
+export default class ExternalMailboxService {
+
+    @Inject
+    private entityService: EntityService;
+
+    public async createDomain(emailAddress: string, retry = 3): Promise<{ domainID?: number }> {
+        try {
+            const index = emailAddress.lastIndexOf("@");
+            let domainName = emailAddress;
+            if (index !== -1) {
+                domainName = emailAddress.substring(index + 1);
+            }
+            domainName = domainName.toLocaleLowerCase();
+            const d = await this.entityService.query(HostedDomain)
+                .where({ domainName }, (p) => (x) => x.domain.name === p.domainName)
+                .firstOrDefault();
+            if (d) {
+                return d;
+            }
+            const hd = HostedDomain.create({
+                domainNameToCreate: domainName,
+                external: true
+            });
+            return await this.entityService.save(hd);
+        } catch (error) {
+            if(retry--) {
+                return await this.createDomain(emailAddress, retry - 1);
+            }
+            throw error;
+        }
+    }
+
+    async createMailbox(model: IExternalMailbox) {
+        const {
+            emailAddress,
+            displayName: name,
+            username,
+            password,
+            imapHost,
+            imapPort,
+            imapSecure,
+            smtpHost,
+            smtpPort,
+            smtpSecure,
+            smtpUsername,
+            smtpPassword,
+        } = model;
+        const hd = await this.createDomain(emailAddress);
+
+        const dateCreated = DateTime.now;
+
+        const [ emailUsername ] = emailAddress.split("@");
+
+        const mb = Mailbox.create({
+            domainID: hd.domainID,
+            username: emailUsername,
+            name,
+            dateCreated,
+            dateUpdated: dateCreated,
+            indexAttachments: true,
+            indexImageAttachments: true,
+            syncTargets: [
+                MailboxSyncTarget.create({
+                    protocol: "imap",
+                    host: imapHost,
+                    port: imapPort,
+                    isSecure: imapSecure,
+                    username,
+                    newPassword: password,
+                    direction: "in",
+                    active: true
+                }),
+                MailboxSyncTarget.create({
+                    protocol: "smtp" as any,
+                    host: smtpHost,
+                    port: smtpPort,
+                    isSecure: smtpSecure,
+                    username: smtpUsername || username,
+                    newPassword: smtpPassword || password,
+                    direction: "in",
+                    active: true
+                })
+            ]
+        });
+
+        await this.entityService.save(mb);
+    }
+
+}

package/src/common/pages/mailboxes/services/MailboxService.ts

@@ -11,8 +11,12 @@ export default class MailboxService {
     @Inject
     private entityService: EntityService;
 
-    public async domains() {
-        const hosted = await this.entityService.query(HostedDomain)
+    public async domains(onlyHosted = false) {
+        let q = this.entityService.query(HostedDomain);
+        if (onlyHosted) {
+            q = q.where({}, (p) => (x) => x.external === false);
+        }
+        const hosted = await q
             .include((x) => x.domain)
             .toArray();
         return hosted.map((x) => x.domain);

package/src/model/model.ts

@@ -214,6 +214,7 @@ export interface IHostedDomain extends IClrEntity {
 	enableReceive?: boolean;
 	enableSend?: boolean;
 	useRelay?: boolean;
+	external?: boolean;
 	aliasForName?: string | null;
 	domainNameToCreate?: string;
 	domain?: IDomain;
@@ -227,7 +228,7 @@ export interface IHostedDomain extends IClrEntity {
 	templates?: ICollection<IEmailTemplate>;
 }
 
-export const HostedDomain: IModel<IHostedDomain> = new Model<IHostedDomain>("HostedDomain", ["domainID"], { enableReceive: false,enableSend: false,useRelay: false });
+export const HostedDomain: IModel<IHostedDomain> = new Model<IHostedDomain>("HostedDomain", ["domainID"], { enableReceive: false,enableSend: false,useRelay: false,external: false });
 
 export interface IDomainUser extends IClrEntity {
 	domainID?: number;
@@ -294,6 +295,7 @@ export interface IEmail extends IClrEntity {
 	parentID?: number | null;
 	forwardedID?: number | null;
 	engagement?: string | null;
+	tags?: string | null;
 	htmlBodyUrl?: string;
 	senderEmail?: IEmailAddress;
 	senderUser?: IUser;
@@ -306,7 +308,7 @@ export interface IEmail extends IClrEntity {
 	engagements?: ICollection<IEmailEngagement>;
 	logs?: ICollection<IAppLog>;
 	recipients?: ICollection<IEmailRecipient>;
-	tags?: ICollection<IEmailTag>;
+	emailTags?: ICollection<IEmailTag>;
 	mailboxes?: ICollection<IMailboxEmail>;
 	lastEmailThreads?: ICollection<IMailboxContact>;
 	threadEmails?: ICollection<IMailboxContactEmail>;
@@ -458,6 +460,7 @@ export interface IMailboxContact extends IClrEntity {
 	mailbox?: IMailbox;
 	emailAddress?: IEmailAddress;
 	lastEmail?: IEmail;
+	tags?: ICollection<IMailboxContactTag>;
 }
 
 export const MailboxContactStatusArray = [{"label":"invited","value":"invited"},{"label":"added","value":"added"},{"label":"active","value":"active"},{"label":"unsubscribed","value":"unsubscribed"},{"label":"blocked","value":"blocked"}];
@@ -477,6 +480,18 @@ export interface IMailboxContactEmail extends IClrEntity {
 
 export const MailboxContactEmail: IModel<IMailboxContactEmail> = new Model<IMailboxContactEmail>("MailboxContactEmail", ["mailboxID","emailAddressID","emailID"], { dateReceived: new DefaultFactory(() => new DateTime()) });
 
+export interface IMailboxContactTag extends IClrEntity {
+	mailboxID?: number;
+	emailAddressID?: number;
+	tagID?: number;
+	count?: number;
+	dateUpdated?: DateTime;
+	tag?: ITag;
+	mailboxContact?: IMailboxContact;
+}
+
+export const MailboxContactTag: IModel<IMailboxContactTag> = new Model<IMailboxContactTag>("MailboxContactTag", ["mailboxID","emailAddressID","tagID"], { count: 0,dateUpdated: new DefaultFactory(() => new DateTime()) });
+
 export interface IMailboxSyncTarget extends IClrEntity {
 	readonly syncTargetID?: number;
 	mailboxID?: number;
@@ -698,6 +713,7 @@ export interface ITag extends IClrEntity {
 	children?: ICollection<ITag>;
 	fileTags?: ICollection<IAppFileTag>;
 	emailTags?: ICollection<IEmailTag>;
+	mailboxContactTags?: ICollection<IMailboxContactTag>;
 }
 
 export const Tag: IModel<ITag> = new Model<ITag>("Tag", ["tagID"], { name: "",isSystemTag: false });