File
Metadata
| selector |
cd-rgw-user-s3-key-modal |
| styleUrls |
./rgw-user-s3-key-modal.component.scss |
| templateUrl |
./rgw-user-s3-key-modal.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Outputs
|
|
|
Outputs
|
submitAction
|
Type : EventEmitter
|
|
|
The event that is triggered when the 'Add' button as been pressed.
|
Methods
|
listenToChanges
|
listenToChanges()
|
|
|
|
|
|
setUserCandidates
|
setUserCandidates(candidates: string[])
|
|
|
Set the user candidates displayed in the 'Username' dropdown box.
Parameters :
| Name |
Type |
Optional |
| candidates |
string[]
|
No
|
|
|
setValues
|
setValues(user: string, access_key: string, secret_key: string)
|
|
|
Set the values displayed in the dialog.
|
|
setViewing
|
setViewing(viewing: boolean)
|
|
|
Set the 'viewing' flag. If set to TRUE, the modal dialog is in 'View' mode,
otherwise in 'Add' mode. According to the mode the dialog and its controls
behave different.
Parameters :
| Name |
Type |
Optional |
Default value |
| viewing |
boolean
|
No
|
true
|
|
|
Public
bsModalRef
|
Type : BsModalRef
|
|
|
|
userCandidates
|
Type : string[]
|
Default value : []
|
|
|
|
viewing
|
Default value : true
|
|
|
import { Component, EventEmitter, Output } from '@angular/core';
import { Validators } from '@angular/forms';
import { I18n } from '@ngx-translate/i18n-polyfill';
import * as _ from 'lodash';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { ActionLabelsI18n } from '../../../shared/constants/app.constants';
import { CdFormBuilder } from '../../../shared/forms/cd-form-builder';
import { CdFormGroup } from '../../../shared/forms/cd-form-group';
import { CdValidators } from '../../../shared/forms/cd-validators';
import { RgwUserS3Key } from '../models/rgw-user-s3-key';
@Component({
selector: 'cd-rgw-user-s3-key-modal',
templateUrl: './rgw-user-s3-key-modal.component.html',
styleUrls: ['./rgw-user-s3-key-modal.component.scss']
})
export class RgwUserS3KeyModalComponent {
/**
* The event that is triggered when the 'Add' button as been pressed.
*/
@Output()
submitAction = new EventEmitter();
formGroup: CdFormGroup;
viewing = true;
userCandidates: string[] = [];
resource: string;
action: string;
constructor(
private formBuilder: CdFormBuilder,
public bsModalRef: BsModalRef,
private i18n: I18n,
public actionLabels: ActionLabelsI18n
) {
this.resource = this.i18n('S3 Key');
this.createForm();
this.listenToChanges();
}
createForm() {
this.formGroup = this.formBuilder.group({
user: [null, [Validators.required]],
generate_key: [true],
access_key: [null, [CdValidators.requiredIf({ generate_key: false })]],
secret_key: [null, [CdValidators.requiredIf({ generate_key: false })]]
});
}
listenToChanges() {
// Reset the validation status of various controls, especially those that are using
// the 'requiredIf' validator. This is necessary because the controls itself are not
// validated again if the status of their prerequisites have been changed.
this.formGroup.get('generate_key').valueChanges.subscribe(() => {
['access_key', 'secret_key'].forEach((path) => {
this.formGroup.get(path).updateValueAndValidity({ onlySelf: true });
});
});
}
/**
* Set the 'viewing' flag. If set to TRUE, the modal dialog is in 'View' mode,
* otherwise in 'Add' mode. According to the mode the dialog and its controls
* behave different.
* @param {boolean} viewing
*/
setViewing(viewing: boolean = true) {
this.action = this.actionLabels.SHOW;
this.viewing = viewing;
}
/**
* Set the values displayed in the dialog.
*/
setValues(user: string, access_key: string, secret_key: string) {
this.formGroup.setValue({
user: user,
generate_key: _.isEmpty(access_key),
access_key: access_key,
secret_key: secret_key
});
}
/**
* Set the user candidates displayed in the 'Username' dropdown box.
*/
setUserCandidates(candidates: string[]) {
this.userCandidates = candidates;
}
onSubmit() {
const key: RgwUserS3Key = this.formGroup.value;
this.submitAction.emit(key);
this.bsModalRef.hide();
}
}
<div class="modal-header">
<h4 i18n="form title|Example: Create Pool@@formTitle"
class="modal-title pull-left">{{ action | titlecase }} {{ resource | upperFirst }}</h4>
<button type="button"
class="close pull-right"
aria-label="Close"
(click)="bsModalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<form class="form-horizontal"
#frm="ngForm"
[formGroup]="formGroup"
novalidate>
<div class="modal-body">
<!-- Username -->
<div class="form-group"
[ngClass]="{'has-error': formGroup.showError('user', frm)}">
<label class="control-label col-sm-3"
for="user">
<ng-container i18n>Username</ng-container>
<span class="required"
*ngIf="!viewing">
</span>
</label>
<div class="col-sm-9">
<input id="user"
class="form-control"
type="text"
*ngIf="viewing"
[readonly]="true"
formControlName="user">
<select id="user"
class="form-control"
formControlName="user"
*ngIf="!viewing"
autofocus>
<option i18n
*ngIf="userCandidates !== null"
[ngValue]="null">-- Select a username --</option>
<option *ngFor="let userCandidate of userCandidates"
[value]="userCandidate">{{ userCandidate }}</option>
</select>
<span class="help-block"
*ngIf="formGroup.showError('user', frm, 'required')"
i18n>This field is required.</span>
</div>
</div>
<!-- Auto-generate key -->
<div class="form-group"
*ngIf="!viewing">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox checkbox-primary">
<input id="generate_key"
type="checkbox"
formControlName="generate_key">
<label for="generate_key"
i18n>Auto-generate key</label>
</div>
</div>
</div>
<!-- Access key -->
<div class="form-group"
[ngClass]="{'has-error': formGroup.showError('access_key', frm)}"
*ngIf="!formGroup.getValue('generate_key')">
<label class="control-label col-sm-3"
for="access_key">
<ng-container i18n>Access key</ng-container>
<span class="required"
*ngIf="!viewing">
</span>
</label>
<div class="col-sm-9">
<div class="input-group">
<input id="access_key"
class="form-control"
type="password"
[readonly]="viewing"
formControlName="access_key">
<span class="input-group-btn">
<button type="button"
class="btn btn-default"
cdPasswordButton="access_key">
</button>
<button type="button"
class="btn btn-default"
cdCopy2ClipboardButton="access_key">
</button>
</span>
</div>
<span class="help-block"
*ngIf="formGroup.showError('access_key', frm, 'required')"
i18n>This field is required.</span>
</div>
</div>
<!-- Secret key -->
<div class="form-group"
[ngClass]="{'has-error': formGroup.showError('secret_key', frm)}"
*ngIf="!formGroup.getValue('generate_key')">
<label class="control-label col-sm-3"
for="secret_key">
<ng-container i18n>Secret key</ng-container>
<span class="required"
*ngIf="!viewing">
</span>
</label>
<div class="col-sm-9">
<div class="input-group">
<input id="secret_key"
class="form-control"
type="password"
[readonly]="viewing"
formControlName="secret_key">
<span class="input-group-btn">
<button type="button"
class="btn btn-default"
cdPasswordButton="secret_key">
</button>
<button type="button"
class="btn btn-default"
cdCopy2ClipboardButton="secret_key">
</button>
</span>
</div>
<span class="help-block"
*ngIf="formGroup.showError('secret_key', frm, 'required')"
i18n>This field is required.</span>
</div>
</div>
</div>
<div class="modal-footer">
<cd-submit-button
*ngIf="!viewing"
(submitAction)="onSubmit()"
i18n="form action button|Example: Create Pool@@formActionButton"
[form]="formGroup">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
<cd-back-button [back]="bsModalRef.hide"></cd-back-button>
</div>
</form>
Legend
Html element with directive