VNMS/vnms_admin_fe
VNMS/vnms_admin_fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CHANGE_:Password Changes

Browse Source
This commit is contained in:
venbaittech 2024-08-01 15:27:05 +05:30
parent 9d89a8ee4b
commit 93dd41ba10
4 changed files with 162 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
VNMS_Frontend-live-08-07-2024.zip → VNMS_Frontend-live-01-08-2024.zip
View File

Binary file not shown.

102
src/app/pages/customer/customer-form/customer-form.component.html
View File

@ -3,130 +3,120 @@
<nb-card-body> <nb-card-body>
<form [formGroup]="userForm" (ngSubmit)="onSubmit()"> <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-4 col-sm-12"> <div class="col-md-4 col-lg-4 col-sm-12">
<nb-form-field> <nb-form-field>
<label for="subject">Name:</label> <label for="subject">Name:</label>
<input formControlName="userName" nbInput id="userName" [status]="userForm.get('userName').invalid && userForm.get('userName').touched? 'danger' : 'basic'" type="text"> <input formControlName="userName" nbInput id="userName" [status]="userForm.get('userName').invalid && userForm.get('userName').touched ? 'danger' : 'basic'" type="text">
<ng-container nbInputErrorMessage> <ng-container nbInputErrorMessage>
<div style="color:#7c0e0e" *ngIf="userForm.get('userName').hasError('required') && userForm.get('userName').touched">Name is required.</div> <div class="error-message" *ngIf="userForm.get('userName').hasError('required') && userForm.get('userName').touched">Name is required.</div>
</ng-container> </ng-container>
</nb-form-field> </nb-form-field>
</div> </div>
<div class="col-md-4 col-sm-12"> <div class="col-md-4 col-lg-4 col-sm-12">
<nb-form-field> <nb-form-field>
<label for="subject">E-mail:</label> <label for="subject">E-mail:</label>
<input formControlName="email" nbInput id="email" type="text" [status]="userForm.get('email').invalid && userForm.get('email').touched? 'danger' : 'basic'" > <input formControlName="email" nbInput id="email" type="text" [status]="userForm.get('email').invalid && userForm.get('email').touched ? 'danger' : 'basic'">
<ng-container nbInputErrorMessage> <ng-container nbInputErrorMessage>
<div style="color:#7c0e0e" *ngIf="userForm.get('email').hasError('required') && userForm.get('email').touched">Email is required.</div> <div class="error-message" *ngIf="userForm.get('email').hasError('required') && userForm.get('email').touched">Email is required.</div>
<div style="color:#7c0e0e" *ngIf="!userForm.get('email')?.errors?.required && (userForm.get('email')?.errors?.pattern)"> <div class="error-message" *ngIf="!userForm.get('email')?.errors?.required && userForm.get('email')?.errors?.pattern">Please enter a valid email address</div>
Please enter a valid email address
</div>
</ng-container> </ng-container>
</nb-form-field> </nb-form-field>
</div> </div>
<div class="col-md-4 col-sm-12"> <div class="col-md-4 col-lg-4 col-sm-12">
<nb-form-field > <nb-form-field>
<label for="subject">Password:</label> <label for="subject">Password:</label>
<input formControlName="password" nbInput id="password" type="text" [status]="userForm.get('password').invalid && userForm.get('password').touched? 'danger' : 'basic'"> <div *ngIf="action == 'Edit'">
<div *ngIf="!showPasswordField">
<a href="javascript:void(0)" (click)="togglePasswordField()">Change Password</a>
</div>
</div>
<div *ngIf="showPasswordField">
<input formControlName="password" nbInput id="password" autocomplete="off" type="text" [status]="userForm.get('password').invalid && userForm.get('password').touched ? 'danger' : 'basic'">
<nb-icon *ngIf="action == 'Edit'" (click)="togglePasswordField()" icon="close-outline" style="position: absolute; top: 8px; right: 10px;color: red;"></nb-icon>
<ng-container nbInputErrorMessage> <ng-container nbInputErrorMessage>
<div style="color:#7c0e0e" *ngIf="userForm.get('password')?.invalid && (userForm.get('password')?.dirty || userForm.get('password')?.touched) && userForm.get('password')?.errors?.required"> <div class="error-message" *ngIf="userForm.get('password')?.invalid && (userForm.get('password')?.dirty || userForm.get('password')?.touched) && userForm.get('password')?.errors?.required">Password is required</div>
Password is required <div class="error-message" *ngIf="!userForm.get('password')?.errors?.required && userForm.get('password')?.errors?.pattern">Invalid password format <nb-icon
</div> nbTooltip="Password length must be greater than or equal to 8 and password must contain one or more uppercase, lowercase, numeric, and special characters"
<div style="color:#7c0e0e;font-size:12px;word-wrap: break-word;" *ngIf="!userForm.get('password')?.errors?.required && (userForm.get('password')?.errors?.pattern)"> nbTooltipStatus="info"
Password length must be greater than or equal to 8 and password must contain one or more uppercase , lowercase , numeric and special characters icon="info-outline"
</div> class="icon-error"
style="margin-left: 5px;margin-top: 10px;">
<!-- <div style="color:#7c0e0e" *ngIf="!userForm.get('password')?.errors?.required"> </nb-icon></div>
Password length must be greater than or equal to 8 and password must contain one or more uppercase , lowercase , numeric and special characters
</div> -->
</ng-container> </ng-container>
</div>
</nb-form-field> </nb-form-field>
</div> </div>
</div> </div>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-4 col-sm-12"> <div class="col-md-4 col-lg-4 col-sm-12">
<nb-form-field> <nb-form-field>
<label for="subject">Mobile No:</label> <label for="subject">Mobile No:</label>
<input formControlName="mobileNo" nbInput id="mobileNo" type="text" [status]="userForm.get('mobileNo').invalid && userForm.get('mobileNo').touched? 'danger' : 'basic'"> <input formControlName="mobileNo" nbInput id="mobileNo" type="text" [status]="userForm.get('mobileNo').invalid && userForm.get('mobileNo').touched ? 'danger' : 'basic'">
<ng-container nbInputErrorMessage> <ng-container nbInputErrorMessage>
<div style="color:#7c0e0e" *ngIf="userForm.get('mobileNo').hasError('required') && userForm.get('mobileNo').touched">Mobile No is required.</div> <div class="error-message" *ngIf="userForm.get('mobileNo').hasError('required') && userForm.get('mobileNo').touched">Mobile No is required.</div>
</ng-container> </ng-container>
</nb-form-field> </nb-form-field>
</div> </div>
<div class="col-md-4 col-sm-12"> <div class="col-md-4 col-lg-4 col-sm-12">
<nb-form-field> <nb-form-field>
<label for="subject">Address</label> <label for="subject">Address</label>
<input formControlName="address_1" nbInput id="address_1" type="text" [status]="userForm.get('address_1').invalid && userForm.get('address_1').touched? 'danger' : 'basic'"> <input formControlName="address_1" nbInput id="address_1" type="text" [status]="userForm.get('address_1').invalid && userForm.get('address_1').touched ? 'danger' : 'basic'">
<ng-container nbInputErrorMessage> <ng-container nbInputErrorMessage>
<div style="color:#7c0e0e" *ngIf="userForm.get('address_1').hasError('required') && userForm.get('address_1').touched">Address is required.</div> <div class="error-message" *ngIf="userForm.get('address_1').hasError('required') && userForm.get('address_1').touched">Address is required.</div>
</ng-container> </ng-container>
</nb-form-field> </nb-form-field>
</div> </div>
<div class="col-md-4 col-sm-12"> <div class="col-md-4 col-lg-4 col-sm-12">
<nb-form-field> <nb-form-field>
<label for="subject">State:</label> <label for="subject">State:</label>
<input formControlName="state" nbInput id="state" type="text" [status]="userForm.get('state').invalid && userForm.get('state').touched? 'danger' : 'basic'"> <input formControlName="state" nbInput id="state" type="text" [status]="userForm.get('state').invalid && userForm.get('state').touched ? 'danger' : 'basic'">
<ng-container nbInputErrorMessage> <ng-container nbInputErrorMessage>
<div style="color:#7c0e0e" *ngIf="userForm.get('state').hasError('required') && userForm.get('state').touched">State is required.</div> <div class="error-message" *ngIf="userForm.get('state').hasError('required') && userForm.get('state').touched">State is required.</div>
</ng-container> </ng-container>
</nb-form-field> </nb-form-field>
</div> </div>
</div> </div>
<div class="row show-grid">
<div class="row show-grid" >
<div class="col-md-3 col-sm-12"> <div class="col-md-3 col-sm-12">
<nb-form-field> <nb-form-field>
<label for="subject">City:</label> <label for="subject">City:</label>
<input formControlName="city" nbInput id="city" type="text" [status]="userForm.get('city').invalid && userForm.get('city').touched? 'danger' : 'basic'"> <input formControlName="city" nbInput id="city" type="text" [status]="userForm.get('city').invalid && userForm.get('city').touched ? 'danger' : 'basic'">
<ng-container nbInputErrorMessage> <ng-container nbInputErrorMessage>
<div style="color:#7c0e0e" *ngIf="userForm.get('city').hasError('required') && userForm.get('city').touched">City is required.</div> <div class="error-message" *ngIf="userForm.get('city').hasError('required') && userForm.get('city').touched">City is required.</div>
</ng-container> </ng-container>
</nb-form-field> </nb-form-field>
</div> </div>
<div class="col-md-3 col-sm-12"> <div class="col-md-3 col-sm-12">
<nb-form-field> <nb-form-field>
<label for="subject">Pincode:</label> <label for="subject">Pincode:</label>
<input formControlName="pincode" nbInput id="pincode" type="text" [status]="userForm.get('pincode').invalid && userForm.get('pincode').touched? 'danger' : 'basic'"> <input formControlName="pincode" nbInput id="pincode" type="text" [status]="userForm.get('pincode').invalid && userForm.get('pincode').touched ? 'danger' : 'basic'">
<ng-container nbInputErrorMessage> <ng-container nbInputErrorMessage>
<div style="color:#7c0e0e" *ngIf="userForm.get('pincode').hasError('required') && userForm.get('pincode').touched">Pincode is required.</div> <div class="error-message" *ngIf="userForm.get('pincode').hasError('required') && userForm.get('pincode').touched">Pincode is required.</div>
<div style="color: #7c0e0e" *ngIf="userForm.get('pincode').hasError('pattern') && userForm.get('pincode').touched">Pincode must be a 6-digit number.</div> <div class="error-message" *ngIf="userForm.get('pincode').hasError('pattern') && userForm.get('pincode').touched">Pincode must be a 6-digit number.</div>
</ng-container> </ng-container>
</nb-form-field> </nb-form-field>
</div> </div>
<div class="col-md-3 col-sm-12"> <div class="col-md-3 col-sm-12">
<nb-form-field> <nb-form-field>
<label for="subject">Customer Type:</label> <br /> <label for="subject">Customer Type:</label> <br />
<nb-select selected="Medical" formControlName="cusType" style="width: 100% !important;" [status]="userForm.get('cusType').invalid && userForm.get('cusType').touched? 'danger' : 'basic'"> <nb-select selected="Medical" formControlName="cusType" style="width: 100% !important;" [status]="userForm.get('cusType').invalid && userForm.get('cusType').touched ? 'danger' : 'basic'">
<nb-option value="Medical">Medical</nb-option> <nb-option value="Medical">Medical</nb-option>
<nb-option value="Industrial">Industrial</nb-option> <nb-option value="Industrial">Industrial</nb-option>
</nb-select> </nb-select>
<ng-container nbInputErrorMessage> <ng-container nbInputErrorMessage>
<div style="color:#7c0e0e" *ngIf="userForm.get('cusType').hasError('required') && userForm.get('cusType').touched">Customer Type is required.</div> <div class="error-message" *ngIf="userForm.get('cusType').hasError('required') && userForm.get('cusType').touched">Customer Type is required.</div>
</ng-container> </ng-container>
</nb-form-field> </nb-form-field>
<!-- <nb-form-field>
</nb-form-field> -->
</div> </div>
<div class="col-md-3 col-sm-12"> <div class="col-md-3 col-sm-12">
<nb-form-field> <nb-form-field>
<label for="subject">GST No:</label> <label for="subject">GST No:</label>
<input formControlName="gst" nbInput id="gst" type="text" > <input formControlName="gst" nbInput id="gst" type="text">
</nb-form-field> </nb-form-field>
</div> </div>
</div> </div>
<nb-card-footer>
<nb-card-footer >
<div class="row"> <div class="row">
<div class="col-md-12" style="text-align: end;"> <div class="col-md-12" style="text-align: end;">
<button class="cancel" nbButton status="danger" type="button" (click)="cancel()">Cancel</button> <button class="cancel" nbButton status="danger" type="button" (click)="cancel()">Cancel</button>
@ -134,8 +124,6 @@
</div> </div>
</div> </div>
</nb-card-footer> </nb-card-footer>
</form> </form>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>

