first commit

quartz-manager-frontend/.angular-cli.json

@@ -0,0 +1,57 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "angular-spring-starter"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "../server/src/main/resources/static",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json"
+    },
+    {
+      "project": "src/tsconfig.spec.json"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "component": {}
+  }
+}

quartz-manager-frontend/.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

quartz-manager-frontend/.gitignore

@@ -0,0 +1,45 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db
+
+#package-lock.json
+package-lock.json

quartz-manager-frontend/e2e/app.e2e-spec.ts

@@ -0,0 +1,14 @@
+import { WebUiPage } from './app.po';
+
+describe('web-ui App', () => {
+  let page: WebUiPage;
+
+  beforeEach(() => {
+    page = new WebUiPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toContain('ANGULAR-SPRING-JWT-STARTER');
+  });
+});

quartz-manager-frontend/e2e/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, element, by } from 'protractor';
+
+export class WebUiPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root app-header span')).getText();
+  }
+}

quartz-manager-frontend/e2e/tsconfig.e2e.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types":[
+      "jasmine",
+      "node"
+    ]
+  }
+}

quartz-manager-frontend/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular/cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    files: [
+      { pattern: './src/test.ts', watched: false }
+    ],
+    preprocessors: {
+      './src/test.ts': ['@angular/cli']
+    },
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    },
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: config.angularCli && config.angularCli.codeCoverage
+              ? ['progress', 'coverage-istanbul']
+              : ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

quartz-manager-frontend/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "quartz-manager-ui",
+  "version": "0.1.1",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve --proxy-config proxy.conf.json",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "5.0.2",
+    "@angular/common": "5.0.2",
+    "@angular/compiler": "5.0.2",
+    "@angular/core": "5.0.2",
+    "@angular/forms": "5.0.2",
+    "@angular/http": "5.0.2",
+    "@angular/material": "5.0.0-rc.1",
+    "@angular/cdk": "5.0.0-rc.1",
+    "@angular/platform-browser": "5.0.2",
+    "@angular/platform-browser-dynamic": "5.0.2",
+    "@angular/platform-server": "5.0.2",
+    "@angular/router": "5.0.2",
+    "@angular/flex-layout": "2.0.0-beta.10-4905443",
+    "core-js": "2.5.1",
+    "hammerjs": "2.0.8",
+    "rxjs": "5.5.2",
+    "zone.js": "0.8.18"
+  },
+  "devDependencies": {
+    "@angular-devkit/core": "^0.2.0",
+    "@angular/cli": "1.5.3",
+    "@angular/compiler-cli": "5.0.2",
+    "@angular/language-service": "5.0.2",
+    "@types/hammerjs": "2.0.34",
+    "@types/jasmine": "2.5.54",
+    "@types/jasminewd2": "2.0.3",
+    "@types/node": "6.0.90",
+    "codelyzer": "3.2.2",
+    "jasmine-core": "2.6.4",
+    "jasmine-spec-reporter": "4.1.1",
+    "karma": "1.7.1",
+    "karma-chrome-launcher": "2.1.1",
+    "karma-cli": "1.0.1",
+    "karma-coverage-istanbul-reporter": "1.3.0",
+    "karma-jasmine": "1.1.0",
+    "karma-jasmine-html-reporter": "0.2.2",
+    "protractor": "5.1.2",
+    "ts-node": "3.0.6",
+    "tslint": "5.7.0",
+    "typescript": "2.4.2"
+  }
+}

quartz-manager-frontend/protractor.conf.js

@@ -0,0 +1,30 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+  },
+  onPrepare() {
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

quartz-manager-frontend/proxy.conf.json

@@ -0,0 +1,6 @@
+{
+  "/quartz-manager": {
+    "target": "http://localhost:8080",
+    "secure": false
+  }
+}

quartz-manager-frontend/src/app/admin/admin.component.html

@@ -0,0 +1,3 @@
+<p>
+  This is admin page!
+</p>

quartz-manager-frontend/src/app/admin/admin.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminComponent } from './admin.component';
+
+describe('AdminComponent', () => {
+  let component: AdminComponent;
+  let fixture: ComponentFixture<AdminComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AdminComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AdminComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

quartz-manager-frontend/src/app/admin/admin.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-admin',
+  templateUrl: './admin.component.html',
+  styleUrls: ['./admin.component.css']
+})
+export class AdminComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
+

quartz-manager-frontend/src/app/admin/index.ts

@@ -0,0 +1,2 @@
+export * from './admin.component';
+

quartz-manager-frontend/src/app/app-routing.module.ts

@@ -0,0 +1,60 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AppComponent } from './app.component';
+import { HomeComponent } from './home';
+import { LoginComponent } from './login';
+import { AdminComponent } from './admin';
+import { LoginGuard } from './guard';
+import { GuestGuard, AdminGuard } from './guard';
+import { NotFoundComponent } from './not-found';
+import { ChangePasswordComponent } from './change-password';
+import { ForbiddenComponent } from './forbidden';
+import { SignupComponent } from './signup';
+ 
+export const routes: Routes = [
+  {
+    path: '',
+    component: HomeComponent,
+    pathMatch: 'full'
+  },
+  {
+    path:'signup',
+    component: SignupComponent,
+    canActivate: [GuestGuard],
+    pathMatch:'full'
+  },
+  {
+    path: 'login',
+    component: LoginComponent,
+    canActivate: [GuestGuard]
+  },
+  {
+    path: 'change-password',
+    component: ChangePasswordComponent,
+    canActivate: [LoginGuard]
+  },
+  {
+    path: 'admin',
+    component: AdminComponent,
+    canActivate: [AdminGuard]
+  },
+  {
+    path: '404',
+    component: NotFoundComponent
+  },
+  {
+    path: '403',
+    component: ForbiddenComponent
+  },
+  {
+    path: '**',
+    redirectTo: '/404'
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+  providers: []
+})
+export class AppRoutingModule { }

quartz-manager-frontend/src/app/app.component.html

@@ -0,0 +1,5 @@
+<app-header></app-header>
+<div class="content">
+  <router-outlet></router-outlet>
+</div>
+<app-footer></app-footer>

quartz-manager-frontend/src/app/app.component.scss

@@ -0,0 +1,21 @@
+:host {
+  display: block;
+  color: rgba(0,0,0,.54);
+  font-family: Roboto,"Helvetica Neue";
+}
+
+.content {
+  margin: 50px 70px;
+}
+
+@media screen and (min-width: 600px) and (max-width: 1279px) {
+  .content {
+    margin: 20px 30px;
+  }
+}
+
+@media screen and (max-width: 599px) {
+  .content {
+    margin: 8px 12px;
+  }
+}

quartz-manager-frontend/src/app/app.component.spec.ts

@@ -0,0 +1,65 @@
+import { TestBed, async } from '@angular/core/testing';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+import { HomeComponent } from './home';
+import { LoginComponent } from './login';
+import { MockApiService } from './service/mocks/api.service.mock';
+
+import { LoginGuard } from './guard';
+import { NotFoundComponent } from './not-found';
+import {
+  ApiCardComponent,
+  FooterComponent,
+  GithubComponent,
+} from './component';
+
+import {
+  MatToolbarModule,
+  MatIconRegistry
+} from '@angular/material';
+
+
+import {
+  ApiService,
+  AuthService,
+  UserService,
+  FooService,
+  ConfigService
+} from './service';
+
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent,
+        FooterComponent,
+      ],
+      imports: [
+        RouterTestingModule,
+        MatToolbarModule
+      ],
+      providers: [
+        MatIconRegistry,
+        {
+          provide: ApiService,
+          useClass: MockApiService
+        },
+        AuthService,
+        UserService,
+        FooService,
+        ConfigService
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    }).compileComponents();
+  }));
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+});

quartz-manager-frontend/src/app/app.component.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+
+export class AppComponent {
+}

quartz-manager-frontend/src/app/app.module.ts

