app: add recvmail section

part of cloudron/box#804
2021-10-02 03:03:15 -07:00
parent 0c48159244
commit 7b973f88e8
3 changed files with 148 additions and 16 deletions
@@ -949,7 +949,7 @@
      </div>

      <div class="card" ng-show="view === 'email'">
-        <div class="row">
+        <div class="row" ng-show="app.manifest.addons.sendmail">
          <div class="col-md-12">
            <label class="control-label">{{ 'app.email.from.title' | tr }} <sup><a ng-href="https://docs.cloudron.io/apps/#mail-from-address" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>

@@ -962,10 +962,10 @@
            <div ng-style="{ 'padding-left': app.manifest.addons.sendmail.optional ? '20px' : '0' }">
              <p ng-bind-html="'app.email.from.enableDescription' | tr:{ domain: app.domain, domainConfigLink: ('/#/email/' + app.domain) }"></p>

-              <form role="form" name="emailForm" ng-submit="email.submit()" autocomplete="off">
+              <form role="form" name="emailForm" ng-submit="email.submitMailbox()" autocomplete="off">
                <fieldset ng-disabled="email.enableMailbox === '0'">
                  <div class="form-group" ng-class="{ 'has-error': emailForm.$dirty && email.error.mailboxName }">
-                    <div ng-show="email.error.mailboxName">{{ email.error.mailboxName }}</div>
+                    <div class="has-error" ng-show="email.error.mailboxName">{{ email.error.mailboxName }}</div>

                    <div class="input-group form-inline" ng-class="{ 'has-error': !emailForm.mailboxName.$dirty && email.error.mailboxName }">
                      <input type="text" class="form-control" name="mailboxName" placeholder="{{ 'app.email.from.mailboxPlaceholder' | tr }}" ng-model="email.mailboxName">
@@ -1000,10 +1000,72 @@
            </div>
          </div>
        </div>
-        <div class="row">
+        <div class="row" ng-show="app.manifest.addons.sendmail">
          <div class="col-md-12 text-right">
            <br/>
