page de paramètres du module GSM

src/app/app.module.ts

@@ -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 }

src/app/components/home/workspace/parametres/parametres.component.css

@@ -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;
+}

src/app/components/home/workspace/parametres/parametres.component.html

@@ -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 &nbsp;</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>

src/app/components/home/workspace/parametres/parametres.component.ts

@@ -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
+	}
+
 }