Added a success and error bar components (for more consistent way of showing error and success messages), made other components use them

16 files changed, 125 insertions, 41 deletions

diff --git a/src/DevHive.Angular/src/app/app.module.ts b/src/DevHive.Angular/src/app/app.module.ts
index 80a9583..e404c30 100644
--- a/src/DevHive.Angular/src/app/app.module.ts
+++ b/src/DevHive.Angular/src/app/app.module.ts
@@ -17,6 +17,8 @@ import { ProfileComponent } from './components/profile/profile.component';
 import { ProfileSettingsComponent } from './components/profile-settings/profile-settings.component';
 import { ErrorComponent } from './components/error/error.component';
 import { LoadingComponent } from './components/loading/loading.component';
+import { ErrorBarComponent } from './components/error-bar/error-bar.component';
+import { SuccessBarComponent } from './components/success-bar/success-bar.component';
 
 @NgModule({
   declarations: [
@@ -28,7 +30,9 @@ import { LoadingComponent } from './components/loading/loading.component';
     ProfileComponent,
     ProfileSettingsComponent,
     ErrorComponent,
-    LoadingComponent
+    LoadingComponent,
+    ErrorBarComponent,
+    SuccessBarComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/DevHive.Angular/src/app/components/error-bar/error-bar.component.css b/src/DevHive.Angular/src/app/components/error-bar/error-bar.component.css
new file mode 100644
index 0000000..8f8edd9
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/error-bar/error-bar.component.css
@@ -0,0 +1,12 @@
+#error-bar {
+  box-sizing: border-box;
+  width: 100%;
+  background-color: var(--failure);
+  color: white;
+  padding: .2em;
+  text-align: center;
+}
+
+#error-bar:empty {
+  display: none;
+}
diff --git a/src/DevHive.Angular/src/app/components/error-bar/error-bar.component.html b/src/DevHive.Angular/src/app/components/error-bar/error-bar.component.html
new file mode 100644
index 0000000..f1995ab
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/error-bar/error-bar.component.html
@@ -0,0 +1 @@
+<div id="error-bar">{{errorMsg}}</div>
diff --git a/src/DevHive.Angular/src/app/components/error-bar/error-bar.component.ts b/src/DevHive.Angular/src/app/components/error-bar/error-bar.component.ts
new file mode 100644
index 0000000..40a13e7
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/error-bar/error-bar.component.ts
@@ -0,0 +1,25 @@
+import {HttpErrorResponse} from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-error-bar',
+  templateUrl: './error-bar.component.html',
+  styleUrls: ['./error-bar.component.css']
+})
+export class ErrorBarComponent implements OnInit {
+  public errorMsg = '';
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.hideError();
+  }
+
+  showError(error: HttpErrorResponse): void {
+    this.errorMsg = error.statusText;
+  }
+
+  hideError(): void {
+    this.errorMsg = '';
+  }
+}
diff --git a/src/DevHive.Angular/src/app/components/login/login.component.css b/src/DevHive.Angular/src/app/components/login/login.component.css
index c21582a..766522e 100644
--- a/src/DevHive.Angular/src/app/components/login/login.component.css
+++ b/src/DevHive.Angular/src/app/components/login/login.component.css
@@ -16,6 +16,10 @@ form {
   margin-top: 1.2em;
 }
 
+.submit-btn {
+  margin-bottom: .2em;
+}
+
 .redirect-to-register {
   color: var(--focus-color);
   background-color: var(--bg-color);
diff --git a/src/DevHive.Angular/src/app/components/login/login.component.html b/src/DevHive.Angular/src/app/components/login/login.component.html
index c38bc34..13f9bbf 100644
--- a/src/DevHive.Angular/src/app/components/login/login.component.html
+++ b/src/DevHive.Angular/src/app/components/login/login.component.html
@@ -1,5 +1,3 @@
-<div id="error-bar">{{errorMsg}}</div>
-
 <div id="content">
 	<div class="title">Login</div>
 
@@ -26,8 +24,7 @@
 
 		<hr>
 		<button class="submit-btn" type="submit">Submit</button>
+		<app-error-bar></app-error-bar>
 	</form>
-	<form [formGroup]="loginUserFormGroup" (ngSubmit)="onRedirectRegister()">
-		<button class="submit-btn redirect-to-register" type="submit">New to DevHive? Register instead</button>
-	</form>
+	<button class="submit-btn redirect-to-register" (click)="onRedirectRegister()">New to DevHive? Register instead</button>
 </div>
diff --git a/src/DevHive.Angular/src/app/components/login/login.component.ts b/src/DevHive.Angular/src/app/components/login/login.component.ts
index e83f4b1..c424060 100644
--- a/src/DevHive.Angular/src/app/components/login/login.component.ts
+++ b/src/DevHive.Angular/src/app/components/login/login.component.ts
@@ -1,10 +1,11 @@
-import { Component, ErrorHandler, OnInit } from '@angular/core';
+import { Component, ErrorHandler, OnInit, ViewChild } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl, AbstractControl } from '@angular/forms';
 import { Router } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { UserService } from 'src/app/services/user.service';
 import {AppConstants} from 'src/app/app-constants.module';
 import {HttpErrorResponse, HttpResponse} from '@angular/common/http';
