From a4a51710a8a3744ef1500374c471bfade8aa30bb Mon Sep 17 00:00:00 2001 From: AsianPsychoBoy Date: Sat, 17 Dec 2016 12:01:47 +0800 Subject: [PATCH] submit profile picture in settings --- src/app/app.module.ts | 4 ++- src/app/login/login.component.ts | 6 ++-- src/app/navbar/navbar.component.html | 3 ++ src/app/register/register.component.ts | 6 ++-- src/app/router.config.ts | 5 +++ src/app/settings/settings.component.html | 7 +++++ src/app/settings/settings.component.scss | 0 src/app/settings/settings.component.spec.ts | 28 +++++++++++++++++ src/app/settings/settings.component.ts | 34 +++++++++++++++++++++ src/app/shared/model/user.service.ts | 32 +++++++++++++++++-- src/app/shared/security/auth.service.ts | 9 ++---- 11 files changed, 118 insertions(+), 16 deletions(-) create mode 100644 src/app/settings/settings.component.html create mode 100644 src/app/settings/settings.component.scss create mode 100644 src/app/settings/settings.component.spec.ts create mode 100644 src/app/settings/settings.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 86ace8b..b9baeaa 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -22,6 +22,7 @@ import { RegisterComponent } from './register/register.component'; import { AuthService } from './shared/security/auth.service'; import { WhiteboardService } from './shared/model/whiteboard.service'; import { UserService } from './shared/model/user.service'; +import { SettingsComponent } from './settings/settings.component'; @NgModule({ declarations: [ @@ -33,7 +34,8 @@ import { UserService } from './shared/model/user.service'; ViewWhiteboardComponent, ChatComponent, LoginComponent, - RegisterComponent + RegisterComponent, + SettingsComponent ], imports: [ BrowserModule, diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts index fc683e9..b04a610 100644 --- a/src/app/login/login.component.ts +++ b/src/app/login/login.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { Validators, FormGroup, FormBuilder } from '@angular/forms'; -import { AuthService } from '../shared/security/auth.service'; +import { UserService } from '../shared/model/user.service'; @Component({ selector: 'app-login', @@ -12,7 +12,7 @@ export class LoginComponent implements OnInit { form: FormGroup; - constructor(private fb: FormBuilder, private router: Router, private authService: AuthService) { + constructor(private fb: FormBuilder, private router: Router, private userService: UserService) { this.form = this.fb.group({ email: ['', Validators.required], password: ['', Validators.required] @@ -24,7 +24,7 @@ export class LoginComponent implements OnInit { login() { const formValue = this.form.value; - this.authService.login(formValue.email, formValue.password).subscribe( + this.userService.login(formValue.email, formValue.password).subscribe( data => { this.router.navigate(['/home']); }, diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html index a4f2728..9830fe9 100644 --- a/src/app/navbar/navbar.component.html +++ b/src/app/navbar/navbar.component.html @@ -29,6 +29,9 @@
  • Whiteboard
    • +
  • + Settings +
    • diff --git a/src/app/register/register.component.ts b/src/app/register/register.component.ts index c7c58be..ea70d25 100644 --- a/src/app/register/register.component.ts +++ b/src/app/register/register.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { Validators, FormGroup, FormBuilder } from '@angular/forms'; -import { AuthService } from '../shared/security/auth.service'; +import { UserService } from '../shared/model/user.service'; @Component({ selector: 'app-register', @@ -12,7 +12,7 @@ export class RegisterComponent implements OnInit { form: FormGroup; - constructor(private fb: FormBuilder, private router: Router, private authService: AuthService) { + constructor(private fb: FormBuilder, private router: Router, private userService: UserService) { this.form = this.fb.group({ email: ['', Validators.required], password: ['', Validators.required] @@ -24,7 +24,7 @@ export class RegisterComponent implements OnInit { register() { const formValue = this.form.value; - this.authService.register(formValue.email, formValue.password).subscribe( + this.userService.register(formValue.email, formValue.password).subscribe( data => { this.router.navigate(['/home']); }, diff --git a/src/app/router.config.ts b/src/app/router.config.ts index b86e365..69479bb 100644 --- a/src/app/router.config.ts +++ b/src/app/router.config.ts @@ -5,6 +5,7 @@ import { CreateWhiteboardComponent } from './create-whiteboard/create-whiteboard import { ViewWhiteboardComponent } from './view-whiteboard/view-whiteboard.component'; import { LoginComponent } from './login/login.component'; import { RegisterComponent } from './register/register.component'; +import { SettingsComponent } from './settings/settings.component'; export const routerConfig: Route[] = [ { @@ -41,5 +42,9 @@ export const routerConfig: Route[] = [ { path: 'register', component: RegisterComponent + }, + { + path: 'settings', + component: SettingsComponent } ]; diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html new file mode 100644 index 0000000..0798c03 --- /dev/null +++ b/src/app/settings/settings.component.html @@ -0,0 +1,7 @@ +

    Settings

    +
    +

    Profile picture

    + + +
    +

    changes saved

    diff --git a/src/app/settings/settings.component.scss b/src/app/settings/settings.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/settings/settings.component.spec.ts b/src/app/settings/settings.component.spec.ts new file mode 100644 index 0000000..2811b74 --- /dev/null +++ b/src/app/settings/settings.component.spec.ts @@ -0,0 +1,28 @@ +/* tslint:disable:no-unused-variable */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +import { SettingsComponent } from './settings.component'; + +describe('SettingsComponent', () => { + let component: SettingsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SettingsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SettingsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts new file mode 100644 index 0000000..bcf9a9b --- /dev/null +++ b/src/app/settings/settings.component.ts @@ -0,0 +1,34 @@ +import { Component, OnInit } from '@angular/core'; +import { Validators, FormGroup, FormBuilder, FormControl } from '@angular/forms'; +import { UserService} from '../shared/model/user.service'; + +@Component({ + selector: 'app-settings', + templateUrl: './settings.component.html', + styleUrls: ['./settings.component.scss'] +}) +export class SettingsComponent implements OnInit { + + form: FormGroup; + userPfp: File; + finished: boolean; + + constructor(private fb: FormBuilder, private userService: UserService) { + this.form = fb.group({ + }); + } + + ngOnInit() { + } + + saveSettings() { + this.userService.uploadPfp(this.userPfp).subscribe(val => { + this.finished = true; + }, + console.log); + } + + onPfpChange($event) { + this.userPfp = $event.target.files[0]; + } +} diff --git a/src/app/shared/model/user.service.ts b/src/app/shared/model/user.service.ts index 789c29f..92da393 100644 --- a/src/app/shared/model/user.service.ts +++ b/src/app/shared/model/user.service.ts @@ -1,5 +1,6 @@ import { Injectable, Inject } from '@angular/core'; -import { AngularFireDatabase, FirebaseRef } from 'angularfire2'; +import { AngularFireDatabase, FirebaseRef, FirebaseAuthState } from 'angularfire2'; +import { AuthService } from '../security/auth.service'; import { Observable, Subject } from 'rxjs/Rx'; import { User } from './user'; @@ -7,9 +8,25 @@ import { User } from './user'; export class UserService { sdkDb: any; + sdkStorage: any; + uid: string; - constructor(@Inject(FirebaseRef) fb, private db: AngularFireDatabase) { + constructor(@Inject(FirebaseRef) fb, private db: AngularFireDatabase, private auth: AuthService) { this.sdkDb = fb.database().ref(); + this.sdkStorage = fb.storage().ref(); + auth.auth$.subscribe(val => this.uid = val ? val.uid : undefined); + } + + login(email: string, password: string): Observable { + return this.auth.login(email, password); + } + + register(email: string, password: string): Observable { + return this.auth.register(email, password) + .flatMap(val => { + let newUid = val.uid; + return this.saveUser({email}, newUid); + }) } saveUser(user: any, uid: string): Observable { @@ -30,6 +47,17 @@ export class UserService { .map(User.fromJson); } + uploadPfp(pfp: File): Observable { + if (!this.uid) return Observable.throw('Rip no login info'); + return Observable.from(this.sdkStorage.child(`userPfps/${this.uid}/`).put(pfp)) + .flatMap((snap: any) => { + let userToSave = Object.assign({}, {pfp: snap.metadata.downloadURLs[0]}); + let dataToSave = {}; + dataToSave[`users/${this.uid}`] = userToSave; + return this.firebaseUpdate(dataToSave); + }); + } + private firebaseUpdate(dataToSave) { const subject = new Subject(); diff --git a/src/app/shared/security/auth.service.ts b/src/app/shared/security/auth.service.ts index df0a027..68a2ec5 100644 --- a/src/app/shared/security/auth.service.ts +++ b/src/app/shared/security/auth.service.ts @@ -2,14 +2,13 @@ import { Injectable } from '@angular/core'; import { Router } from '@angular/router'; import { Observable, Subject, BehaviorSubject } from 'rxjs/Rx'; import { FirebaseAuth, FirebaseAuthState } from 'angularfire2'; -import { UserService } from '../model/user.service'; @Injectable() export class AuthService { auth$: BehaviorSubject = new BehaviorSubject(null); - constructor (private auth: FirebaseAuth, private router: Router, private userService: UserService) { + constructor (private auth: FirebaseAuth, private router: Router) { this.auth.subscribe( data => { this.auth$.next(data); @@ -25,11 +24,7 @@ export class AuthService { } register(email: string, password: string): Observable { - return this.fromFirebaseAuthPromise(this.auth.createUser({ email, password })) - .flatMap(val => { - let userUid = this.auth.getAuth().uid; - return this.userService.saveUser({email}, userUid); - }); + return this.fromFirebaseAuthPromise(this.auth.createUser({ email, password })); } fromFirebaseAuthPromise(promise): Observable {