File
Implements
Metadata
| selector |
cd-iscsi-target-discovery-modal |
| styleUrls |
./iscsi-target-discovery-modal.component.scss |
| templateUrl |
./iscsi-target-discovery-modal.component.html |
Methods
|
submitAction
|
submitAction()
|
|
|
|
|
|
Public
bsModalRef
|
Type : BsModalRef
|
|
|
|
PASSWORD_REGEX
|
Default value : /[\w@\-_\/]{12,16}/
|
|
|
|
USER_REGEX
|
Default value : /[\w\.:@_-]{8,64}/
|
|
|
import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { I18n } from '@ngx-translate/i18n-polyfill';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { IscsiService } from '../../../shared/api/iscsi.service';
import { NotificationType } from '../../../shared/enum/notification-type.enum';
import { CdFormGroup } from '../../../shared/forms/cd-form-group';
import { CdValidators } from '../../../shared/forms/cd-validators';
import { NotificationService } from '../../../shared/services/notification.service';
@Component({
selector: 'cd-iscsi-target-discovery-modal',
templateUrl: './iscsi-target-discovery-modal.component.html',
styleUrls: ['./iscsi-target-discovery-modal.component.scss']
})
export class IscsiTargetDiscoveryModalComponent implements OnInit {
discoveryForm: CdFormGroup;
USER_REGEX = /[\w\.:@_-]{8,64}/;
PASSWORD_REGEX = /[\w@\-_\/]{12,16}/;
constructor(
public bsModalRef: BsModalRef,
private iscsiService: IscsiService,
private notificationService: NotificationService,
private i18n: I18n
) {
this.discoveryForm = new CdFormGroup({
user: new FormControl(''),
password: new FormControl(''),
mutual_user: new FormControl(''),
mutual_password: new FormControl('')
});
CdValidators.validateIf(
this.discoveryForm.get('user'),
() =>
this.discoveryForm.getValue('password') ||
this.discoveryForm.getValue('mutual_user') ||
this.discoveryForm.getValue('mutual_password'),
[Validators.required],
[Validators.pattern(this.USER_REGEX)],
[
this.discoveryForm.get('password'),
this.discoveryForm.get('mutual_user'),
this.discoveryForm.get('mutual_password')
]
);
CdValidators.validateIf(
this.discoveryForm.get('password'),
() =>
this.discoveryForm.getValue('user') ||
this.discoveryForm.getValue('mutual_user') ||
this.discoveryForm.getValue('mutual_password'),
[Validators.required],
[Validators.pattern(this.PASSWORD_REGEX)],
[
this.discoveryForm.get('user'),
this.discoveryForm.get('mutual_user'),
this.discoveryForm.get('mutual_password')
]
);
CdValidators.validateIf(
this.discoveryForm.get('mutual_user'),
() => this.discoveryForm.getValue('mutual_password'),
[Validators.required],
[Validators.pattern(this.USER_REGEX)],
[
this.discoveryForm.get('user'),
this.discoveryForm.get('password'),
this.discoveryForm.get('mutual_password')
]
);
CdValidators.validateIf(
this.discoveryForm.get('mutual_password'),
() => this.discoveryForm.getValue('mutual_user'),
[Validators.required],
[Validators.pattern(this.PASSWORD_REGEX)],
[
this.discoveryForm.get('user'),
this.discoveryForm.get('password'),
this.discoveryForm.get('mutual_user')
]
);
}
ngOnInit() {
this.iscsiService.getDiscovery().subscribe((auth) => {
this.discoveryForm.patchValue(auth);
});
}
submitAction() {
this.iscsiService.updateDiscovery(this.discoveryForm.value).subscribe(
() => {
this.notificationService.show(
NotificationType.success,
this.i18n('Updated discovery authentication')
);
this.bsModalRef.hide();
},
() => {
this.bsModalRef.hide();
}
);
}
}
<cd-modal [modalRef]="bsModalRef">
<ng-container class="modal-title"
i18n>Discovery Authentication</ng-container>
<ng-container class="modal-content">
<form name="discoveryForm"
class="form-horizontal"
#formDir="ngForm"
[formGroup]="discoveryForm"
novalidate>
<div class="modal-body">
<!-- User -->
<div class="form-group"
[ngClass]="{'has-error': discoveryForm.showError('user', formDir)}">
<label class="control-label col-sm-4"
for="user"
i18n>User</label>
<div class="col-sm-8">
<input id="user"
class="form-control"
formControlName="user"
type="text">
<span class="help-block"
*ngIf="discoveryForm.showError('user', formDir, 'required')"
i18n>This field is required.</span>
<span class="help-block"
*ngIf="discoveryForm.showError('user', formDir, 'pattern')"
i18n>Usernames must have a length of 8 to 64 characters and
can only contain letters, '.', '@', '-', '_' or ':'.</span>
</div>
</div>
<!-- Password -->
<div class="form-group"
[ngClass]="{'has-error': discoveryForm.showError('password', formDir)}">
<label class="control-label col-sm-4"
for="password"
i18n>Password</label>
<div class="col-sm-8">
<div class="input-group">
<input id="password"
class="form-control"
formControlName="password"
type="password">
<span class="input-group-btn">
<button type="button"
class="btn btn-default"
cdPasswordButton="password">
</button>
<button type="button"
class="btn btn-default"
cdCopy2ClipboardButton="password">
</button>
</span>
</div>
<span class="help-block"
*ngIf="discoveryForm.showError('password', formDir, 'required')"
i18n>This field is required.</span>
<span class="help-block"
*ngIf="discoveryForm.showError('password', formDir, 'pattern')"
i18n>Passwords must have a length of 12 to 16 characters
and can only contain letters, '@', '-', '_' or '/'.</span>
</div>
</div>
<!-- mutual_user -->
<div class="form-group"
[ngClass]="{'has-error': discoveryForm.showError('mutual_user', formDir)}">
<label class="control-label col-sm-4"
for="mutual_user">
<ng-container i18n>Mutual User</ng-container>
</label>
<div class="col-sm-8">
<input id="mutual_user"
class="form-control"
formControlName="mutual_user"
type="text">
<span class="help-block"
*ngIf="discoveryForm.showError('mutual_user', formDir, 'required')"
i18n>This field is required.</span>
<span class="help-block"
*ngIf="discoveryForm.showError('mutual_user', formDir, 'pattern')"
i18n>Usernames must have a length of 8 to 64 characters and
can only contain letters, '.', '@', '-', '_' or ':'.</span>
</div>
</div>
<!-- mutual_password -->
<div class="form-group"
[ngClass]="{'has-error': discoveryForm.showError('mutual_password', formDir)}">
<label class="control-label col-sm-4"
for="mutual_password"
i18n>Mutual Password</label>
<div class="col-sm-8">
<div class="input-group">
<input id="mutual_password"
class="form-control"
formControlName="mutual_password"
type="password">
<span class="input-group-btn">
<button type="button"
class="btn btn-default"
cdPasswordButton="mutual_password">
</button>
<button type="button"
class="btn btn-default"
cdCopy2ClipboardButton="mutual_password">
</button>
</span>
</div>
<span class="help-block"
*ngIf="discoveryForm.showError('mutual_password', formDir, 'required')"
i18n>This field is required.</span>
<span class="help-block"
*ngIf="discoveryForm.showError('mutual_password', formDir, 'pattern')"
i18n>Passwords must have a length of 12 to 16 characters and
can only contain letters, '@', '-', '_' or '/'.</span>
</div>
</div>
</div>
<div class="modal-footer">
<div class="button-group text-right">
<cd-submit-button (submitAction)="submitAction()"
[form]="discoveryForm"
i18n>Submit</cd-submit-button>
<cd-back-button [back]="bsModalRef.hide"
name="Cancel"
i18n-name>
</cd-back-button>
</div>
</div>
</form>
</ng-container>
</cd-modal>
Legend
Html element with directive