Avoid user to trigger a creation process twice #30 : spinner at custo…

…mer account creation
benjaminpochat · Mar 2, 2021 · 59a33b8 · 59a33b8
1 parent 4636b60
commit 59a33b8
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/ui/src/app/customer-area/components/order-dialog/order-dialog.component.css b/ui/src/app/customer-area/components/order-dialog/order-dialog.component.css
@@ -37,11 +37,13 @@
   padding-right: 2rem;
 }
 
-.order__confirmation-button{
+.order__confirmation-button,
+.order__account-creation-button {
   display: flex;
   align-items: center;
 }
 
-.order__confirmation-button > div {
+.order__confirmation-button > div,
+.order__account-creation-button > div {
   padding-left: 0.5em;
 }
diff --git a/ui/src/app/customer-area/components/order-dialog/order-dialog.component.html b/ui/src/app/customer-area/components/order-dialog/order-dialog.component.html
@@ -133,15 +133,20 @@
                 La confirmation du mot de passe est différente du mot de passe.
               </span>
             </div>
-            <div>
-              <button
-                mat-flat-button
-                matStepperNext
-                color="accent"
-                (click)="createCustomerAccount()"
-                [disabled]="!areFormFieldsValid(authenticationForm, ['creatingFirstName', 'creatingName', 'creatingEmail', 'creatingPhone', 'creatingPassword', 'creatingPasswordConfirmed'])">
-                  Créer un compte
-              </button>
+            <div class="order__account-creation-button">
+              <div>
+                <button
+                  mat-flat-button
+                  matStepperNext
+                  color="accent"
+                  (click)="createCustomerAccount()"
+                  [disabled]="!areFormFieldsValid(authenticationForm, ['creatingFirstName', 'creatingName', 'creatingEmail', 'creatingPhone', 'creatingPassword', 'creatingPasswordConfirmed']) || accountCreationUnderProcess">
+                    Créer un compte
+                </button>
+              </div>
+              <div>
+                <mat-spinner diameter="25" *ngIf="accountCreationUnderProcess"></mat-spinner>
+              </div>
               <div *ngIf="accountCreationFailureMessage">
                 {{accountCreationFailureMessage}}
               </div>

diff --git a/ui/src/app/customer-area/components/order-dialog/order-dialog.component.ts b/ui/src/app/customer-area/components/order-dialog/order-dialog.component.ts
@@ -44,7 +44,9 @@ export class OrderDialogComponent implements OnInit {
   understood = false;
   orderStored = false;
   authenticationSubmitted = false;
+
   orderUnderProcess = false;
+  accountCreationUnderProcess = false;
 
   constructor(
     private authenticationService: AuthenticationService,
@@ -163,6 +165,7 @@ export class OrderDialogComponent implements OnInit {
     this.userService.createCustomerAccount(actor, password).subscribe(
       () => {
         console.log('Account created');
+        this.accountCreationUnderProcess = false;
         this.login(actor.email, password);
       },
       (error) => {
@@ -171,9 +174,11 @@ export class OrderDialogComponent implements OnInit {
         } else {
           this.accountCreationFailureMessage = 'Impossible de créer un compte avec ces informations.';
         }
+        this.accountCreationUnderProcess = false;
         console.error('account creation failed !');
       }
     );
+    this.accountCreationUnderProcess = true;
   }
 
   passwordConfirmedValidator: ValidatorFn = (formGroup: FormGroup): ValidationErrors | null => {