@@ -0,0 +1,103 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule, APP_INITIALIZER} from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
+// material
+import {
+  MatButtonModule,
+  MatMenuModule,
+  MatIconModule,
+  MatToolbarModule,
+  MatTooltipModule,
+  MatCardModule,
+  MatInputModule,
+  MatIconRegistry,
+  MatProgressSpinnerModule
+} from '@angular/material';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app-routing.module';
+import { HomeComponent } from './home';
+import { LoginComponent } from './login';
+import { LoginGuard, GuestGuard, AdminGuard } from './guard';
+import { NotFoundComponent } from './not-found';
+import { AccountMenuComponent } from './component/header/account-menu/account-menu.component';
+import {
+  HeaderComponent,
+  ApiCardComponent,
+  FooterComponent,
+  GithubComponent
+} from './component';
+
+import {
+  ApiService,
+  AuthService,
+  UserService,
+  FooService,
+  ConfigService
+} from './service';
+import { ChangePasswordComponent } from './change-password/change-password.component';
+import { ForbiddenComponent } from './forbidden/forbidden.component';
+import { AdminComponent } from './admin/admin.component';
+import { SignupComponent } from './signup/signup.component';
+
+export function initUserFactory(userService: UserService) {
+    return () => userService.initUser();
+}
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    HeaderComponent,
+    FooterComponent,
+    ApiCardComponent,
+    HomeComponent,
+    GithubComponent,
+    LoginComponent,
+    NotFoundComponent,
+    AccountMenuComponent,
+    ChangePasswordComponent,
+    ForbiddenComponent,
+    AdminComponent,
+    SignupComponent
+  ],
+  imports: [
+    BrowserAnimationsModule,
+    BrowserModule,
+    FormsModule,
+    ReactiveFormsModule,
+    HttpModule,
+    HttpClientModule,
+    AppRoutingModule,
+    MatMenuModule,
+    MatTooltipModule,
+    MatButtonModule,
+    MatIconModule,
+    MatInputModule,
+    MatToolbarModule,
+    MatCardModule,
+    MatProgressSpinnerModule,
+    FlexLayoutModule
+  ],
+  providers: [
+    LoginGuard,
+    GuestGuard,
+    AdminGuard,
+    FooService,
+    AuthService,
+    ApiService,
+    UserService,
+    ConfigService,
+    MatIconRegistry,
+    {
+      'provide': APP_INITIALIZER,
+      'useFactory': initUserFactory,
+      'deps': [UserService],
+      'multi': true
+    }
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

quartz-manager-frontend/src/app/change-password/change-password.component.html

@@ -0,0 +1,18 @@
+<div class="content" fxLayout="row" fxLayoutAlign="center">
+    <mat-card elevation="5" fxFlex>
+      <mat-card-subtitle>Change Your Password</mat-card-subtitle>
+      <p [class]="notification.msgType" *ngIf="notification">{{notification.msgBody}}</p>
+      <mat-card-content>
+        <form *ngIf="!submitted" [formGroup]="form" (ngSubmit)="onSubmit()" #changePasswordForm="ngForm">
+          <mat-input-container>
+            <input matInput formControlName="oldPassword" required type="password" placeholder="old password">
+          </mat-input-container>
+          <mat-input-container>
+            <input matInput formControlName="newPassword" required type="password" placeholder="new password">
+          </mat-input-container>
+          <button type="submit" [disabled]="!changePasswordForm.form.valid" mat-raised-button color="primary">Change Password</button>
+        </form>
+        <mat-spinner *ngIf="submitted" mode="indeterminate"></mat-spinner>
+      </mat-card-content>
+    </mat-card>
+</div>

quartz-manager-frontend/src/app/change-password/change-password.component.scss

@@ -0,0 +1,45 @@
+.content {
+  width: 100%;
+}
+
+mat-card {
+  max-width: 350px;
+  text-align: center;
+  animation: fadein 1s;
+  -o-animation: fadein 1s; /* Opera */
+  -moz-animation: fadein 1s; /* Firefox */
+  -webkit-animation: fadein 1s; /* Safari and Chrome */
+}
+
+mat-input-container {
+  width: 100%;
+}
+
+mat-spinner {
+  width: 25px;
+  height: 25px;
+  margin: 20px auto 0 auto;
+}
+
+.error {
+  color: #D50000;
+}
+
+.success {
+  color: #8BC34A;
+}
+
+@media screen and (max-width: 599px) {
+
+  .content {
+    /* https://github.com/angular/flex-layout/issues/295 */
+    display: block !important;
+  }
+
+  mat-card {
+    /* https://github.com/angular/flex-layout/issues/295 */
+    display: block !important;
+    max-width: 999px;
+  }
+
+}

quartz-manager-frontend/src/app/change-password/change-password.component.spec.ts

@@ -0,0 +1,52 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { RouterTestingModule } from '@angular/router/testing';
+import {
+  ApiService,
+  AuthService,
+  UserService,
+  ConfigService
+} from '../service';
+import { MockApiService } from '../service/mocks';
+
+import { ChangePasswordComponent } from './change-password.component';
+
+describe('ChangePasswordComponent', () => {
+  let component: ChangePasswordComponent;
+  let fixture: ComponentFixture<ChangePasswordComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule,
+        FormsModule,
+        ReactiveFormsModule
+      ],
+      declarations: [
+        ChangePasswordComponent
+      ],
+      providers: [
+        {
+          provide: ApiService,
+          useClass: MockApiService
+        },
+        AuthService,
+        UserService,
+        ConfigService
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChangePasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

quartz-manager-frontend/src/app/change-password/change-password.component.ts

@@ -0,0 +1,65 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AuthService } from 'app/service';
+import { Router } from '@angular/router';
+import { DisplayMessage } from '../shared/models/display-message';
+
+@Component({
+  selector: 'app-change-password',
+  templateUrl: './change-password.component.html',
+  styleUrls: ['./change-password.component.scss']
+})
+export class ChangePasswordComponent implements OnInit {
+
+  form: FormGroup;
+  /**
+   * Boolean used in telling the UI
+   * that the form has been submitted
+   * and is awaiting a response
+   */
+  submitted = false;
+
+  /**
+   * Diagnostic message from received
+   * form request error
+   */
+  notification: DisplayMessage;
+
+  constructor(
+    private authService: AuthService,
+    private router: Router,
+    private formBuilder: FormBuilder
+  ) {
+  }
+
+  ngOnInit() {
+
+    this.form = this.formBuilder.group({
+      oldPassword: ['', Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(64)])],
+      newPassword: ['', Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(32)])]
+    });
+
+  }
+
+
+  onSubmit() {
+    /**
+     * Innocent until proven guilty
+     */
+    this.notification = undefined;
+    this.submitted = true;
+
+    this.authService.changePassowrd(this.form.value)
+    // show me the animation
+    .delay(1000)
+    .mergeMap(() => this.authService.logout())
+    .subscribe(() => {
+      this.router.navigate(['/login', { msgType: 'success', msgBody: 'Success! Please sign in with your new password.'}]);
+    }, error => {
+      this.submitted = false;
+      this.notification = { msgType: 'error', msgBody: 'Invalid old password.'};
+    });
+
+  }
+
+}

quartz-manager-frontend/src/app/change-password/index.ts

@@ -0,0 +1 @@
+export * from './change-password.component';

quartz-manager-frontend/src/app/component/api-card/api-card.component.html

@@ -0,0 +1,26 @@
+<mat-card>
+  <mat-card-header>
+    <mat-card-title><b>{{title}}</b></mat-card-title>
+    <mat-card-subtitle>{{subTitle}}</mat-card-subtitle>
+  </mat-card-header>
+  <img mat-card-image [src]="imgUrl">
+  <mat-card-content>
+    <p>
+      {{content}}
+    </p>
+  </mat-card-content>
+  <mat-card-actions>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="onButtonClick()">
+      {{apiText}}
+    </button>
+  </mat-card-actions>
+  <div [class]="responsePanelClass()">
+    <pre>Path: {{responseObj.path}}</pre>
+    <pre>Method: {{responseObj.method}}</pre>
+    <pre>Status: {{responseObj.status}}</pre>
+    <pre>Message: {{responseObj.body || responseObj.message}} </pre>
+  </div>
+</mat-card>

quartz-manager-frontend/src/app/component/api-card/api-card.component.scss

