in the firewall editor the port field allows "all" as well

app/src/app/networking/firewall-editor/firewall-editor.component.html

@@ -34,12 +34,27 @@
             <span *ngIf="editorForm.get('protocol').value === 'ICMP'">Type and code</span>
           </h5>
 
-          <input type="text" class="form-control" id="protocolConfig" formControlName="protocolConfig"
+          <div class="input-group mb-3" dropdown placement="bottom right">
+            <button class="btn btn-outline-info dropdown-toggle" type="button" dropdownToggle>
+              <span *ngIf="editorForm.get('protocolConfig').value === 'all'">All ports</span>
+              <span *ngIf="editorForm.get('protocolConfig').value !== 'all'">Specific port</span>
+            </button>
+            <ul *dropdownMenu class="dropdown-menu" role="menu">
+              <li>
+                <button class="dropdown-item" (click)="setProtocolConfig()">Specific port</button>
+              </li>
+              <li>
+                <button class="dropdown-item" (click)="setProtocolConfig('all')">All ports</button>
+              </li>
+            </ul>
+            <input type="text" class="form-control text-capitalize" id="protocolConfig" formControlName="protocolConfig"
                    [appAutofocus]="!editorForm.get('protocolConfig').value && editorForm.get('protocol').value" [appAutofocusDelay]="250"
                    [placeholder]="editorForm.get('protocol').value === 'icmp' ? 'Type:Code [0:255]' : 'Port [1-9999]'"
                    [appAlphaOnly]="editorForm.get('protocol').value === 'icmp' ? '^[0-9:]+$' : '^[0-9]+$'">
           </div>
-
+        </div>
+      </div>
+      <div class="row g-4">
         <div class="col-sm-6">
           <h5>From</h5>
           <div class="row">

app/src/app/networking/firewall-editor/firewall-editor.component.scss

@@ -38,3 +38,9 @@ h5
     }
   }
 }
+
+.input-group > .dropdown-toggle
+{
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}

app/src/app/networking/firewall-editor/firewall-editor.component.ts

@@ -83,7 +83,10 @@ export class FirewallEditorComponent implements OnInit, OnDestroy
       {
         action: [this.firewallRule?.action.toUpperCase(), [Validators.required]],
         protocol: [this.firewallRule?.protocol.toLowerCase(), [Validators.required]],
-        protocolConfig: [this.firewallRule?.protocolConfig, [Validators.required]],
+        protocolConfig: [
+          { value: this.firewallRule?.protocolConfig, disabled: this.firewallRule?.protocolConfig === 'all' },
+          [Validators.required]
+        ],
         from,
         to,
         description: [this.firewallRule?.description || '']
@@ -159,6 +162,17 @@ export class FirewallEditorComponent implements OnInit, OnDestroy
         });
   }
 
+  // ----------------------------------------------------------------------------------------------------------------
+  setProtocolConfig(value?: string)
+  {
+    this.editorForm.get('protocolConfig').setValue(value);
+
+    if (value === 'all')
+      this.editorForm.get('protocolConfig').disable();
+    else
+      this.editorForm.get('protocolConfig').enable();
+  }
+
   // ----------------------------------------------------------------------------------------------------------------
   addFromRule(rule: { type: string; config: string })
   {

app/src/app/networking/firewall-rules/firewall-rules.component.html

@@ -114,7 +114,7 @@
                           tooltip="More options" container="body" placement="top" [adaptivePosition]="false">
                     <fa-icon icon="ellipsis-v" [fixedWidth]="true" size="sm"></fa-icon>
                   </button>
-                  <ul id="dropdown-split" *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="button-split">
+                  <ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu">
                     <li role="menuitem">
                       <button class="dropdown-item" (click)="deleteFirewallRule(fw)">
                         <fa-icon icon="trash" [fixedWidth]="true"></fa-icon>