-            <button class="btn btn-outline btn-primary pull-right" ng-click="email.submit()" ng-disabled="(app.enableMailbox === email.enableMailbox && email.currentMailboxDomainName === email.mailboxDomain.domain && email.currentMailboxName === email.mailboxName) || email.busy || app.error || app.taskId" tooltip-enable="app.error || app.taskId" uib-tooltip="{{ app.error ? 'App is in error state' : 'App is busy' }}">
+            <button class="btn btn-outline btn-primary pull-right" ng-click="email.submitMailbox()" ng-disabled="(app.enableMailbox === email.enableMailbox && email.currentMailboxDomainName === email.mailboxDomain.domain && email.currentMailboxName === email.mailboxName) || email.busy || app.error || app.taskId" tooltip-enable="app.error || app.taskId" uib-tooltip="{{ app.error ? 'App is in error state' : 'App is busy' }}">
+              <i class="fa fa-circle-notch fa-spin" ng-show="email.busy"></i> {{ 'app.email.from.saveAction' | tr }}
+            </button>
+          </div>
+        </div>
+
+        <hr ng-show="app.manifest.addons.sendmail && app.manifest.addons.recvmail"/>
+
+        <div class="row" ng-show="app.manifest.addons.recvmail">
+          <div class="col-md-12">
+            <label class="control-label">{{ 'app.email.inbox.title' | tr }} <sup><a ng-href="https://docs.cloudron.io/apps/#inbox" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+
+            <div class="radio">
+              <label>
+                <input type="radio" ng-model="email.enableInbox" value="1"> {{ 'app.email.inbox.enable' | tr }}
+              </label>
+            </div>
+
+            <div ng-style="{ 'padding-left': '20px' }">
+              <p ng-bind-html="'app.email.inbox.enableDescription' | tr:{ domain: app.domain, domainConfigLink: ('/#/email/' + app.domain) }"></p>
+
+              <form role="form" name="inboxForm" ng-submit="email.submitInbox()" autocomplete="off">
+                <fieldset ng-disabled="email.enableInbox === '0'">
+                  <div class="form-group" ng-class="{ 'has-error': inboxForm.$dirty && email.error.inboxName }">
+                    <div class="has-error" ng-show="email.error.inboxName">{{ email.error.inboxName }}</div>
+
+                    <div class="input-group form-inline" ng-class="{ 'has-error': !inboxForm.inboxName.$dirty && email.error.inboxName }">
+                      <input type="text" class="form-control" name="inboxName" ng-model="email.inboxName">
+
+                      <div class="input-group-btn">
+                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                          <span>{{ '@' + email.inboxDomain.domain }}</span>
+                          <span class="caret"></span>
+                        </button>
+                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                          <li ng-repeat="domain in domains">
+                            <a href="" ng-click="email.inboxDomain = domain">{{ domain.domain }}</a>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                    <br/>
+                  </div>
+                </fieldset>
+                <input class="ng-hide" type="submit" ng-disabled="(email.currentInboxDomainName === email.inboxDomain.domain && email.currentInboxName === email.inboxName) || email.busy || app.error || app.taskId"/>
+              </form>
+            </div>
+
+            <div class="radio">
+              <label>
+                <input type="radio" ng-model="email.enableInbox" value="0"> {{ 'app.email.inbox.disable' | tr }}
+              </label>
+            </div>
+
+            <div style="padding-left: 20px;">
+              <p>{{ 'app.email.inbox.disableDescription' | tr }}</p>
+            </div>
+          </div>
+        </div>
+        <div class="row" ng-show="app.manifest.addons.recvmail">
+          <div class="col-md-12 text-right">
+            <br/>
+            <button class="btn btn-outline btn-primary pull-right" ng-click="email.submitInbox()" ng-disabled="(app.enableInbox === email.enableInbox && email.currentInboxDomainName === email.inboxDomain.domain && email.currentInboxName === email.inboxName) || email.busy || app.error || app.taskId" tooltip-enable="app.error || app.taskId" uib-tooltip="{{ app.error ? 'App is in error state' : 'App is busy' }}">
              <i class="fa fa-circle-notch fa-spin" ng-show="email.busy"></i> {{ 'app.email.from.saveAction' | tr }}
            </button>
          </div>
