+
+
+
+
diff --git a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.scss b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.scss
index f557735eb6..80dcf76da8 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.scss
@@ -13,13 +13,24 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+@import "../../../../../scss/constants";
+
:host {
.settings-card {
.toggle-group {
- display: block;
+ max-width: 670px;
+ width: 100%;
+ margin: 0 auto;
+
+ .tb-form-hint {
+ text-align: center;
+ }
}
- .margin-bottom {
- margin-bottom: 12px;
+
+ @media #{$mat-xs} {
+ .tb-form-row {
+ gap: 0;
+ }
}
}
}
diff --git a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.ts b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.ts
index d0ec896374..f96e34f449 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.ts
@@ -14,12 +14,11 @@
/// limitations under the License.
///
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { PageComponent } from '@shared/components/page.component';
-import { Router } from '@angular/router';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import {
AdminSettings,
DeviceConnectivityProtocol,
@@ -28,26 +27,29 @@ import {
} from '@shared/models/settings.models';
import { AdminService } from '@core/http/admin.service';
import { HasConfirmForm } from '@core/guards/confirm-on-exit.guard';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
@Component({
selector: 'tb-general-settings',
templateUrl: './general-settings.component.html',
styleUrls: ['./general-settings.component.scss', './settings-card.scss']
})
-export class GeneralSettingsComponent extends PageComponent implements HasConfirmForm {
+export class GeneralSettingsComponent extends PageComponent implements HasConfirmForm, OnDestroy {
- generalSettings: UntypedFormGroup;
- private adminSettings: AdminSettings;
+ generalSettings: FormGroup;
+ deviceConnectivitySettingsForm: FormGroup;
+
+ protocol: DeviceConnectivityProtocol = 'http';
- deviceConnectivitySettingsForm: UntypedFormGroup;
+ private adminSettings: AdminSettings;
private deviceConnectivitySettings: AdminSettings;
- protocol: DeviceConnectivityProtocol = 'http';
+ private readonly destroy$ = new Subject();
constructor(protected store: Store,
- private router: Router,
private adminService: AdminService,
- public fb: UntypedFormBuilder) {
+ public fb: FormBuilder) {
super(store);
this.buildGeneralServerSettingsForm();
this.adminService.getAdminSettings('general')
@@ -57,46 +59,48 @@ export class GeneralSettingsComponent extends PageComponent implements HasConfir
.subscribe(deviceConnectivitySettings => this.processDeviceConnectivitySettings(deviceConnectivitySettings));
}
- buildGeneralServerSettingsForm() {
+ ngOnDestroy() {
+ super.ngOnDestroy();
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
+
+ private buildGeneralServerSettingsForm() {
this.generalSettings = this.fb.group({
baseUrl: ['', [Validators.required]],
prohibitDifferentUrl: ['',[]]
});
}
- buildDeviceConnectivitySettingsForm() {
+ private buildDeviceConnectivitySettingsForm() {
this.deviceConnectivitySettingsForm = this.fb.group({
- http: this.fb.group({
- enabled: [false, []],
- host: ['', []],
- port: [null, [Validators.min(1), Validators.max(65535), Validators.pattern('[0-9]*')]]
- }),
- https: this.fb.group({
- enabled: [false, []],
- host: ['', []],
- port: [null, [Validators.min(1), Validators.max(65535), Validators.pattern('[0-9]*')]]
- }),
- mqtt: this.fb.group({
- enabled: [false, []],
- host: ['', []],
- port: [null, [Validators.min(1), Validators.max(65535), Validators.pattern('[0-9]*')]]
- }),
- mqtts: this.fb.group({
- enabled: [false, []],
- host: ['', []],
- port: [null, [Validators.min(1), Validators.max(65535), Validators.pattern('[0-9]*')]]
- }),
- coap: this.fb.group({
- enabled: [false, []],
- host: ['', []],
- port: [null, [Validators.min(1), Validators.max(65535), Validators.pattern('[0-9]*')]]
- }),
- coaps: this.fb.group({
- enabled: [false, []],
- host: ['', []],
- port: [null, [Validators.min(1), Validators.max(65535), Validators.pattern('[0-9]*')]]
- }),
+ http: this.buildDeviceConnectivityInfoForm(),
+ https: this.buildDeviceConnectivityInfoForm(),
+ mqtt: this.buildDeviceConnectivityInfoForm(),
+ mqtts: this.buildDeviceConnectivityInfoForm(),
+ coap: this.buildDeviceConnectivityInfoForm(),
+ coaps: this.buildDeviceConnectivityInfoForm()
+ });
+ }
+
+ private buildDeviceConnectivityInfoForm(): FormGroup {
+ const formGroup = this.fb.group({
+ enabled: [false, []],
+ host: [{value: '', disabled: true}],
+ port: [{value: null, disabled: true}, [Validators.min(1), Validators.max(65535), Validators.pattern('[0-9]*')]]
+ });
+ formGroup.get('enabled').valueChanges.pipe(
+ takeUntil(this.destroy$)
+ ).subscribe(value => {
+ if (value) {
+ formGroup.get('host').enable({emitEvent: false});
+ formGroup.get('port').enable({emitEvent: false});
+ } else {
+ formGroup.get('host').disable({emitEvent: false});
+ formGroup.get('port').disable({emitEvent: false});
+ }
});
+ return formGroup;
}
save(): void {
@@ -106,7 +110,10 @@ export class GeneralSettingsComponent extends PageComponent implements HasConfir
}
saveDeviceConnectivitySettings(): void {
- this.deviceConnectivitySettings.jsonValue = {...this.deviceConnectivitySettings.jsonValue, ...this.deviceConnectivitySettingsForm.value};
+ this.deviceConnectivitySettings.jsonValue = {
+ ...this.deviceConnectivitySettings.jsonValue,
+ ...this.deviceConnectivitySettingsForm.value
+ };
this.adminService.saveAdminSettings(this.deviceConnectivitySettings)
.subscribe(deviceConnectivitySettings => this.processDeviceConnectivitySettings(deviceConnectivitySettings));
}
@@ -129,7 +136,7 @@ export class GeneralSettingsComponent extends PageComponent implements HasConfir
this.deviceConnectivitySettingsForm.reset(this.deviceConnectivitySettings.jsonValue);
}
- confirmForm(): UntypedFormGroup {
+ confirmForm(): FormGroup {
return this.generalSettings.dirty ? this.generalSettings : this.deviceConnectivitySettingsForm;
}
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index eb797fbf58..1e80914f5f 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -107,16 +107,16 @@
"prohibit-different-url-hint": "This setting should be enabled for production environments. May cause security issues when disabled",
"device-connectivity": {
"device-connectivity": "Device connectivity",
- "http-https": "HTTP/HTTPS",
- "mqtt-mqtts": "MQTT/MQTTS",
- "coap-coaps": "COAP/COAPS",
- "http": "HTPP",
- "https": "HTTPS",
+ "http-s": "HTTP(s)",
+ "mqtt-s": "MQTT(s)",
+ "coap-s": "COAP(s)",
+ "http": "HTTP",
+ "https": "HTTPs",
"mqtt": "MQTT",
- "mqtts": "MQTTS",
+ "mqtts": "MQTTs",
"coap": "COAP",
- "coaps": "COAPS",
- "hint": "If host or port fields are empty will be used default protocol value.",
+ "coaps": "COAPs",
+ "hint": "If host or port fields are empty, default protocol value will be used.",
"host": "Host",
"port": "Port",
"port-pattern": "Port must be a positive integer.",