diff options
Diffstat (limited to 'src/DevHive.Angular')
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 = ''; + } +} |