File
Implements
Methods
|
downloadPublicKey
|
downloadPublicKey()
|
|
|
|
Async
generateKeys
|
generateKeys()
|
|
|
|
credentialTypes
|
Type : []
|
Default value : [
CREDENTIALS_TYPES.USER_PASS,
CREDENTIALS_TYPES.CERTIFICATE,
CREDENTIALS_TYPES.KEY_PAIR
]
|
|
currentValue
|
Type : Partial<RemoteAccessConfiguration>
|
|
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>