File

remote-access/vnc/remote-access-vnc-endpoint-modal/remote-access-vnc-endpoint-modal.component.ts

Implements

OnInit

Metadata

Index

Properties
Methods

Constructor

constructor(formBuilder: FormBuilder)
Parameters :
Name Type Optional
formBuilder FormBuilder No

Methods

cancel
cancel()
Returns : void
initForm
initForm()
Returns : any
ngOnInit
ngOnInit()
Returns : void
save
save()
Returns : void

Properties

credentialTypes
Type : []
Default value : [CREDENTIALS_TYPES.NONE, CREDENTIALS_TYPES.PASS_ONLY]
currentValue
Type : Partial<RemoteAccessConfiguration>
form
Type : ReturnType<>
result
Default value : new Promise<ReturnType<typeof this.initForm>['value']>((resolve, reject) => { this._resolve = resolve; this._reject = reject; })
title
Default value : gettext('Remote access endpoint')
<c8y-modal
  [title]="title"
  [headerClasses]="'dialog-header'"
  (onDismiss)="cancel()"
  (onClose)="save()"
  [disabled]="form.invalid"
  [labels]="{ cancel: 'Cancel', ok: 'Save' }"
>
  <ng-container c8y-modal-title>
    <span [c8yIcon]="'laptop'"></span>
  </ng-container>
  <div
    class="p-24"
    [formGroup]="form"
  >
    <c8y-form-group>
      <label
        for="name"
        translate
      >
        Name
      </label>
      <input
        class="form-control"
        id="name"
        name="name"
        type="text"
        [placeholder]="'e.g. {{ example }}' | translate: { example: 'My remote access endpoint' }"
        formControlName="name"
        [attr.data-cy]="'remoteAccessEndpointModal--name'"
      />
      <c8y-messages></c8y-messages>
    </c8y-form-group>

    <c8y-form-group>
      <label
        for="protocol"
        translate
      >
        Protocol
      </label>
      <input
        class="form-control"
        id="protocol"
        name="protocol"
        type="text"
        readonly
        formControlName="protocol"
      />
      <c8y-messages></c8y-messages>
    </c8y-form-group>

    <c8y-form-group>
      <label
        for="hostname"
        translate
      >
        Host
      </label>
      <input
        class="form-control"
        id="hostname"
        placeholder="{{'e.g. {{ example }}' | translate : { example: '127.0.0.1' } }}"
        name="hostname"
        type="text"
        formControlName="hostname"
        [attr.data-cy]="'remoteAccessEndpointModal--hostname'"
      />
      <c8y-messages></c8y-messages>
    </c8y-form-group>

    <c8y-form-group>
      <label
        for="port"
        translate
      >
        Port
      </label>
      <input
        class="form-control"
        id="port"
        placeholder="{{'e.g. {{ example }}' | translate : { example: '5900' } }}"
        name="port"
        type="number"
        formControlName="port"
        [attr.data-cy]="'remoteAccessEndpointModal--port'"
      />
      <c8y-messages></c8y-messages>
    </c8y-form-group>

    <div>
      <c8y-form-group>
        <label
          for="credentialsType"
          translate
        >
          Sign-in method
        </label>
        <div class="c8y-select-wrapper">
          <select
            class="form-control"
            id="credentialsType"
            formControlName="credentialsType"
            [attr.data-cy]="'remoteAccessEndpointModal--credentials-type'"
          >
            <option
              *ngFor="let type of credentialTypes"
              [value]="type.value"
            >
              {{ type.label | translate }}
            </option>
          </select>
        </div>
      </c8y-form-group>

      <c8y-form-group *ngIf="form.value.credentialsType === 'PASS_ONLY'">
        <label
          for="password"
          translate
        >
          Password
        </label>
        <input
          class="form-control"
          id="password"
          placeholder="{{'e.g. {{ example }}' | translate : { example: 'my_password' } }}"
          name="password"
          type="password"
          autocomplete="off"
          formControlName="password"
        />
        <c8y-messages></c8y-messages>
      </c8y-form-group>
    </div>
  </div>
</c8y-modal>

results matching ""

    No results matching ""