├── src
    ├── assets
    │   └── .gitkeep
    ├── app
    │   ├── app.component.css
    │   ├── home
    │   │   ├── home.component.css
    │   │   ├── home.component.ts
    │   │   ├── home.component.html
    │   │   └── home.component.spec.ts
    │   ├── post
    │   │   ├── post.component.css
    │   │   ├── post.component.html
    │   │   ├── post.component.spec.ts
    │   │   └── post.component.ts
    │   ├── auth
    │   │   ├── login
    │   │   │   ├── login.component.css
    │   │   │   ├── login.component.spec.ts
    │   │   │   ├── login.component.html
    │   │   │   └── login.component.ts
    │   │   ├── register
    │   │   │   ├── register.component.css
    │   │   │   ├── register.component.spec.ts
    │   │   │   ├── register.component.html
    │   │   │   └── register.component.ts
    │   │   ├── register-success
    │   │   │   ├── register-success.component.css
    │   │   │   ├── register-success.component.html
    │   │   │   ├── register-success.component.ts
    │   │   │   └── register-success.component.spec.ts
    │   │   ├── login-payload.ts
    │   │   ├── jwt-aut-response.ts
    │   │   ├── register-payload.ts
    │   │   ├── auth.service.spec.ts
    │   │   └── auth.service.ts
    │   ├── add-post
    │   │   ├── post-payload.ts
    │   │   ├── add-post.component.css
    │   │   ├── add-post.component.spec.ts
    │   │   ├── add-post.component.html
    │   │   └── add-post.component.ts
    │   ├── app.component.html
    │   ├── app.component.ts
    │   ├── app-routing.module.ts
    │   ├── add-post.service.spec.ts
    │   ├── auth.guard.spec.ts
    │   ├── header
    │   │   ├── header.component.ts
    │   │   ├── header.component.css
    │   │   ├── header.component.spec.ts
    │   │   └── header.component.html
    │   ├── auth.guard.ts
    │   ├── add-post.service.ts
    │   ├── http-client-interceptor.ts
    │   ├── app.component.spec.ts
    │   └── app.module.ts
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── favicon.ico
    ├── tsconfig.app.json
    ├── tsconfig.spec.json
    ├── index.html
    ├── tslint.json
    ├── main.ts
    ├── browserslist
    ├── styles.css
    ├── test.ts
    ├── karma.conf.js
    └── polyfills.ts
├── e2e
    ├── src
    │   ├── app.po.ts
    │   └── app.e2e-spec.ts
    ├── tsconfig.e2e.json
    └── protractor.conf.js
├── .editorconfig
├── tsconfig.json
├── .gitignore
├── README.md
├── package.json
├── tslint.json
└── angular.json


/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/home/home.component.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/post/post.component.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/auth/login/login.component.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/auth/register/register.component.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/auth/register-success/register-success.component.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaiUpadhyayula/ng-spring-blog-frontend/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/src/app/auth/login-payload.ts:
--------------------------------------------------------------------------------
1 | export class LoginPayload{
2 |   username: string;
3 |   password: string
4 | }
5 | 


--------------------------------------------------------------------------------
/src/app/auth/jwt-aut-response.ts:
--------------------------------------------------------------------------------
1 | export class JwtAutResponse {
2 |   authenticationToken: string;
3 |   username: string
4 | }
5 | 


--------------------------------------------------------------------------------
/src/app/add-post/post-payload.ts:
--------------------------------------------------------------------------------
1 | export class PostPayload{
2 |   id: String;
3 |   content: String;
4 |   title: String;
5 |   username: String
6 | }
7 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <!--The content below is only a placeholder and can be replaced.-->
2 | <app-header></app-header>
3 | <router-outlet></router-outlet>
4 | 


--------------------------------------------------------------------------------
/src/app/auth/register-payload.ts:
--------------------------------------------------------------------------------
1 | export class RegisterPayload {
2 |   username: String;
3 |   email: String;
4 |   password: String;
5 |   confirmPassword: String;
6 | }
7 | 


--------------------------------------------------------------------------------
/src/app/auth/register-success/register-success.component.html:
--------------------------------------------------------------------------------
1 | <div class="container">
2 |   <h3>Register successful, click <a href="/login">here</a> to Login</h3>
3 | </div>
4 | 


--------------------------------------------------------------------------------
/src/app/add-post/add-post.component.css:
--------------------------------------------------------------------------------
 1 | .add-post-content{
 2 |   padding-top: 20px;
 3 | }
 4 | 
 5 | .new-post-title{
 6 |   color: royalblue;
 7 | }
 8 | 
 9 | .post-content, .post-title{
10 |   color: royalblue;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "types": []
 6 |   },
 7 |   "exclude": [
 8 |     "test.ts",
 9 |     "**/*.spec.ts"
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getTitleText() {
 9 |     return element(by.css('app-root h1')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "module": "commonjs",
 6 |     "target": "es5",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "jasminewd2",
10 |       "node"
11 |     ]
12 |   }
13 | }


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-root',
 5 |   templateUrl: './app.component.html',
 6 |   styleUrls: ['./app.component.css']
 7 | })
 8 | export class AppComponent {
 9 |   title = 'ng-spring-blog-frontend';
10 | }
11 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { Routes, RouterModule } from '@angular/router';
 3 | 
 4 | const routes: Routes = [];
 5 | 
 6 | @NgModule({
 7 |   imports: [RouterModule.forRoot(routes)],
 8 |   exports: [RouterModule]
 9 | })
10 | export class AppRoutingModule { }
11 | 


