From 4f03a6fb58de220dc6d2e7166023bb8bf06cb44d Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Fri, 26 Jul 2024 18:57:03 +0200
Subject: [PATCH] dashboard: mailbox edit dialog is not really a form with
 submit action

As a form with a submit button the browser tries to be smart which will
trigger the next button tag as enter action on a textinput
---
 dashboard/src/views/email.html | 109 ++++++++++++++++-----------------
 1 file changed, 52 insertions(+), 57 deletions(-)

diff --git a/dashboard/src/views/email.html b/dashboard/src/views/email.html
index f734744f0..91a9c976d 100644
--- a/dashboard/src/views/email.html
+++ b/dashboard/src/views/email.html
@@ -108,79 +108,74 @@
         <h4 class="modal-title">{{ 'email.editMailboxDialog.title' | tr:{ name: mailboxes.edit.name, domain: domain.domain } }}</h4>
       </div>
       <div class="modal-body">
-        <form name="mailboxedit_form" role="form" ng-submit="mailboxes.edit.submit()" autocomplete="off">
-          <input type="password" style="display: none;">
-          <div class="form-group">
-            <label class="control-label">{{ 'email.editMailboxDialog.owner' | tr }}</label>
-            <div class="control-label">
-              <multiselect ng-model="mailboxes.edit.owner" options="o.display for o in owners" data-compare-by="name" data-header-key="header" data-divider-key="divider" data-multiple="false" filter-after-rows="5" scroll-after-rows="10"></multiselect>
-            </div>
+        <div class="form-group">
+          <label class="control-label">{{ 'email.editMailboxDialog.owner' | tr }}</label>
+          <div class="control-label">
+            <multiselect ng-model="mailboxes.edit.owner" options="o.display for o in owners" data-compare-by="name" data-header-key="header" data-divider-key="divider" data-multiple="false" filter-after-rows="5" scroll-after-rows="10"></multiselect>
           </div>
+        </div>
 
-          <div class="form-group aliases">
-            <label class="control-label">{{ 'email.editMailboxDialog.aliases' | tr }}</label>
-            <div class="has-error" ng-show="mailboxes.edit.error">{{ mailboxes.edit.error.message }}</div>
+        <div class="form-group aliases">
+          <label class="control-label">{{ 'email.editMailboxDialog.aliases' | tr }}</label>
+          <div class="has-error" ng-show="mailboxes.edit.error">{{ mailboxes.edit.error.message }}</div>
 
-            <div class="row" ng-repeat="alias in mailboxes.edit.aliases | orderBy:'reversedSortingNotation'">
-              <div class="col col-lg-11">
-                <div class="input-group">
-                  <input type="text" class="form-control input-sm" ng-model="alias.name" autofocus>
+          <div class="row" ng-repeat="alias in mailboxes.edit.aliases | orderBy:'reversedSortingNotation'">
+            <div class="col col-lg-11">
+              <div class="input-group">
+                <input type="text" class="form-control input-sm" ng-model="alias.name">
 
-                  <div class="input-group-btn">
-                    <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
-                      <span>@{{ alias.domain }}</span>
-                      <span class="caret"></span>
-                    </button>
-                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
-                      <li ng-repeat="incomingDomain in incomingDomains">
-                        <a href="" ng-click="alias.domain = incomingDomain.domain">{{ incomingDomain.domain }}</a>
-                      </li>
-                    </ul>
-                  </div>
+                <div class="input-group-btn">
+                  <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
+                    <span>@{{ alias.domain }}</span>
+                    <span class="caret"></span>
+                  </button>
+                  <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                    <li ng-repeat="incomingDomain in incomingDomains">
+                      <a href="" ng-click="alias.domain = incomingDomain.domain">{{ incomingDomain.domain }}</a>
+                    </li>
+                  </ul>
                 </div>
               </div>
-              <div class="col col-lg-1">
-                <button class="btn btn-danger btn-sm" ng-click="mailboxes.edit.delAlias($event, alias)"><i class="far fa-trash-alt"></i></button>
-              </div>
             </div>
-            <div ng-show="mailboxes.edit.aliases.length === 0">
-              {{ 'email.editMailboxDialog.noAliases' | tr }} <a href="" ng-click="mailboxes.edit.addAlias($event)">{{ 'email.editMailboxDialog.addAliasAction' | tr }}</a>
-            </div>
-            <div ng-show="mailboxes.edit.aliases.length > 0" style="margin-top: 5px;">
-              <a href="" ng-click="mailboxes.edit.addAlias($event)">{{ 'email.editMailboxDialog.addAnotherAliasAction' | tr }}</a>
+            <div class="col col-lg-1">
+              <button class="btn btn-danger btn-sm" ng-click="mailboxes.edit.delAlias($event, alias)"><i class="far fa-trash-alt"></i></button>
             </div>
           </div>
