emailengine-app 1.14.8 → 2.61.0

package/views/accounts/account.hbs

@@ -0,0 +1,1254 @@
+{{> accounts_header}}
+
+<nav aria-label="breadcrumb" class="mt-4 mb-4">
+    <ol class="breadcrumb">
+        <li class="breadcrumb-item"><a href="/admin/accounts">Accounts</a></li>
+        <li class="breadcrumb-item active" aria-current="page">{{account.account}}</li>
+    </ol>
+</nav>
+
+<div class="card mb-4">
+    <div class="card-body">
+
+        <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
+            <div class="btn-group mr-2 mb-1" role="group" aria-label="First group">
+
+                <a type="button" class="btn btn-light" href="/admin/accounts/{{account.account}}/edit"
+                    title="Edit account configuration" data-toggle="tooltip" data-placement="top">
+                    <i class="fas fa-user-edit fa-fw"></i> Edit
+                </a>
+
+                <button type="button" class="btn btn-light" data-toggle="modal" data-target="#deleteModal"
+                    title="Delete this account and all associated data" id="delete-btn" data-placement="top">
+                    <i class="fas fa-trash-alt fa-fw"></i> Delete
+                </button>
+
+                <button type="button" class="btn btn-light" id="request-reconnect"
+                    title="Close and re-open IMAP connection" data-toggle="tooltip" data-placement="top">
+                    <i class="fas fa-sync-alt fa-fw" id="reconnect-icon"></i> Reconnect
+                </button>
+
+                <button type="button" class="btn btn-light" id="request-sync" title="Run periodic folder syncing now"
+                    data-toggle="tooltip" data-placement="top">
+                    <i class="fas fa-redo fa-fw" id="sync-icon"></i> Run sync
+                </button>
+            </div>
+
+            <div class="btn-group mr-2 mb-1" role="group" aria-label="Third group">
+                <a type="button" class="btn btn-light" href="/admin/templates/?account={{account.account}}"
+                    title="Email templates for &quot;{{account.account}}&quot;" data-toggle="tooltip"
+                    data-placement="top">
+                    <i class="fas fa-file-code fa-fw"></i> Email templates
+                </a>
+
+                <a type="button" class="btn btn-light" href="/admin/tokens/?account={{account.account}}"
+                    title="Access tokens for &quot;{{account.account}}&quot;" data-toggle="tooltip"
+                    data-placement="top">
+                    <i class="fas fa-key fa-fw"></i> Access tokens
+                </a>
+
+                {{#if canSend}}
+                {{#unless gateways}}
+                <button type="button" class="btn btn-light" data-toggle="modal" data-target="#testSendModal"
+                    title="Test SMTP delivery settings for this account" data-account="{{account.account}}"
+                    id="test-smtp-btn" data-placement="top">
+                    <i class="fas fa-envelope-open-text fa-fw" id="test-smtp-icon"></i> Delivery test
+                </button>
+                {{else}}
+                <div class="btn-group">
+                    <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown"
+                        aria-expanded="false" title="Test SMTP delivery settings for this account" id="test-smtp-btn">
+                        <i class="fas fa-envelope-open-text fa-fw" id="test-smtp-icon"></i> Delivery test
+                    </button>
+                    <div class="dropdown-menu">
+                        {{#if canUseSmtp}}
+                        <a class="dropdown-item" data-toggle="modal" data-target="#testSendModal" data-keyboard="false"
+                            data-backdrop="static" data-account="{{account.account}}" href="#">Account's
+                            SMTP server</a>
+                        {{#if gateways}}
+                        <div class="dropdown-divider"></div>
+                        {{/if}}
+                        {{/if}}
+                        {{#each gateways}}
+                        <a class="dropdown-item" data-toggle="modal" data-target="#testSendModal"
+                            data-account="{{../account.account}}" data-gateway="{{gateway}}" href="#">{{name}}</a>
+                        {{/each}}
+                    </div>
+                </div>
+                {{/unless}}
+                {{/if}}
+
+                <a type="button" class="btn btn-light" href="/admin/accounts/{{account.account}}/logs.txt"
+                    title="Download stored logs for &quot;{{account.account}}&quot;" data-toggle="tooltip"
+                    data-placement="top" download>
+                    <i class="fas fa-cloud-download-alt fa-fw"></i> Logs
+                </a>
+
+                {{#if canReadMail}}
+                <a type="button" class="btn btn-light" href="/admin/accounts/{{account.account}}/browse"
+                    title="Browse messages" data-toggle="tooltip" data-placement="top">
+                    <i class="fas fa-folder-open fa-fw"></i> Browse
+                </a>
+                {{/if}}
+            </div>
+
+            {{#if account.oauth2.provider}}
+            <div class="btn-group mr-2 mb-1" role="group" aria-label="Second group">
+                <button type="button" class="btn btn-light" data-toggle="modal" data-target="#renewGrantModal"
+                    title="Re-authenticate OAuth2 account" id="renew-grant-btn" data-placement="top">
+                    {{#if account.type.icon}}
+                    <i class="{{account.type.icon}} fa-fw"></i>
+                    {{/if}} Renew grant
+                </button>
+            </div>
+            {{/if}}
+        </div>
+
+        <dl class="row">
+            {{#if account.account}}
+            <dt class="col-sm-3">ID</dt>
+            <dd class="col-sm-9">
+                <strong>{{account.account}}</strong>
+
+                <span class="badge badge-pill badge-{{account.stateLabel.type}} state-info"
+                    data-account="{{account.account}}" style="cursor:default;" data-toggle="popover"
+                    data-trigger="hover" {{#if account.stateLabel.error}}data-title="Connection error"
+                    data-content="{{account.stateLabel.error}}" {{/if}}>
+
+                    {{#if account.stateLabel.spinner}}
+                    <i class="fas fa-spinner fa-spin fa-fw"></i>
+                    {{/if}}
+
+                    {{account.stateLabel.name}}</span>
+
+                <div>
+                    <div class="text-danger">
+                        {{#if account.syncError}}
+                        Sync stalled in folder <em>{{account.syncError.path}}</em>.
+                        {{#if account.syncError.error.responseText}}
+                        {{account.syncError.error.responseText}}
+                        {{else}}
+                        {{account.syncError.error.error}}
+                        {{/if}}
+                        {{/if}}
+                    </div>
+                </div>
+            </dd>
+            {{/if}}
+
+            {{#if account.name}}
+            <dt class="col-sm-3">Name</dt>
+            <dd class="col-sm-9">{{account.name}}</dd>
+            {{/if}}
+
+            {{#if account.email}}
+            <dt class="col-sm-3">Email</dt>
+            <dd class="col-sm-9">{{account.email}}</dd>
+            {{/if}}
+
+            <dt class="col-sm-3">Account type</dt>
+            <dd class="col-sm-9">
+                {{#if account.type.icon}}
+                <i class="{{account.type.icon}} fa-fw"></i>
+                {{/if}}
+
+                {{account.type.name}}
+
+                {{#if account.type.comment}}
+                <span class="text-muted">({{account.type.comment}})</span>
+                {{/if}}
+            </dd>
+
+            <dt class="col-sm-3">Recent logs <a href="#" tabindex="-1" role="button" data-toggle="popover"
+                    data-trigger="hover" style="display: inline-block;"
+                    data-content="Up to last {{formatInteger logs.maxLogLines userLocale}} log lines"><i
+                        class="fas fa-info-circle text-info"></i></a>
+            </dt>
+
+            <dd class="col-sm-9">
+                {{#if logs.all}}
+                <div>
+                    Enabled by default for all accounts
+                </div>
+                {{else}}
+
+                <div class="dropdown">
+                    <div class="dropdown-toggle" role="button" id="logs-info" data-toggle="dropdown"
+                        aria-expanded="false" data-logs="{{#if account.logs}}enabled{{else}}disabled{{/if}}">
+                        <span id="logs-info-label">{{#if account.logs}}Enabled{{else}}Disabled{{/if}}</span>
+                    </div>
+
+                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+                        <a class="dropdown-item" href="#" id="toggle-logs">{{#if
+                            account.logs}}Disable{{else}}Enable{{/if}}</a>
+                        <a class="dropdown-item" href="#" id="flush-logs">Flush stored logs</a>
+                    </div>
+                </div>
+
+                {{/if}}
+            </dd>
+        </dl>
+
+    </div>
+</div>
+
+{{#if account._app}}
+
+<div class="card mb-4">
+    <div class="card-header py-3">
+        <h6 class="m-0 font-weight-bold text-primary">OAuth2
+        </h6>
+    </div>
+    <div class="card-body">
+
+        {{#if account.oauth2.userFlag.message }}
+        <div class="alert alert-danger">{{account.oauth2.userFlag.message}}
+
+            {{#if account.oauth2.userFlag.description}}
+            <hr>
+            <p class="mb-0">
+                <small>{{account.oauth2.userFlag.description}}</small>
+            </p>
+            {{/if}}
+
+        </div>
+        <hr>
+
+        {{/if}}
+
+        <dl class="row">
+
+
+            <dt class="col-sm-3">Provider</dt>
+
+            {{#if account.oauth2.app}}
+            <dd class="col-sm-9">
+                <a href="/admin/config/oauth/app/{{account.oauth2.app.id}}">{{account.type.comment}}</a>
+                (<em>{{account.oauth2.app.id}}</em>)
+
+                {{#if account.oauth2.app.meta.authFlag}}
+
+                <a href="#" tabindex="-1" role="button" data-toggle="popover" data-trigger="hover"
+                    style="display: inline-block;" data-title="OAuth2 application failure"
+                    data-content="{{account.oauth2.app.meta.authFlag.message}}"><i
+                        class="fas fa-exclamation-triangle text-danger"></i></a>
+
+                {{/if}}
+            </dd>
+            {{else}}
+            <dd class="col-sm-9">{{account.type.comment}}</dd>
+            {{/if}}
+
+            <dt class="col-sm-3">Connection method</dt>
+            <dd class="col-sm-9">
+                {{#if account.isApi}}
+                {{#if account.sendOnly}}
+                API <span class="badge badge-info" style="cursor:default;" data-toggle="popover" data-trigger="hover"
+                    data-content="This account can only send emails. It does not have read access to the mailbox.">Send-only</span>
+                {{else}}
+                API
+                {{/if}}
+                {{else}}
+                IMAP
+                {{/if}}
+            </dd>
+
+            {{#if account.oauth2.auth.user}}
+            <dt class="col-sm-3">Username</dt>
+            <dd class="col-sm-9">
+                {{account.oauth2.auth.user}}
+                {{#if account.oauth2.auth.delegatedUser}}
+                <em>as</em>
+                {{account.oauth2.auth.delegatedUser}}
+                {{/if}}
+            </dd>
+            {{/if}}
+
+            {{#if account.oauth2.scopes}}
+            <dt class="col-sm-3">Scopes</dt>
+            <dd class="col-sm-9">
+                <div>
+                    {{#each account.oauth2.scopes}}
+                    <div><code>{{this}}</code></div>
+                    {{/each}}
+                </div>
+            </dd>
+            {{/if}}
+
+            {{#if account.oauth2.expiresStr}}
+            <dt class="col-sm-3">Access token validity</dt>
+            <dd class="col-sm-9">
+
+                {{#if account.oauth2.generatedStr}}
+                <span class="local-date-time code-link" data-time="{{account.oauth2.generatedStr}}"
+                    title="{{account.oauth2.generatedStr}}"></span> &mdash;
+                {{else}}
+                To
+                {{/if}}
+
+                <span class="local-date-time code-link" data-time="{{account.oauth2.expiresStr}}"
+                    title="{{account.oauth2.expiresStr}}"></span>
+            </dd>
+            {{/if}}
+
+            {{#if gmailWatch}}
+            <dt class="col-sm-3">Change subscription</dt>
+
+            <dd class="col-sm-9">
+
+                <span class="badge badge-pill 
+{{#if gmailWatch.active}}
+    badge-success
+{{else}}
+    {{#if gmailWatch.error}}
+        badge-danger
+    {{else}}
+        badge-warning
+    {{/if}}
+{{/if}}
+" style="cursor:default;" {{#if gmailWatch.error}} data-toggle="popover" data-trigger="hover"
+                    data-title="Subscription error" data-content="{{gmailWatch.error}}" {{/if}}>
+                    {{gmailWatch.stateLabel}}
+                </span>
+
+                {{#if gmailWatch.expiresStr}}
+                Valid until <span class="local-date-time code-link" data-time="{{gmailWatch.expiresStr}}"
+                    title="{{gmailWatch.expiresStr}}"></span>
+                {{/if}}
+
+                {{#if gmailWatch.error}}
+                <div class="mt-3">
+                    <div class="alert alert-danger">
+                        <div>
+                            <small>The last attempt to renew the change subscription failed with the following
+                                error.</small>
+                        </div>
+                        <div>
+                            {{gmailWatch.error}}
+                        </div>
+
+                        {{#if gmailWatch.request}}
+                        <div class="mt-3">
+                            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#watchDetails"
+                                data-placement="top">
+                                Show details
+                            </button>
+                        </div>
+                        {{/if}}
+                    </div>
+
+                </div>
+                {{/if}}
+
+            </dd>
+
+
+
+
+            {{/if}}
+
+            {{#if account.outlookSubscription}}
+            <dt class="col-sm-3">Change subscription</dt>
+            <dd class="col-sm-9">
+
+                <span class="badge badge-pill 
+{{#if account.outlookSubscription.isValid}}
+    badge-success
+{{else}}
+    {{#if account.outlookSubscription.state.error}}
+        badge-danger
+    {{else}}
+        badge-warning
+    {{/if}}
+{{/if}}
+" style="cursor:default;" {{#if account.outlookSubscription.state.error}} data-toggle="popover" data-trigger="hover"
+                    data-title="Subscription error" data-content="{{account.outlookSubscription.state.error}}" {{/if}}>
+                    {{account.outlookSubscription.stateLabel}}
+                </span>
+
+                {{#if account.outlookSubscription.expirationDateTime}}
+                Valid until <span class="local-date-time code-link"
+                    data-time="{{account.outlookSubscription.subscriptionExpiresStr}}"
+                    title="{{account.outlookSubscription.subscriptionExpiresStr}}"></span>
+                {{/if}}
+
+                {{#if account.outlookSubscription.state.error}}
+                <div class="alert alert-danger">
+                    {{account.outlookSubscription.state.error}}
+
+                    {{#if account.outlookSubscription.state.time}}
+                    <small>(last checked <span class="local-date-time"
+                            data-time="{{isodate account.outlookSubscription.state.time}}"
+                            title="{{isodate account.outlookSubscription.state.time}}"></span>)</small>
+                    {{/if}}
+
+                </div>
+                {{/if}}
+
+            </dd>
+            {{/if}}
+
+        </dl>
+
+    </div>
+</div>
+
+{{/if}}
+
+{{#unless account.isApi}}
+
+<div class="card mb-4">
+    <div class="card-header py-3">
+        <h6 class="m-0 font-weight-bold text-primary">IMAP {{#if account.lastErrorState}}<span
+                class="badge badge-danger">errored</span>{{/if}}</h6>
+    </div>
+    <div class="card-body">
+
+        {{#if account.lastErrorState}}
+        {{#if account.lastErrorState.description}}
+        <div class="alert alert-danger">{{account.lastErrorState.description}}</div>
+        {{/if}}
+        <dl class="row">
+
+
+
+            {{#if account.lastErrorState.response}}
+            <dt class="col-sm-3">IMAP response</dt>
+            <dd class="col-sm-9"><code>{{account.lastErrorState.response}}</code></dd>
+            {{/if}}
+        </dl>
+
+        <hr>
+        {{/if}}
+
+        <dl class="row">
+
+
+            <dt class="col-sm-3">Enabled</dt>
+
+            {{#if account.imap.disabled}}
+            <dd class="col-sm-9">No</dd>
+            {{else}}
+            <dd class="col-sm-9">Yes</dd>
+            {{/if}}
+
+
+            {{#unless account.imap.disabled}}
+            {{#unless account.oauth2.provider}}
+
+            {{#if account.imap.auth.user}}
+            <dt class="col-sm-3">Username</dt>
+            <dd class="col-sm-9">{{account.imap.auth.user}}</dd>
+            {{/if}}
+
+            <dt class="col-sm-3">Authentication</dt>
+            {{#if account.imap.auth.pass}}
+            <dd class="col-sm-9">Password</dd>
+            {{else}}
+            <dd class="col-sm-9">None</dd>
+            {{/if}}
+
+            {{#if account.imap.host}}
+            <dt class="col-sm-3">Hostname</dt>
+            <dd class="col-sm-9">{{account.imap.host}}</dd>
+            {{/if}}
+
+            {{#if account.imap.port}}
+            <dt class="col-sm-3">Port</dt>
+            <dd class="col-sm-9">{{account.imap.port}}</dd>
+            {{/if}}
+
+            <dt class="col-sm-3">TLS</dt>
+            <dd class="col-sm-9">{{#if account.imap.secure}}Yes{{else}}Uses STARTTLS if possible{{/if}}
+            </dd>
+
+            {{else}}
+
+            {{#if account.oauth2.auth.user}}
+            <dt class="col-sm-3">Username</dt>
+            <dd class="col-sm-9">
+                {{account.oauth2.auth.user}}
+                {{#if account.oauth2.auth.delegatedUser}}
+                <em>as</em>
+                {{account.oauth2.auth.delegatedUser}}
+                {{/if}}
+            </dd>
+            {{/if}}
+
+            <dt class="col-sm-3">Authentication</dt>
+            <dd class="col-sm-9">Bearer token</dd>
+
+            {{#if account.oauth2.providerData.imap.host}}
+            <dt class="col-sm-3">Hostname</dt>
+            <dd class="col-sm-9">{{account.oauth2.providerData.imap.host}}</dd>
+            {{/if}}
+
+            {{#if account.oauth2.providerData.imap.port}}
+            <dt class="col-sm-3">Port</dt>
+            <dd class="col-sm-9">{{account.oauth2.providerData.imap.port}}</dd>
+            {{/if}}
+
+            <dt class="col-sm-3">TLS</dt>
+            <dd class="col-sm-9">{{#if account.oauth2.providerData.imap.secure}}Yes{{else}}Uses STARTTLS if
+                possible{{/if}}
+            </dd>
+
+            {{/unless}}
+
+            {{#if account.imap.resyncDelay}}
+            <dt class="col-sm-3">Resync delay</dt>
+            <dd class="col-sm-9">{{account.imap.resyncDelay}}</dd>
+            {{/if}}
+
+            {{#if account.imap.sentMailPath}}
+            <dt class="col-sm-3">Sent Mail folder</dt>
+            <dd class="col-sm-9">{{account.imap.sentMailPath}}</dd>
+            {{/if}}
+
+            {{#if account.path}}
+            <dt class="col-sm-3">Syncing paths
+
+                <a href="#" tabindex="-1" role="button" data-toggle="popover" data-trigger="hover"
+                    style="display: inline-block;"
+                    data-content="EmailEngine only checks for new or updated emails from the selected paths"><i
+                        class="fas fa-info-circle text-info"></i></a>
+
+            </dt>
+            <dd class="col-sm-9">
+                {{#each account.path}}
+                <span class="badge badge-light">
+                    {{this}}
+                </span>
+                {{/each}}
+            </dd>
+            {{/if}}
+
+            {{/unless}}
+
+        </dl>
+
+        {{#if subConnectionInfo}}
+        <hr>
+        <h6 class="font-weight-bold text-primary">Subconnections</h6>
+
+        <p>Subconnections are supplementary IMAP connections that help detect changes in secondary folders more quickly.
+            By default, EmailEngine only receives real-time updates for the primary folder and uses periodic
+            polling for secondary folders. However, when faster updates are required from
+            secondary folders, subconnections can be used to ensure prompt notifications.</p>
+
+        <dl class="row mt-3">
+            {{#each subConnectionInfo}}
+            <dt class="col-sm-3">{{path}}</dt>
+            <dd class="col-sm-9">
+                <span class="badge badge-pill badge-{{stateLabel.type}} state-info" style="cursor:default;"
+                    data-toggle="popover" data-trigger="hover" {{#if stateLabel.error}}data-title="Connection error"
+                    data-content="{{stateLabel.error}}" {{/if}}>
+
+                    {{#if stateLabel.spinner}}
+                    <i class="fas fa-spinner fa-spin fa-fw"></i>
+                    {{/if}}
+
+                    {{stateLabel.name}}</span>
+            </dd>
+            {{/each}}
+        </dl>
+        {{/if}}
+
+    </div>
+    <div class="card-footer">
+
+        <div class="float-right">
+
+            <i class="fas fa-info-circle text-gray-300"></i>
+
+        </div>
+
+        <dl class="row">
+
+            {{#if account.imapServerInfo.name}}
+            <dt class="col-sm-3">Server Software</dt>
+            <dd class="col-sm-9">{{account.imapServerInfo.name}}</dd>
+            {{/if}}
+
+            {{#if account.imapServerInfo.vendor}}
+            <dt class="col-sm-3">Vendor</dt>
+            <dd class="col-sm-9">{{account.imapServerInfo.vendor}}</dd>
+            {{/if}}
+
+            {{#if account.imapServerInfo.version}}
+            <dt class="col-sm-3">Version</dt>
+            <dd class="col-sm-9">{{account.imapServerInfo.version}}</dd>
+            {{/if}}
+
+            {{#if account.imapServerInfo.[support-url]}}
+            <dt class="col-sm-3">Support URL</dt>
+            <dd class="col-sm-9"><a href="{{account.imapServerInfo.[" support-url"]}}" target="_blank"
+                    rel="noopener noreferrer" referrerpolicy="no-referrer">{{account.imapServerInfo.[support-url]}}</a>
+            </dd>
+            {{/if}}
+
+            <dt class="col-sm-3">Capabilities</dt>
+            <dd class="col-sm-9">
+                {{#each capabilities}}
+                {{#if url}}
+                <a href="{{url}}" data-toggle="tooltip" data-placement="top" title="{{rfc}}" target="_blank"
+                    rel="noopener noreferrer" referrerpolicy="no-referrer"><small>{{capability}}</small></a>
+                {{else}}
+                <small style="cursor: default;">{{capability}}</small>
+                {{/if}}
+                {{/each}}
+            </dd>
+
+            <dt class="col-sm-3">Authentication</dt>
+            <dd class="col-sm-9">
+                {{#each authCapabilities}}
+                {{#if url}}
+                <a href="{{url}}" class="{{#if lastUsed}}badge badge-secondary{{/if}}" data-toggle="tooltip"
+                    data-placement="top" title="{{#if lastUsed}}Active method | {{/if}}{{rfc}}" target="_blank"
+                    rel="noopener noreferrer" referrerpolicy="no-referrer"><small>{{capability}}</small></a>
+                {{else}}
+                <small style="cursor: default;">{{capability}}</small>
+                {{/if}}
+                {{/each}}
+            </dd>
+
+        </dl>
+
+    </div>
+</div>
+
+{{#if showSmtp}}
+<div class="card mb-4">
+    <div class="card-header py-3">
+        <h6 class="m-0 font-weight-bold text-primary">SMTP {{#if smtpError}}<span
+                class="badge badge-danger">errored</span>{{/if}}</h6>
+    </div>
+    <div class="card-body">
+
+        {{#if smtpError}}
+        <dl class="row">
+            <dt class="col-sm-3">Error</dt>
+            <dd class="col-sm-9">{{account.smtpStatus.description}}</dd>
+
+            {{#if account.smtpStatus.response}}
+            <dt class="col-sm-3">SMTP response</dt>
+            <dd class="col-sm-9"><code>{{account.smtpStatus.response}}</code></dd>
+            {{/if}}
+        </dl>
+
+        <hr>
+        {{/if}}
+
+        <dl class="row">
+
+            {{#unless account.oauth2.provider}}
+            {{#if account.smtp.auth.user}}
+            <dt class="col-sm-3">Username</dt>
+            <dd class="col-sm-9">{{account.smtp.auth.user}}</dd>
+            {{/if}}
+
+            <dt class="col-sm-3">Authentication</dt>
+            {{#if account.smtp.auth.pass}}
+            <dd class="col-sm-9">Password</dd>
+            {{else}}
+            <dd class="col-sm-9">None</dd>
+            {{/if}}
+
+            {{#if account.smtp.host}}
+            <dt class="col-sm-3">Hostname</dt>
+            <dd class="col-sm-9">{{account.smtp.host}}</dd>
+            {{/if}}
+
+            {{#if account.smtp.port}}
+            <dt class="col-sm-3">Port</dt>
+            <dd class="col-sm-9">{{account.smtp.port}}</dd>
+            {{/if}}
+
+            <dt class="col-sm-3">TLS</dt>
+            <dd class="col-sm-9">{{#if account.smtp.secure}}Yes{{else}}Uses STARTTLS if possible{{/if}}
+            </dd>
+
+            {{else}}
+
+            {{#if account.oauth2.auth.user}}
+            <dt class="col-sm-3">Username</dt>
+            <dd class="col-sm-9">
+                {{account.oauth2.auth.user}}
+                {{#if account.oauth2.auth.delegatedUser}}
+                <em>as</em>
+                {{account.oauth2.auth.delegatedUser}}
+                {{/if}}
+            </dd>
+            {{/if}}
+
+            <dt class="col-sm-3">Authentication</dt>
+            <dd class="col-sm-9">Bearer token</dd>
+
+            {{#if account.oauth2.providerData.smtp.host}}
+            <dt class="col-sm-3">Hostname</dt>
+            <dd class="col-sm-9">{{account.oauth2.providerData.smtp.host}}</dd>
+            {{/if}}
+
+            {{#if account.oauth2.providerData.smtp.port}}
+            <dt class="col-sm-3">Port</dt>
+            <dd class="col-sm-9">{{account.oauth2.providerData.smtp.port}}</dd>
+            {{/if}}
+
+            <dt class="col-sm-3">TLS</dt>
+            <dd class="col-sm-9">{{#if account.oauth2.providerData.smtp.secure}}Yes{{else}}Uses STARTTLS if
+                possible{{/if}}
+            </dd>
+
+            {{/unless}}
+
+        </dl>
+
+    </div>
+
+    {{#if account.smtpServerEhlo}}
+    <div class="card-footer">
+
+        <div class="float-right">
+
+            <i class="fas fa-info-circle text-gray-300"></i>
+
+        </div>
+
+        <dl class="row">
+            <dt class="col-sm-3">Extensions</dt>
+            <dd class="col-sm-9">
+                {{#each account.smtpServerEhlo}}
+                <small style="cursor: default;">{{this}}</small>
+                {{/each}}
+            </dd>
+
+            <dt class="col-sm-3">Authentication</dt>
+            <dd class="col-sm-9">
+                {{#each account.smtpAuthMechanisms}}
+                {{#if url}}
+                <a href="{{url}}" data-toggle="tooltip" data-placement="top" title="{{rfc}}" target="_blank"
+                    rel="noopener noreferrer" referrerpolicy="no-referrer"><small>{{auth}}</small></a>
+                {{else}}
+                <small style="cursor: default;">{{this}}</small>
+                {{/if}}
+                {{/each}}
+            </dd>
+        </dl>
+
+    </div>
+    {{/if}}
+</div>
+
+{{/if}}
+
+{{/unless}}
+
+{{#if showAdvanced}}
+<div class="card mb-4">
+    <div class="card-header py-3">
+        <h6 class="m-0 font-weight-bold text-primary">Advanced</h6>
+    </div>
+    <div class="card-body">
+
+        <dl class="row">
+
+            {{#if account.path}}
+            <dt class="col-sm-3">Path to sync</dt>
+            <dd class="col-sm-9"><code style="color: #858796;">{{account.path}}</code></dd>
+            {{/if}}
+
+            {{#if account.proxy}}
+            <dt class="col-sm-3">Proxy</dt>
+            <dd class="col-sm-9"><code style="color: #858796;">{{account.proxy}}</code></dd>
+            {{/if}}
+
+            {{#if account.webhooks}}
+            <dt class="col-sm-3">Webhook URL</dt>
+            <dd class="col-sm-9"><code style="color: #858796;">{{account.webhooks}}</code></dd>
+            {{/if}}
+
+        </dl>
+
+        {{#if account.webhooks}}
+        {{#if account.webhookErrorFlag.message}}
+        <hr />
+
+        <div><small><strong>Note:</strong> The last webhook attempt failed with the following response.</small></div>
+        <div><code>{{account.webhookErrorFlag.message}}</code></div>
+
+        {{/if}}
+        {{/if}}
+
+    </div>
+</div>
+{{/if}}
+
+<div class="modal fade" id="renewGrantModal" tabindex="-1" aria-labelledby="renewGrantLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="renewGrantLabel">Renew grant</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>
+                    When renewing the OAuth2 grant, ensure you are not logged in to another account for the same
+                    provider in this browser. Otherwise, that account might override the settings and messages for
+                    <em>{{account.name}}</em> in EmailEngine.
+                </p>
+            </div>
+            <div class="modal-footer">
+                <form method="post" action="/accounts/new">
+                    <input type="hidden" name="crumb" value="{{crumb}}">
+                    <input type="hidden" name="type" value="{{account.oauth2.provider}}">
+                    <input type="hidden" name="data" value="{{accountForm.data}}">
+                    <input type="hidden" name="sig" value="{{accountForm.signature}}">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    <button type="submit" class="btn btn-primary">
+                        {{#if account.type.icon}}
+                        <i class="{{account.type.icon}} fa-fw"></i>
+                        {{/if}} Renew grant
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="deleteModalLabel">Delete account</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>Are you sure you want to delete the account for {{account.name}}? This action is not
+                    recoverable.</p>
+            </div>
+            <div class="modal-footer">
+                <form method="post" action="/admin/accounts/{{account.account}}/delete">
+                    <input type="hidden" name="crumb" value="{{crumb}}" />
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    <button type="submit" class="btn btn-danger">Delete</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="testSendModal" tabindex="-1" aria-labelledby="testSendModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="testSendModalLabel">Email delivery test</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p><small class="text-muted">EmailEngine sends a test email from the selected account to EmailEngine's
+                        remote testing server. Once the test email has been processed, EmailEngine displays the
+                        authorization validation results below.</small>
+                </p>
+                <div id="test-send-pending-message">
+                    <p><i class="fas fa-spinner fa-spin fa-sm"></i> Testing email delivery settings, please
+                        wait&mldr;<br />
+                        <small><strong>Note:</strong> This process may take several
+                            minutes depending on the SMTP server.</small>
+                    </p>
+                </div>
+                <div id="test-send-error">
+                    <p>Message submission failed with the following result:</p>
+                    <div>
+                        <small class="alert alert-danger text-monospace error-message" style="display: block;"></small>
+                    </div>
+                </div>
+                <div id="test-send-results"></div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="watchDetails" tabindex="-1" aria-labelledby="watchDetailsLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="watchDetailsLabel">Renewal request details</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="row">
+
+                    <dt class="col-sm-3">Error message</dt>
+                    <dd class="col-sm-9">
+                        {{gmailWatch.error}}</span>
+                    </dd>
+
+                    <dt class="col-sm-3">Request time</dt>
+                    <dd class="col-sm-9">
+                        <span class="local-date-time" data-time="{{gmailWatch.lastCheckStr}}"
+                            title="{{gmailWatch.lastCheckStr}}"></span>
+                    </dd>
+
+                    {{#if gmailWatch.request.status}}
+                    <dt class="col-sm-3">Response status</dt>
+                    <dd class="col-sm-9">
+                        {{gmailWatch.request.status}}
+                    </dd>
+                    {{/if}}
+
+                    {{#if gmailWatch.request.contentType}}
+                    <dt class="col-sm-3">Content Type</dt>
+                    <dd class="col-sm-9">
+                        <span class="code-link">{{gmailWatch.request.contentType}}</span>
+                    </dd>
+                    {{/if}}
+
+
+
+                </div>
+
+                {{#if gmailWatch.request.response}}
+
+                <div class="form-group">
+                    <textarea class="form-control text-monospace" rows="5" spellcheck="false"
+                        data-enable-grammarly="false" readonly>{{json gmailWatch.request.response}}</textarea>
+                </div>
+
+                {{/if}}
+
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<input type="hidden" id="account-id" value="{{account.account}}">
+<input type="hidden" id="crumb" value="{{crumb}}">
+
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+
+        const reconnectAccount = async () => {
+            const account = document.getElementById('account-id').value.trim();
+
+            const res = await fetch(`/admin/accounts/${account}/reconnect`, {
+                method: 'post',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({
+                    crumb: document.getElementById('crumb').value,
+                    reconnect: true
+                })
+            })
+            if (!res.ok) {
+                throw new Error(`HTTP error! status: ${res.status}`);
+            }
+            const data = await res.json();
+
+            return data;
+        }
+
+        let reconnecting = false;
+        const requestReconnectElm = document.getElementById('request-reconnect');
+        requestReconnectElm.addEventListener('click', e => {
+            e.preventDefault();
+            if (requestReconnectElm.classList.contains('disabled')) {
+                return;
+            }
+
+            if (reconnecting) {
+                return
+            }
+
+            reconnecting = true;
+            document.getElementById('reconnect-icon').classList.add('fa-spin');
+            reconnectAccount().then(data => {
+                document.getElementById('reconnect-icon').classList.remove('fa-spin');
+                reconnecting = false;
+                showToast(data.error ? data.error : (data.success ? 'Account reconnection requested' : 'Failed to request reconnect'), data.success ? 'check-circle' : 'alert-triangle');
+            }).catch(err => {
+                document.getElementById('reconnect-icon').classList.remove('fa-spin');
+                reconnecting = false;
+                showToast('Request failed\n' + err.message, 'alert-triangle');
+            })
+        });
+
+        const syncAccount = async () => {
+            const account = document.getElementById('account-id').value.trim();
+
+            const res = await fetch(`/admin/accounts/${account}/sync`, {
+                method: 'post',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({
+                    crumb: document.getElementById('crumb').value,
+                    sync: true
+                })
+            })
+            if (!res.ok) {
+                throw new Error(`HTTP error! status: ${res.status}`);
+            }
+            const data = await res.json();
+
+            return data;
+        }
+
+        let syncing = false;
+        const requestSyncElm = document.getElementById('request-sync');
+        requestSyncElm.addEventListener('click', e => {
+            e.preventDefault();
+            if (requestSyncElm.classList.contains('disabled')) {
+                return;
+            }
+
+            if (syncing) {
+                return
+            }
+
+            syncing = true;
+            document.getElementById('sync-icon').classList.add('fa-spin');
+            syncAccount().then(data => {
+                document.getElementById('sync-icon').classList.remove('fa-spin');
+                syncing = false;
+                showToast(data.error ? data.error : (data.success ? 'Account sync requested' : 'Failed to request syncing'), data.success ? 'check-circle' : 'alert-triangle');
+            }).catch(err => {
+                document.getElementById('sync-icon').classList.remove('fa-spin');
+                syncing = false;
+                showToast('Request failed\n' + err.message, 'alert-triangle');
+            })
+        });
+
+        const toggleLogs = async () => {
+            const account = document.getElementById('account-id').value.trim();
+
+            let current = document.getElementById('logs-info').dataset.logs;
+            let toggled = current === 'enabled' ? false : true;
+
+            const res = await fetch(`/admin/accounts/${account}/logs`, {
+                method: 'post',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({
+                    crumb: document.getElementById('crumb').value,
+                    enabled: toggled
+                })
+            })
+            if (!res.ok) {
+                throw new Error(`HTTP error! status: ${res.status}`);
+            }
+            const data = await res.json();
+            if (data.enabled) {
+                // mark as enabled
+                document.getElementById('logs-info-label').textContent = 'Enabled';
+                document.getElementById('logs-info').dataset.logs = 'enabled'
+                document.getElementById('toggle-logs').textContent = 'Disable';
+            } else {
+                // mark as disabled
+                document.getElementById('logs-info-label').textContent = 'Disabled';
+                document.getElementById('logs-info').dataset.logs = 'disabled'
+                document.getElementById('toggle-logs').textContent = 'Enable';
+            }
+            return data;
+        }
+
+        let togglingLogs = false;
+        document.getElementById('toggle-logs').addEventListener('click', e => {
+            e.preventDefault();
+            if (togglingLogs) {
+                return
+            }
+            togglingLogs = true;
+
+            toggleLogs().then(data => {
+                togglingLogs = false;
+                showToast(data.error ? data.error : (data.success ? 'Logging settings updated' : 'Failed to request reconnect'), data.success ? 'check-circle' : 'alert-triangle');
+            }).catch(err => {
+                togglingLogs = false;
+                showToast('Request failed\n' + err.message, 'alert-triangle');
+            })
+        });
+
+        const flushLogs = async () => {
+            const account = document.getElementById('account-id').value.trim();
+
+            const res = await fetch(`/admin/accounts/${account}/logs-flush`, {
+                method: 'post',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({
+                    crumb: document.getElementById('crumb').value
+                })
+            })
+            if (!res.ok) {
+                throw new Error(`HTTP error! status: ${res.status}`);
+            }
+            const data = await res.json();
+            return data;
+        }
+
+        let flushingLogs = false;
+        document.getElementById('flush-logs').addEventListener('click', e => {
+            e.preventDefault();
+            if (flushingLogs) {
+                return
+            }
+            flushingLogs = true;
+
+            flushLogs().then(data => {
+                flushingLogs = false;
+                showToast(data.error ? data.error : (data.success ? 'Stored logs were flushed' : 'Failed to flush logs'), data.success ? 'check-circle' : 'alert-triangle');
+            }).catch(err => {
+                togglinflushingLogsgLogs = false;
+                showToast('Request failed\n' + err.message, 'alert-triangle');
+            })
+        });
+
+        // not set up by default as this element has a different data-toggle
+        $('#delete-btn').tooltip();
+        $('#delete-btn').click(() => $('#delete-btn').tooltip('hide'));
+
+        $('#test-smtp-btn').tooltip();
+        $('#test-smtp-btn').click(() => $('#test-smtp-btn').tooltip('hide'));
+
+        $('#renew-grant-btn').tooltip();
+        $('#renew-grant-btn').click(() => $('#renew-grant-btn').tooltip('hide'));
+    });
+</script>
+
+<script id="test-send-template" type="text/x-handlebars-template">{{{testSendTemplate}}}</script>
+
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        Handlebars.registerHelper('equals', function (compareVal, baseVal, options) {
+            if (baseVal == compareVal) {
+                return options.fn(this);
+            }
+            return options.inverse(this);
+        });
+
+        Handlebars.registerHelper('inc', function (nr, inc, options) {
+            return Number(nr) + Number(inc);
+        });
+
+        const testSendTemplate = Handlebars.compile(document.getElementById('test-send-template').innerHTML);
+
+        let aborted = false;
+
+        const createSmtpTestAccount = async (account, gateway) => {
+            aborted = false;
+            const res = await fetch(`/admin/smtp/create-test`, {
+                method: 'post',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({
+                    crumb: document.getElementById('crumb').value,
+                    account,
+                    gateway
+                })
+            })
+            if (!res.ok) {
+                throw new Error(`HTTP error! status: ${res.status}`);
+            }
+            const data = await res.json();
+
+            return data;
+        }
+
+
+        const checkSmtpTestAccount = async user => {
+            if (aborted) {
+                return false
+            }
+
+            const res = await fetch(`/admin/smtp/check-test`, {
+                method: 'post',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({
+                    crumb: document.getElementById('crumb').value,
+                    user
+                })
+            });
+
+            if (!res.ok) {
+                throw new Error(`HTTP error! status: ${res.status}`);
+            }
+
+            const data = await res.json();
+
+            return data;
+        }
+
+        const waitForTestResults = async user => {
+            let results;
+
+            while (!results) {
+                if (aborted) {
+                    return false
+                }
+
+                let data = await checkSmtpTestAccount(user);
+                switch (data.status) {
+                    case 'error':
+                        throw new Error(data.error)
+                    case 'success':
+                        results = data;
+                        break;
+                    case 'no data':
+                    default:
+                        await new Promise(r => setTimeout(r, 5 * 1000))
+                }
+
+            }
+
+            return results;
+        }
+
+        $('#testSendModal').on('show.bs.modal', function (event) {
+            document.getElementById('test-send-pending-message').classList.remove('d-none');
+            document.getElementById('test-send-results').classList.add('d-none');
+            document.getElementById('test-send-error').classList.add('d-none');
+            document.getElementById('test-send-results').innerHTML = ''
+        })
+
+        $('#testSendModal').on('shown.bs.modal', function (event) {
+
+            let testData = {
+                account: event.relatedTarget.dataset.account || '',
+                gateway: event.relatedTarget.dataset.gateway || '',
+            }
+
+            createSmtpTestAccount(testData.account, testData.gateway).then((result) => {
+                return waitForTestResults(result.user);
+            }).then(results => {
+                document.getElementById('test-send-pending-message').classList.add('d-none');
+                document.getElementById('test-send-error').classList.add('d-none');
+                if (aborted) {
+                    return false
+                }
+                document.getElementById('test-send-results').classList.remove('d-none');
+                document.getElementById('test-send-results').innerHTML = testSendTemplate(results);
+
+                // activate tabs
+                //$('#testResultTabs li button').tab();
+                //$('.collapse').collapse();
+            }).catch(err => {
+                document.getElementById('test-send-pending-message').classList.add('d-none');
+                document.getElementById('test-send-results').classList.add('d-none');
+                document.getElementById('test-send-error').classList.remove('d-none');
+                document.querySelector('#test-send-error .error-message').textContent = err.message;
+            });
+        });
+
+        $('#testSendModal').on('hide.bs.modal', function (event) {
+            aborted = true;
+        });
+    })
+</script>