--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "test.ts",
12 |     "polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "**/*.spec.ts",
16 |     "**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>NgSpringBlogFrontend</title>
 6 |   <base href="/">
 7 | 
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
10 | </head>
11 | <body>
12 |   <app-root></app-root>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('workspace-project App', () => {
 4 |   let page: AppPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AppPage();
 8 |   });
 9 | 
10 |   it('should display welcome message', () => {
11 |     page.navigateTo();
12 |     expect(page.getTitleText()).toEqual('Welcome to ng-spring-blog-frontend!');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/src/app/auth/auth.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | 
 3 | import { AuthService } from './auth.service';
 4 | 
 5 | describe('AuthService', () => {
 6 |   beforeEach(() => TestBed.configureTestingModule({}));
 7 | 
 8 |   it('should be created', () => {
 9 |     const service: AuthService = TestBed.get(AuthService);
10 |     expect(service).toBeTruthy();
11 |   });
12 | });
13 | 


--------------------------------------------------------------------------------
/src/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "../tslint.json",
 3 |     "rules": {
 4 |         "directive-selector": [
 5 |             true,
 6 |             "attribute",
 7 |             "app",
 8 |             "camelCase"
 9 |         ],
10 |         "component-selector": [
11 |             true,
12 |             "element",
13 |             "app",
14 |             "kebab-case"
15 |         ]
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/app/add-post.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | 
 3 | import { AddPostService } from './add-post.service';
 4 | 
 5 | describe('AddPostService', () => {
 6 |   beforeEach(() => TestBed.configureTestingModule({}));
 7 | 
 8 |   it('should be created', () => {
 9 |     const service: AddPostService = TestBed.get(AddPostService);
10 |     expect(service).toBeTruthy();
11 |   });
12 | });
13 | 


--------------------------------------------------------------------------------
/src/app/auth/register-success/register-success.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-register-success',
 5 |   templateUrl: './register-success.component.html',
 6 |   styleUrls: ['./register-success.component.css']
 7 | })
 8 | export class RegisterSuccessComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/src/app/auth.guard.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, async, inject } from '@angular/core/testing';
 2 | 
 3 | import { AuthGuard } from './auth.guard';
 4 | 
 5 | describe('AuthGuard', () => {
 6 |   beforeEach(() => {
 7 |     TestBed.configureTestingModule({
 8 |       providers: [AuthGuard]
 9 |     });
10 |   });
11 | 
12 |   it('should ...', inject([AuthGuard], (guard: AuthGuard) => {
13 |     expect(guard).toBeTruthy();
14 |   }));
15 | });
16 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.error(err));
13 | 


--------------------------------------------------------------------------------
/src/browserslist:
--------------------------------------------------------------------------------
 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | #
 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
 6 | 
 7 | > 0.5%
 8 | last 2 versions
 9 | Firefox ESR
10 | not dead
11 | not IE 9-11


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
 1 | /* You can add global styles to this file, and also import other style files */
 2 | @import "~bootstrap/dist/css/bootstrap.css";
 3 | 
 4 | * {
 5 |   margin: 0;
 6 |   padding: 0;
 7 |   box-sizing: border-box;
 8 | }
 9 | 
10 | html {
11 |   background-color: #fff;
12 |   color: #555;
13 |   font-family: 'Lato', 'Arial', sans-serif;
14 |   font-weight: 400;
15 |   font-size: 20px;
16 |   text-rendering: optimizeLegibility;
17 | }
18 | 


--------------------------------------------------------------------------------
/src/app/post/post.component.html:
--------------------------------------------------------------------------------
 1 | <div class="content">
 2 |   <div class="container">
 3 |     <div class="row">
 4 |       <div class="col-md-1"></div>
 5 |       <div class="col-md-8">
 6 |         <h1 class="blog-title">{{post.title}}</h1>
 7 |         <span>
 8 |                   <p>by {{post.username}}</p>
 9 |               </span>
10 |         <hr>
11 |         <p [innerHTML]="post.content"></p>
12 |         <hr>
13 |       </div>
14 |     </div>
15 | 
16 |   </div>
17 | </div>
18 | 