@@ -0,0 +1,63 @@
+:host {
+  text-align: center;
+  max-width: 350px;
+}
+
+mat-card {
+  text-align: left;
+  .response-success {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+    color: #3c763d;
+  }
+  .response-error {
+    background-color: #f2dede;
+    border-color: #ebccd1;
+    color: #a94442;
+  }
+
+  .response {
+    max-height: 0;
+    transition: max-height 1s;
+    margin-left: -16px;
+    margin-right: -16px;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: -16px;
+    padding-bottom: 0;
+  }
+
+  .expand {
+    padding: 15px;
+    border: 1px solid transparent;
+    max-height: 999px;
+    margin-top: 8px;
+  }
+
+  mat-card-actions {
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+
+  pre {
+    display: block;
+    padding: 9.5px;
+    margin: 0 0 10px;
+    font-size: 13px;
+    line-height: 1.42857143;
+    color: #333;
+    word-break: break-all;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    background-color: #f5f5f5;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+}
+
+
+@media screen and (max-width: 599px) {
+  :host {
+    max-width: 999px;
+  }
+}

quartz-manager-frontend/src/app/component/api-card/api-card.component.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-api-card',
+  templateUrl: './api-card.component.html',
+  styleUrls: ['./api-card.component.scss']
+})
+export class ApiCardComponent implements OnInit {
+
+  @Input() title: string;
+  @Input() subTitle: string;
+  @Input() imgUrl: string;
+  @Input() content: string;
+  @Input() apiText: string;
+  @Input() responseObj: any;
+  expand = false;
+
+
+  @Output() apiClick: EventEmitter<any> = new EventEmitter();
+
+  constructor() { }
+
+  ngOnInit() {
+    console.log(this.responseObj);
+  }
+
+  onButtonClick() {
+    this.expand = true;
+    this.apiClick.next(this.apiText);
+  }
+
+  responsePanelClass() {
+    const rClass = ['response'];
+    if (this.expand) {
+      rClass.push('expand');
+    }
+    if (this.responseObj.status) {
+      this.responseObj.status === 200 ?
+        rClass.push('response-success') :
+        rClass.push('response-error');
+    }
+    return rClass.join(' ');
+  }
+
+}

quartz-manager-frontend/src/app/component/api-card/index.ts

@@ -0,0 +1 @@
+export * from './api-card.component';

quartz-manager-frontend/src/app/component/footer/footer.component.html

@@ -0,0 +1,9 @@
+<p style="margin: 0px auto; padding: 0px; color: rgba(255, 255, 255, 0.541176); max-width: 356px;"><!-- react-text: 103 -->
+  Hand crafted with love by <!-- /react-text -->
+  <a href="https://github.com/bfwg" style="color: rgba(255, 255, 255, 0.870588);">Fan Jin</a>
+  <!-- react-text: 105 --> and our awesome <!-- /react-text -->
+  <a href="https://github.com/bfwg/angular-spring-jwt-starter/graphs/contributors" style="color: rgba(255, 255, 255, 0.870588);">contributors</a><!-- react-text: 107 -->.<!-- /react-text -->
+</p>
+<a style="margin-top: 22px;" mat-icon-button href="https://github.com/bfwg/angular-spring-jwt-starter">
+  <img src="assets/image/github.png"/>
+</a>

quartz-manager-frontend/src/app/component/footer/footer.component.scss

@@ -0,0 +1,27 @@
+:host {
+  display: block;
+  font-weight: 300;
+  font-size: 15px;
+  display: block;
+  background-color: rgb(33, 33, 33);
+  height: 236px;
+  padding: 72px 24px;
+  box-sizing: border-box;
+  text-align: center;
+  a {
+    text-decoration: none;
+    cursor: auto;
+    color: #FFFFFF;
+    margin-top: 32px;
+  }
+
+  h3 {
+    margin: 0px;
+    padding: 0px;
+    font-weight: 300;
+    font-size: 22px;
+  }
+
+}
+
+

quartz-manager-frontend/src/app/component/footer/footer.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

quartz-manager-frontend/src/app/component/footer/index.ts

@@ -0,0 +1 @@
+export * from './footer.component';

quartz-manager-frontend/src/app/component/github/github.component.html

@@ -0,0 +1,4 @@
+<h3>Want to help make this project awesome? Check out our repo.</h3>
+<a href="https://github.com/bfwg/angular-spring-jwt-starter" color="accent" mat-raised-button mat-ripple>
+  <span>GITHUB</span>
+</a>

quartz-manager-frontend/src/app/component/github/github.component.scss

@@ -0,0 +1,20 @@
+:host {
+  display: block;
+  height: 236px;
+  padding: 72px 24px;
+  box-sizing: border-box;
+  background-color: rgb(238, 238, 238);
+  text-align: center
+}
+
+:host h3 {
+  margin: 0px;
+  padding: 0px;
+  font-weight: 300;
+  font-size: 22px;
+}
+
+:host a {
+  color: #000;
+  margin-top: 32px;
+}

quartz-manager-frontend/src/app/component/github/github.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-github',
+  templateUrl: './github.component.html',
+  styleUrls: ['./github.component.scss']
+})
+export class GithubComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

quartz-manager-frontend/src/app/component/github/index.ts

@@ -0,0 +1 @@
+export * from './github.component';

quartz-manager-frontend/src/app/component/header/account-menu/account-menu.component.html

@@ -0,0 +1,2 @@
+<button mat-menu-item [routerLink]="['/change-password']">CHANGE PASSWORD</button>
+<button mat-menu-item (click)="logout()">SIGN OUT</button>

quartz-manager-frontend/src/app/component/header/account-menu/account-menu.component.spec.ts

@@ -0,0 +1,53 @@
+import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import {
+  AuthService,
+  ConfigService,
+  ApiService,
+  UserService
+} from '../../../service';
+import {
+  MockUserService,
+  MockApiService
+} from '../../../service/mocks';
+import { AccountMenuComponent } from './account-menu.component';
+
+describe('AccountMenuComponent', () => {
+  let component: AccountMenuComponent;
+  let fixture: ComponentFixture<AccountMenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      providers: [
+        {
+          provide: UserService,
+          useClass: MockUserService
+        },
+        {
+          provide: ApiService,
+          useClass: MockApiService
+        },
+        AuthService,
+        ConfigService
+      ],
+      declarations: [AccountMenuComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

quartz-manager-frontend/src/app/component/header/account-menu/account-menu.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit, Input } from '@angular/core';
+import {
+  ConfigService,
+  AuthService,
+  UserService
+} from '../../../service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-account-menu',
+  templateUrl: './account-menu.component.html',
+  styleUrls: ['./account-menu.component.scss']
+})
+export class AccountMenuComponent implements OnInit {
+
+  // TODO define user interface
+  user: any;
+
+  constructor(
+    private config: ConfigService,
+    private authService: AuthService,
+    private router: Router,
+    private userService: UserService
+  ) {}
+
+  ngOnInit() {
+    this.user = this.userService.currentUser;
+  }
+
+  logout() {
+    this.authService.logout().subscribe(res => {
+      this.router.navigate(['/login']);
+    });
+  }
+}

quartz-manager-frontend/src/app/component/header/header.component.html

@@ -0,0 +1,40 @@
+<mat-toolbar color="primary" class="app-navbar">
+  <button mat-button mat-ripple routerLink="/">
+    <img alt="Quartz Manager" class="app-angular-logo" src="assets/image/angular-white-transparent.svg">
+    <span>Quartz Manager</span>
+  </button>
+  
+
+
+  <div class="right">
+    <div fxFlex="1 1 auto" fxLayout="row" fxLayoutAlign="flex-end center">
+      <button *ngIf="!hasSignedIn()" routerLink="/signup" mat-button mat-ripple>
+        <span>Sign up</span>
+      </button>
+      <button *ngIf="!hasSignedIn()" routerLink="/login" mat-button mat-ripple>
+        <span>Login</span>
+      </button>
+      <button
+        class="greeting-button"
+        *ngIf="hasSignedIn()"
+        mat-button mat-ripple
+        [matMenuTriggerFor]="accountMenu">
+        <span>Aloha, {{userName()}}</span>
+      </button>
+      <button
+        class="greeting-hamburger"
+        *ngIf="hasSignedIn()"
+        mat-icon-button mat-ripple
+        [matMenuTriggerFor]="accountMenu">
+        <mat-icon>menu</mat-icon>
+      </button>
+      <mat-menu #accountMenu
+        class="app-header-accountMenu"
+        yposition="below"
+        [overlapTrigger]="false">
+        <app-account-menu ></app-account-menu>
+      </mat-menu>
+    </div>
+  </div>
+</mat-toolbar>
+