-
-          <div class="form-group">
-            <label for="storageQuota">
-              <input id="storageQuota" type="checkbox" ng-model="mailboxes.edit.storageQuotaEnabled">
-                {{ 'email.editMailboxDialog.enableStorageQuota' | tr }} <b ng-hide="!mailboxes.edit.storageQuotaEnabled">: {{ mailboxes.edit.storageQuota | prettyDecimalSize }}</b>
-              </input>
-            </label>
-            <input type="range" id="storageQuota" ng-disabled="!mailboxes.edit.storageQuotaEnabled" ng-model="mailboxes.edit.storageQuota" step="500000000" min="{{ storageQuotaTicks[0] }}" max="{{ storageQuotaTicks[storageQuotaTicks.length-1] }}" list="storageQuotaTicks" />
-            <datalist id="storageQuotaTicks">
-              <option ng-repeat="quota in storageQuotaTicks" value="{{ quota }}"></option>
-            </datalist>
+          <div ng-show="mailboxes.edit.aliases.length === 0">
+            {{ 'email.editMailboxDialog.noAliases' | tr }} <a href="" ng-click="mailboxes.edit.addAlias($event)">{{ 'email.editMailboxDialog.addAliasAction' | tr }}</a>
           </div>
-
-          <div class="checkbox">
-            <label>
-              <input type="checkbox" ng-model="mailboxes.edit.enablePop3"> {{ 'email.updateMailboxDialog.enablePop3' | tr }}</input>
-            </label>
+          <div ng-show="mailboxes.edit.aliases.length > 0" style="margin-top: 5px;">
+            <a href="" ng-click="mailboxes.edit.addAlias($event)">{{ 'email.editMailboxDialog.addAnotherAliasAction' | tr }}</a>
           </div>
+        </div>
 
-          <div class="checkbox">
-            <label>
-              <input type="checkbox" ng-model="mailboxes.edit.active"> {{ 'email.updateMailboxDialog.activeCheckbox' | tr }}</input>
-            </label>
-          </div>
+        <div class="form-group">
+          <label for="storageQuota">
+            <input id="storageQuota" type="checkbox" ng-model="mailboxes.edit.storageQuotaEnabled">
+              {{ 'email.editMailboxDialog.enableStorageQuota' | tr }} <b ng-hide="!mailboxes.edit.storageQuotaEnabled">: {{ mailboxes.edit.storageQuota | prettyDecimalSize }}</b>
+            </input>
+          </label>
+          <input type="range" id="storageQuota" ng-disabled="!mailboxes.edit.storageQuotaEnabled" ng-model="mailboxes.edit.storageQuota" step="500000000" min="{{ storageQuotaTicks[0] }}" max="{{ storageQuotaTicks[storageQuotaTicks.length-1] }}" list="storageQuotaTicks" />
+          <datalist id="storageQuotaTicks">
+            <option ng-repeat="quota in storageQuotaTicks" value="{{ quota }}"></option>
+          </datalist>
+        </div>
 
-          <input class="hide" type="submit" ng-disabled="mailboxedit_form.$invalid || mailboxes.edit.busy || !mailboxes.edit.owner"/>
-        </form>
+        <div class="checkbox">
+          <label>
+            <input type="checkbox" ng-model="mailboxes.edit.enablePop3"> {{ 'email.updateMailboxDialog.enablePop3' | tr }}</input>
+          </label>
+        </div>
+
+        <div class="checkbox">
+          <label>
+            <input type="checkbox" ng-model="mailboxes.edit.active"> {{ 'email.updateMailboxDialog.activeCheckbox' | tr }}</input>
+          </label>
+        </div>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
-        <button type="button" class="btn btn-success" ng-click="mailboxes.edit.submit()" ng-disabled="mailboxedit_form.$invalid || mailboxes.edit.busy || !mailboxes.edit.owner"><i class="fa fa-circle-notch fa-spin" ng-show="mailboxes.edit.busy"></i> {{ 'main.dialog.save' | tr }}</button>
+        <button type="button" class="btn btn-success" ng-click="mailboxes.edit.submit()" ng-disabled="mailboxes.edit.busy || !mailboxes.edit.owner"><i class="fa fa-circle-notch fa-spin" ng-show="mailboxes.edit.busy"></i> {{ 'main.dialog.save' | tr }}</button>
       </div>
     </div>
   </div>