page de paramètres du module GSM
This commit is contained in:
Vincent BENOIT
21
package-lock.json
generated
21
package-lock.json
generated
@@ -22,6 +22,7 @@
|
||||
"@fortawesome/angular-fontawesome": "^0.10.2",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.1.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.1.1",
|
||||
"angular-code-input": "^1.6.0",
|
||||
"font-awesome": "^4.7.0",
|
||||
"jquery": "^3.6.1",
|
||||
"material-icons": "^1.12.0",
|
||||
@@ -3455,6 +3456,18 @@
|
||||
"ajv": "^8.8.2"
|
||||
}
|
||||
},
|
||||
"node_modules/angular-code-input": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/angular-code-input/-/angular-code-input-1.6.0.tgz",
|
||||
"integrity": "sha512-EAsHf2z7T2rze39zCWopJehuANbylX6Em9It75DvNrWiRVKbhLH8LmLXfofJ3ajdQ1DAAEnswB5HiAxAZAgiOA==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.2.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": ">=7.2.0",
|
||||
"@angular/core": ">=7.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ansi-colors": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
|
||||
@@ -14756,6 +14769,14 @@
|
||||
"fast-deep-equal": "^3.1.3"
|
||||
}
|
||||
},
|
||||
"angular-code-input": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/angular-code-input/-/angular-code-input-1.6.0.tgz",
|
||||
"integrity": "sha512-EAsHf2z7T2rze39zCWopJehuANbylX6Em9It75DvNrWiRVKbhLH8LmLXfofJ3ajdQ1DAAEnswB5HiAxAZAgiOA==",
|
||||
"requires": {
|
||||
"tslib": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"ansi-colors": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
"@fortawesome/angular-fontawesome": "^0.10.2",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.1.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.1.1",
|
||||
"angular-code-input": "^1.6.0",
|
||||
"font-awesome": "^4.7.0",
|
||||
"jquery": "^3.6.1",
|
||||
"material-icons": "^1.12.0",
|
||||
|
||||
@@ -26,7 +26,9 @@ import { MatStepperModule } from '@angular/material/stepper';
|
||||
import { MatListModule } from '@angular/material/list';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||
import { ToastrModule } from 'ngx-toastr';
|
||||
import { CodeInputModule } from 'angular-code-input';
|
||||
|
||||
import { HttpXsrfInterceptorService } from './interceptors/http-xsrf-interceptor/http-xsrf-interceptor.service';
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
@@ -80,10 +82,12 @@ import { HoursComponent } from './components/home/workspace/hours/hours.componen
|
||||
MatProgressSpinnerModule,
|
||||
MatProgressBarModule,
|
||||
MatStepperModule,
|
||||
MatSlideToggleModule,
|
||||
FlexLayoutModule,
|
||||
RouterModule,
|
||||
FontAwesomeModule,
|
||||
ToastrModule.forRoot()
|
||||
ToastrModule.forRoot(),
|
||||
CodeInputModule
|
||||
],
|
||||
providers: [
|
||||
{ provide: HTTP_INTERCEPTORS, useClass: HttpXsrfInterceptorService, multi: true }
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
.container {
|
||||
/* display: flex; */
|
||||
/*background-color: #b8b8b8;*/
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 50%;
|
||||
min-width: 50%;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
mat-label {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
code-input {
|
||||
--item-spacing: 10px;
|
||||
--item-height: 3rem;
|
||||
color: #b8b8b8;
|
||||
margin-right: 50%;
|
||||
font-weight: bold;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
.myError {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.cred {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: smaller;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@@ -1,16 +1,15 @@
|
||||
<div class="container"
|
||||
fxLayout="column"
|
||||
fxLayoutAlign="space-around center">
|
||||
<!-- Password Form -->
|
||||
fxLayoutAlign="space-around start">
|
||||
<!-- Params Form -->
|
||||
<form [formGroup]="paramsFG"
|
||||
fxLayout="column">
|
||||
<mat-form-field>
|
||||
<mat-label>Code PIN</mat-label>
|
||||
<input matInput type="text" formControlName="pin" class="form-control" name="pin" placeholder="Code PIN" [ngClass]="{'is-invalid':submitted && paramsFG.controls['pin'].errors}">
|
||||
<mat-error class="myError" *ngIf="paramsFG.controls['pin'].hasError('required')">Le code PIN est requis !</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Numéro accepté</mat-label>
|
||||
|
||||
<mat-slide-toggle (change)="onSlideChanged($event)" style="margin: 10px;">Activer code PIN</mat-slide-toggle>
|
||||
<code-input [isCodeHidden]="false" [codeLength]="4" [disabled]="!pinChecked" (codeChanged)="onCodeChanged($event)" (codeCompleted)="onCodeCompleted($event)"></code-input>
|
||||
<mat-form-field style="margin: 10px;">
|
||||
<mat-label>Téléphone accepté</mat-label>
|
||||
<span matPrefix style="font-size: smaller;">+33 </span>
|
||||
<input matInput type="text" formControlName="num_accepted" class="form-control" name="num_accepted" placeholder="Numéro accepté" [ngClass]="{'is-invalid':submitted && paramsFG.controls['num_accepted'].errors}">
|
||||
<mat-error class="myError" *ngIf="paramsFG.controls['num_accepted'].hasError('required')">Le numéro est requis !</mat-error>
|
||||
<mat-error class="myError" *ngIf="paramsFG.controls['num_accepted'].hasError('pattern')">Le numéro est composé de {{Pw}} chiffres</mat-error>
|
||||
|
||||
@@ -12,7 +12,10 @@ import { ToastrService } from 'ngx-toastr';
|
||||
export class ParametresComponent implements OnInit {
|
||||
paramsFG:FormGroup;
|
||||
submitted:boolean=false;
|
||||
Pw:number = 10;
|
||||
PwPin:number = 4;
|
||||
Pw:number = 9;
|
||||
slideDisable:boolean=false;
|
||||
pinChecked:boolean=false;
|
||||
|
||||
constructor(private fb:FormBuilder,
|
||||
private bs:BackendService,
|
||||
@@ -21,13 +24,9 @@ export class ParametresComponent implements OnInit {
|
||||
|
||||
ngOnInit(): void {
|
||||
this.paramsFG=this.fb.group({
|
||||
pin:["", [
|
||||
Validators.required,
|
||||
Validators.pattern('(?=\\D*\\d)(?=[^a-z])(?=[^A-Z]*[A-Z]).{' + this.Pw + '}')
|
||||
]],
|
||||
num_accepted:["", [
|
||||
Validators.required,
|
||||
Validators.pattern('(?=\\D*\\d)(?=[^a-z])(?=[^A-Z]*[A-Z]).{' + this.Pw + '}'),
|
||||
Validators.pattern('(?=[0-9]{9}).{' + this.Pw + '}'),
|
||||
]],
|
||||
});
|
||||
}
|
||||
@@ -36,4 +35,18 @@ export class ParametresComponent implements OnInit {
|
||||
|
||||
}
|
||||
|
||||
onSlideChanged(event: any): void {
|
||||
console.log("checked ?", event.checked);
|
||||
this.pinChecked=event.checked;
|
||||
}
|
||||
|
||||
onCodeChanged(code: string): void {
|
||||
// this called every time when user changed the code
|
||||
|
||||
}
|
||||
|
||||
onCodeCompleted(code: string): void {
|
||||
// this called only if user entered full code
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user