quartz-manager-frontend/src/app/component/header/header.component.scss

@@ -0,0 +1,59 @@
+:host {
+  position: relative;
+  z-index: 10;
+  color: #fff;
+}
+
+// The menu popup is rendered outside the header component
+// so we will restyle a couple things inside a global /deep/ selector
+
+.app-navbar {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+
+  .right {
+    margin-left: auto;
+    float: right;
+  }
+}
+
+.app-navbar span {
+  text-transform: uppercase !important;
+}
+
+.app-angular-logo {
+  margin: 0 4px 3px 0;
+  height: 26px;
+}
+
+.greeting-hamburger {
+  display: none;
+}
+
+
+/deep/ {
+  .app-header-accountMenu.mat-menu-panel {
+    border-radius: 3px;
+    max-width: initial;
+    overflow: visible;
+
+    .mat-menu-content {
+      max-width: initial;
+      padding: 0;
+      overflow: hidden;
+      display: inline-block;
+      margin-bottom: -6px;
+    }
+  }
+}
+@media screen and (max-width: 600px) {
+  .greeting-hamburger {
+    display: block;
+  }
+  .greeting-button {
+    display: none;
+  }
+}
+
+

quartz-manager-frontend/src/app/component/header/header.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import {
+  UserService,
+  AuthService
+} from '../../service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent implements OnInit {
+
+  constructor(
+    private userService: UserService,
+    private authService: AuthService,
+    private router: Router
+  ) { }
+
+  ngOnInit() {
+  }
+
+  logout() {
+    this.authService.logout().subscribe(res => {
+      this.router.navigate(['/login']);
+    });
+  }
+
+  hasSignedIn() {
+    return !!this.userService.currentUser;
+  }
+
+  userName() {
+    const user = this.userService.currentUser;
+    return user.firstname + ' ' + user.lastname;
+  }
+
+}

quartz-manager-frontend/src/app/component/header/index.ts

@@ -0,0 +1 @@
+export * from './header.component';

quartz-manager-frontend/src/app/component/index.ts

@@ -0,0 +1,4 @@
+export * from './header';
+export * from './github';
+export * from './footer';
+export * from './api-card';

quartz-manager-frontend/src/app/forbidden/forbidden.component.html

@@ -0,0 +1,3 @@
+<p>
+  Your access doesn't allow!!
+</p>

quartz-manager-frontend/src/app/forbidden/forbidden.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ForbiddenComponent } from './forbidden.component';
+
+describe('ForbiddenComponent', () => {
+  let component: ForbiddenComponent;
+  let fixture: ComponentFixture<ForbiddenComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ForbiddenComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ForbiddenComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

quartz-manager-frontend/src/app/forbidden/forbidden.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-forbidden',
+  templateUrl: './forbidden.component.html',
+  styleUrls: ['./forbidden.component.css']
+})
+export class ForbiddenComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

quartz-manager-frontend/src/app/forbidden/index.ts

@@ -0,0 +1 @@
+export * from './forbidden.component';

quartz-manager-frontend/src/app/guard/admin.guard.spec.ts

@@ -0,0 +1,31 @@
+import { TestBed, async, inject } from '@angular/core/testing';
+import { Router } from '@angular/router';
+import { UserService } from '../service';
+import { AdminGuard } from './admin.guard';
+import { MockUserService } from '../service/mocks';
+
+export class RouterStub {
+  navigate(commands?: any[], extras?: any) {}
+}
+
+describe('AdminGuard', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        AdminGuard,
+        {
+          provide: Router,
+          useClass: RouterStub
+        }
+        {
+          provide: UserService,
+          useClass: MockUserService
+        }
+      ]
+    });
+  });
+
+  it('should ...', inject([AdminGuard], (guard: AdminGuard) => {
+    expect(guard).toBeTruthy();
+  }));
+});

quartz-manager-frontend/src/app/guard/admin.guard.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { UserService } from '../service';
+import { Observable } from 'rxjs/Observable';
+
+@Injectable()
+export class AdminGuard implements CanActivate {
+  constructor(private router: Router, private userService: UserService) {}
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+    if (this.userService.currentUser) {
+      if (JSON.stringify(this.userService.currentUser.authorities).search('ROLE_ADMIN') !== -1) {
+        return true;
+      } else {
+        this.router.navigate(['/403']);
+        return false;
+      }
+
+    } else {
+      console.log('NOT AN ADMIN ROLE');
+      this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
+      return false;
+    }
+  }
+}
+

quartz-manager-frontend/src/app/guard/guest.guard.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Router, CanActivate } from '@angular/router';
+import { UserService } from '../service';
+import { Observable } from 'rxjs/Observable';
+
+@Injectable()
+export class GuestGuard implements CanActivate {
+
+  constructor(private router: Router, private userService: UserService) {}
+
+  canActivate(): boolean {
+    if (this.userService.currentUser) {
+      this.router.navigate(['/']);
+      return false;
+    } else {
+      return true;
+    }
+  }
+}

quartz-manager-frontend/src/app/guard/index.ts

@@ -0,0 +1,4 @@
+export * from './login.guard';
+export * from './guest.guard';
+export * from './admin.guard';
+

quartz-manager-frontend/src/app/guard/login.guard.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Router, CanActivate } from '@angular/router';
+import { UserService } from '../service';
+import { Observable } from 'rxjs/Observable';
+
+@Injectable()
+export class LoginGuard implements CanActivate {
+
+  constructor(private router: Router, private userService: UserService) {}
+
+  canActivate(): boolean {
+    if (this.userService.currentUser) {
+      return true;
+    } else {
+      this.router.navigate(['/']);
+      return false;
+    }
+  }
+}

quartz-manager-frontend/src/app/home/home.component.html

@@ -0,0 +1,39 @@
+<div class="content" fxLayout="row" fxLayoutAlign="center none">
+  <app-api-card
+    fxFlex
+    title='"Foo"'
+    subTitle="Public"
+    imgUrl="assets/image/foo.png"
+    content='This is an demo public endpoint which requires no authentication.'
+    apiText="/quartz-manager/api/foo"
+    [responseObj]="fooResponse"
+    (apiClick)="makeRequest($event)"
+  >
+  </app-api-card>
+
+  <app-api-card
+     fxFlex
+     title='"Who am I"'
+     subTitle="Authorized role: USER"
+     imgUrl="assets/image/user.png"
+     content='The regular endpoint which returns the current user information. You have to sign in as either a User or an Admin to gain the access to this endpoint.'
+     apiText="/quartz-manager/api/whoami"
+     [responseObj]="whoamIResponse"
+     (apiClick)="makeRequest($event)"
+  >
+  </app-api-card>
+
+  <app-api-card
+     class="last"
+     fxFlex
+     title='"All users"'
+     subTitle="Authorized role: ADMIN"
+     imgUrl="assets/image/admin.png"
+     content='This endpoint will give you a list of all the users. You have to sign in as an Admin to gain the access to this endpoint.'
+     apiText="/quartz-manager/api/user/all"
+     [responseObj]="allUserResponse"
+     (apiClick)="makeRequest($event)"
+  >
+  </app-api-card>
+</div>
+<app-github></app-github>

quartz-manager-frontend/src/app/home/home.component.scss