--------------------------------------------------------------------------------
/src/app/header/header.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, OnInit} from '@angular/core';
 2 | import {AuthService} from '../auth/auth.service';
 3 | 
 4 | @Component({
 5 |   selector: 'app-header',
 6 |   templateUrl: './header.component.html',
 7 |   styleUrls: ['./header.component.css']
 8 | })
 9 | export class HeaderComponent implements OnInit {
10 | 
11 |   constructor(private authService: AuthService) {
12 |   }
13 | 
14 |   ngOnInit() {
15 |   }
16 | 
17 |   logout() {
18 |     this.authService.logout();
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/app/header/header.component.css:
--------------------------------------------------------------------------------
 1 | .header{
 2 |   padding: 5px 20px;
 3 |   background: royalblue;
 4 | }
 5 | 
 6 | .title{
 7 |   color: aliceblue;
 8 |   text-decoration: none;
 9 | }
10 | 
11 | .login,.register{
12 |   float: right;
13 |   text-decoration: none;
14 |   color: aliceblue;
15 |   padding-top: 10px;
16 | }
17 | 
18 | .logout,.new-post{
19 |   float: right;
20 |   color: aliceblue;
21 |   padding-top: 10px;
22 | }
23 | 
24 | .logout:hover, .new-post:hover{
25 |   color: aliceblue;
26 |   text-decoration: none;
27 | }
28 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "module": "es2015",
 9 |     "moduleResolution": "node",
10 |     "emitDecoratorMetadata": true,
11 |     "experimentalDecorators": true,
12 |     "importHelpers": true,
13 |     "target": "es5",
14 |     "typeRoots": [
15 |       "node_modules/@types"
16 |     ],
17 |     "lib": [
18 |       "es2018",
19 |       "dom"
20 |     ]
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/app/home/home.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import {AddPostService} from '../add-post.service';
 3 | import {Observable} from 'rxjs';
 4 | import {PostPayload} from '../add-post/post-payload';
 5 | 
 6 | @Component({
 7 |   selector: 'app-home',
 8 |   templateUrl: './home.component.html',
 9 |   styleUrls: ['./home.component.css']
10 | })
11 | export class HomeComponent implements OnInit {
12 | 
13 |   posts: Observable<Array<PostPayload>>;
14 |   constructor(private postService: AddPostService) { }
15 | 
16 |   ngOnInit() {
17 |     this.posts = this.postService.getAllPosts();
18 |   }
19 | 
20 | }
21 | 


--------------------------------------------------------------------------------
/src/app/home/home.component.html:
--------------------------------------------------------------------------------
 1 | <div class="content">
 2 |   <div class="container">
 3 |     <div class="row" *ngFor="let post of posts | async">
 4 |       <div class="blogpost">
 5 |         <h3><a href="/post/{{post.id}}" class="blog-title">{{post.title}}</a></h3>
 6 |         <div>
 7 |           <i class="fas fa-user"></i> Author: <p>{{post.username}}</p>
 8 |         </div>
 9 |         <p [innerHTML]="post.content"></p>
10 |         <div>
11 |           <a type="button" href="/post/{{post.id}}" class="read-more btn btn-default">Read More</a>
12 |         </div>
13 |         <hr>
14 |       </div>
15 |       <hr>
16 |     </div>
17 |   </div>
18 | </div>
19 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: any;
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 | 


--------------------------------------------------------------------------------
/src/app/home/home.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { HomeComponent } from './home.component';
 4 | 
 5 | describe('HomeComponent', () => {
 6 |   let component: HomeComponent;
 7 |   let fixture: ComponentFixture<HomeComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ HomeComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(HomeComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/post/post.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { PostComponent } from './post.component';
 4 | 
 5 | describe('PostComponent', () => {
 6 |   let component: PostComponent;
 7 |   let fixture: ComponentFixture<PostComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ PostComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(PostComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * For easier debugging in development mode, you can import the following file
11 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 |  *
13 |  * This import should be commented out in production mode because it will have a negative impact
14 |  * on performance if an error is thrown.
15 |  */
16 | // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/src/app/auth/login/login.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { LoginComponent } from './login.component';
 4 | 
 5 | describe('LoginComponent', () => {
 6 |   let component: LoginComponent;
 7 |   let fixture: ComponentFixture<LoginComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ LoginComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(LoginComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/header/header.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { HeaderComponent } from './header.component';
 4 | 
 5 | describe('HeaderComponent', () => {
 6 |   let component: HeaderComponent;
 7 |   let fixture: ComponentFixture<HeaderComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ HeaderComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(HeaderComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | 
 8 | # dependencies
 9 | /node_modules
10 | 
11 | # profiling files
12 | chrome-profiler-events.json
13 | speed-measure-plugin.json
14 | 
15 | # IDEs and editors
16 | /.idea
17 | .project
18 | .classpath
19 | .c9/
20 | *.launch
21 | .settings/
22 | *.sublime-workspace
23 | 
24 | # IDE - VSCode
25 | .vscode/*
26 | !.vscode/settings.json
27 | !.vscode/tasks.json
28 | !.vscode/launch.json
29 | !.vscode/extensions.json
30 | 
31 | # misc
32 | /.sass-cache
33 | /connect.lock
34 | /coverage
35 | /libpeerconnection.log
36 | npm-debug.log
37 | yarn-error.log
38 | testem.log
39 | /typings
40 | 
41 | # System Files
42 | .DS_Store
43 | Thumbs.db
44 | 


--------------------------------------------------------------------------------
/src/app/add-post/add-post.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { AddPostComponent } from './add-post.component';
 4 | 
 5 | describe('AddPostComponent', () => {
 6 |   let component: AddPostComponent;
 7 |   let fixture: ComponentFixture<AddPostComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ AddPostComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(AddPostComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/header/header.component.html:
--------------------------------------------------------------------------------
 1 | <div class="header">
 2 |   <div class="container">
 3 |     <div class="row">
 4 |       <div class="col-md-6">
 5 |         <h1><a href="" class="title"> Spring Blog</a></h1>
 6 |       </div> <!-- Title -->
 7 |       <div class="col-md-3" *ngIf="authService.isAuthenticated()">
 8 |           <a href="/add-post" class="new-post">Add Post</a>
 9 |           <button class="logout btn btn-default" (click)="logout()">Logout</button>
10 |       </div>
11 |       <div class="col-md-3" *ngIf="!authService.isAuthenticated()">
12 |         <a href="/login" class="login btn btn-default">Login</a>
13 |         <a href="/register" class="register btn btn-default">Register</a>
14 |       </div> <!-- Login and Register -->
15 |     </div>
16 |   </div>
17 | </div>
18 | 


--------------------------------------------------------------------------------
/src/app/auth/register/register.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { RegisterComponent } from './register.component';
 4 | 
 5 | describe('RegisterComponent', () => {
 6 |   let component: RegisterComponent;
 7 |   let fixture: ComponentFixture<RegisterComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ RegisterComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(RegisterComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/auth.guard.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router} from '@angular/router';
 3 | import { Observable } from 'rxjs';
 4 | import {AuthService} from './auth/auth.service';
 5 | 
 6 | @Injectable({
 7 |   providedIn: 'root'
 8 | })
 9 | export class AuthGuard implements CanActivate {
10 | 
11 |   constructor(private authService:AuthService,private router: Router){}
12 | 
13 |   canActivate(
14 |     next: ActivatedRouteSnapshot,
15 |     state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
16 |     let isAuthenticated = this.authService.isAuthenticated();
17 |     if(isAuthenticated){
18 |       return true;
19 |     } else {
20 |       this.router.navigateByUrl('/login');
21 |     }
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/app/add-post/add-post.component.html:
--------------------------------------------------------------------------------
 1 | <div class="add-post-content">
 2 |   <div class="container">
 3 |     <div>
 4 |       <h3 class="new-post-title">Create New Post</h3>
 5 |     </div>
 6 |     <hr>
 7 |     <form [formGroup]="addPostForm" (ngSubmit)="addPost()">
 8 |       <div class="form-group">
 9 |         <label class="post-title">Title</label>
10 |         <input type="text" [formControlName]="'title'" class="form-control" placeholder="Title">
11 |       </div>
12 |       <div class="form-group">
13 |         <label class="post-content">Body</label>
14 |         <editor [formControlName]="'body'" [init]="{plugins: 'link'}"></editor>
15 |       </div>
16 |       <div class="form-group">
17 |         <button type="submit" class="btn btn-primary">Post</button>
18 |       </div>
19 |     </form >
20 |   </div>
21 | </div>
22 | 


--------------------------------------------------------------------------------
/src/app/auth/login/login.component.html:
--------------------------------------------------------------------------------
 1 | <div class="container">
 2 |   <form class="form-signin" [formGroup]="loginForm" (ngSubmit)="onSubmit()" novalidate>
 3 |     <h1 class="h3 mb-3 font-weight-normal">Please Sign in</h1>
 4 |     <div class="form-group">
 5 |       <label for="inputUsername" class="sr-only">Username</label>
 6 |       <input type="text" id="inputUsername" [formControlName]="'username'" class="form-control" placeholder="Username" required="" autofocus="">
 7 |     </div>
 8 |     <div class="form-group">
 9 |       <label for="inputPassword" class="sr-only">Password</label>
10 |       <input type="password" id="inputPassword" [formControlName]="'password'" class="form-control" placeholder="Password" required="">
11 |     </div>
12 |     <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
13 |   </form>
14 | </div>
15 | 


--------------------------------------------------------------------------------
/src/app/auth/register-success/register-success.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { RegisterSuccessComponent } from './register-success.component';
 4 | 
 5 | describe('RegisterSuccessComponent', () => {
 6 |   let component: RegisterSuccessComponent;
 7 |   let fixture: ComponentFixture<RegisterSuccessComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ RegisterSuccessComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(RegisterSuccessComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/add-post.service.ts:
--------------------------------------------------------------------------------
 1 | import {Injectable} from '@angular/core';
 2 | import {HttpClient} from '@angular/common/http';
 3 | import {PostPayload} from './add-post/post-payload';
 4 | import {Observable} from 'rxjs';
 5 | 
 6 | @Injectable({
 7 |   providedIn: 'root'
 8 | })
 9 | export class AddPostService {
10 | 
11 |   constructor(private httpClient: HttpClient) {
12 |   }
13 | 
14 |   addPost(postPayload: PostPayload){
15 |     return this.httpClient.post('http://localhost:8080/api/posts/', postPayload);
16 |   }
17 | 
18 |   getAllPosts(): Observable<Array<PostPayload>>{
19 |     return this.httpClient.get<Array<PostPayload>>("http://localhost:8080/api/posts/all");
20 |   }
21 | 
22 |   getPost(permaLink: Number):Observable<PostPayload>{
23 |     return this.httpClient.get<PostPayload>('http://localhost:8080/api/posts/get/' + permaLink);
24 |   }
25 | }
26 | 
27 | 


--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // Protractor configuration file, see link for more information
 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 3 | 
 4 | const { SpecReporter } = require('jasmine-spec-reporter');
 5 | 
 6 | exports.config = {
 7 |   allScriptsTimeout: 11000,
 8 |   specs: [
 9 |     './src/**/*.e2e-spec.ts'
10 |   ],
11 |   capabilities: {
12 |     'browserName': 'chrome'
13 |   },
14 |   directConnect: true,
15 |   baseUrl: 'http://localhost:4200/',
16 |   framework: 'jasmine',
17 |   jasmineNodeOpts: {
18 |     showColors: true,
19 |     defaultTimeoutInterval: 30000,
20 |     print: function() {}
21 |   },
22 |   onPrepare() {
23 |     require('ts-node').register({
24 |       project: require('path').join(__dirname, './tsconfig.e2e.json')
25 |     });
26 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 |   }
28 | };


--------------------------------------------------------------------------------
/src/app/post/post.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, OnInit} from '@angular/core';
 2 | import {ActivatedRoute} from '@angular/router';
 3 | import {AddPostService} from '../add-post.service';
 4 | import {PostPayload} from '../add-post/post-payload';
 5 | 
 6 | // @ts-ignore
 7 | @Component({
 8 |   selector: 'app-post',
 9 |   templateUrl: './post.component.html',
10 |   styleUrls: ['./post.component.css']
11 | })
12 | export class PostComponent implements OnInit {
13 |   post: PostPayload;
14 |   permaLink: Number;
15 | 
16 |   constructor(private router: ActivatedRoute, private postService: AddPostService) {
17 |   }
18 | 
19 |   ngOnInit() {
20 |     this.router.params.subscribe(params => {
21 |       this.permaLink = params['id'];
22 |     });
23 | 
24 |     this.postService.getPost(this.permaLink).subscribe((data:PostPayload) => {
25 |       this.post = data;
26 |     },(err: any) => {
27 |       console.log('Failure Response');
28 |     })
29 |   }
30 | 
31 | }
32 | 


--------------------------------------------------------------------------------
/src/app/http-client-interceptor.ts:
--------------------------------------------------------------------------------
 1 | import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent} from '@angular/common/http';
 2 | import { Observable } from 'rxjs';
 3 | import { LocalStorageService } from 'ngx-webstorage';
 4 | import { Injectable } from '@angular/core';
 5 | 
 6 | @Injectable()
 7 | export class HttpClientInterceptor implements HttpInterceptor {
 8 |   constructor(private $localStorage: LocalStorageService) {
 9 | 
10 |   }
11 | 
12 |   intercept(req: HttpRequest<any>,
13 |             next: HttpHandler): Observable<HttpEvent<any>> {
14 | 
15 |     const token = this.$localStorage.retrieve("authenticationToken");
16 |     console.log('jwt token ' + token);
17 |     if (token) {
18 |       const cloned = req.clone({
19 |         headers: req.headers.set("Authorization",
20 |           "Bearer " + token)
21 |       });
22 | 
23 |       return next.handle(cloned);
24 |     }
25 |     else {
26 |       return next.handle(req);
27 |     }
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, '../coverage'),
20 |       reports: ['html', 'lcovonly', 'text-summary'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false
30 |   });
31 | };


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # NgSpringBlogFrontend
 2 | 
 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.1.4.
 4 | 
 5 | ## Development server
 6 | 
 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 8 | 
 9 | ## Code scaffolding
10 | 
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 | 
13 | ## Build
14 | 
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
16 | 
17 | ## Running unit tests
18 | 
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 | 
21 | ## Running end-to-end tests
22 | 
23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24 | 
25 | ## Further help
26 | 
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
28 | 


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, async } from '@angular/core/testing';
 2 | import { RouterTestingModule } from '@angular/router/testing';
 3 | import { AppComponent } from './app.component';
 4 | 
 5 | describe('AppComponent', () => {
 6 |   beforeEach(async(() => {
 7 |     TestBed.configureTestingModule({
 8 |       imports: [
 9 |         RouterTestingModule
10 |       ],
11 |       declarations: [
12 |         AppComponent
13 |       ],
14 |     }).compileComponents();
15 |   }));
16 | 
17 |   it('should create the app', () => {
18 |     const fixture = TestBed.createComponent(AppComponent);
19 |     const app = fixture.debugElement.componentInstance;
20 |     expect(app).toBeTruthy();
21 |   });
22 | 
23 |   it(`should have as title 'ng-spring-blog-frontend'`, () => {
24 |     const fixture = TestBed.createComponent(AppComponent);
25 |     const app = fixture.debugElement.componentInstance;
26 |     expect(app.title).toEqual('ng-spring-blog-frontend');
27 |   });
28 | 
29 |   it('should render title in a h1 tag', () => {
30 |     const fixture = TestBed.createComponent(AppComponent);
31 |     fixture.detectChanges();
32 |     const compiled = fixture.debugElement.nativeElement;
33 |     expect(compiled.querySelector('h1').textContent).toContain('Welcome to ng-spring-blog-frontend!');
34 |   });
35 | });
36 | 


--------------------------------------------------------------------------------
/src/app/auth/login/login.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, OnInit} from '@angular/core';
 2 | import {FormControl, FormGroup} from '@angular/forms';
 3 | import {LoginPayload} from '../login-payload';
 4 | import {AuthService} from '../auth.service';
 5 | import {Router} from '@angular/router';
 6 | 
 7 | @Component({
 8 |   selector: 'app-login',
 9 |   templateUrl: './login.component.html',
10 |   styleUrls: ['./login.component.css']
11 | })
12 | export class LoginComponent implements OnInit {
13 | 
14 |   loginForm: FormGroup;
15 |   loginPayload: LoginPayload;
16 | 
17 |   constructor(private authService: AuthService, private router: Router) {
18 |     this.loginForm = new FormGroup({
19 |       username: new FormControl(),
20 |       password: new FormControl()
21 |     });
22 |     this.loginPayload = {
23 |       username: '',
24 |       password: ''
25 |     };
26 |   }
27 | 
28 |   ngOnInit() {
29 |   }
30 | 
31 |   onSubmit() {
32 |     this.loginPayload.username = this.loginForm.get('username').value;
33 |     this.loginPayload.password = this.loginForm.get('password').value;
34 | 
35 |     this.authService.login(this.loginPayload).subscribe(data => {
36 |       if (data) {
37 |         console.log('login success');
38 |         this.router.navigateByUrl('/home');
39 |       } else {
40 |         console.log('Login failed');
41 |       }
42 |     });
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/src/app/add-post/add-post.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import {FormControl, FormGroup} from '@angular/forms';
 3 | import {PostPayload} from './post-payload';
 4 | import {AddPostService} from '../add-post.service';
 5 | import {Router} from '@angular/router';
 6 | 
 7 | @Component({
 8 |   selector: 'app-add-post',
 9 |   templateUrl: './add-post.component.html',
10 |   styleUrls: ['./add-post.component.css']
11 | })
12 | export class AddPostComponent implements OnInit {
13 | 
14 |   addPostForm: FormGroup;
15 |   postPayload: PostPayload;
16 |   title = new FormControl('');
17 |   body = new FormControl('');
18 | 
19 |   constructor(private addpostService: AddPostService, private router: Router) {
20 |     this.addPostForm = new FormGroup({
21 |       title: this.title,
22 |       body: this.body
23 |     });
24 |     this.postPayload = {
25 |       id: '',
26 |       content: '',
27 |       title: '',
28 |       username: ''
29 |     }
30 |   }
31 | 
32 |   ngOnInit() {
33 |   }
34 | 
35 |   addPost() {
36 |     this.postPayload.content = this.addPostForm.get('body').value;
37 |     this.postPayload.title = this.addPostForm.get('title').value;
38 |     this.addpostService.addPost(this.postPayload).subscribe(data => {
39 |       this.router.navigateByUrl('/');
40 |     }, error => {
41 |       console.log('Failure Response');
42 |     })
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/src/app/auth/register/register.component.html:
--------------------------------------------------------------------------------
 1 | <div class="container justify-content-center">
 2 |   <form class="form-signin" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
 3 |     <h1 class="h3 mb-3 font-weight-normal">Please Register</h1>
 4 |     <div class="form-group">
 5 |       <label for="inputUsername" class="sr-only">Username</label>
 6 |       <input type="text" id="inputUsername" [formControlName]="'username'" class="form-control" placeholder="Username" required="" autofocus="">
 7 |     </div>
 8 |     <div class="form-group">
 9 |       <label for="inputEmail" class="sr-only">Email</label>
10 |       <input type="text" id="inputEmail" [formControlName]="'email'"class="form-control" placeholder="Email" required="" autofocus="">
11 |     </div>
12 |     <div class="form-group">
13 |       <label for="inputPassword" class="sr-only">Password</label>
14 |       <input type="password" id="inputPassword" [formControlName]="'password'" class="form-control" placeholder="Password" required="">
15 |     </div>
16 |     <div class="form-group">
17 |       <label for="inputConfirmPassword" class="sr-only">Password</label>
18 |       <input type="password" id="inputConfirmPassword" [formControlName]="'confirmPassword'" class="form-control" placeholder="Confirm Password" required="">
19 |     </div>
20 |     <button class="btn btn-lg btn-primary btn-block" type="submit">Sign up</button>
21 |   </form>
22 | </div>
23 | 


--------------------------------------------------------------------------------
/src/app/auth/auth.service.ts:
--------------------------------------------------------------------------------
 1 | import {Injectable} from '@angular/core';
 2 | import {HttpClient} from '@angular/common/http';
 3 | import {RegisterPayload} from './register-payload';
 4 | import {Observable} from 'rxjs';
 5 | import {LoginPayload} from './login-payload';
 6 | import {JwtAutResponse} from './jwt-aut-response';
 7 | import {map} from 'rxjs/operators';
 8 | import {LocalStorageService} from 'ngx-webstorage';
 9 | 
10 | @Injectable({
11 |   providedIn: 'root'
12 | })
13 | export class AuthService {
14 |   private url = 'http://localhost:8080/api/auth/';
15 | 
16 |   constructor(private httpClient: HttpClient, private localStoraqeService: LocalStorageService) {
17 |   }
18 | 
19 |   register(registerPayload: RegisterPayload): Observable<any> {
20 |     return this.httpClient.post(this.url + 'signup', registerPayload);
21 |   }
22 | 
23 |   login(loginPayload: LoginPayload): Observable<boolean> {
24 |     return this.httpClient.post<JwtAutResponse>(this.url + 'login', loginPayload).pipe(map(data => {
25 |       this.localStoraqeService.store('authenticationToken', data.authenticationToken);
26 |       this.localStoraqeService.store('username', data.username);
27 |       return true;
28 |     }));
29 |   }
30 | 
31 |   isAuthenticated(): boolean {
32 |     return this.localStoraqeService.retrieve('username') != null;
33 |   }
34 | 
35 |   logout() {
36 |     this.localStoraqeService.clear('authenticationToken');
37 |     this.localStoraqeService.clear('username');
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ng-spring-blog-frontend",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "ng": "ng",
 6 |     "start": "ng serve",
 7 |     "build": "ng build",
 8 |     "test": "ng test",
 9 |     "lint": "ng lint",
10 |     "e2e": "ng e2e"
11 |   },
12 |   "private": true,
13 |   "dependencies": {
14 |     "@angular/animations": "~7.1.0",
15 |     "@angular/common": "~7.1.0",
16 |     "@angular/compiler": "~7.1.0",
17 |     "@angular/core": "~7.1.0",
18 |     "@angular/forms": "~7.1.0",
19 |     "@angular/platform-browser": "~7.1.0",
20 |     "@angular/platform-browser-dynamic": "~7.1.0",
21 |     "@angular/router": "~7.1.0",
22 |     "bootstrap": "^4.3.1",
23 |     "core-js": "^2.5.4",
24 |     "rxjs": "~6.3.3",
25 |     "tslib": "^1.9.0",
26 |     "zone.js": "~0.8.26"
27 |   },
28 |   "devDependencies": {
29 |     "@angular-devkit/build-angular": "^0.13.6",
30 |     "@angular/cli": "~7.1.4",
31 |     "@angular/compiler-cli": "^7.2.9",
32 |     "@angular/language-service": "~7.1.0",
33 |     "@types/jasmine": "~2.8.8",
34 |     "@types/jasminewd2": "~2.0.3",
35 |     "@types/node": "~8.9.4",
36 |     "codelyzer": "~4.5.0",
37 |     "jasmine-core": "~2.99.1",
38 |     "jasmine-spec-reporter": "~4.2.1",
39 |     "karma": "^4.0.1",
40 |     "karma-chrome-launcher": "~2.2.0",
41 |     "karma-coverage-istanbul-reporter": "~2.0.1",
42 |     "karma-jasmine": "~1.1.2",
43 |     "karma-jasmine-html-reporter": "^0.2.2",
44 |     "ngx-webstorage": "^2.0.1",
45 |     "protractor": "~5.4.0",
46 |     "ts-node": "~7.0.0",
47 |     "tslint": "~5.11.0",
48 |     "typescript": "~3.1.6",
49 |     "@tinymce/tinymce-angular": "^2.4.1"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/src/app/auth/register/register.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, OnInit} from '@angular/core';
 2 | import {FormBuilder, FormGroup} from '@angular/forms';
 3 | import {RegisterPayload} from '../register-payload';
 4 | import {AuthService} from '../auth.service';
 5 | import {Router} from '@angular/router';
 6 | 
 7 | @Component({
 8 |   selector: 'app-register',
 9 |   templateUrl: './register.component.html',
10 |   styleUrls: ['./register.component.css']
11 | })
12 | export class RegisterComponent implements OnInit {
13 | 
14 |   registerForm: FormGroup;
15 |   registerPayload: RegisterPayload;
16 | 
17 |   constructor(private formBuilder: FormBuilder, private authService: AuthService, private router:Router) {
18 |     this.registerForm = this.formBuilder.group({
19 |       username: '',
20 |       email: '',
21 |       password: '',
22 |       confirmPassword: ''
23 |     });
24 |     this.registerPayload = {
25 |       username: '',
26 |       email: '',
27 |       password: '',
28 |       confirmPassword: ''
29 |     };
30 |   }
31 | 
32 |   ngOnInit() {
33 |   }
34 | 
35 |   onSubmit() {
36 |     this.registerPayload.username = this.registerForm.get('username').value;
37 |     this.registerPayload.email = this.registerForm.get('email').value;
38 |     this.registerPayload.password = this.registerForm.get('password').value;
39 |     this.registerPayload.confirmPassword = this.registerForm.get('confirmPassword').value;
40 | 
41 |     this.authService.register(this.registerPayload).subscribe(data => {
42 |       console.log('register succes');
43 |       this.router.navigateByUrl('/register-success');
44 |     }, error => {
45 |       console.log('register failed');
46 |     });
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {BrowserModule} from '@angular/platform-browser';
 2 | import {NgModule} from '@angular/core';
 3 | 
 4 | import {AppRoutingModule} from './app-routing.module';
 5 | import {AppComponent} from './app.component';
 6 | import {HeaderComponent} from './header/header.component';
 7 | import {RegisterComponent} from './auth/register/register.component';
 8 | import {LoginComponent} from './auth/login/login.component';
 9 | import {RegisterSuccessComponent} from './auth/register-success/register-success.component';
10 | import {FormsModule, ReactiveFormsModule} from '@angular/forms';
11 | import {RouterModule} from '@angular/router';
12 | import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
13 | import {Ng2Webstorage} from 'ngx-webstorage';
14 | import {HomeComponent} from './home/home.component';
15 | import {AddPostComponent} from './add-post/add-post.component';
16 | import {EditorModule} from '@tinymce/tinymce-angular';
17 | import {HttpClientInterceptor} from './http-client-interceptor';
18 | import {PostComponent} from './post/post.component';
19 | import {AuthGuard} from './auth.guard';
20 | 
21 | @NgModule({
22 |   declarations: [
23 |     AppComponent,
24 |     HeaderComponent,
25 |     RegisterComponent,
26 |     LoginComponent,
27 |     RegisterSuccessComponent,
28 |     HomeComponent,
29 |     AddPostComponent,
30 |     PostComponent
31 |   ],
32 |   imports: [
33 |     BrowserModule,
34 |     AppRoutingModule,
35 |     FormsModule,
36 |     ReactiveFormsModule,
37 |     Ng2Webstorage.forRoot(),
38 |     RouterModule.forRoot([
39 |       {path: '', component: HomeComponent},
40 |       {path: 'register  ', component: RegisterComponent},
41 |       {path: 'post/:id', component: PostComponent},
42 |       {path: 'login', component: LoginComponent},
43 |       {path: 'register-success', component: RegisterSuccessComponent},
44 |       {path: 'home', component: HomeComponent},
45 |       {path: 'add-post', component: AddPostComponent, canActivate: [AuthGuard]}
46 |     ]),
47 |     HttpClientModule,
48 |     EditorModule
49 |   ],
50 |   providers: [{provide: HTTP_INTERCEPTORS, useClass: HttpClientInterceptor, multi: true}],
51 |   bootstrap: [AppComponent]
52 | })
53 | export class AppModule {
54 | }
55 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rulesDirectory": [
  3 |     "codelyzer"
  4 |   ],
  5 |   "rules": {
  6 |     "arrow-return-shorthand": true,
  7 |     "callable-types": true,
  8 |     "class-name": true,
  9 |     "comment-format": [
 10 |       true,
 11 |       "check-space"
 12 |     ],
 13 |     "curly": true,
 14 |     "deprecation": {
 15 |       "severity": "warn"
 16 |     },
 17 |     "eofline": true,
 18 |     "forin": true,
 19 |     "import-blacklist": [
 20 |       true,
 21 |       "rxjs/Rx"
 22 |     ],
 23 |     "import-spacing": true,
 24 |     "indent": [
 25 |       true,
 26 |       "spaces"
 27 |     ],
 28 |     "interface-over-type-literal": true,
 29 |     "label-position": true,
 30 |     "max-line-length": [
 31 |       true,
 32 |       140
 33 |     ],
 34 |     "member-access": false,
 35 |     "member-ordering": [
 36 |       true,
 37 |       {
 38 |         "order": [
 39 |           "static-field",
 40 |           "instance-field",
 41 |           "static-method",
 42 |           "instance-method"
 43 |         ]
 44 |       }
 45 |     ],
 46 |     "no-arg": true,
 47 |     "no-bitwise": true,
 48 |     "no-console": [
 49 |       true,
 50 |       "debug",
 51 |       "info",
 52 |       "time",
 53 |       "timeEnd",
 54 |       "trace"
 55 |     ],
 56 |     "no-construct": true,
 57 |     "no-debugger": true,
 58 |     "no-duplicate-super": true,
 59 |     "no-empty": false,
 60 |     "no-empty-interface": true,
 61 |     "no-eval": true,
 62 |     "no-inferrable-types": [
 63 |       true,
 64 |       "ignore-params"
 65 |     ],
 66 |     "no-misused-new": true,
 67 |     "no-non-null-assertion": true,
 68 |     "no-redundant-jsdoc": true,
 69 |     "no-shadowed-variable": true,
 70 |     "no-string-literal": false,
 71 |     "no-string-throw": true,
 72 |     "no-switch-case-fall-through": true,
 73 |     "no-trailing-whitespace": true,
 74 |     "no-unnecessary-initializer": true,
 75 |     "no-unused-expression": true,
 76 |     "no-use-before-declare": true,
 77 |     "no-var-keyword": true,
 78 |     "object-literal-sort-keys": false,
 79 |     "one-line": [
 80 |       true,
 81 |       "check-open-brace",
 82 |       "check-catch",
 83 |       "check-else",
 84 |       "check-whitespace"
 85 |     ],
 86 |     "prefer-const": true,
 87 |     "quotemark": [
 88 |       true,
 89 |       "single"
 90 |     ],
 91 |     "radix": true,
 92 |     "semicolon": [
 93 |       true,
 94 |       "always"
 95 |     ],
 96 |     "triple-equals": [
 97 |       true,
 98 |       "allow-null-check"
 99 |     ],
100 |     "typedef-whitespace": [
101 |       true,
102 |       {
103 |         "call-signature": "nospace",
104 |         "index-signature": "nospace",
105 |         "parameter": "nospace",
106 |         "property-declaration": "nospace",
107 |         "variable-declaration": "nospace"
108 |       }
109 |     ],
110 |     "unified-signatures": true,
111 |     "variable-name": false,
112 |     "whitespace": [
113 |       true,
114 |       "check-branch",
115 |       "check-decl",
116 |       "check-operator",
117 |       "check-separator",
118 |       "check-type"
119 |     ],
120 |     "no-output-on-prefix": true,
121 |     "use-input-property-decorator": true,
122 |     "use-output-property-decorator": true,
123 |     "use-host-property-decorator": true,
124 |     "no-input-rename": true,
125 |     "no-output-rename": true,
126 |     "use-life-cycle-interface": true,
127 |     "use-pipe-transform-interface": true,
128 |     "component-class-suffix": true,
129 |     "directive-class-suffix": true
130 |   }
131 | }
132 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE9, IE10, IE11, and Chrome <55 requires all of the following polyfills.
22 |  *  This also includes Android Emulators with older versions of Chrome and Google Search/Googlebot
23 |  */
24 | 
25 | // import 'core-js/es6/symbol';
26 | // import 'core-js/es6/object';
27 | // import 'core-js/es6/function';
28 | // import 'core-js/es6/parse-int';
29 | // import 'core-js/es6/parse-float';
30 | // import 'core-js/es6/number';
31 | // import 'core-js/es6/math';
32 | // import 'core-js/es6/string';
33 | // import 'core-js/es6/date';
34 | // import 'core-js/es6/array';
35 | // import 'core-js/es6/regexp';
36 | // import 'core-js/es6/map';
37 | // import 'core-js/es6/weak-map';
38 | // import 'core-js/es6/set';
39 | 
40 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
41 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
42 | 
43 | /** IE10 and IE11 requires the following for the Reflect API. */
44 | // import 'core-js/es6/reflect';
45 | 
46 | /**
47 |  * Web Animations `@angular/platform-browser/animations`
48 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
49 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
50 |  */
51 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
52 | 
53 | /**
54 |  * By default, zone.js will patch all possible macroTask and DomEvents
55 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
56 |  * because those flags need to be set before `zone.js` being loaded, and webpack
57 |  * will put import in the top of bundle, so user need to create a separate file
58 |  * in this directory (for example: zone-flags.ts), and put the following flags
59 |  * into that file, and then add the following code before importing zone.js.
60 |  * import './zone-flags.ts';
61 |  *
62 |  * The flags allowed in zone-flags.ts are listed here.
63 |  *
64 |  * The following flags will work for all browsers.
65 |  *
66 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
67 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
68 |  * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
69 |  *
70 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
71 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
72 |  *
73 |  *  (window as any).__Zone_enable_cross_context_check = true;
74 |  *
75 |  */
76 | 
77 | /***************************************************************************************************
78 |  * Zone JS is required by default for Angular itself.
79 |  */
80 | import 'zone.js/dist/zone';  // Included with Angular CLI.
81 | 
82 | 
83 | /***************************************************************************************************
84 |  * APPLICATION IMPORTS
85 |  */
86 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "ng-spring-blog-frontend": {
  7 |       "root": "",
  8 |       "sourceRoot": "src",
  9 |       "projectType": "application",
 10 |       "prefix": "app",
 11 |       "schematics": {},
 12 |       "architect": {
 13 |         "build": {
 14 |           "builder": "@angular-devkit/build-angular:browser",
 15 |           "options": {
 16 |             "outputPath": "dist/ng-spring-blog-frontend",
 17 |             "index": "src/index.html",
 18 |             "main": "src/main.ts",
 19 |             "polyfills": "src/polyfills.ts",
 20 |             "tsConfig": "src/tsconfig.app.json",
 21 |             "assets": [
 22 |               "src/favicon.ico",
 23 |               "src/assets"
 24 |             ],
 25 |             "styles": [
 26 |               "src/styles.css"
 27 |             ],
 28 |             "scripts": []
 29 |           },
 30 |           "configurations": {
 31 |             "production": {
 32 |               "fileReplacements": [
 33 |                 {
 34 |                   "replace": "src/environments/environment.ts",
 35 |                   "with": "src/environments/environment.prod.ts"
 36 |                 }
 37 |               ],
 38 |               "optimization": true,
 39 |               "outputHashing": "all",
 40 |               "sourceMap": false,
 41 |               "extractCss": true,
 42 |               "namedChunks": false,
 43 |               "aot": true,
 44 |               "extractLicenses": true,
 45 |               "vendorChunk": false,
 46 |               "buildOptimizer": true,
 47 |               "budgets": [
 48 |                 {
 49 |                   "type": "initial",
 50 |                   "maximumWarning": "2mb",
 51 |                   "maximumError": "5mb"
 52 |                 }
 53 |               ]
 54 |             }
 55 |           }
 56 |         },
 57 |         "serve": {
 58 |           "builder": "@angular-devkit/build-angular:dev-server",
 59 |           "options": {
 60 |             "browserTarget": "ng-spring-blog-frontend:build"
 61 |           },
 62 |           "configurations": {
 63 |             "production": {
 64 |               "browserTarget": "ng-spring-blog-frontend:build:production"
 65 |             }
 66 |           }
 67 |         },
 68 |         "extract-i18n": {
 69 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 70 |           "options": {
 71 |             "browserTarget": "ng-spring-blog-frontend:build"
 72 |           }
 73 |         },
 74 |         "test": {
 75 |           "builder": "@angular-devkit/build-angular:karma",
 76 |           "options": {
 77 |             "main": "src/test.ts",
 78 |             "polyfills": "src/polyfills.ts",
 79 |             "tsConfig": "src/tsconfig.spec.json",
 80 |             "karmaConfig": "src/karma.conf.js",
 81 |             "styles": [
 82 |               "src/styles.css"
 83 |             ],
 84 |             "scripts": [],
 85 |             "assets": [
 86 |               "src/favicon.ico",
 87 |               "src/assets"
 88 |             ]
 89 |           }
 90 |         },
 91 |         "lint": {
 92 |           "builder": "@angular-devkit/build-angular:tslint",
 93 |           "options": {
 94 |             "tsConfig": [
 95 |               "src/tsconfig.app.json",
 96 |               "src/tsconfig.spec.json"
 97 |             ],
 98 |             "exclude": [
 99 |               "**/node_modules/**"
100 |             ]
101 |           }
102 |         }
103 |       }
104 |     },
105 |     "ng-spring-blog-frontend-e2e": {
106 |       "root": "e2e/",
107 |       "projectType": "application",
108 |       "prefix": "",
109 |       "architect": {
110 |         "e2e": {
111 |           "builder": "@angular-devkit/build-angular:protractor",
112 |           "options": {
113 |             "protractorConfig": "e2e/protractor.conf.js",
114 |             "devServerTarget": "ng-spring-blog-frontend:serve"
115 |           },
116 |           "configurations": {
117 |             "production": {
118 |               "devServerTarget": "ng-spring-blog-frontend:serve:production"
119 |             }
120 |           }
121 |         },
122 |         "lint": {
123 |           "builder": "@angular-devkit/build-angular:tslint",
124 |           "options": {
125 |             "tsConfig": "e2e/tsconfig.e2e.json",
126 |             "exclude": [
127 |               "**/node_modules/**"
128 |             ]
129 |           }
130 |         }
131 |       }
132 |     }
133 |   },
134 |   "defaultProject": "ng-spring-blog-frontend"
135 | }


--------------------------------------------------------------------------------