master-encryption-password.component.html

<div class="encription-setting">
    <mat-slide-toggle name="encryption"
        data-testid="connection-master-encryption-toggle"
        angulartics2On="click"
        angularticsAction="Connection creds: client-side encryption is switched"
        [angularticsProperties]="{'enable': isMasterKeyTurnedOn}"
        [disabled]="disabled"
        [(ngModel)]="isMasterKeyTurnedOn"
        (ngModelChange)="generatePassword($event)">
        Use client-side encryption
    </mat-slide-toggle>
    <div *ngIf="isMasterKeyTurnedOn && masterKey" class="encription-password">
        <mat-form-field appearance="outline" style="width:100%">
            <mat-label>Master password</mat-label>
            <input matInput data-testid="connection-master-password-input"
                name="masterPassword" #masterPassword="ngModel"
                readonly
                [(ngModel)]="masterKey">
        </mat-form-field>

        <div class="docs-notification">
            <div>
                <p style="margin-bottom: 8px">
                    Rocketadmin does not store the key.
                    Please save this password in protected place.
                    Share this password with all users of the connection.
                </p>
                <a href="https://docs.rocketadmin.com/Reference/MasterPassword"
                    target="_blank" class="docs-link">
                    Open docs
                </a>
            </div>
            <button mat-button type="button" data-testid="connection-master-password-copy-button"
                [cdkCopyToClipboard]="masterKey"
                (cdkCopyToClipboardCopied)="showCopyNotification('Master password was copied to clipboard.')">
                Copy
            </button>

        </div>
    </div>
</div>