From 3f9d5f45f9bf94f907716dc6566980763fc90150 Mon Sep 17 00:00:00 2001 From: Yannick Baron Date: Thu, 27 Oct 2016 13:25:57 +0200 Subject: [PATCH 1/8] auth.component: fixed minor tslint complaint --- src/app/auth/auth.component.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/app/auth/auth.component.ts b/src/app/auth/auth.component.ts index f5d63df4..8820f031 100644 --- a/src/app/auth/auth.component.ts +++ b/src/app/auth/auth.component.ts @@ -8,22 +8,22 @@ import { Errors, UserService } from '../shared'; templateUrl: './auth.component.html' }) export class AuthComponent implements OnInit { - constructor( - private route: ActivatedRoute, - private router: Router, - private userService: UserService - ) {} - authType: String = ''; title: String = ''; errors: Errors = new Errors(); credentials: Object = {}; isSubmitting: boolean = false; + constructor( + private route: ActivatedRoute, + private router: Router, + private userService: UserService + ) {} + ngOnInit() { this.route.url.subscribe(data => { // Get the last piece of the URL (it's either 'login' or 'register') - this.authType = data[data.length-1].path; + this.authType = data[data.length - 1].path; // Set a title for the page accordingly this.title = (this.authType === 'login') ? 'Sign in' : 'Sign up'; }); From 068b7e4bbab7d7903811dfe7d6b0e46fb826d558 Mon Sep 17 00:00:00 2001 From: Yannick Baron Date: Thu, 27 Oct 2016 13:49:35 +0200 Subject: [PATCH 2/8] user.service: fixed minor tslint complaint --- src/app/shared/services/user.service.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/shared/services/user.service.ts b/src/app/shared/services/user.service.ts index 2f4206c1..271efbdb 100644 --- a/src/app/shared/services/user.service.ts +++ b/src/app/shared/services/user.service.ts @@ -13,18 +13,18 @@ import { User } from '../models'; @Injectable() export class UserService { - constructor ( - private apiService: ApiService, - private http: Http, - private jwtService: JwtService - ) {} - private currentUserSubject = new BehaviorSubject(new User()); public currentUser = this.currentUserSubject.asObservable().distinctUntilChanged(); private isAuthenticatedSubject = new ReplaySubject(1); public isAuthenticated = this.isAuthenticatedSubject.asObservable(); + constructor ( + private apiService: ApiService, + private http: Http, + private jwtService: JwtService + ) {} + // Verify JWT in localstorage with server & load user's info. // This runs once on application startup. populate() { From 7eb3e2ad6aaee7036d0b9daa1fd9d09d7b419ed4 Mon Sep 17 00:00:00 2001 From: Yannick Baron Date: Thu, 27 Oct 2016 13:50:04 +0200 Subject: [PATCH 3/8] added ReactiveFormsModule to SharedModule --- src/app/shared/shared.module.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index b6e95d4c..463897a0 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { RouterModule } from '@angular/router'; @@ -13,6 +13,7 @@ import { ShowAuthedDirective } from './show-authed.directive'; imports: [ CommonModule, FormsModule, + ReactiveFormsModule, HttpModule, RouterModule ], @@ -33,6 +34,7 @@ import { ShowAuthedDirective } from './show-authed.directive'; FavoriteButtonComponent, FollowButtonComponent, FormsModule, + ReactiveFormsModule, HttpModule, ListErrorsComponent, RouterModule, From 7be69e3a454997fef04b36b022d02d5de76e19a2 Mon Sep 17 00:00:00 2001 From: Yannick Baron Date: Thu, 27 Oct 2016 13:56:28 +0200 Subject: [PATCH 4/8] auth.component: making use of the (reactive) forms api --- src/app/auth/auth.component.html | 11 ++++------- src/app/auth/auth.component.ts | 21 +++++++++++++++++---- 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/src/app/auth/auth.component.html b/src/app/auth/auth.component.html index 63984355..beba6eed 100644 --- a/src/app/auth/auth.component.html +++ b/src/app/auth/auth.component.html @@ -9,12 +9,11 @@

{{ title }}

Need an account?

-
+
{{ title }}
diff --git a/src/app/auth/auth.component.ts b/src/app/auth/auth.component.ts index 8820f031..73b0eca1 100644 --- a/src/app/auth/auth.component.ts +++ b/src/app/auth/auth.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup, FormControl } from '@angular/forms'; import { ActivatedRoute, Router } from '@angular/router'; import { Errors, UserService } from '../shared'; @@ -11,14 +12,21 @@ export class AuthComponent implements OnInit { authType: String = ''; title: String = ''; errors: Errors = new Errors(); - credentials: Object = {}; isSubmitting: boolean = false; + authForm: FormGroup; constructor( private route: ActivatedRoute, private router: Router, - private userService: UserService - ) {} + private userService: UserService, + private fb: FormBuilder + ) { + // use FormBuilder to create a form group + this.authForm = this.fb.group({ + 'email': '', + 'password': '' + }); + } ngOnInit() { this.route.url.subscribe(data => { @@ -26,6 +34,10 @@ export class AuthComponent implements OnInit { this.authType = data[data.length - 1].path; // Set a title for the page accordingly this.title = (this.authType === 'login') ? 'Sign in' : 'Sign up'; + // add form control for username if this is the register page + if (this.authType === 'register') { + this.authForm.addControl('username', new FormControl()); + } }); } @@ -33,8 +45,9 @@ export class AuthComponent implements OnInit { this.isSubmitting = true; this.errors = new Errors(); + let credentials = this.authForm.value; this.userService - .attemptAuth(this.authType, this.credentials) + .attemptAuth(this.authType, credentials) .subscribe( data => this.router.navigateByUrl('/'), err => { From 617dc93f8ca6426a3f61f6fa86f4873fc6f5b17b Mon Sep 17 00:00:00 2001 From: Yannick Baron Date: Thu, 27 Oct 2016 13:58:06 +0200 Subject: [PATCH 5/8] article.component: fixed minor tslint complaint --- src/app/article/article.component.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/app/article/article.component.ts b/src/app/article/article.component.ts index 22c6c077..1c8301dd 100644 --- a/src/app/article/article.component.ts +++ b/src/app/article/article.component.ts @@ -15,14 +15,6 @@ import { templateUrl: './article.component.html' }) export class ArticleComponent implements OnInit { - constructor( - private route: ActivatedRoute, - private articlesService: ArticlesService, - private commentsService: CommentsService, - private router: Router, - private userService: UserService - ) {} - article: Article; currentUser: User; canModify: boolean; @@ -32,6 +24,14 @@ export class ArticleComponent implements OnInit { isSubmitting = false; isDeleting = false; + constructor( + private route: ActivatedRoute, + private articlesService: ArticlesService, + private commentsService: CommentsService, + private router: Router, + private userService: UserService + ) {} + ngOnInit() { // Retreive the prefetched article this.route.data.subscribe( From b7d7c00502ae0e9efebfbaee0055041f82fa1ecf Mon Sep 17 00:00:00 2001 From: Yannick Baron Date: Thu, 27 Oct 2016 16:01:56 +0200 Subject: [PATCH 6/8] editor.component: using the reactive forms api --- src/app/editor/editor.component.html | 16 ++++----- src/app/editor/editor.component.ts | 51 +++++++++++++++++++++------- 2 files changed, 44 insertions(+), 23 deletions(-) diff --git a/src/app/editor/editor.component.html b/src/app/editor/editor.component.html index bae52df5..f89e8a28 100644 --- a/src/app/editor/editor.component.html +++ b/src/app/editor/editor.component.html @@ -5,30 +5,27 @@ - +
@@ -37,9 +34,8 @@ + [formControl]="tagField" + (keyup.enter)="addTag()" />
this.updateArticle(value)); + } + ngOnInit() { // If there's an article prefetched, load it this.route.data.subscribe( (data: {article: Article}) => { if (data.article) { this.article = data.article; + this.articleForm.patchValue(data.article); } } ); } - addTag(event) { - if (event.keyCode === 13) { - this.article.tagList.push(this.tagField); - this.tagField = ''; + addTag() { + // retrieve tag control + let tag = this.tagField.value; + // only add tag if it does not exist yet + if (this.article.tagList.indexOf(tag) < 0) { + this.article.tagList.push(tag); } + // clear the input + this.tagField.reset(''); } - removeTag(tagName) { - this.article.tagList = this.article.tagList.filter((slug) => slug != tagName); + removeTag(tagName: string) { + this.article.tagList = this.article.tagList.filter((tag) => tag !== tagName); } submitForm() { this.isSubmitting = true; + // update the model + this.updateArticle(this.articleForm.value); + + // post the changes this.articlesService .save(this.article) .subscribe( @@ -54,4 +75,8 @@ export class EditorComponent implements OnInit { } ); } + + updateArticle(values: Object) { + (Object).assign(this.article, values); + } } From a25391e116d0587cf71d8d923ff18db4191e38ba Mon Sep 17 00:00:00 2001 From: Yannick Baron Date: Thu, 27 Oct 2016 16:35:49 +0200 Subject: [PATCH 7/8] settings.component: used reactive forms --- src/app/settings/settings.component.html | 17 ++++------ src/app/settings/settings.component.ts | 42 +++++++++++++++++++----- 2 files changed, 40 insertions(+), 19 deletions(-) diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html index 59ed4975..c98b3123 100644 --- a/src/app/settings/settings.component.html +++ b/src/app/settings/settings.component.html @@ -7,31 +7,28 @@

Your Settings

- +
+ formControlName="image" />
+ formControlName="username" />
@@ -39,16 +36,14 @@

Your Settings

+ formControlName="email" />
+ formControlName="password" />
diff --git a/src/app/article/article.component.ts b/src/app/article/article.component.ts index 1c8301dd..f122ac60 100644 --- a/src/app/article/article.component.ts +++ b/src/app/article/article.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { FormControl } from '@angular/forms'; import { ActivatedRoute, Router } from '@angular/router'; import { @@ -19,7 +20,7 @@ export class ArticleComponent implements OnInit { currentUser: User; canModify: boolean; comments: Comment[]; - commentBody = ''; + commentControl = new FormControl(); commentFormErrors = {}; isSubmitting = false; isDeleting = false; @@ -29,13 +30,13 @@ export class ArticleComponent implements OnInit { private articlesService: ArticlesService, private commentsService: CommentsService, private router: Router, - private userService: UserService - ) {} + private userService: UserService, + ) { } ngOnInit() { // Retreive the prefetched article this.route.data.subscribe( - (data: {article: Article}) => { + (data: { article: Article }) => { this.article = data.article; // Load the comments on this article @@ -71,44 +72,45 @@ export class ArticleComponent implements OnInit { this.isDeleting = true; this.articlesService.destroy(this.article.slug) - .subscribe( - success => { - this.router.navigateByUrl('/'); - } - ); + .subscribe( + success => { + this.router.navigateByUrl('/'); + } + ); } populateComments() { this.commentsService.getAll(this.article.slug) - .subscribe(comments => this.comments = comments); + .subscribe(comments => this.comments = comments); } addComment() { this.isSubmitting = true; this.commentFormErrors = {}; - this.commentsService - .add(this.article.slug, this.commentBody) - .subscribe( - comment => { - this.comments.unshift(comment); - this.commentBody = ''; - this.isSubmitting = false; - }, - errors => { - this.isSubmitting = false; - this.commentFormErrors = errors; - } - ) + let commentBody = this.commentControl.value; + this.commentsService + .add(this.article.slug, commentBody) + .subscribe( + comment => { + this.comments.unshift(comment); + this.commentControl.reset(''); + this.isSubmitting = false; + }, + errors => { + this.isSubmitting = false; + this.commentFormErrors = errors; + } + ); } onDeleteComment(comment) { this.commentsService.destroy(comment.id, this.article.slug) - .subscribe( - success => { - this.comments = this.comments.filter((item) => item != comment); - } - ); + .subscribe( + success => { + this.comments = this.comments.filter((item) => item !== comment); + } + ); } }