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

This commit is contained in:
Dragos 2021-05-13 14:28:35 +03:00
parent e1086d66d2
commit 6c9e6dd811
6 changed files with 42 additions and 7 deletions

Binary file not shown.

Binary file not shown.

View File

@ -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"
[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 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">

View File

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

View File

@ -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 })
{

View File

@ -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>