+import {ErrorBarComponent} from '../error-bar/error-bar.component';
 
 @Component({
   selector: 'app-login',
@@ -12,8 +13,8 @@ import {HttpErrorResponse, HttpResponse} from '@angular/common/http';
   styleUrls: ['./login.component.css']
 })
 export class LoginComponent implements OnInit {
+  @ViewChild(ErrorBarComponent) private _errorBar: ErrorBarComponent;
   private _title = 'Login';
-  errorMsg = ''
   loginUserFormGroup: FormGroup;
 
   constructor(private _titleService: Title, private _fb: FormBuilder, private _router: Router, private _userService: UserService) {
@@ -32,9 +33,10 @@ export class LoginComponent implements OnInit {
   }
 
   onSubmit(): void {
+    this._errorBar.hideError();
     this._userService.loginUserRequest(this.loginUserFormGroup).subscribe(
         res => this.finishLogin(res),
-        (err: HttpErrorResponse) => this.showError(err)
+        (err: HttpErrorResponse) => this._errorBar.showError(err)
     );
   }
 
@@ -43,10 +45,6 @@ export class LoginComponent implements OnInit {
     this._router.navigate(['/']);
   }
 
-  private showError(error: HttpErrorResponse): void {
-    this.errorMsg = error.message;
-  }
-
   onRedirectRegister(): void {
     this._router.navigate(['/register']);
   }
diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css
index 3f31373..8a915d2 100644
--- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css
+++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css
@@ -52,13 +52,8 @@ hr {
 
 /* Buttons */
 
-#successful-update-msg {
-  background-color: var(--success);
-  color: white;
-  width: 100%;
-  padding: .2em;
-  margin-top: .5em;
-  text-align: center;
+.submit-btn {
+  margin-bottom: .5em;
 }
 
 #delete-account:hover {
diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html
index 9a3fe25..039a45e 100644
--- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html
@@ -59,9 +59,8 @@
 				</div>
 			</div>
 			<button class="submit-btn" type="submit">Update profile</button>
-			<div id="successful-update-msg" *ngIf="successfulUpdate">
-				Profile updated successfully!
-			</div>
+			<app-success-bar></app-success-bar>
+			<app-error-bar></app-error-bar>
 		</form>
 		<hr>
 		<button id="delete-account" class="submit-btn" (click)="deleteAccount()">Delete account</button>
diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts
index 0848f51..f69c579 100644
--- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts
+++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts
@@ -1,11 +1,13 @@
 import {Location} from '@angular/common';
 import {HttpErrorResponse} from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
 import {AppConstants} from 'src/app/app-constants.module';
 import {UserService} from 'src/app/services/user.service';
 import {User} from 'src/models/identity/user';
+import {ErrorBarComponent} from '../error-bar/error-bar.component';
+import {SuccessBarComponent} from '../success-bar/success-bar.component';
 
 @Component({
   selector: 'app-profile-settings',
@@ -13,11 +15,12 @@ import {User} from 'src/models/identity/user';
   styleUrls: ['./profile-settings.component.css']
 })
 export class ProfileSettingsComponent implements OnInit {
+  @ViewChild(ErrorBarComponent) private _errorBar: ErrorBarComponent;
+  @ViewChild(SuccessBarComponent) private _successBar: SuccessBarComponent;
   private _urlUsername: string;
   public updateUserFormGroup: FormGroup;
   public dataArrived = false;
   public user: User;
-  public successfulUpdate = false;
 
   constructor(private _router: Router, private _userService: UserService, private _fb: FormBuilder, private _location: Location)
   { }
@@ -87,7 +90,10 @@ export class ProfileSettingsComponent implements OnInit {
       ]),
     });
 
-    this.updateUserFormGroup.valueChanges.subscribe(() => this.successfulUpdate = false);
+    this.updateUserFormGroup.valueChanges.subscribe(() => {
+      this._successBar.hideMsg();
+      this._errorBar.hideError();
+    });
   }
 
   private bailOnBadToken(): void {
@@ -96,10 +102,11 @@ export class ProfileSettingsComponent implements OnInit {
   }
 
   onSubmit(): void {
-    this.successfulUpdate = false;
+    this._successBar.hideMsg();
+    this._errorBar.hideError();
     this._userService.putUserFromSessionStorageRequest(this.updateUserFormGroup).subscribe(
-        res => this.successfulUpdate = true,
-        (err: HttpErrorResponse) => console.log(err.message)
+        res => this._successBar.showMsg('Profile updated successfully!'),
+        (err: HttpErrorResponse) => this._errorBar.showError(err)
     );
   }
 
diff --git a/src/DevHive.Angular/src/app/components/register/register.component.css b/src/DevHive.Angular/src/app/components/register/register.component.css
index 74d9c95..653b590 100644
--- a/src/DevHive.Angular/src/app/components/register/register.component.css
+++ b/src/DevHive.Angular/src/app/components/register/register.component.css
@@ -18,13 +18,17 @@ form {
   margin-top: 1.2em;
 }
 
-.redirect-to-register {
+.submit-btn {
+  margin-bottom: .2em;
+}
+
+.redirect-to-login {
   color: var(--focus-color);
   background-color: var(--bg-color);
   border-color: var(--focus-color);
 }
 
-.redirect-to-register:hover {
+.redirect-to-login:hover {
   border-color: black !important;
   color: black;
 }
diff --git a/src/DevHive.Angular/src/app/components/register/register.component.html b/src/DevHive.Angular/src/app/components/register/register.component.html
index 130830d..4e67e0e 100644
--- a/src/DevHive.Angular/src/app/components/register/register.component.html
+++ b/src/DevHive.Angular/src/app/components/register/register.component.html
@@ -59,8 +59,7 @@
 
 		<hr>
 		<button class="submit-btn" type="submit">Submit</button>
+		<app-error-bar></app-error-bar>
 	</form>
-	<form [formGroup]="registerUserFormGroup" (ngSubmit)="onRedirectRegister()">
-		<button class="submit-btn redirect-to-register" type="submit">Already have an account? Login here</button>
-	</form>
+	<button class="submit-btn redirect-to-login" (click)="onRedirectLogin()">Already have an account? Login here</button>
 </div>
diff --git a/src/DevHive.Angular/src/app/components/register/register.component.ts b/src/DevHive.Angular/src/app/components/register/register.component.ts
index d1d6af0..aeaa4d8 100644
--- a/src/DevHive.Angular/src/app/components/register/register.component.ts
+++ b/src/DevHive.Angular/src/app/components/register/register.component.ts
@@ -1,9 +1,10 @@
 import {HttpErrorResponse} from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Title } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 import { UserService } from 'src/app/services/user.service';
+import {ErrorBarComponent} from '../error-bar/error-bar.component';
 
 @Component({
   selector: 'app-register',
@@ -11,6 +12,7 @@ import { UserService } from 'src/app/services/user.service';
   styleUrls: ['./register.component.css']
 })
 export class RegisterComponent implements OnInit {
+  @ViewChild(ErrorBarComponent) private _errorBar: ErrorBarComponent;
   private _title = 'Register';
   public registerUserFormGroup: FormGroup;
 
@@ -49,7 +51,7 @@ export class RegisterComponent implements OnInit {
   onSubmit(): void {
     this._userService.registerUserRequest(this.registerUserFormGroup).subscribe(
         res => this.finishRegister(res),
-        (err: HttpErrorResponse) => this.showError(err)
+        (err: HttpErrorResponse) => this._errorBar.showError(err)
     );
   }
 
@@ -58,11 +60,7 @@ export class RegisterComponent implements OnInit {
     this._router.navigate(['/']);
   }
 
-  private showError(error: HttpErrorResponse): void {
-    // TODO: implement, holding out until tab-bar component is implemented
-  }
-
-  onRedirectRegister(): void {
+  onRedirectLogin(): void {
     this._router.navigate(['/login']);
   }
 
diff --git a/src/DevHive.Angular/src/app/components/success-bar/success-bar.component.css b/src/DevHive.Angular/src/app/components/success-bar/success-bar.component.css
new file mode 100644
index 0000000..bee634d
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/success-bar/success-bar.component.css
@@ -0,0 +1,11 @@
+#success-bar {
+  width: 100%;
+  background-color: var(--success);
+  color: white;
+  padding: .2em;
+  text-align: center;
+}
+
+#success-bar:empty {
+  display: none;
+}
diff --git a/src/DevHive.Angular/src/app/components/success-bar/success-bar.component.html b/src/DevHive.Angular/src/app/components/success-bar/success-bar.component.html
new file mode 100644
index 0000000..026e955
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/success-bar/success-bar.component.html
@@ -0,0 +1 @@
+<div id="success-bar">{{successMsg}}</div>
diff --git a/src/DevHive.Angular/src/app/components/success-bar/success-bar.component.ts b/src/DevHive.Angular/src/app/components/success-bar/success-bar.component.ts
new file mode 100644
index 0000000..9a12c3a
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/success-bar/success-bar.component.ts
@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-success-bar',
+  templateUrl: './success-bar.component.html',
+  styleUrls: ['./success-bar.component.css']
+})
+export class SuccessBarComponent implements OnInit {
+  public successMsg = '';
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.hideMsg();
+  }
+
+  showMsg(msg?: string | undefined): void {
+    if (msg === undefined || msg.trim() === '') {
+      this.successMsg = 'Success!';
+    }
+    else {
+      this.successMsg = msg;
+    }
+  }
+
+  hideMsg(): void {
+    this.successMsg = '';
+  }
+}