Skip to main content

📦 extjs-app-webmail

Application Package for providing the UI and client logic for a lightweight, feature-rich email client.

This package supports rest-api-email for IMAP/SMTP operations.

Use this package, if you...​

Requirements​

This package requires a service that complies with the REST API described in rest-api-email which can be found in the REST API description of the conjoon-project.

Works great with lumen-app-email!

This package was developed along with lumen-app-email and is ready to be used with it.

Mocking required Services

When using this package without a running backend, you should use the extjs-dev-webmailsim-package for providing fake endpoints.

Installation​

info

This package is automatically installed with conjoon.

$ npm i @conjoon/extjs-app-webmail

If you want to develop with this package, run the build:dev-script:

$ npm run build:dev

Testing environment will then be available via

$ npm test

Configuring Sencha Ext JS​

Make sure your ExtJS workspace.json is properly configured to look up local repositories in the node_modules-directory.

workspace.json
{
  "packages": {
    "dir": "${workspace.dir}/node_modules/@l8js,${workspace.dir}/node_modules/@conjoon,...",
    "extract": "${workspace.dir}/packages/remote"
  }
}

Update the app.json of the application by specifying this package in the uses-property in either the development and/or production section:

app.json
{
    "development": {
        "uses": [
            "extjs-dev-imapusersim",
            "extjs-app-imapuser",
            "extjs-app-webmail",
            "extjs-dev-webmailsim"
        ]
    },
    "production": {
        "uses": [
            "extjs-app-imapuser",
            "extjs-app-webmail"
        ]
    }
}

Configuration​

extjs-app-webmail is a coon.js package and is tagged as such in the package.json:

{
  "coon-js": {
    "package": {
      "autoLoad":  {
        "registerController": true
      },
      "config" : "${package.resourcePath}/extjs-app-webmail.conf.json"
    }
  }
}

By default, this package's configuration can be found in this package's resources folder in a file named extjs-app-webmail.conf.json.

What goes into an extjs-app-webmail configuration?​

conjoon.conf.json

The following can be applied directly to conjoon.conf.json. Refer to the configuration guide!

The configuration file for this package contains various key/value-pairs, configuring the behavior and appearance of the email client:

{
  "title": "Email",
  "plugins": {
    "components": [
      {
        "cmp": "cn_mail-mailmessagegrid",
        "fclass": "conjoon.cn_mail.view.mail.message.grid.feature.PreviewTextLazyLoad",
        "event": "cn_init"
      }
    ],
    "controller": [
      {
        "xclass": "conjoon.cn_mail.app.plugin.MailtoProtocolHandlerPlugin"
      },
      {
        "xclass": "conjoon.cn_mail.app.plugin.NewMessagesNotificationPlugin",
        "args": [
          {
            "interval": 240000
          }
        ]
      }
    ]
  },
  "resources": {
    "images": {
      "notifications": {
        "newEmail": "resources/images/notification/newmail.png"
      }
    },
    "sounds": {
      "notifications": {
        "newEmail": "resources/sounds/notification/newmail.wav"
      }
    },
    "templates": {
      "html": {
        "editor": "resources/templates/html/editor.html.tpl",
        "reader": "resources/templates/html/reader.html.tpl"
      }
    },
    "mailServerPresets": "resources/mailserverpresets.conf.json"
  },
  "service": {
    "rest-api-email": {
      "base": "https://ddev-ms-email.ddev.site/rest-api-email/api/v0/"
    }
  }
}
note

The following uses dot-notation for the field-names!

title​

  • Type: String

The title of the package. This is used for assembling navigation entries, or changing the document.title of the browser instance the application runs in. This package notifies interested observers with this title whenever view of the package gets activated and gains the focus.

resources.images.notifications.newEmail​

  • Type: String

An icon to show with the desktop notification when new email messages are coming in.

resources.sounds.notifications.newEmail​

  • Type: String

A notification sound to play when new email messages are coming in.

templates.html.editor​

  • Type: String

An html-template to use with the message editor.

templates.html.reader​

  • Type: String

An html-template to use with the message reader.

mailServerPresets​

  • Type: String

The URI of the file containing the mailserver presets used with the MailAccountWizard. The file must contain an array as the top-level object, containing objects representing configurations used with MailAccounts.

info

The MailAccountWizard is not available when the client is configured to retrieve mailserver configuration from the backend, e.g. the extjs-app-imapuser-package disabled the MailAccountWizard. The MailAccountWizard is enabled when conjoon is used with the extjs-app-localmailaccount-package.

mailserverpresets.json.conf:
[{
  "name": "AOL",
  "displayName": "AOL",
  "img": "resources/images/mailprovider/aol.svg",
  "config": {
    "inbox_type": "IMAP",
    "inbox_address": "imap.aol.com",
    "inbox_port": 993,
    "inbox_ssl": true,
    "outbox_address":  "smtp.aol.com",
    "outbox_port": 465,
    "outbox_secure": "ssl",
    "subscriptions": []
  }
}, {
   "name": "Domain Factory",
   "config": {
     "inbox_type": "IMAP",
     "inbox_address": "sslin.df.eu",
     "inbox_port": 993,
     "inbox_ssl": true,
     "outbox_address":  "smtprelaypool.ispgateway.de",
     "outbox_port": 465,
     "outbox_secure": "ssl",
     "subscriptions": ["INBOX"]
   }
}]

service​

  • Type: Object

Endpoint configuration for this package. Used to create required URLs for outgoing HTTP-requests. Provides the field rest-api-email.base that must contain the base URL where endpoints for email operations as described in rest-api-mail can be found.

plugins​

Section for specifying component and controller plugins.

This package comes pre-configured with the following component plugins:

This package comes pre-configured with the following controller plugins: