submit profile picture in settings

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,

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']);
 			},

src/app/navbar/navbar.component.html

@@ -29,6 +29,9 @@
 				<li class="nav-item">
 					<a class="nav-link" routerLink="whiteboard" routerLinkActive="active">Whiteboard</a>
 				</li>
+				<li class="nav-item">
+					<a class="nav-link" routerLink="settings" routerLinkActive="active">Settings</a>
+				</li>
 			</ul>
 
 			<!-- If user is logged out -->

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']);
 			},

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
 	}
 ];

src/app/settings/settings.component.html

@@ -0,0 +1,7 @@
+<h1>Settings</h1>
+<form [formGroup]="form" (ngSubmit)="saveSettings()">
+  <h2>Profile picture</h2>
+  <input type="file" (change)="onPfpChange($event)">
+  <button>submit</button>
+</form>
+<h2 *ngIf="finished">changes saved</h2>

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<SettingsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SettingsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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];
+	}
+}

src/app/shared/model/user.service.ts

@@ -1,15 +1,32 @@
 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';
 
 @Injectable()
 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<FirebaseAuthState> {
+		return this.auth.login(email, password);
+	}
+
+	register(email: string, password: string): Observable<any> {
+		return this.auth.register(email, password)
+			.flatMap(val => {
+				let newUid = val.uid;
+				return this.saveUser({email}, newUid);
+			})
 	}
 
 	saveUser(user: any, uid: string): Observable<any> {
@@ -30,6 +47,17 @@ export class UserService {
 		.map(User.fromJson);
 	}
 
+	uploadPfp(pfp: File): Observable<any> {
+		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();
 

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<FirebaseAuthState> = 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<FirebaseAuthState> {
-		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<any> {