@@ -0,0 +1,42 @@
+app-api-card {
+  margin: 0 50px 0 0;
+  &.last {
+    margin: 0 0 0 0;
+  }
+}
+
+app-github {
+  margin: 50px -70px -50px;
+}
+
+@media screen and (min-width: 600px) and (max-width: 1279px) {
+  app-api-card {
+    margin: 0 4px 0 0;
+    &.last {
+      margin: 0 0 0 0;
+    }
+  }
+
+  app-github {
+    margin: 20px -30px -20px;
+  }
+}
+
+@media screen and (max-width: 599px) {
+
+  .content {
+    /* https://github.com/angular/flex-layout/issues/295 */
+    display: block !important;
+  }
+
+  app-api-card {
+    /* https://github.com/angular/flex-layout/issues/295 */
+    display: block !important;
+    margin: 0 0 12px 0;
+  }
+
+  app-github {
+    margin: 8px -12px -8px;
+  }
+
+}

quartz-manager-frontend/src/app/home/home.component.spec.ts

@@ -0,0 +1,58 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { HomeComponent } from './home.component';
+import { ApiCardComponent, GithubComponent } from '../component';
+import { MockApiService } from '../service/mocks/api.service.mock';
+
+import {
+  MatButtonModule,
+  MatCardModule
+} from '@angular/material';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import {
+  ApiService,
+  AuthService,
+  UserService,
+  FooService,
+  ConfigService
+} from '../service';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        HomeComponent,
+        ApiCardComponent,
+        GithubComponent
+      ],
+      imports: [
+        MatButtonModule,
+        MatCardModule
+      ],
+      providers: [
+        {
+          provide: ApiService,
+          useClass: MockApiService
+        },
+        AuthService,
+        UserService,
+        FooService,
+        ConfigService
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

quartz-manager-frontend/src/app/home/home.component.ts

@@ -0,0 +1,71 @@
+import { Component, OnInit } from '@angular/core';
+import {
+  FooService,
+  ConfigService,
+  UserService
+} from '../service';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+
+  fooResponse = {};
+  whoamIResponse = {};
+  allUserResponse = {};
+  constructor(
+    private config: ConfigService,
+    private fooService: FooService,
+    private userService: UserService
+  ) { }
+
+  ngOnInit() {
+  }
+
+  makeRequest(path) {
+    if (path === this.config.foo_url) {
+      this.fooService.getFoo()
+      .subscribe(res => {
+        this.forgeResonseObj(this.fooResponse, res, path);
+      }, err => {
+        this.forgeResonseObj(this.fooResponse, err, path);
+      });
+    } else if (path === this.config.whoami_url) {
+      this.userService.getMyInfo()
+      .subscribe(res => {
+        this.forgeResonseObj(this.whoamIResponse, res, path);
+      }, err => {
+        this.forgeResonseObj(this.whoamIResponse, err, path);
+      });
+    } else {
+      this.userService.getAll()
+      .subscribe(res => {
+        this.forgeResonseObj(this.allUserResponse, res, path);
+      }, err => {
+        this.forgeResonseObj(this.allUserResponse, err, path);
+      });
+    }
+  }
+
+  forgeResonseObj(obj, res, path) {
+    obj['path'] = path;
+    obj['method'] = 'GET';
+    if (res.ok === false) {
+      // err
+      obj['status'] = res.status;
+      try {
+        obj['body'] = JSON.stringify(JSON.parse(res._body), null, 2);
+      } catch (err) {
+        console.log(res);
+        obj['body'] = res.error.message;
+      }
+    } else {
+      // 200
+      obj['status'] = 200;
+      obj['body'] = JSON.stringify(res, null, 2);
+    }
+  }
+
+}

quartz-manager-frontend/src/app/home/index.ts

@@ -0,0 +1 @@
+export * from './home.component';

quartz-manager-frontend/src/app/home_rem/home.component.html

@@ -0,0 +1,39 @@
+<div class="content" fxLayout="row" fxLayoutAlign="center none">
+  <app-api-card
+    fxFlex
+    title='"Foo"'
+    subTitle="Public"
+    imgUrl="assets/image/foo.png"
+    content='This is an demo public endpoint which requires no authentication.'
+    apiText="/quartz-manager/api/foo"
+    [responseObj]="fooResponse"
+    (apiClick)="makeRequest($event)"
+  >
+  </app-api-card>
+
+  <app-api-card
+     fxFlex
+     title='"Who am I"'
+     subTitle="Authorized role: USER"
+     imgUrl="assets/image/user.png"
+     content='The regular endpoint which returns the current user information. You have to sign in as either a User or an Admin to gain the access to this endpoint.'
+     apiText="/quartz-manager/api/whoami"
+     [responseObj]="whoamIResponse"
+     (apiClick)="makeRequest($event)"
+  >
+  </app-api-card>
+
+  <app-api-card
+     class="last"
+     fxFlex
+     title='"All users"'
+     subTitle="Authorized role: ADMIN"
+     imgUrl="assets/image/admin.png"
+     content='This endpoint will give you a list of all the users. You have to sign in as an Admin to gain the access to this endpoint.'
+     apiText="/quartz-manager/api/user/all"
+     [responseObj]="allUserResponse"
+     (apiClick)="makeRequest($event)"
+  >
+  </app-api-card>
+</div>
+<app-github></app-github>

quartz-manager-frontend/src/app/home_rem/home.component.scss

@@ -0,0 +1,42 @@
+app-api-card {
+  margin: 0 50px 0 0;
+  &.last {
+    margin: 0 0 0 0;
+  }
+}
+
+app-github {
+  margin: 50px -70px -50px;
+}
+
+@media screen and (min-width: 600px) and (max-width: 1279px) {
+  app-api-card {
+    margin: 0 4px 0 0;
+    &.last {
+      margin: 0 0 0 0;
+    }
+  }
+
+  app-github {
+    margin: 20px -30px -20px;
+  }
+}
+
+@media screen and (max-width: 599px) {
+
+  .content {
+    /* https://github.com/angular/flex-layout/issues/295 */
+    display: block !important;
+  }
+
+  app-api-card {
+    /* https://github.com/angular/flex-layout/issues/295 */
+    display: block !important;
+    margin: 0 0 12px 0;
+  }
+
+  app-github {
+    margin: 8px -12px -8px;
+  }
+
+}

quartz-manager-frontend/src/app/home_rem/home.component.spec.ts

@@ -0,0 +1,58 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { HomeComponent } from './home.component';
+import { ApiCardComponent, GithubComponent } from '../component';
+import { MockApiService } from '../service/mocks/api.service.mock';
+
+import {
+  MatButtonModule,
+  MatCardModule
+} from '@angular/material';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import {
+  ApiService,
+  AuthService,
+  UserService,
+  FooService,
+  ConfigService
+} from '../service';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        HomeComponent,
+        ApiCardComponent,
+        GithubComponent
+      ],
+      imports: [
+        MatButtonModule,
+        MatCardModule
+      ],
+      providers: [
+        {
+          provide: ApiService,
+          useClass: MockApiService
+        },
+        AuthService,
+        UserService,
+        FooService,
+        ConfigService
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

quartz-manager-frontend/src/app/home_rem/home.component.ts

@@ -0,0 +1,71 @@
+import { Component, OnInit } from '@angular/core';
+import {
+  FooService,
+  ConfigService,
+  UserService
+} from '../service';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+
+  fooResponse = {};
+  whoamIResponse = {};
+  allUserResponse = {};
+  constructor(
+    private config: ConfigService,
+    private fooService: FooService,
+    private userService: UserService
+  ) { }
+
+  ngOnInit() {
+  }
+
+  makeRequest(path) {
+    if (path === this.config.foo_url) {
+      this.fooService.getFoo()
+      .subscribe(res => {
+        this.forgeResonseObj(this.fooResponse, res, path);
+      }, err => {
+        this.forgeResonseObj(this.fooResponse, err, path);
+      });
+    } else if (path === this.config.whoami_url) {
+      this.userService.getMyInfo()
+      .subscribe(res => {
+        this.forgeResonseObj(this.whoamIResponse, res, path);
+      }, err => {
+        this.forgeResonseObj(this.whoamIResponse, err, path);
+      });
+    } else {
+      this.userService.getAll()
+      .subscribe(res => {
+        this.forgeResonseObj(this.allUserResponse, res, path);
+      }, err => {
+        this.forgeResonseObj(this.allUserResponse, err, path);
+      });
+    }
+  }
+
+  forgeResonseObj(obj, res, path) {
+    obj['path'] = path;
+    obj['method'] = 'GET';
+    if (res.ok === false) {
+      // err
+      obj['status'] = res.status;
+      try {
+        obj['body'] = JSON.stringify(JSON.parse(res._body), null, 2);
+      } catch (err) {
+        console.log(res);
+        obj['body'] = res.error.message;
+      }
+    } else {
+      // 200
+      obj['status'] = 200;
+      obj['body'] = JSON.stringify(res, null, 2);
+    }
+  }
+
+}

