7 |
2 |
46 |
--------------------------------------------------------------------------------
/spa-blue-green-deployments/app/src/app/auth/auth.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
2 | import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
3 | import { ActivatedRoute, Router } from '@angular/router';
4 |
5 | import { Errors, UserService } from '../core';
6 |
7 | @Component({
8 | selector: 'app-auth-page',
9 | templateUrl: './auth.component.html',
10 | changeDetection: ChangeDetectionStrategy.OnPush
11 | })
12 | export class AuthComponent implements OnInit {
13 | authType: String = '';
14 | title: String = '';
15 | errors: Errors = {errors: {}};
16 | isSubmitting = false;
17 | authForm: FormGroup;
18 |
19 | constructor(
20 | private route: ActivatedRoute,
21 | private router: Router,
22 | private userService: UserService,
23 | private fb: FormBuilder,
24 | private cd: ChangeDetectorRef
25 | ) {
26 | // use FormBuilder to create a form group
27 | this.authForm = this.fb.group({
28 | 'email': ['', Validators.required],
29 | 'password': ['', Validators.required]
30 | });
31 | }
32 |
33 | ngOnInit() {
34 | this.route.url.subscribe(data => {
35 | // Get the last piece of the URL (it's either 'login' or 'register')
36 | this.authType = data[data.length - 1].path;
37 | // Set a title for the page accordingly
38 | this.title = (this.authType === 'login') ? 'Sign in' : 'Sign up';
39 | // add form control for username if this is the register page
40 | if (this.authType === 'register') {
41 | this.authForm.addControl('username', new FormControl());
42 | }
43 | this.cd.markForCheck();
44 | });
45 | }
46 |
47 | submitForm() {
48 | this.isSubmitting = true;
49 | this.errors = {errors: {}};
50 |
51 | const credentials = this.authForm.value;
52 | this.userService
53 | .attemptAuth(this.authType, credentials)
54 | .subscribe(
55 | data => this.router.navigateByUrl('/'),
56 | err => {
57 | this.errors = err;
58 | this.isSubmitting = false;
59 | this.cd.markForCheck();
60 | }
61 | );
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/spa-blue-green-deployments/app/src/app/auth/auth.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { AuthComponent } from './auth.component';
4 | import { NoAuthGuard } from './no-auth-guard.service';
5 | import { SharedModule } from '../shared';
6 | import { AuthRoutingModule } from './auth-routing.module';
7 |
8 | @NgModule({
9 | imports: [
10 | SharedModule,
11 | AuthRoutingModule
12 | ],
13 | declarations: [
14 | AuthComponent
15 | ],
16 | providers: [
17 | NoAuthGuard
18 | ]
19 | })
20 | export class AuthModule {}
21 |
--------------------------------------------------------------------------------
/spa-blue-green-deployments/app/src/app/auth/no-auth-guard.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
3 | import { Observable } from 'rxjs';
4 |
5 | import { UserService } from '../core';
6 | import { map , take } from 'rxjs/operators';
7 |
8 | @Injectable()
9 | export class NoAuthGuard implements CanActivate {
10 | constructor(
11 | private router: Router,
12 | private userService: UserService
13 | ) {}
14 |
15 | canActivate(
16 | route: ActivatedRouteSnapshot,
17 | state: RouterStateSnapshot
18 | ): Observable
3 |
45 |
4 |
5 |
42 |
43 |
44 |
2 |
60 |
--------------------------------------------------------------------------------
/spa-blue-green-deployments/app/src/app/editor/editor.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 |
4 | import { EditorComponent } from './editor.component';
5 |
6 | import { SharedModule } from '../shared';
7 | import { EditorRoutingModule } from './editor-routing.module';
8 |
9 | @NgModule({
10 | imports: [SharedModule, EditorRoutingModule],
11 | declarations: [EditorComponent],
12 | providers: []
13 | })
14 | export class EditorModule {}
15 |
--------------------------------------------------------------------------------
/spa-blue-green-deployments/app/src/app/home/home-auth-resolver.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
3 | import { Observable } from 'rxjs';
4 |
5 | import { UserService } from '../core';
6 | import { take } from 'rxjs/operators';
7 |
8 | @Injectable({
9 | providedIn: 'root'
10 | })
11 | export class HomeAuthResolver implements Resolve
3 |
59 |
4 |
58 |
5 |
6 |
57 |
2 |
3 |
9 |
10 |
66 |
--------------------------------------------------------------------------------
/spa-blue-green-deployments/app/src/app/home/home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
2 | import { Router } from '@angular/router';
3 |
4 | import { ArticleListConfig, TagsService, UserService } from '../core';
5 |
6 | @Component({
7 | selector: 'app-home-page',
8 | templateUrl: './home.component.html',
9 | styleUrls: ['./home.component.css'],
10 | changeDetection: ChangeDetectionStrategy.OnPush
11 | })
12 | export class HomeComponent implements OnInit {
13 | constructor(
14 | private router: Router,
15 | private tagsService: TagsService,
16 | private userService: UserService,
17 | private cd: ChangeDetectorRef
18 | ) {}
19 |
20 | isAuthenticated: boolean;
21 | listConfig: ArticleListConfig = {
22 | type: 'all',
23 | filters: {}
24 | };
25 | tags: Array
11 |
65 |
12 |
13 |
64 |
14 |
40 |
41 |
15 |
36 |
37 |
38 |
42 |
61 |
62 |
63 |
2 |
3 |
59 |
--------------------------------------------------------------------------------
/spa-blue-green-deployments/app/src/app/profile/profile.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
2 | import { ActivatedRoute } from '@angular/router';
3 |
4 | import { User, UserService, Profile } from '../core';
5 | import { concatMap , tap } from 'rxjs/operators';
6 |
7 | @Component({
8 | selector: 'app-profile-page',
9 | templateUrl: './profile.component.html',
10 | changeDetection: ChangeDetectionStrategy.OnPush
11 | })
12 | export class ProfileComponent implements OnInit {
13 | constructor(
14 | private route: ActivatedRoute,
15 | private userService: UserService,
16 | private cd: ChangeDetectorRef
17 | ) { }
18 |
19 | profile: Profile;
20 | currentUser: User;
21 | isUser: boolean;
22 |
23 | ngOnInit() {
24 | this.route.data.pipe(
25 | concatMap((data: { profile: Profile }) => {
26 | this.profile = data.profile;
27 | // Load the current user's data.
28 | return this.userService.currentUser.pipe(tap(
29 | (userData: User) => {
30 | this.currentUser = userData;
31 | this.isUser = (this.currentUser.username === this.profile.username);
32 | }
33 | ));
34 | })
35 | ).subscribe((() => {
36 | this.cd.markForCheck();
37 | }));
38 | }
39 |
40 | onToggleFollowing(following: boolean) {
41 | this.profile.following = following;
42 | }
43 |
44 | }
45 |
--------------------------------------------------------------------------------
/spa-blue-green-deployments/app/src/app/profile/profile.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { ProfileArticlesComponent } from './profile-articles.component';
4 | import { ProfileComponent } from './profile.component';
5 | import { ProfileFavoritesComponent } from './profile-favorites.component';
6 | import { SharedModule } from '../shared';
7 | import { ProfileRoutingModule } from './profile-routing.module';
8 |
9 | @NgModule({
10 | imports: [
11 | SharedModule,
12 | ProfileRoutingModule
13 | ],
14 | declarations: [
15 | ProfileArticlesComponent,
16 | ProfileComponent,
17 | ProfileFavoritesComponent
18 | ],
19 | providers: [
20 | ]
21 | })
22 | export class ProfileModule {}
23 |
--------------------------------------------------------------------------------
/spa-blue-green-deployments/app/src/app/settings/settings-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { RouterModule, Routes } from '@angular/router';
3 | import { AuthGuard } from '../core';
4 | import { SettingsComponent } from './settings.component';
5 |
6 | const routes: Routes = [
7 | {
8 | path: '',
9 | component: SettingsComponent,
10 | canActivate: [AuthGuard]
11 | }
12 | ];
13 |
14 | @NgModule({
15 | imports: [RouterModule.forChild(routes)],
16 | exports: [RouterModule]
17 | })
18 | export class SettingsRoutingModule {}
19 |
--------------------------------------------------------------------------------
/spa-blue-green-deployments/app/src/app/settings/settings.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
2 | import { FormBuilder, FormGroup } from '@angular/forms';
3 | import { Router } from '@angular/router';
4 |
5 | import { User, UserService } from '../core';
6 |
7 | @Component({
8 | selector: 'app-settings-page',
9 | templateUrl: './settings.component.html',
10 | changeDetection: ChangeDetectionStrategy.OnPush
11 | })
12 | export class SettingsComponent implements OnInit {
13 | user: User = {} as User;
14 | settingsForm: FormGroup;
15 | errors: Object = {};
16 | isSubmitting = false;
17 |
18 | constructor(
19 | private router: Router,
20 | private userService: UserService,
21 | private fb: FormBuilder,
22 | private cd: ChangeDetectorRef
23 | ) {
24 | // create form group using the form builder
25 | this.settingsForm = this.fb.group({
26 | image: '',
27 | username: '',
28 | bio: '',
29 | email: '',
30 | password: ''
31 | });
32 | // Optional: subscribe to changes on the form
33 | // this.settingsForm.valueChanges.subscribe(values => this.updateUser(values));
34 | }
35 |
36 | ngOnInit() {
37 | // Make a fresh copy of the current user's object to place in editable form fields
38 | Object.assign(this.user, this.userService.getCurrentUser());
39 | // Fill the form
40 | this.settingsForm.patchValue(this.user);
41 | }
42 |
43 | logout() {
44 | this.userService.purgeAuth();
45 | this.router.navigateByUrl('/');
46 | }
47 |
48 | submitForm() {
49 | this.isSubmitting = true;
50 |
51 | // update the model
52 | this.updateUser(this.settingsForm.value);
53 |
54 | this.userService
55 | .update(this.user)
56 | .subscribe(
57 | updatedUser => this.router.navigateByUrl('/profile/' + updatedUser.username),
58 | err => {
59 | this.errors = err;
60 | this.isSubmitting = false;
61 | this.cd.markForCheck();
62 | }
63 | );
64 | }
65 |
66 | updateUser(values: Object) {
67 | Object.assign(this.user, values);
68 | }
69 |
70 | }
71 |
--------------------------------------------------------------------------------
/spa-blue-green-deployments/app/src/app/settings/settings.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { SettingsComponent } from './settings.component';
4 | import { SharedModule } from '../shared';
5 | import { SettingsRoutingModule } from './settings-routing.module';
6 |
7 | @NgModule({
8 | imports: [
9 | SharedModule,
10 | SettingsRoutingModule
11 | ],
12 | declarations: [
13 | SettingsComponent
14 | ]
15 | })
16 | export class SettingsModule {}
17 |
--------------------------------------------------------------------------------
/spa-blue-green-deployments/app/src/app/shared/article-helpers/article-list.component.css:
--------------------------------------------------------------------------------
1 | .page-link {
2 | cursor: pointer;
3 | }
4 |
--------------------------------------------------------------------------------
/spa-blue-green-deployments/app/src/app/shared/article-helpers/article-list.component.html:
--------------------------------------------------------------------------------
1 |
4 |
26 |
27 |
5 |
25 |
6 |
7 |
24 |
8 | ![user image]()
9 |
15 |
16 |
19 | Edit Profile Settings
20 |
21 |
22 |
23 | {{ profile.username }}
10 |{{ profile.bio }}
11 |
28 |
57 |
58 |
29 |
30 |
56 |
31 |
54 |
55 |
32 |
50 |
51 |
52 |
8 | Loading articles...
9 |
10 |
11 |
13 | No articles are here... yet.
14 |
15 |
16 |
30 |
--------------------------------------------------------------------------------
/spa-blue-green-deployments/app/src/app/shared/article-helpers/article-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
2 |
3 | import { Article, ArticleListConfig, ArticlesService } from '../../core';
4 | @Component({
5 | selector: 'app-article-list',
6 | styleUrls: ['article-list.component.css'],
7 | templateUrl: './article-list.component.html',
8 | changeDetection: ChangeDetectionStrategy.OnPush
9 | })
10 | export class ArticleListComponent {
11 | constructor (
12 | private articlesService: ArticlesService,
13 | private cd: ChangeDetectorRef
14 | ) {}
15 |
16 | @Input() limit: number;
17 | @Input()
18 | set config(config: ArticleListConfig) {
19 | if (config) {
20 | this.query = config;
21 | this.currentPage = 1;
22 | this.runQuery();
23 | }
24 | }
25 |
26 | query: ArticleListConfig;
27 | results: Article[];
28 | loading = false;
29 | currentPage = 1;
30 | totalPages: Array
2 |
3 | ![author image]()
4 |
5 |
6 |
18 |
--------------------------------------------------------------------------------
/spa-blue-green-deployments/app/src/app/shared/article-helpers/article-meta.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
2 |
3 | import { Article } from '../../core';
4 |
5 | @Component({
6 | selector: 'app-article-meta',
7 | templateUrl: './article-meta.component.html',
8 | changeDetection: ChangeDetectionStrategy.OnPush
9 | })
10 | export class ArticleMetaComponent {
11 | @Input() article: Article;
12 | }
13 |
--------------------------------------------------------------------------------
/spa-blue-green-deployments/app/src/app/shared/article-helpers/article-preview.component.html:
--------------------------------------------------------------------------------
1 |
7 |
9 | {{ article.author.username }}
10 |
11 |
12 | {{ article.createdAt | date: 'longDate' }}
13 |
14 |
15 |
16 |
2 |
3 |
7 | {{article.favoritesCount}}
8 |
9 |
10 |
11 |
12 |
23 |
--------------------------------------------------------------------------------
/spa-blue-green-deployments/app/src/app/shared/article-helpers/article-preview.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
2 |
3 | import { Article } from '../../core';
4 |
5 | @Component({
6 | selector: 'app-article-preview',
7 | templateUrl: './article-preview.component.html',
8 | changeDetection: ChangeDetectionStrategy.OnPush
9 | })
10 | export class ArticlePreviewComponent {
11 | @Input() article: Article;
12 |
13 | trackByFn(index, item) {
14 | return index;
15 | }
16 |
17 | onToggleFavorite(favorited: boolean) {
18 | this.article['favorited'] = favorited;
19 |
20 | if (favorited) {
21 | this.article['favoritesCount']++;
22 | } else {
23 | this.article['favoritesCount']--;
24 | }
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/spa-blue-green-deployments/app/src/app/shared/article-helpers/index.ts:
--------------------------------------------------------------------------------
1 | export * from './article-list.component';
2 | export * from './article-meta.component';
3 | export * from './article-preview.component';
4 |
--------------------------------------------------------------------------------
/spa-blue-green-deployments/app/src/app/shared/buttons/favorite-button.component.html:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/spa-blue-green-deployments/app/src/app/shared/buttons/favorite-button.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
2 | import { Router } from '@angular/router';
3 |
4 | import { Article, ArticlesService, UserService } from '../../core';
5 | import { of } from 'rxjs';
6 | import { concatMap , tap } from 'rxjs/operators';
7 |
8 | @Component({
9 | selector: 'app-favorite-button',
10 | templateUrl: './favorite-button.component.html',
11 | changeDetection: ChangeDetectionStrategy.OnPush
12 | })
13 | export class FavoriteButtonComponent {
14 | constructor(
15 | private articlesService: ArticlesService,
16 | private router: Router,
17 | private userService: UserService,
18 | private cd: ChangeDetectorRef
19 | ) {}
20 |
21 | @Input() article: Article;
22 | @Output() toggle = new EventEmitter{{ article.title }}
13 |{{ article.description }}
14 | Read more... 15 | 21 | 22 |-
2 |
- 3 | {{ error }} 4 | 5 |