@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
67 lines (63 loc) • 12.8 kB
JavaScript
import * as i3 from '@angular/common';
import { NgForOf } from '@angular/common';
import * as i0 from '@angular/core';
import { Component } from '@angular/core';
import * as i1 from '@angular/forms';
import { Validators } from '@angular/forms';
import * as i2 from '@c8y/ngx-components';
import { CoreModule } from '@c8y/ngx-components';
import { gettext } from '@c8y/ngx-components/gettext';
import { CREDENTIALS_TYPES } from '@c8y/ngx-components/remote-access/data';
class RemoteAccessVncEndpointModalComponent {
constructor(formBuilder) {
this.formBuilder = formBuilder;
this.credentialTypes = [CREDENTIALS_TYPES.NONE, CREDENTIALS_TYPES.PASS_ONLY];
this.title = gettext('Remote access endpoint');
this.result = new Promise((resolve, reject) => {
this._resolve = resolve;
this._reject = reject;
});
this.form = this.initForm();
}
ngOnInit() {
if (this.currentValue) {
const { credentials, ...rest } = this.currentValue;
const credentialsType = credentials?.type || 'NONE';
const attributesToAdd = { credentialsType };
if (credentials) {
const { username, password } = credentials;
Object.assign(attributesToAdd, { username, password });
}
const patchedValue = { ...rest, ...attributesToAdd };
this.form.patchValue(patchedValue);
}
}
initForm() {
return this.formBuilder.group({
id: ['', []],
name: ['', [Validators.required, Validators.minLength(1)]],
hostname: ['127.0.0.1', [Validators.required, Validators.minLength(1)]],
port: [5900, [Validators.required, Validators.min(1), Validators.max(65535)]],
protocol: ['VNC', [Validators.required, Validators.minLength(1)]],
password: [undefined, []],
credentialsType: ['NONE', [Validators.required]]
});
}
cancel() {
this._reject();
}
save() {
this._resolve(this.form.value);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RemoteAccessVncEndpointModalComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: RemoteAccessVncEndpointModalComponent, isStandalone: true, selector: "c8y-remote-access-vnc-endpoint-modal", ngImport: i0, template: "<c8y-modal\n [title]=\"title\"\n [headerClasses]=\"'dialog-header'\"\n (onDismiss)=\"cancel()\"\n (onClose)=\"save()\"\n [disabled]=\"form.invalid\"\n [labels]=\"{ cancel: 'Cancel', ok: 'Save' }\"\n>\n <ng-container c8y-modal-title>\n <span [c8yIcon]=\"'laptop'\"></span>\n </ng-container>\n <div\n class=\"p-24\"\n [formGroup]=\"form\"\n >\n <c8y-form-group>\n <label\n for=\"name\"\n translate\n >\n Name\n </label>\n <input\n class=\"form-control\"\n id=\"name\"\n name=\"name\"\n type=\"text\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'My remote access endpoint' }\"\n formControlName=\"name\"\n [attr.data-cy]=\"'remoteAccessEndpointModal--name'\"\n />\n <c8y-messages></c8y-messages>\n </c8y-form-group>\n\n <c8y-form-group>\n <label\n for=\"protocol\"\n translate\n >\n Protocol\n </label>\n <input\n class=\"form-control\"\n id=\"protocol\"\n name=\"protocol\"\n type=\"text\"\n readonly\n formControlName=\"protocol\"\n />\n <c8y-messages></c8y-messages>\n </c8y-form-group>\n\n <c8y-form-group>\n <label\n for=\"hostname\"\n translate\n >\n Host\n </label>\n <input\n class=\"form-control\"\n id=\"hostname\"\n placeholder=\"{{'e.g. {{ example }}' | translate : { example: '127.0.0.1' } }}\"\n name=\"hostname\"\n type=\"text\"\n formControlName=\"hostname\"\n [attr.data-cy]=\"'remoteAccessEndpointModal--hostname'\"\n />\n <c8y-messages></c8y-messages>\n </c8y-form-group>\n\n <c8y-form-group>\n <label\n for=\"port\"\n translate\n >\n Port\n </label>\n <input\n class=\"form-control\"\n id=\"port\"\n placeholder=\"{{'e.g. {{ example }}' | translate : { example: '5900' } }}\"\n name=\"port\"\n type=\"number\"\n formControlName=\"port\"\n [attr.data-cy]=\"'remoteAccessEndpointModal--port'\"\n />\n <c8y-messages></c8y-messages>\n </c8y-form-group>\n\n <div>\n <c8y-form-group>\n <label\n for=\"credentialsType\"\n translate\n >\n Sign-in method\n </label>\n <div class=\"c8y-select-wrapper\">\n <select\n class=\"form-control\"\n id=\"credentialsType\"\n formControlName=\"credentialsType\"\n [attr.data-cy]=\"'remoteAccessEndpointModal--credentials-type'\"\n >\n <option\n *ngFor=\"let type of credentialTypes\"\n [value]=\"type.value\"\n >\n {{ type.label | translate }}\n </option>\n </select>\n </div>\n </c8y-form-group>\n\n <c8y-form-group *ngIf=\"form.value.credentialsType === 'PASS_ONLY'\">\n <label\n for=\"password\"\n translate\n >\n Password\n </label>\n <input\n class=\"form-control\"\n id=\"password\"\n placeholder=\"{{'e.g. {{ example }}' | translate : { example: 'my_password' } }}\"\n name=\"password\"\n type=\"password\"\n autocomplete=\"off\"\n formControlName=\"password\"\n />\n <c8y-messages></c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n</c8y-modal>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RemoteAccessVncEndpointModalComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-remote-access-vnc-endpoint-modal', standalone: true, imports: [CoreModule, NgForOf], template: "<c8y-modal\n [title]=\"title\"\n [headerClasses]=\"'dialog-header'\"\n (onDismiss)=\"cancel()\"\n (onClose)=\"save()\"\n [disabled]=\"form.invalid\"\n [labels]=\"{ cancel: 'Cancel', ok: 'Save' }\"\n>\n <ng-container c8y-modal-title>\n <span [c8yIcon]=\"'laptop'\"></span>\n </ng-container>\n <div\n class=\"p-24\"\n [formGroup]=\"form\"\n >\n <c8y-form-group>\n <label\n for=\"name\"\n translate\n >\n Name\n </label>\n <input\n class=\"form-control\"\n id=\"name\"\n name=\"name\"\n type=\"text\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'My remote access endpoint' }\"\n formControlName=\"name\"\n [attr.data-cy]=\"'remoteAccessEndpointModal--name'\"\n />\n <c8y-messages></c8y-messages>\n </c8y-form-group>\n\n <c8y-form-group>\n <label\n for=\"protocol\"\n translate\n >\n Protocol\n </label>\n <input\n class=\"form-control\"\n id=\"protocol\"\n name=\"protocol\"\n type=\"text\"\n readonly\n formControlName=\"protocol\"\n />\n <c8y-messages></c8y-messages>\n </c8y-form-group>\n\n <c8y-form-group>\n <label\n for=\"hostname\"\n translate\n >\n Host\n </label>\n <input\n class=\"form-control\"\n id=\"hostname\"\n placeholder=\"{{'e.g. {{ example }}' | translate : { example: '127.0.0.1' } }}\"\n name=\"hostname\"\n type=\"text\"\n formControlName=\"hostname\"\n [attr.data-cy]=\"'remoteAccessEndpointModal--hostname'\"\n />\n <c8y-messages></c8y-messages>\n </c8y-form-group>\n\n <c8y-form-group>\n <label\n for=\"port\"\n translate\n >\n Port\n </label>\n <input\n class=\"form-control\"\n id=\"port\"\n placeholder=\"{{'e.g. {{ example }}' | translate : { example: '5900' } }}\"\n name=\"port\"\n type=\"number\"\n formControlName=\"port\"\n [attr.data-cy]=\"'remoteAccessEndpointModal--port'\"\n />\n <c8y-messages></c8y-messages>\n </c8y-form-group>\n\n <div>\n <c8y-form-group>\n <label\n for=\"credentialsType\"\n translate\n >\n Sign-in method\n </label>\n <div class=\"c8y-select-wrapper\">\n <select\n class=\"form-control\"\n id=\"credentialsType\"\n formControlName=\"credentialsType\"\n [attr.data-cy]=\"'remoteAccessEndpointModal--credentials-type'\"\n >\n <option\n *ngFor=\"let type of credentialTypes\"\n [value]=\"type.value\"\n >\n {{ type.label | translate }}\n </option>\n </select>\n </div>\n </c8y-form-group>\n\n <c8y-form-group *ngIf=\"form.value.credentialsType === 'PASS_ONLY'\">\n <label\n for=\"password\"\n translate\n >\n Password\n </label>\n <input\n class=\"form-control\"\n id=\"password\"\n placeholder=\"{{'e.g. {{ example }}' | translate : { example: 'my_password' } }}\"\n name=\"password\"\n type=\"password\"\n autocomplete=\"off\"\n formControlName=\"password\"\n />\n <c8y-messages></c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n</c8y-modal>\n" }]
}], ctorParameters: () => [{ type: i1.FormBuilder }] });
/**
* Generated bundle index. Do not edit.
*/
export { RemoteAccessVncEndpointModalComponent };
//# sourceMappingURL=c8y-ngx-components-remote-access-vnc-remote-access-vnc-endpoint-modal.mjs.map