quartz-manager-frontend/src/app/home_rem/index.ts

@@ -0,0 +1 @@
+export * from './home.component';

quartz-manager-frontend/src/app/login/index.ts

@@ -0,0 +1 @@
+export * from './login.component';

quartz-manager-frontend/src/app/login/login.component.html

@@ -0,0 +1,43 @@
+<div class="content" fxLayout="row" fxLayoutAlign="center">
+
+    <mat-card elevation="5" fxFlex>
+
+      <mat-card-subtitle>
+        <h2>Angular Spring Starter</h2>
+      </mat-card-subtitle>
+
+      <mat-card-title>
+        <h2>{{title}}</h2>
+      </mat-card-title>
+
+      <mat-card-content>
+
+        <p [class]="notification.msgType" *ngIf="notification">{{notification.msgBody}}</p>
+
+        <form *ngIf="!submitted" [formGroup]="form" (ngSubmit)="onSubmit()" #loginForm="ngForm">
+          <mat-input-container>
+            <input matInput formControlName="username" required placeholder="user/admin">
+          </mat-input-container>
+          <mat-input-container>
+            <input matInput formControlName="password" required type="password" placeholder="123">
+          </mat-input-container>
+          <button type="submit" [disabled]="!loginForm.form.valid" mat-raised-button color="primary">Login</button>
+        </form>
+        <br>
+        <div *ngIf="!submitted" >
+          <button matTooltip="Reset password if someone has changed it already!" (click)="onResetCredentials()" mat-raised-button color="accent">Reset Credentials</button>
+        </div>
+
+        <mat-spinner *ngIf="submitted" mode="indeterminate"></mat-spinner>
+        <br>
+        <hr>
+
+        <p><i>Created by <a href="https://github.com/bfwg">Fan Jin</a></i></p>
+        <p><i>Click below to go to repository</i></p>
+        <button (click)="repository()" mat-raised-button color="accent">GitHub Repository</button>
+
+      </mat-card-content>
+
+    </mat-card>
+
+</div>

quartz-manager-frontend/src/app/login/login.component.scss

@@ -0,0 +1,58 @@
+.content {
+  width: 100%;
+}
+
+mat-card {
+  max-width: 350px;
+  text-align: center;
+  animation: fadein 1s;
+  -o-animation: fadein 1s; /* Opera */
+  -moz-animation: fadein 1s; /* Firefox */
+  -webkit-animation: fadein 1s; /* Safari and Chrome */
+
+}
+
+mat-input-container {
+  display: block;
+}
+
+mat-spinner {
+  width: 25px;
+  height: 25px;
+  margin: 20px auto 0 auto;
+}
+
+button {
+  display: block;
+  width: 100%;
+}
+
+.error {
+  color: #D50000;
+}
+
+.success {
+  color: #8BC34A;
+}
+
+
+@media screen and (max-width: 599px) {
+
+  .content {
+    /* https://github.com/angular/flex-layout/issues/295 */
+    display: block !important;
+  }
+
+  mat-card {
+    /* https://github.com/angular/flex-layout/issues/295 */
+    display: block !important;
+    max-width: 999px;
+  }
+
+}
+
+a {
+  text-decoration: none;
+  cursor: auto;
+  color: #FFFFFF;
+}

quartz-manager-frontend/src/app/login/login.component.spec.ts

@@ -0,0 +1,49 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { LoginComponent } from './login.component';
+import { RouterTestingModule } from '@angular/router/testing';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { MockApiService } from '../service/mocks/api.service.mock';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import {
+  ApiService,
+  AuthService,
+  UserService,
+  FooService,
+  ConfigService
+} from '../service';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [LoginComponent],
+      imports: [
+        ReactiveFormsModule,
+        RouterTestingModule
+      ],
+      providers: [
+        UserService,
+        {
+          provide: ApiService,
+          useClass: MockApiService
+        },
+        ConfigService,
+        AuthService
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

quartz-manager-frontend/src/app/login/login.component.ts

@@ -0,0 +1,108 @@
+import { Inject } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+import { DisplayMessage } from '../shared/models/display-message';
+import { Subscription } from 'rxjs/Subscription';
+import {
+  UserService,
+  AuthService
+} from '../service';
+
+import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/SUbject';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent implements OnInit, OnDestroy {
+  title = 'Login';
+  githubLink = 'https://github.com/bfwg/angular-spring-starter';
+  form: FormGroup;
+
+  /**
+   * Boolean used in telling the UI
+   * that the form has been submitted
+   * and is awaiting a response
+   */
+  submitted = false;
+
+  /**
+   * Notification message from received
+   * form request or router
+   */
+  notification: DisplayMessage;
+
+  returnUrl: string;
+  private ngUnsubscribe: Subject<void> = new Subject<void>();
+
+  constructor(
+    private userService: UserService,
+    private authService: AuthService,
+    private router: Router,
+    private route: ActivatedRoute,
+    private formBuilder: FormBuilder
+  ) {
+
+  }
+
+  ngOnInit() {
+    this.route.params
+    .takeUntil(this.ngUnsubscribe)
+    .subscribe((params: DisplayMessage) => {
+      this.notification = params;
+    });
+    // get return url from route parameters or default to '/'
+    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
+    this.form = this.formBuilder.group({
+      username: ['', Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(64)])],
+      password: ['', Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(32)])]
+    });
+  }
+
+  ngOnDestroy() {
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
+  }
+
+  onResetCredentials() {
+    this.userService.resetCredentials()
+    .takeUntil(this.ngUnsubscribe)
+    .subscribe(res => {
+      if (res.result === 'success') {
+        alert('Password has been reset to 123 for all accounts');
+      } else {
+        alert('Server error');
+      }
+    });
+  }
+
+  repository() {
+    window.location.href = this.githubLink;
+  }
+
+  onSubmit() {
+    /**
+     * Innocent until proven guilty
+     */
+    this.notification = undefined;
+    this.submitted = true;
+
+    this.authService.login(this.form.value)
+    // show me the animation
+    .delay(1000)
+    .subscribe(data => {
+      this.userService.getMyInfo().subscribe();
+      this.router.navigate([this.returnUrl]);
+    },
+    error => {
+      this.submitted = false;
+      this.notification = { msgType: 'error', msgBody: 'Incorrect username or password.' };
+    });
+
+  }
+
+
+}

quartz-manager-frontend/src/app/not-found/index.ts

@@ -0,0 +1 @@
+export * from './not-found.component';

quartz-manager-frontend/src/app/not-found/not-found.component.html

@@ -0,0 +1,5 @@
+<div class="container-fluid">
+  <div class="page-header">
+    <h1>Page Not Found</h1>
+  </div>
+</div>

quartz-manager-frontend/src/app/not-found/not-found.component.spec.ts

@@ -0,0 +1,32 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotFoundComponent } from './not-found.component';
+
+describe('NotFoundComponent', () => {
+  let component: NotFoundComponent;
+  let fixture: ComponentFixture<NotFoundComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [NotFoundComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotFoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('<h1> tag should contains \'Page Not Found\'', () => {
+    fixture = TestBed.createComponent(NotFoundComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Page Not Found');
+  });
+});

quartz-manager-frontend/src/app/not-found/not-found.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: './not-found.component.html'
+})
+export class NotFoundComponent {
+
+  constructor() { }
+
+}

quartz-manager-frontend/src/app/polyfills.ts

