Skip to content

Commit 8b05355

Browse files
jeroenouwjeroenouw
authored
Merge pull request #3 from jeroenouw/development
Merge development into master
2 parents 613df04 + 2f0ee36 commit 8b05355

File tree

10 files changed

+195
-213
lines changed

10 files changed

+195
-213
lines changed

‎docs/FEATURES.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
* Auth Guard
1313
* Profile
1414
* Profile image animation
15+
* Profile settings
1516
* Password reset
1617
* Alerts
1718
* 360 view

‎docs/TODO.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
All improvements to this repo will first be done in the development branch.
22

33
## To Do List
4-
* Make every component responsive
4+
* Make every component responsive (flex-layout)
55

66
## To Finish List (known issues)
77
### Auth
@@ -11,7 +11,6 @@ All improvements to this repo will first be done in the development branch.
1111

1212
### Profile
1313
* Profile image uploading
14-
* Profile settings (change settings)
1514
* Messaging layout and functionality
1615

1716
### Tests

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngxmatfire",
3-
"version": "1.0.5",
3+
"version": "1.0.6",
44
"author": "Jeroen Ouwehand",
55
"description": "Full stack starter app with Angular 4, Material Design and Firebase.",
66
"keywords": [

‎src/app/components/profile/profile-settings.component.html‎

Lines changed: 25 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,31 @@
22
<md-card>
33
<h3>My profile settings</h3>
44

5-
<form class="form" (ngSubmit)="onUpdateUserInfo(sv)" #sv="ngForm">
6-
7-
<md-input-container class="form-group">
8-
<input mdInput placeholder="Username" type="displayName" id="displayName" name="displayName" ngModel>
9-
</md-input-container>
10-
11-
<md-input-container class="form-group">
12-
<textarea mdInput placeholder="Short Bio" rows="8" id="bio" name="bio" ngModel></textarea>
13-
</md-input-container>
14-
15-
<!-- <md-input-container class="form-group">
16-
<input mdInput placeholder="Email" type="email" id="email" name="email" ngModel>
17-
</md-input-container>
18-
19-
<md-input-container class="form-group">
20-
<input mdInput placeholder="Password" type="password" id="password" name="password" ngModel>
21-
</md-input-container> -->
22-
23-
<hr>
24-
25-
<!-- <md-card-actions class="button">
26-
<button md-raised-button class="primary" (click)="onSaveData()">Save Settings</button>
27-
</md-card-actions> -->
28-
29-
<md-card-actions class="button">
30-
<button md-raised-button class="primary" (click)="onLogout()">Logout</button>
31-
</md-card-actions>
32-
33-
</form>
34-
35-
<md-card-actions class="button">
36-
<button md-raised-button class="primary" (click)="onPasswordReset()">Reset Password</button>
37-
</md-card-actions>
5+
<form class="form" (ngSubmit)="onUpdateUserInfo(sv)" #sv="ngForm">
6+
7+
<md-input-container class="form-group">
8+
<input mdInput placeholder="Username" id="displayName" name="displayName" [(ngModel)]="displayName" required>
9+
</md-input-container>
10+
11+
<md-input-container class="form-group">
12+
<textarea mdInput placeholder="Short Bio" rows="6" id="bio" name="bio" [(ngModel)]="bio" required></textarea>
13+
</md-input-container>
14+
15+
<hr>
16+
17+
<md-card-actions class="button">
18+
<button md-raised-button class="primary" type="submit">Save Settings</button>
19+
</md-card-actions>
20+
21+
<md-card-actions class="button">
22+
<button md-raised-button class="primary" (click)="onLogout()">Logout</button>
23+
</md-card-actions>
24+
25+
<md-card-actions class="button">
26+
<button md-raised-button class="primary" (click)="onPasswordReset()">Reset Password</button>
27+
</md-card-actions>
28+
29+
</form>
3830

3931
</md-card>
4032
</div>

‎src/app/components/profile/profile-settings.component.ts‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,30 @@ import { NgForm, FormsModule, FormBuilder, FormGroup, ReactiveFormsModule } from
44

55
import * as firebase from 'firebase';
66

7-
import { User, Profile, AuthService, AlertService, UserService } from '../shared';
7+
import { Profile, AuthService, AlertService, UserService } from '../shared';
88

99
@Component({
1010
selector: 'app-profile-settings',
1111
templateUrl: './profile-settings.component.html',
1212
styleUrls: ['./profile-settings.component.scss']
1313
})
1414
export class ProfileSettingsComponent implements OnInit {
15-
user: User = new User();
16-
settingsForm: FormGroup;
17-
errors: Object = {};
18-
isSubmitting = false;
15+
uid = firebase.auth().currentUser.uid;
16+
displayName: string = "Your username";
17+
bio: any = "Your bio";
1918

2019
constructor(
21-
private router: Router,
2220
private authService: AuthService,
2321
private alertService: AlertService,
24-
private userService: UserService,
25-
private fb: FormBuilder) {
22+
private userService: UserService) {
2623
}
2724

2825
ngOnInit() {
29-
}
26+
firebase.database().ref().child(`users/${this.uid}`).once('value').then((snap) => {
27+
this.displayName = snap.val().displayName;
28+
this.bio = snap.val().bio;
29+
});
30+
}
3031

3132
onPasswordReset() {
3233
this.userService.sendUserPasswordResetEmail();

‎src/app/components/profile/profile.component.html‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
11
<div class="profile">
22
<md-card>
3-
43
<div [@imageAnimation]='state' (click)="animateImage()" class="avatar"><img [src]="fullImagePath"></div>
5-
4+
65
<md-card-header>
76
<md-card-title><h3>{{profileTitle}}</h3></md-card-title>
87
<md-card-title><h4>{{userEmail()}}</h4>
9-
<md-card-subtitle>({{userName()}})</md-card-subtitle>
10-
<md-card-subtitle>{{user.uid}}</md-card-subtitle>
8+
<md-card-subtitle>{{displayName}}</md-card-subtitle>
119
</md-card-title>
1210
</md-card-header>
1311

14-
<hr />
15-
16-
<!-- <md-card-subtitle>{{profileBio}}</md-card-subtitle> -->
12+
<hr>
13+
14+
<md-card-subtitle>{{bio}}</md-card-subtitle>
1715

1816
<md-card-actions class="button">
1917
<button md-raised-button class="primary" (click)="onPasswordReset()">Reset my password</button>

‎src/app/components/profile/profile.component.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
md-card {
66
width: 400px;
7-
height: 390px;
7+
height: 460px;
88
margin: 100px auto;
99
}
1010

@@ -38,5 +38,7 @@ a:hover {
3838
}
3939

4040
.button {
41+
position: absolute;
42+
bottom: 35px;
4143
margin: 0 auto;
4244
}

‎src/app/components/profile/profile.component.ts‎

Lines changed: 14 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component, OnInit } from '@angular/core';
22
import { ActivatedRoute, Params } from '@angular/router';
33
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
4+
45
import * as firebase from 'firebase';
56

67
import { User, Profile, UserService, AlertService } from '../shared';
@@ -27,32 +28,27 @@ import { User, Profile, UserService, AlertService } from '../shared';
2728
]
2829
})
2930
export class ProfileComponent implements OnInit {
30-
profile: Profile;
31-
currentUser: User;
32-
user: {uid: any};
31+
uid = firebase.auth().currentUser.uid;
3332

34-
profileTitle = 'My profile';
35-
// profileBio: string = 'Here you can place your own personal bio text.';
3633
fullImagePath: string;
34+
profileTitle: string = 'My profile';
35+
displayName: string = "Your username";
36+
bio: any = "Your bio";
3737

3838
state = 'small';
3939

40-
constructor(private route: ActivatedRoute,
41-
private userService: UserService,
42-
private alertService: AlertService) {
43-
this.fullImagePath = '/assets/img/mb-bg-04.png';
40+
constructor(
41+
private route: ActivatedRoute,
42+
private userService: UserService,
43+
private alertService: AlertService) {
44+
this.fullImagePath = '/assets/img/mb-bg-04.png';
4445
}
4546

4647
ngOnInit() {
47-
this.user = {
48-
uid: this.route.snapshot.params['uid']
49-
};
50-
this.route.params
51-
.subscribe(
52-
(params: Params) => {
53-
this.user.uid = params['uid'];
54-
}
55-
);
48+
firebase.database().ref().child('users/' + this.uid).once('value').then((snap) => {
49+
this.displayName = snap.val().displayName,
50+
this.bio = snap.val().bio
51+
});
5652
}
5753

5854
animateImage() {
@@ -64,11 +60,6 @@ export class ProfileComponent implements OnInit {
6460
return firebase.auth().currentUser.email;
6561
}
6662

67-
userName() {
68-
this.userService.getUserProfileInformation();
69-
return firebase.auth().currentUser.displayName;
70-
}
71-
7263
onPasswordReset() {
7364
this.userService.sendUserPasswordResetEmail();
7465
this.alertService.showToaster('Reset password is sent to your email');

‎src/app/components/shared/layout/header/header.component.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -103,8 +103,7 @@ <h4>(User: {{userEmail()}})</h4>
103103
<md-icon class="login">{{item.icon}}</md-icon>
104104
<span>{{item.title}}</span>
105105
</a>
106-
107-
<!--
106+
108107
<a
109108
md-menu-item
110109
routerLink="/profile-settings"
@@ -113,7 +112,6 @@ <h4>(User: {{userEmail()}})</h4>
113112
<md-icon class="settings">settings</md-icon>
114113
<span>Settings</span>
115114
</a>
116-
-->
117115

118116
<a md-menu-item (click)="onLogout()">
119117
<md-icon class="logout">lock_outline</md-icon>

0 commit comments

Comments
 (0)