File

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

Implements

OnInit

Metadata

Index

Properties
Methods

Constructor

constructor(formBuilder: FormBuilder, remoteAccess: RemoteAccessService)
Parameters :
Name Type Optional
formBuilder FormBuilder No
remoteAccess RemoteAccessService No

Methods

cancel
cancel()
Returns : void
downloadPublicKey
downloadPublicKey()
Returns : void
Async generateKeys
generateKeys()
Returns : any
initForm
initForm()
Returns : any
ngOnInit
ngOnInit()
Returns : void
save
save()
Returns : void

Properties

credentialTypes
Type : []
Default value : [ CREDENTIALS_TYPES.USER_PASS, CREDENTIALS_TYPES.CERTIFICATE, CREDENTIALS_TYPES.KEY_PAIR ]
currentValue
Type : Partial<RemoteAccessConfiguration>
form
Type : ReturnType<>
generating
Default value : false
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')
<ng-template #keyPairPopoverContent>
  <small translate>Supported formats: OpenSSHv1, OpenSSHv2, PEM, SSH2.<br />Supported algorithms: RSA, DSA, ECDSA, ED25519.</small>
</ng-template>

<ng-template #certificatePopoverContent>
  <small translate>Supported formats: OpenSSHv1, OpenSSHv2, PEM, SSH2.<br />Supported algorithms: RSA, DSA.</small>
</ng-template>

<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: '22' } }}"
        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>

      <div
        class="tight-grid"
      >
        <div class="col-md-6">
          <c8y-form-group>
            <label
              for="username"
              translate
            >
              Username
            </label>
            <input
              class="form-control"
              id="username"
              placeholder="{{'e.g. {{ example }}' | translate : { example: 'my_username' } }}"
              name="username"
              type="username"
              autocomplete="off"
              formControlName="username"
            />
            <c8y-messages></c8y-messages>
          </c8y-form-group>
        </div>
        <div class="col-md-6" *ngIf="form.value.credentialsType === 'USER_PASS'">
          <c8y-form-group>
            <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>

      <div *ngIf="form.value.credentialsType === 'KEY_PAIR'">
        <div class="form-group" ng-if="!vm.keyPairAvailable() || vm.changingKeyPair">
          <button
            class="btn btn-default p-l-16"
            type="button"
            [title]="'Generate public and private keys' | translate"
            [ngClass]="{ 'btn-pending': generating }"
            ng-disabled="vm.generating"
            (click)="generateKeys()"
            [attr.data-cy]="'remoteAccessEndpointModal--generate-keys'"
          >
            <i [c8yIcon]="'key'"></i>
            {{ 'Generate public and private keys' | translate }}
          </button>
        </div>

        <c8y-form-group>
          <label for="privateKey">
            {{ 'Private key' | translate }}
            <button
              class="btn-help btn-help--sm"
              type="button"
              [attr.aria-label]="'Help' | translate"
              [popover]="keyPairPopoverContent"
              [container]="'body'"
              [placement]="'right'"
              [triggers]="'focus'"
            ></button>
          </label>
          <div>
            <c8y-ssh-key-input
              id="privateKey"
              formControlName="privateKey"
              [keyType]="'private'"
            ></c8y-ssh-key-input>
          </div>
        </c8y-form-group>

        <c8y-form-group>
          <label for="publicKey">
            {{ 'Public key' | translate }}
            <button
              class="btn-help btn-help--sm"
              type="button"
              [attr.aria-label]="'Help' | translate"
              [popover]="keyPairPopoverContent"
              [container]="'body'"
              [placement]="'right'"
              [triggers]="'focus'"
            ></button>
            <button
              class="m-l-16 btn-link interact"
              type="button"
              [title]="'Download key' | translate"
              (click)="downloadPublicKey()"
              *ngIf="form.value.publicKey"
            >
              <i [c8yIcon]="'download'"></i>
              {{ 'Download key' | translate }}
            </button>
          </label>
          <div>
            <c8y-ssh-key-input
              id="publicKey"
              formControlName="publicKey"
              [keyType]="'public'"
            ></c8y-ssh-key-input>
          </div>
        </c8y-form-group>

      </div>

      <div *ngIf="form.value.credentialsType === 'CERTIFICATE'">
        <c8y-form-group>
          <label for="privateKey">
            {{ 'Private key' | translate }}
            <button
              class="btn-help btn-help--sm"
              type="button"
              [attr.aria-label]="'Help' | translate"
              [popover]="certificatePopoverContent"
              [container]="'body'"
              [placement]="'right'"
              [triggers]="'focus'"
            ></button>
          </label>
          <div>
            <c8y-ssh-key-input
              id="privateKey"
              formControlName="privateKey"
              [keyType]="'private'"
            ></c8y-ssh-key-input>
          </div>
        </c8y-form-group>

        <c8y-form-group>
          <label for="certificate">
            {{ 'Certificate' | translate }}
            <button
              class="btn-help btn-help--sm"
              type="button"
              [attr.aria-label]="'Help' | translate"
              [popover]="certificatePopoverContent"
              [container]="'body'"
              [placement]="'right'"
              [triggers]="'focus'"
            ></button>
          </label>
          <div>
            <c8y-ssh-key-input
              id="certificate"
              formControlName="certificate"
              [keyType]="'certificate'"
            ></c8y-ssh-key-input>
          </div>
        </c8y-form-group>

      </div>

      <div>
        <c8y-form-group>
          <label
            for="hostKey"
          >
            {{ 'Host key' | translate }}
            <button
              class="btn-help btn-help--sm"
              type="button"
              [attr.aria-label]="'Help' | translate"
              [popover]="keyPairPopoverContent"
              [container]="'body'"
              [placement]="'right'"
              [triggers]="'focus'"
            ></button>
          </label>
          <div>
            <c8y-ssh-key-input
              id="hostKey"
              formControlName="hostKey"
              [keyType]="'public'"
            ></c8y-ssh-key-input>
          </div>
          <c8y-messages></c8y-messages>
        </c8y-form-group>
      </div>
    </div>
  </div>
</c8y-modal>

results matching ""

    No results matching ""