login user after registration, add loading indicator during registration, fix...

login user after registration, add loading indicator during registration, fix project overview background color

src/app/core/auth/auth.service.ts

@@ -35,7 +35,7 @@ export class AuthService {
     this.user$ = new BehaviorSubject(initialUser);
   }
 
-  login(username: string, password: string) {
+  login(username: string, password: string): Observable<boolean> {
     return this.http.post<any>(this.loginUrl, { username: username, password: password }).pipe(
       tap(data => this.token.set(data.token)),
       map(data => this.userAdapter.adapt(data.user)),

src/app/members/projects/overview/overview.component.scss

@@ -5,5 +5,5 @@
 }
 
 #my-participations {
-  background: lighten($color-purple-light, 15);
+  background: $color-purple-lighter;
 }

src/app/members/student-home/student-home.component.scss

@@ -6,11 +6,11 @@
 }
 
 #visits {
-  // TODO use a background image
+  // TODO use a background image?
   background: $color-light-blue;
 }
 
 #projects {
-  // TODO use a background image
-  background: $color-purple-light;
+  // TODO use a background image?
+  background: $color-purple-lighter;
 }

src/app/signup/student-signup/student-signup.component.html

@@ -80,9 +80,13 @@
     </mat-form-field>
 
     <div class="text-center">
-      <button mat-raised-button color="primary" [disabled]="!formGroup.valid">M'inscrire</button>
+      <button mat-raised-button color="primary" [disabled]="!formGroup.valid || loading">
+        M'inscrire
+        <app-load-spinner *ngIf="loading" [block]="false"></app-load-spinner>
+      </button>
     </div>
 
+
     <p class="text-center">
       J'ai déjà un compte ! <a routerLink="/connexion">Me connecter</a>
     </p>

src/app/signup/student-signup/student-signup.component.ts

@@ -3,7 +3,7 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { MatSnackBar } from '@angular/material';
 import { Observable } from 'rxjs';
-import { tap } from 'rxjs/operators';
+import { tap, mergeMap } from 'rxjs/operators';
 import { Registration, RegistrationService, PasswordErrorStateMatcher } from '../core';
 import { AuthService } from 'app/core';
 
@@ -17,6 +17,7 @@ export class StudentSignupComponent implements OnInit {
 
   registration: Registration;
   formGroup: FormGroup;
+  loading = false;
 
   matcher = new PasswordErrorStateMatcher();
 
@@ -52,16 +53,21 @@ export class StudentSignupComponent implements OnInit {
   }
 
   submit() {
+    this.loading = true;
     const registration: Registration = this.formGroup.value;
     const password: string = this.formGroup.controls.password.value;
     this.registrationService.create(registration, password).pipe(
-      tap(() => this.auth.login(registration.email, password)),
+      mergeMap(() => this.auth.login(registration.email, password)),
       tap(() => this.snackBar.open(
         `Ton compte a été créé ! Tu es maintenant connecté.`,
         'OK',
         { duration: 3000 },
       )),
+      tap(() => this.loading = false),
       tap(() => this.router.navigate(['/'])),
-    ).subscribe();
+    ).subscribe(
+      () => {},
+      (error) => this.loading = false,
+    );
   }
 }

src/sass/_variables.scss

@@ -3,6 +3,7 @@ $color-darkest-blue: rgb(32, 26, 78);
 $color-dark-blue: rgb(46, 37, 128);
 $color-purple: rgb(99, 92, 161);
 $color-purple-light: rgb(151, 146, 192);
+$color-purple-lighter: lighten($color-purple-light, 15);
 $color-turquoise: rgb(43, 181, 186);
 $color-light-blue: rgb(213, 250, 255);
 $color-accent: #F3395E;