@@ -804,31 +804,55 @@ angular.module('Application').controller('AppController', ['$scope', '$location'

    $scope.email = {
        busy: false,
-        error: {},

        enableMailbox: true,
        mailboxName: '',
-        mailboxDomain: '',
+        mailboxDomain: null,
        currentMailboxName: '',
        currentMailboxDomainName: '',
+        mailboxError: {},
+
+        enableInbox: true,
+        inboxName: '',
+        inboxDomain: null,
+        currentInboxName: '',
+        currentInboxDomainName: '',
+        inboxError: {},

        show: function () {
            var app = $scope.app;

            $scope.emailForm.$setPristine();
-            $scope.email.error = {};
+            $scope.email.mailboxError = {};
            $scope.email.enableMailbox = app.enableMailbox ? '1' : '0';
            $scope.email.mailboxName = app.mailboxName || '';
-            $scope.email.mailboxDomain = $scope.domains.filter(function (d) { return d.domain === app.mailboxDomain; })[0];
+            $scope.email.mailboxDomain = $scope.domains.filter(function (d) { return d.domain === (app.mailboxDomain || app.domain); })[0];
            $scope.email.currentMailboxName = app.mailboxName || '';
-            $scope.email.currentMailboxDomainName = $scope.email.mailboxDomain.domain;
+            $scope.email.currentMailboxDomainName = $scope.email.mailboxDomain ? $scope.email.mailboxDomain.domain : '';
+
+            $scope.inboxForm.$setPristine();
+            $scope.email.inboxError = {};
+            $scope.email.enableInbox = app.enableInbox ? '1' : '0';
+            $scope.email.inboxName = app.inboxName || '';
+            $scope.email.inboxDomain = $scope.domains.filter(function (d) { return d.domain === (app.inboxDomain || app.domain); })[0];
+            $scope.email.currentInboxName = app.inboxName || '';
+            $scope.email.currentInboxDomainName = $scope.email.inboxDomain ? $scope.email.inboxDomain.domain : '';
        },

-        submit: function () {
+        submitMailbox: function () {
            $scope.email.error = {};
            $scope.email.busy = true;

-            Client.configureApp($scope.app.id, 'mailbox', { enable: $scope.email.enableMailbox === '1', mailboxName: $scope.email.mailboxName || null, mailboxDomain: $scope.email.mailboxDomain.domain }, function (error) {
+            var data = {
+                enable: $scope.email.enableMailbox === '1'
+            };
+
+            if (data.enable) {
+                data.mailboxName = $scope.email.mailboxName || null;
+                data.mailboxDomain = $scope.email.mailboxDomain.domain;
+            }
+
+            Client.configureApp($scope.app.id, 'mailbox', data, function (error) {
                if (error && error.statusCode === 400) {
                    $scope.email.busy = false;
                    $scope.email.error.mailboxName = error.message;
@@ -845,9 +869,48 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
                    // when the mailboxName is 'reset', this will fill it up with the default again
                    $scope.email.enableMailbox = $scope.app.enableMailbox ? '1' : '0';
                    $scope.email.mailboxName = $scope.app.mailboxName || '';
-                    $scope.email.mailboxDomain = $scope.domains.filter(function (d) { return d.domain === $scope.app.mailboxDomain; })[0];
+                    $scope.email.mailboxDomain = $scope.domains.filter(function (d) { return d.domain === ($scope.app.mailboxDomain || $scope.app.domain); })[0];
                    $scope.email.currentMailboxName = $scope.app.mailboxName || '';
-                    $scope.email.currentMailboxDomainName = $scope.email.mailboxDomain.domain;
+                    $scope.email.currentMailboxDomainName = $scope.email.mailboxDomain ? $scope.email.mailboxDomain.domain : '';
+
+                    $timeout(function () { $scope.email.busy = false; }, 1000);
+                });
+            });
+        },
+
+        submitInbox: function () {
+            $scope.email.error = {};
+            $scope.email.busy = true;
+
+            var data = {
+                enable: $scope.email.enableInbox === '1'
+            };
+
+            if (data.enable) {
+                data.inboxName = $scope.email.inboxName;
+                data.inboxDomain = $scope.email.inboxDomain.domain;
+            }
+
+            Client.configureApp($scope.app.id, 'inbox', data, function (error) {
+                if (error && error.statusCode === 400) {
+                    $scope.email.busy = false;
+                    $scope.email.error.inboxName = error.message;
+                    $scope.inboxForm.$setPristine();
+                    return;
+                }
+                if (error) return Client.error(error);
+
+                $scope.inboxForm.$setPristine();
+
+                refreshApp($scope.app.id, function (error) {
+                    if (error) return Client.error(error);
+
+                    // when the mailboxName is 'reset', this will fill it up with the default again
+                    $scope.email.enableInbox = $scope.app.enableInbox ? '1' : '0';
+                    $scope.email.inboxName = $scope.app.inboxName || '';
+                    $scope.email.inboxDomain = $scope.domains.filter(function (d) { return d.domain === ($scope.app.inboxDomain || $scope.app.domain); })[0];
+                    $scope.email.currentInboxName = $scope.app.inboxName || '';
+                    $scope.email.currentInboxDomainName = $scope.email.inboxDomain ? $scope.email.inboxDomain.domain : '';

                    $timeout(function () { $scope.email.busy = false; }, 1000);
                });