27
src/app/pages/customer/customer-form/customer-form.component.scss
View File

@ -9,6 +9,33 @@
margin-right: 1rem; margin-right: 1rem;
} }
} }
.error-message {
color: #7c0e0e;
font-size: 10px;
word-wrap: break-word;
max-width: 250px; /* Adjust this value as needed */
}
nb-icon {
cursor: pointer;
}
.icon-error {
color: red !important;
}
@media (max-width: 767px) {
.show-grid .col-sm-12 {
padding: 0 15px;
}
}
@media (min-width: 768px) {
.show-grid .col-md-4, .show-grid .col-md-3 {
padding: 0 15px;
}
}
.custom-dialog-class { .custom-dialog-class {
width: 50%; /* Set the desired width here */ width: 50%; /* Set the desired width here */
height: 300px; /* Set the desired height here */ height: 300px; /* Set the desired height here */

20
src/app/pages/customer/customer-form/customer-form.component.ts
View File

@ -13,6 +13,7 @@ export class CustomerFormComponent implements OnInit {
userForm: FormGroup | any; formData:any =[] userForm: FormGroup | any; formData:any =[]
heading:any =[]; heading:any =[];
action: any; action: any;
showPasswordField: boolean = false;
constructor(private dialogRef: NbDialogRef<CustomerFormComponent> ,public _api:PageapiService,private dialogService: NbDialogService) { constructor(private dialogRef: NbDialogRef<CustomerFormComponent> ,public _api:PageapiService,private dialogService: NbDialogService) {
@ -24,6 +25,10 @@ export class CustomerFormComponent implements OnInit {
console.log('details',details) console.log('details',details)
this.action = details.action this.action = details.action
if(this.action == 'Add'){
this.showPasswordField = !this.showPasswordField;
}
this.heading = details.title this.heading = details.title
this.data = details.details this.data = details.details
@ -84,6 +89,21 @@ export class CustomerFormComponent implements OnInit {
} }
togglePasswordField() {
this.showPasswordField = !this.showPasswordField;
if (this.showPasswordField) {
this.userForm.get('password').setValidators([
Validators.required,
Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,16}$')
]);
} else {
this.userForm.get('password').clearValidators();
this.userForm.get('password').reset();
}
this.userForm.get('password').updateValueAndValidity();
}
cancel(){ cancel(){
// this.windowService // this.windowService
// console.log( this.windowService) // console.log( this.windowService)