src/app/ceph/rgw/rgw-user-subuser-modal/rgw-user-subuser-modal.component.ts
| selector | cd-rgw-user-subuser-modal |
| styleUrls | ./rgw-user-subuser-modal.component.scss |
| templateUrl | ./rgw-user-subuser-modal.component.html |
Properties |
Methods |
Outputs |
constructor(formBuilder: CdFormBuilder, bsModalRef: BsModalRef, i18n: I18n, actionLabels: ActionLabelsI18n)
|
|||||||||||||||
|
Parameters :
|
| submitAction | |
Type : EventEmitter
|
|
|
The event that is triggered when the 'Add' or 'Update' button has been pressed. |
|
| createForm |
createForm()
|
|
Returns :
void
|
| Private getSubuserName | ||||||||
getSubuserName(value: string)
|
||||||||
|
Get the subuser name. Examples: 'johndoe' => 'johndoe' 'janedoe:xyz' => 'xyz'
Parameters :
Returns :
any
Returns the user ID. |
| listenToChanges |
listenToChanges()
|
|
Returns :
void
|
| onSubmit |
onSubmit()
|
|
Returns :
void
|
| setEditing | ||||||||
setEditing(editing: boolean)
|
||||||||
|
Set the 'editing' flag. If set to TRUE, the modal dialog is in 'Edit' mode, otherwise in 'Add' mode. According to the mode the dialog and its controls behave different.
Parameters :
Returns :
void
|
| setSubusers | ||||||
setSubusers(subusers: RgwUserSubuser[])
|
||||||
|
Set the current capabilities of the user.
Parameters :
Returns :
void
|
| setValues | ||||||||||||||||
setValues(uid: string, subuser: string, permissions: string)
|
||||||||||||||||
|
Set the values displayed in the dialog.
Parameters :
Returns :
void
|
| subuserValidator |
subuserValidator()
|
|
Validates whether the subuser already exists.
Returns :
ValidatorFn
|
| action |
Type : string
|
| Public bsModalRef |
Type : BsModalRef
|
| editing |
Default value : true
|
| formGroup |
Type : CdFormGroup
|
| resource |
Type : string
|
| subusers |
Type : RgwUserSubuser[]
|
Default value : []
|
import { Component, EventEmitter, Output } from '@angular/core';
import { AbstractControl, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
import * as _ from 'lodash';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { I18n } from '@ngx-translate/i18n-polyfill';
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, isEmptyInputValue } from '../../../shared/forms/cd-validators';
import { RgwUserSubuser } from '../models/rgw-user-subuser';
@Component({
selector: 'cd-rgw-user-subuser-modal',
templateUrl: './rgw-user-subuser-modal.component.html',
styleUrls: ['./rgw-user-subuser-modal.component.scss']
})
export class RgwUserSubuserModalComponent {
/**
* The event that is triggered when the 'Add' or 'Update' button
* has been pressed.
*/
@Output()
submitAction = new EventEmitter();
formGroup: CdFormGroup;
editing = true;
subusers: RgwUserSubuser[] = [];
resource: string;
action: string;
constructor(
private formBuilder: CdFormBuilder,
public bsModalRef: BsModalRef,
private i18n: I18n,
private actionLabels: ActionLabelsI18n
) {
this.resource = this.i18n('Subuser');
this.createForm();
this.listenToChanges();
}
createForm() {
this.formGroup = this.formBuilder.group({
uid: [null],
subuid: [null, [Validators.required, this.subuserValidator()]],
perm: [null, [Validators.required]],
// Swift key
generate_secret: [true],
secret_key: [null, [CdValidators.requiredIf({ generate_secret: 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_secret').valueChanges.subscribe(() => {
['secret_key'].forEach((path) => {
this.formGroup.get(path).updateValueAndValidity({ onlySelf: true });
});
});
}
/**
* Validates whether the subuser already exists.
*/
subuserValidator(): ValidatorFn {
const self = this;
return (control: AbstractControl): ValidationErrors | null => {
if (self.editing) {
return null;
}
if (isEmptyInputValue(control.value)) {
return null;
}
const found = self.subusers.some((subuser) => {
return _.isEqual(self.getSubuserName(subuser.id), control.value);
});
return found ? { subuserIdExists: true } : null;
};
}
/**
* Get the subuser name.
* Examples:
* 'johndoe' => 'johndoe'
* 'janedoe:xyz' => 'xyz'
* @param {string} value The value to process.
* @returns {string} Returns the user ID.
*/
private getSubuserName(value: string) {
if (_.isEmpty(value)) {
return value;
}
const matches = value.match(/([^:]+)(:(.+))?/);
return _.isUndefined(matches[3]) ? matches[1] : matches[3];
}
/**
* Set the 'editing' flag. If set to TRUE, the modal dialog is in 'Edit' mode,
* otherwise in 'Add' mode. According to the mode the dialog and its controls
* behave different.
* @param {boolean} viewing
*/
setEditing(editing: boolean = true) {
this.editing = editing;
this.action = this.editing ? this.actionLabels.EDIT : this.actionLabels.CREATE;
}
/**
* Set the values displayed in the dialog.
*/
setValues(uid: string, subuser: string = '', permissions: string = '') {
this.formGroup.setValue({
uid: uid,
subuid: this.getSubuserName(subuser),
perm: permissions,
generate_secret: true,
secret_key: null
});
}
/**
* Set the current capabilities of the user.
*/
setSubusers(subusers: RgwUserSubuser[]) {
this.subusers = subusers;
}
onSubmit() {
// Get the values from the form and create an object that is sent
// by the triggered submit action event.
const values = this.formGroup.value;
const subuser = new RgwUserSubuser();
subuser.id = `${values.uid}:${values.subuid}`;
subuser.permissions = values.perm;
subuser.generate_secret = values.generate_secret;
subuser.secret_key = values.secret_key;
this.submitAction.emit(subuser);
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('uid', frm)}">
<label class="control-label col-sm-3"
for="uid"
i18n>Username</label>
<div class="col-sm-9">
<input id="uid"
class="form-control"
type="text"
formControlName="uid"
[readonly]="true">
</div>
</div>
<!-- Subuser -->
<div class="form-group"
[ngClass]="{'has-error': formGroup.showError('subuid', frm)}">
<label class="control-label col-sm-3"
for="subuid">
<ng-container i18n>Subuser</ng-container>
<span class="required"
*ngIf="!editing">
</span>
</label>
<div class="col-sm-9">
<input id="subuid"
class="form-control"
type="text"
formControlName="subuid"
[readonly]="editing"
autofocus>
<span class="help-block"
*ngIf="formGroup.showError('subuid', frm, 'required')"
i18n>This field is required.</span>
<span class="help-block"
*ngIf="formGroup.showError('subuid', frm, 'subuserIdExists')"
i18n>The chosen subuser ID is already in use.</span>
</div>
</div>
<!-- Permission -->
<div class="form-group"
[ngClass]="{'has-error': formGroup.showError('perm', frm)}">
<label class="control-label col-sm-3"
for="perm">
<ng-container i18n>Permission</ng-container>
<span class="required"></span>
</label>
<div class="col-sm-9">
<select id="perm"
class="form-control"
formControlName="perm">
<option i18n
[ngValue]="null">-- Select a permission --</option>
<option *ngFor="let perm of ['read', 'write']"
[value]="perm">
{{ perm }}
</option>
<option i18n
value="read-write">read, write</option>
<option i18n
value="full-control">full</option>
</select>
<span class="help-block"
*ngIf="formGroup.showError('perm', frm, 'required')"
i18n>This field is required.</span>
</div>
</div>
<!-- Swift key -->
<fieldset *ngIf="!editing">
<legend i18n>Swift key</legend>
<!-- Auto-generate key -->
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox checkbox-primary">
<input id="generate_secret"
type="checkbox"
formControlName="generate_secret">
<label for="generate_secret"
i18n>Auto-generate secret</label>
</div>
</div>
</div>
<!-- Secret key -->
<div class="form-group"
[ngClass]="{'has-error': formGroup.showError('secret_key', frm)}"
*ngIf="!editing && !formGroup.getValue('generate_secret')">
<label class="control-label col-sm-3"
for="secret_key">
<ng-container i18n>Secret key</ng-container>
<span class="required"></span>
</label>
<div class="col-sm-9">
<div class="input-group">
<input id="secret_key"
class="form-control"
type="password"
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>
</fieldset>
</div>
<div class="modal-footer">
<cd-submit-button
(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>
./rgw-user-subuser-modal.component.scss