@@ -0,0 +1,74 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following to support `@angular/animation`. */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+/** Evergreen browsers require these. **/
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+
+
+
+/** ALL Firefox browsers require the following to support `@angular/animation`. **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl';  // Run `npm install --save intl`.
+
+/***************************************************************************************************
+ * MATERIAL 2
+ */
+import 'hammerjs/hammer';

quartz-manager-frontend/src/app/service/api.service.ts

@@ -0,0 +1,76 @@
+import { HttpClient, HttpHeaders, HttpResponse, HttpRequest, HttpEventType, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/Rx';
+import 'rxjs/add/observable/throw';
+import { serialize } from 'app/shared/utilities/serialize';
+
+export enum RequestMethod {
+  Get = 'GET',
+  Head = 'HEAD',
+  Post = 'POST',
+  Put = 'PUT',
+  Delete = 'DELETE',
+  Options = 'OPTIONS',
+  Patch = 'PATCH'
+}
+
+@Injectable()
+export class ApiService {
+
+  headers = new HttpHeaders({
+    'Accept': 'application/json',
+    'Content-Type': 'application/json'
+  });
+
+  constructor( private http: HttpClient) { }
+
+  get(path: string, args?: any): Observable<any> {
+    const options = {
+      headers: this.headers,
+      withCredentials: true
+    };
+
+    if (args) {
+      options['params'] = serialize(args);
+    }
+
+    return this.http.get(path, options)
+      .catch(this.checkError.bind(this));
+  }
+
+  post(path: string, body: any, customHeaders?: HttpHeaders): Observable<any> {
+    return this.request(path, body, RequestMethod.Post, customHeaders);
+  }
+
+  put(path: string, body: any): Observable<any> {
+    return this.request(path, body, RequestMethod.Put);
+  }
+
+  delete(path: string, body?: any): Observable<any> {
+    return this.request(path, body, RequestMethod.Delete);
+  }
+
+  private request(path: string, body: any, method = RequestMethod.Post, custemHeaders?: HttpHeaders): Observable<any> {
+    const req = new HttpRequest(method, path, body, {
+      headers: custemHeaders || this.headers,
+      withCredentials: true
+    });
+
+    return this.http.request(req)
+      .filter(response => response instanceof HttpResponse)
+      .map((response: HttpResponse<any>) => response.body)
+      .catch(error => this.checkError(error));
+  }
+
+  // Display error if logged in, otherwise redirect to IDP
+  private checkError(error: any): any {
+    if (error && error.status === 401) {
+      // this.redirectIfUnauth(error);
+    } else {
+      // this.displayError(error);
+    }
+    throw error;
+  }
+
+}

quartz-manager-frontend/src/app/service/auth.service.ts

@@ -0,0 +1,50 @@
+import { Injectable } from '@angular/core';
+import { HttpHeaders } from '@angular/common/http';
+import { ApiService } from './api.service';
+import { UserService } from './user.service';
+import { ConfigService } from './config.service';
+import { Observable } from 'rxjs/Observable';
+
+@Injectable()
+export class AuthService {
+
+  constructor(
+    private apiService: ApiService,
+    private userService: UserService,
+    private config: ConfigService,
+  ) { }
+
+  login(user) {
+    const loginHeaders = new HttpHeaders({
+      'Accept': 'application/json',
+      'Content-Type': 'application/x-www-form-urlencoded'
+    });
+    const body = `username=${user.username}&password=${user.password}`;
+    return this.apiService.post(this.config.login_url, body, loginHeaders).map(() => {
+      console.log("Login success");
+      this.userService.getMyInfo().subscribe();
+    });
+  }
+
+  signup(user){
+    const signupHeaders = new HttpHeaders({
+      'Accept': 'application/json',
+      'Content-Type': 'application/json'
+    });
+    return this.apiService.post(this.config.signup_url, JSON.stringify(user), signupHeaders).map(() =>{
+      console.log("Sign up success");
+    });
+  }
+  
+  logout() {
+    return this.apiService.post(this.config.logout_url, {})
+      .map(() => {
+        this.userService.currentUser = null;
+      });
+  }
+
+  changePassowrd(passwordChanger) {
+    return this.apiService.post(this.config.change_password_url, passwordChanger);
+  }
+
+}

quartz-manager-frontend/src/app/service/config.service.ts

@@ -0,0 +1,65 @@
+import { Injectable } from '@angular/core';
+import { environment } from '../../environments/environment';
+
+@Injectable()
+export class ConfigService {
+
+  private _api_url = '/quartz-manager/api'
+
+  private _refresh_token_url = this._api_url + '/refresh';
+
+  private _login_url = this._api_url + '/login';
+
+  private _logout_url = this._api_url + '/logout';
+
+  private _change_password_url = this._api_url + '/changePassword';
+
+  private _whoami_url = this._api_url + '/whoami';
+
+  private _user_url = this._api_url + '/user';
+
+  private _users_url = this._user_url + '/all';
+
+  private _reset_credentials_url = this._user_url + '/reset-credentials';
+
+  private _foo_url = this._api_url + '/foo';
+  
+  private _signup_url = this._api_url + '/signup';
+
+  get reset_credentials_url(): string {
+      return this._reset_credentials_url;
+  }
+
+  get refresh_token_url(): string {
+      return this._refresh_token_url;
+  }
+
+  get whoami_url(): string {
+      return this._whoami_url;
+  }
+
+  get users_url(): string {
+      return this._users_url;
+  }
+
+  get login_url(): string {
+      return this._login_url;
+  }
+
+  get logout_url(): string {
+      return this._logout_url;
+  }
+
+  get change_password_url(): string {
+      return this._change_password_url;
+  }
+
+  get foo_url(): string {
+      return this._foo_url;
+  }
+
+  get signup_url():string {
+      return this._signup_url;
+  }
+
+}

quartz-manager-frontend/src/app/service/foo.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { Headers } from '@angular/http';
+import { ApiService } from './api.service';
+import { ConfigService } from './config.service';
+
+@Injectable()
+export class FooService {
+
+  constructor(
+    private apiService: ApiService,
+    private config: ConfigService
+  ) { }
+
+  getFoo() {
+    return this.apiService.get(this.config.foo_url);
+  }
+
+}

quartz-manager-frontend/src/app/service/index.ts

@@ -0,0 +1,5 @@
+export * from './api.service';
+export * from './user.service';
+export * from './config.service';
+export * from './auth.service';
+export * from './foo.service';

quartz-manager-frontend/src/app/service/mocks/api.service.mock.ts

@@ -0,0 +1,21 @@
+const MockObservable = {
+  mergeMap: (cb) => {
+    return cb({ id: 123 });
+  },
+  toPromise: () => {
+    return new Promise((resolve, reject) => {
+      resolve('resolved');
+    });
+  }
+};
+
+export class MockApiService {
+  get(path: string) {
+    return MockObservable;
+  }
+  post(path: string, body) {}
+  put(path: string, body) {}
+  anonGet(path: string) {
+    return MockObservable;
+  }
+}

quartz-manager-frontend/src/app/service/mocks/index.ts

@@ -0,0 +1,2 @@
+export * from './api.service.mock';
+export * from './user.service.mock';

quartz-manager-frontend/src/app/service/mocks/user.service.mock.ts

@@ -0,0 +1,5 @@
+export class MockUserService {
+
+  currentUser = {};
+
+}

quartz-manager-frontend/src/app/service/user.service.ts

@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import { Headers } from '@angular/http';
+import { ApiService } from './api.service';
+import { ConfigService } from './config.service';
+
+@Injectable()
+export class UserService {
+
+  currentUser;
+
+  constructor(
+    private apiService: ApiService,
+    private config: ConfigService
+  ) { }
+
+  initUser() {
+    const promise = this.apiService.get(this.config.refresh_token_url).toPromise()
+    .then(res => {
+      if (res.access_token !== null) {
+        return this.getMyInfo().toPromise()
+        .then(user => {
+          this.currentUser = user;
+        });
+      }
+    })
+    .catch(() => null);
+    return promise;
+  }
+
+  resetCredentials() {
+    return this.apiService.get(this.config.reset_credentials_url);
+  }
+
+  getMyInfo() {
+    return this.apiService.get(this.config.whoami_url).map(user => this.currentUser = user);
+  }
+
+  getAll() {
+    return this.apiService.get(this.config.users_url);
+  }
+
+}

quartz-manager-frontend/src/app/shared/models/display-message.ts

@@ -0,0 +1,4 @@
+export interface DisplayMessage {
+  msgType: string;
+  msgBody: string;
+}

quartz-manager-frontend/src/app/shared/utilities/loose-invalid.ts

@@ -0,0 +1,3 @@
+export function looseInvalid(a: string|number): boolean {
+  return a === '' || a === null || a === undefined;
+}

quartz-manager-frontend/src/app/shared/utilities/serialize.ts

@@ -0,0 +1,14 @@
+import { HttpParams, HttpUrlEncodingCodec } from '@angular/common/http';
+import { looseInvalid } from './loose-invalid';
+
+export function serialize(obj: any): HttpParams {
+  let params = new HttpParams();
+
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key) && !looseInvalid(obj[key])) {
+      params = params.set(key, obj[key]);
+    }
+  }
+
+  return params;
+}

