From e25197b3a9bcb6df8207cc600acd199378a0d872 Mon Sep 17 00:00:00 2001
From: florimondmanca <florimond.manca@gmail.com>
Date: Fri, 21 Sep 2018 13:40:32 +0200
Subject: [PATCH] login user after registration, add loading indicator during
registration, fix project overview background color
---
src/app/core/auth/auth.service.ts | 2 +-
.../projects/overview/overview.component.scss | 2 +-
.../members/student-home/student-home.component.scss | 6 +++---
.../student-signup/student-signup.component.html | 6 +++++-
.../student-signup/student-signup.component.ts | 12 +++++++++---
src/sass/_variables.scss | 1 +
6 files changed, 20 insertions(+), 9 deletions(-)
diff --git a/src/app/core/auth/auth.service.ts b/src/app/core/auth/auth.service.ts
index 4a30300..52cec91 100644
--- a/src/app/core/auth/auth.service.ts
+++ b/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)),
diff --git a/src/app/members/projects/overview/overview.component.scss b/src/app/members/projects/overview/overview.component.scss
index 9736f12..8863701 100644
--- a/src/app/members/projects/overview/overview.component.scss
+++ b/src/app/members/projects/overview/overview.component.scss
@@ -5,5 +5,5 @@
}
#my-participations {
- background: lighten($color-purple-light, 15);
+ background: $color-purple-lighter;
}
diff --git a/src/app/members/student-home/student-home.component.scss b/src/app/members/student-home/student-home.component.scss
index 4b74178..eb3c7e0 100644
--- a/src/app/members/student-home/student-home.component.scss
+++ b/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;
}
diff --git a/src/app/signup/student-signup/student-signup.component.html b/src/app/signup/student-signup/student-signup.component.html
index 542d303..d5e1b7e 100644
--- a/src/app/signup/student-signup/student-signup.component.html
+++ b/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>
diff --git a/src/app/signup/student-signup/student-signup.component.ts b/src/app/signup/student-signup/student-signup.component.ts
index d05cfb6..ac78486 100644
--- a/src/app/signup/student-signup/student-signup.component.ts
+++ b/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,
+ );
}
}
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index 34c60cc..8bfcba0 100644
--- a/src/sass/_variables.scss
+++ b/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;
--
GitLab