quartz-manager-frontend/src/app/signup/index.ts

@@ -0,0 +1 @@
+export * from './signup.component';

quartz-manager-frontend/src/app/signup/signup.component.html

@@ -0,0 +1,56 @@
+<div class="content" fxLayout="row" fxLayoutAlign="center">
+
+  <mat-card elevation="5" fxFlex>
+
+    <mat-card-subtitle>
+      <h2>Angular Spring Starter</h2>
+    </mat-card-subtitle>
+
+    <mat-card-title>
+      <h2>{{ title }}</h2>
+    </mat-card-title>
+
+    <mat-card-content>
+
+      <p [class]="notification.msgType" *ngIf="notification">{{notification.msgBody}}</p>
+
+      <form *ngIf="!submitted" [formGroup]="form" (ngSubmit)="onSubmit()" #signupForm="ngForm">
+        <mat-input-container>
+          <label>Username: </label>
+          <input matInput formControlName="username" required>
+        </mat-input-container>
+        <mat-input-container>
+          <label>Password: </label>
+          <input matInput formControlName="password" required type="password">
+        </mat-input-container>
+        <mat-input-container>
+          <label>First Name: </label>
+          <input matInput formControlName="firstname">
+        </mat-input-container>
+        <mat-input-container>
+          <label>Last Name: </label>
+          <input matInput formControlName="lastname">
+        </mat-input-container>
+        <button type="submit" [disabled]="!signupForm.form.valid" mat-raised-button color="primary">Sign up</button>
+      </form>
+      <br>
+
+      <mat-spinner *ngIf="submitted" mode="indeterminate"></mat-spinner>
+      <br>
+      <hr>
+
+      <p>
+        <i>Created by
+          <a href="https://github.com/bfwg">Fan Jin</a>
+        </i>
+      </p>
+      <p>
+        <i>Click below to go to repository</i>
+      </p>
+      <button (click)="repository()" mat-raised-button color="accent">GitHub Repository</button>
+
+    </mat-card-content>
+
+  </mat-card>
+
+</div>

quartz-manager-frontend/src/app/signup/signup.component.scss

@@ -0,0 +1,59 @@
+.content {
+    width: 100%;
+  }
+  
+  mat-card {
+    max-width: 350px;
+    text-align: center;
+    animation: fadein 1s;
+    -o-animation: fadein 1s; /* Opera */
+    -moz-animation: fadein 1s; /* Firefox */
+    -webkit-animation: fadein 1s; /* Safari and Chrome */
+  
+  }
+  
+  mat-input-container {
+    display: block;
+  }
+  
+  mat-spinner {
+    width: 25px;
+    height: 25px;
+    margin: 20px auto 0 auto;
+  }
+  
+  button {
+    display: block;
+    width: 100%;
+  }
+  
+  .error {
+    color: #D50000;
+  }
+  
+  .success {
+    color: #8BC34A;
+  }
+  
+  
+  @media screen and (max-width: 599px) {
+  
+    .content {
+      /* https://github.com/angular/flex-layout/issues/295 */
+      display: block !important;
+    }
+  
+    mat-card {
+      /* https://github.com/angular/flex-layout/issues/295 */
+      display: block !important;
+      max-width: 999px;
+    }
+  
+  }
+  
+  a {
+    text-decoration: none;
+    cursor: auto;
+    color: #FFFFFF;
+  }
+  

quartz-manager-frontend/src/app/signup/signup.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SignupComponent } from './signup.component';
+
+describe('SignupComponent', () => {
+  let component: SignupComponent;
+  let fixture: ComponentFixture<SignupComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SignupComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SignupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

quartz-manager-frontend/src/app/signup/signup.component.ts

@@ -0,0 +1,102 @@
+import { Inject } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+import { DisplayMessage } from '../shared/models/display-message';
+import { Subscription } from 'rxjs/Subscription';
+import {
+  UserService,
+  AuthService
+} from '../service';
+
+import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/SUbject';
+
+@Component({
+  selector: 'app-signup',
+  templateUrl: './signup.component.html',
+  styleUrls: ['./signup.component.scss']
+})
+export class SignupComponent implements OnInit, OnDestroy {
+  title = 'Sign up';
+  githubLink = 'https://github.com/bfwg/angular-spring-starter';
+  form: FormGroup;
+
+  /**
+   * Boolean used in telling the UI
+   * that the form has been submitted
+   * and is awaiting a response
+   */
+  submitted = false;
+
+  /**
+   * Notification message from received
+   * form request or router
+   */
+  notification: DisplayMessage;
+
+  returnUrl: string;
+  private ngUnsubscribe: Subject<void> = new Subject<void>();
+
+  constructor(
+    private userService: UserService,
+    private authService: AuthService,
+    private router: Router,
+    private route: ActivatedRoute,
+    private formBuilder: FormBuilder
+  ) {
+
+  }
+
+  ngOnInit() {
+    this.route.params
+    .takeUntil(this.ngUnsubscribe)
+    .subscribe((params: DisplayMessage) => {
+      this.notification = params;
+    });
+    // get return url from route parameters or default to '/'
+    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
+    this.form = this.formBuilder.group({
+      username: ['', Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(64)])],
+      password: ['', Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(32)])],
+      firstname:[''],
+      lastname: ['']
+    });
+  }
+
+  ngOnDestroy() {
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
+  }
+
+  repository() {
+    window.location.href = this.githubLink;
+  }
+
+  onSubmit() {
+    /**
+     * Innocent until proven guilty
+     */
+    this.notification = undefined;
+    this.submitted = true;
+
+    this.authService.signup(this.form.value)
+    // show me the animation
+    .delay(1000)
+    .subscribe(data => {
+      console.log(data);
+      this.authService.login(this.form.value).subscribe(data =>{
+        this.userService.getMyInfo().subscribe();
+      })
+      this.router.navigate([this.returnUrl]);
+    },
+    error => {
+      this.submitted = false;
+      console.log("Sign up error" + JSON.stringify(error));
+      this.notification = { msgType: 'error', msgBody: error['error'].errorMessage };
+    });
+
+  }
+
+
+}

quartz-manager-frontend/src/assets/image/angular-white-transparent.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 250 250" style="enable-background:new 0 0 250 250;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{opacity:0.9;}
+</style>
+<g>
+	<g>
+		<polygon class="st0" points="125,153.4 100.3,153.4 88.6,182.6 88.6,182.6 66.9,182.6 66.8,182.6 125,52.1 125,52.2 125,52.2 
+			125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,153.4 		"/>
+		<polygon class="st0" points="108,135.4 125,135.4 125,135.4 125,94.5 		"/>
+	</g>
+	<g class="st1">
+		<polygon class="st0" points="125,153.4 149.7,153.4 161.4,182.6 161.4,182.6 183.1,182.6 183.2,182.6 125,52.1 125,52.2 125,52.2 
+			125,30 125,30 218.1,63.2 203.9,186.3 125,230 125,230 125,153.4 		"/>
+		<polygon class="st0" points="142,135.4 125,135.4 125,135.4 125,94.5 		"/>
+	</g>
+</g>
+</svg>