#30 removed all classed moved in quartz-manager-security

To ease the inclusion as library in another project

.editorconfig

@@ -0,0 +1,9 @@
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 120
+tab_width = 2
+ij_continuation_indent_size = 2

.gitignore

@@ -0,0 +1 @@
+/.project

LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -1,41 +1,104 @@
-# quartz-manager
-GUI Manager for Quartz Scheduler.
-Through this webapp you can launch and control your scheduled job.
-GUI Console is composed by a managament panel to set trigger, start/stop scheduler and by a log panel with progress bar to get job output.
+[![Gitter](https://badges.gitter.im/quartz-manager/community.svg)](https://gitter.im/quartz-manager/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 
-## SCREENSHOT
-![Alt text](http://www.fabioformosa.it/quartz-manager/quartz-manager-screenshot_800.png "Quartz Manager Screenshot")
+# QUARTZ MANAGER
+UI Manager for Quartz Scheduler.
+
+Through this webapp you can launch and control your scheduled job. The UI Console is composed by a management panel to set trigger, start/stop scheduler and a log panel with a progress bar to display the job output. 
+
+![](https://github.com/fabioformosa/quartz-manager/blob/master/quartz-manager-api/src/main/resources/quartz-manager-2-screenshot_800.PNG)
 
 ## HOW IT WORKS
 * Set up the trigger into the left sidebar in terms of: daily frequency and and max occurrences.
 * Press the start button
 * The GUI manager updates the progress bar and reports all logs of your quartz job.
 
-## HOW IT RUNS
-1. Quartz-Manager is a Spring Boot Application. To run by CLI  `mvn spring-boot:run` or through your IDE. For more details [spring boot ref.](http://docs.spring.io/spring-boot/docs/current/reference/html/using-boot-running-your-application.html)
-1. Open quartz-manager at the link: [http://localhost:9000/quartz-manager/manager](http://localhost:9000/quartz-manager/manager)
-1. Log in with default credentials: `admin/admin`
+## ROADMAP
+Open the [Project Roadmap](https://github.com/fabioformosa/quartz-manager/projects) to take a look at the plan of Quartz Manager.  
+Currently this project might be useful to look how to import Quartz Library in a spring boot application. For this purpose, browse the folder `quartz-manager-parent/quartz-manager-api`.  
+We're just working to create a library, from project `quartz-manager-parent/quartz-manager-api`, to be imported in your spring boot where you have your job to be scheduled.  
+The project `quartz-manager-parent/quartz-manager-web` is an example of how-to:
+ * import the library
+ * set the application.yml
+ * add secure layer
+ * schedule a custom job (a dummy `hello world`)
 
-## HOW TO RUN YOUR JOB
-By default, quartz-manager executes the dummy job that logs "hello world!".
+## PROJECT STRUCTURE
+* **quartz-parent/quartz-manager-api** is the library that can be imported in webapp to have the quartz-manager API.
+* **quartz-parent/quartz-manager-web** is an example of webapp that imports quartz-manager-api. It adds a secure layer and a custom job to be scheduled.
+* **quartz-frontend** is the angular app that interacts with the Quartz Manager API.
+
+Next steps in the roadmap are:
+* to simplify the customization of the job through plugins
+* to add CI/CD pipeline to ease the deploy pulling a docker container
+* to add a complete setup UI panel for quartz, in term of cronjobs and multiple jobs
+* to add a persistent layer to save all job logs.
+
+## QUICK START
+**[requirements]** Make sure you have installed
+* [Java 8](https://java.com/download/) or greater
+* [Maven](https://maven.apache.org/)
+* [npm](https://www.npmjs.com/get-npm), [node](https://nodejs.org) and [angular-cli](https://cli.angular.io/)
+
+To build&run quartz-manager in your machine:
+
+```
+#CLONE REPOSITORY
+git clone https://github.com/fabioformosa/quartz-manager.git
+
+# START QUARTZ-MANAGER-WEB
+cd quartz-manager/quartz-parent/quartz-manager-web
+mvn spring-boot:run
+
+# START QUARTZ-MANAGER-FRONTEND
+cd quartz-manager/quartz-manager-frontend
+npm install
+npm start
+
+```
+
+1. Open browser at [http://localhost:4200](http://localhost:4200)
+1. Log in with **default credentials**: `admin/admin`
+
+If you are not confident with maven CLI, you can start it by your IDE. For more details [spring boot ref.](http://docs.spring.io/spring-boot/docs/current/reference/html/using-boot-running-your-application.html)
+
+
+## HOW TO RUN YOUR SCHEDULED JOB
+By default, quartz-manager-web executes the dummy job that logs "hello world!".
 Replace the dummy job (class: `it.fabioformosa.quartzmanager.jobs.SampleJob`) with yours. Follow these steps:
 
-1. Let extend the super class `it.fabioformosa.quartzmanager.jobs.AbstractLoggingJob`
-1. Change the scheduler settings, providing the class name of your job. Open class `it.fabioformosa.quartzmanager.configuration.SchedulerConfig` and for the method `jobDetail` replace SampleJob.class with YourJob.class
+1. Extend the super class `it.fabioformosa.quartzmanager.jobs.AbstractLoggingJob`
+1. set property `quartz-manager.jobClass` with qualified name of your custom Job Class (default job is SampleJob.class)
 
 ## HOW TO CHANGE SETTINGS
-* Num of Threads: `/quartz-manager/src/main/resources/quartz.properties`
-* Credentials: `it.fabioformosa.quartzmanager.configuration.WebSecurityConfig`
-* Server context path (default `/quartz-manager`) and port (default `9000`): `/quartz-manager/src/main/resources/application.properties`
+* Num of Threads: `/quartz-manager-parent/quartz-manager-web/src/main/resources/quartz.properties`
+* Credentials: To change admin's password, set ENV var `quartz-manager.account.pwd`
+* quartz-manager backend context path (default `/quartz-manager`) and port (default `8080`): `/quartz-manager/src/main/resources/application.properties`
+
+## HOW TO BROWSE REST API DOC
+Swagger has been added as library. So, you can get REST API doc opening: [http://localhost:8080/quartz-manager/swagger-ui.html](http://localhost:8080/quartz-manager/swagger-ui.html)
 
 ## Tech Overview
 
-**Backend Stack** Java 8, Spring Boot 1.5.9 (Spring MVC 4.3.13, Spring Security 4.2.3, Spring AOP 4.3.13), Quartz Scheduler 2.2.2
+**Backend Stack** Java 8, Spring Boot 2.1.4 (Spring MVC 5.1.6, Spring Security 5.1.5, Spring AOP 5.1.6), Quartz Scheduler 2.3.1
 
 **Application Server** Tomcat (embedded)
 
-**Frontend** Angularjs 1.6.7, Thymeleaf 2.1.4, Web-Socket (sockjs 0.3.4, stompjs)
+**Frontend** Angular 9.1.4, Web-Socket (stompjs 2.3.3)
 
-**Style** Bootstrap 3.3.4, animated.css, FontAwesome
+**Style** angular material, FontAwesome 5
+
+From quartz manager ver 2.x.x, the new structure of project is:
+ * REST API backend
+ * Single Page Application frontend (angular 9)
+
+(The previous version of quartz manager was a monolithic backend that provided also frontend developed with angularjs 1.6.x. You can find it at the branch 1.x.x)
+
+## Contributes
+
+Every contribution is welcome. Open a issue, so we can discuss about new features and implement them. 
+
+## Credits
+
+* this project has been created from [angular-spring-starter](https://github.com/bfwg/angular-spring-starter)
 
 

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/angular.json

@@ -0,0 +1,118 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular-spring-starter": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "aot": true,
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "angular-spring-starter:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angular-spring-starter:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "angular-spring-starter:build"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    },
+    "angular-spring-starter-e2e": {
+      "root": "e2e",
+      "sourceRoot": "e2e",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "angular-spring-starter:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "angular-spring-starter",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "style": "css"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}

quartz-manager-frontend/browserslist

@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

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/jest.setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular';

quartz-manager-frontend/karma.conf.js

@@ -0,0 +1,42 @@
+// 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-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    files: [
+      
+    ],
+    preprocessors: {
+      
+    },
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    
+    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,70 @@
+{
+  "name": "quartz-manager-ui",
+  "version": "0.1.1",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve --proxy-config proxy.conf.json",
+    "build": "ng build --prod",
+    "test": "jest",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "9.1.4",
+    "@angular/cdk": "9.2.1",
+    "@angular/common": "9.1.4",
+    "@angular/compiler": "9.1.4",
+    "@angular/core": "9.1.4",
+    "@angular/flex-layout": "9.0.0-beta.29",
+    "@angular/forms": "9.1.4",
+    "@angular/material": "9.2.1",
+    "@angular/platform-browser": "9.1.4",
+    "@angular/platform-browser-dynamic": "9.1.4",
+    "@angular/platform-server": "9.1.4",
+    "@angular/router": "9.1.4",
+    "@auth0/angular-jwt": "^4.0.0",
+    "@fortawesome/fontawesome": "^1.1.4",
+    "@fortawesome/fontawesome-free-regular": "^5.0.8",
+    "@fortawesome/fontawesome-free-solid": "^5.0.8",
+    "@stomp/ng2-stompjs": "^0.6.3",
+    "core-js": "2.5.1",
+    "hammerjs": "2.0.8",
+    "net": "^1.0.2",
+    "rxjs": "6.5.5",
+    "stompjs": "^2.3.3",
+    "tslib": "^1.10.0",
+    "zone.js": "~0.10.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.901.4",
+    "@angular-devkit/core": "^9.1.4",
+    "@angular/cli": "9.1.4",
+    "@angular/compiler-cli": "9.1.4",
+    "@angular/language-service": "9.1.4",
+    "@types/hammerjs": "2.0.34",
+    "@types/jasmine": "2.5.54",
+    "@types/jasminewd2": "2.0.3",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^5.1.2",
+    "jasmine-core": "2.6.4",
+    "jasmine-spec-reporter": "4.1.1",
+    "jest": "^26.0.1",
+    "jest-preset-angular": "^8.2.0",
+    "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": "3.8.3"
+  },
+  "jest": {
+    "preset": "jest-preset-angular",
+    "setupFilesAfterEnv": ["<rootDir>/jest.setup.ts"]
+  }
+}

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,8 @@
+{
+  "/quartz-manager": {
+    "target": "http://localhost:8080",
+    "secure": false,
+    "cookiePathRewrite": "/",
+    "ws":true
+  }
+}

quartz-manager-frontend/src/_test.ts

@@ -0,0 +1,32 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare var __karma__: any;
+declare var require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();

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

@@ -0,0 +1,55 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AppComponent } from './app.component';
+import { LoginComponent } from './views/login';
+import { LoginGuard } from './guards';
+import { GuestGuard, AdminGuard } from './guards';
+import { NotFoundComponent } from './views/not-found';
+import { ChangePasswordComponent } from './views/change-password';
+import { ForbiddenComponent } from './views/forbidden';
+
+import { ManagerComponent } from './views/manager'; 
+ 
+export const routes: Routes = [
+  {
+    path: '',
+    component: ManagerComponent,
+    canActivate: [AdminGuard],
+    pathMatch: 'full'
+  },
+  {
+    path: 'manager',
+    component: ManagerComponent,
+    canActivate: [AdminGuard],
+    pathMatch: 'full'
+  },
+  {
+    path: 'login',
+    component: LoginComponent,
+    canActivate: [GuestGuard]
+  },
+  // {
+  //   path: 'change-password',
+  //   component: ChangePasswordComponent,
+  //   canActivate: [LoginGuard]
+  // },
+  {
+    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,51 @@
+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 { MockApiService } from './services/mocks/api.service.mock';
+
+import { FooterComponent} from './components';
+
+import {MatIconRegistry} from '@angular/material/icon';
+import {MatToolbarModule} from '@angular/material/toolbar';
+
+
+import {
+  ApiService,
+  AuthService,
+  UserService,
+  ConfigService
+} from './services';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent,
+        FooterComponent,
+      ],
+      imports: [
+        RouterTestingModule,
+        MatToolbarModule
+      ],
+      providers: [
+        MatIconRegistry,
+        {
+          provide: ApiService,
+          useClass: MockApiService
+        },
+        AuthService,
+        UserService,
+        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,15 @@
+import {Component} from '@angular/core';
+
+// I remove temporary fontawesome5 and downgrade to fontawesome4
+import fontawesome from '@fortawesome/fontawesome';
+import solid from '@fortawesome/fontawesome-free-solid/';
+fontawesome.library.add(solid);
+
+@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,168 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule, APP_INITIALIZER} from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+
+import {JWT_OPTIONS, JwtModule} from "@auth0/angular-jwt";
+
+// material
+import {MatIconRegistry} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {MatChipsModule} from '@angular/material/chips';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
+
+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 { ManagerComponent } from './views/manager';
+import { LoginComponent } from './views/login';
+import { LoginGuard, GuestGuard, AdminGuard } from './guards';
+import { NotFoundComponent } from './views/not-found';
+import { AccountMenuComponent } from './components/header/account-menu/account-menu.component';
+
+import {
+  HeaderComponent,
+  FooterComponent,
+  GithubComponent,
+  SchedulerConfigComponent,
+  SchedulerControlComponent,
+  LogsPanelComponent,
+  ProgressPanelComponent
+} from './components';
+
+import {
+  ApiService,
+  AuthService,
+  UserService,
+  SchedulerService,
+  ConfigService,
+  ProgressWebsocketService,
+  LogsWebsocketService,
+  getHtmlBaseUrl
+} from './services';
+import { ChangePasswordComponent } from './views/change-password/change-password.component';
+import { ForbiddenComponent } from './views/forbidden/forbidden.component';
+import { APP_BASE_HREF } from '@angular/common';
+import { environment } from '../environments/environment';
+
+export function initUserFactory(userService: UserService) {
+    return () => userService.jsessionInitUser();
+}
+
+
+// const stompConfig: StompConfig = {
+//   // Which server?
+//   url: 'ws://localhost:8080/quartz-manager/progress',
+
+//   // Headers
+//   // Typical keys: login, passcode, host
+//   headers: {
+//     login: 'admin',
+//     passcode: 'admin'
+//   },
+
+//   // How often to heartbeat?
+//   // Interval in milliseconds, set to 0 to disable
+//   heartbeat_in: 0, // Typical value 0 - disabled
+//   heartbeat_out: 20000, // Typical value 20000 - every 20 seconds
+//   // Wait in milliseconds before attempting auto reconnect
+//   // Set to 0 to disable
+//   // Typical value 5000 (5 seconds)
+//   reconnect_delay: 5000,
+
+//   // Will log diagnostics on console
+//   debug: true
+// };
+
+export function jwtOptionsFactory(apiService: ApiService) {
+  return {
+    tokenGetter: () => {
+      return apiService.getToken();
+    },
+    whitelistedDomains: ['localhost:8080', 'localhost:4200']
+  }
+}
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    HeaderComponent,
+    FooterComponent,
+    ManagerComponent,
+    GithubComponent,
+    LoginComponent,
+    NotFoundComponent,
+    AccountMenuComponent,
+    SchedulerConfigComponent,
+    SchedulerControlComponent,
+    LogsPanelComponent,
+    ProgressPanelComponent,
+    ChangePasswordComponent,
+    ForbiddenComponent
+  ],
+  imports: [
+    BrowserAnimationsModule,
+    BrowserModule,
+    FormsModule,
+    ReactiveFormsModule,
+    HttpClientModule,
+    AppRoutingModule,
+    JwtModule.forRoot({
+      jwtOptionsProvider: {
+        provide: JWT_OPTIONS,
+        useFactory: jwtOptionsFactory,
+        deps: [ApiService]
+      }
+    }),
+    MatMenuModule,
+    MatTooltipModule,
+    MatButtonModule,
+    MatChipsModule,
+    MatIconModule,
+    MatInputModule,
+    MatToolbarModule,
+    MatCardModule,
+    MatProgressSpinnerModule,
+    MatProgressBarModule,
+    FlexLayoutModule
+  ],
+  providers: [
+    {
+      provide: APP_BASE_HREF,
+      useValue: getHtmlBaseUrl()
+    },
+    {
+      'provide': APP_INITIALIZER,
+      'useFactory': initUserFactory,
+      'deps': [UserService],
+      'multi': true
+    },
+    LoginGuard,
+    GuestGuard,
+    AdminGuard,
+    SchedulerService,
+    ProgressWebsocketService,
+    LogsWebsocketService,
+    AuthService,
+    ApiService,
+    UserService,
+    ConfigService,
+    MatIconRegistry
+    // StompService,
+    // ServerSocket
+    // {
+    //   provide: StompConfig,
+    //   useValue: stompConfig
+    // }
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

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

@@ -0,0 +1,7 @@
+<p style="margin: 0px auto; padding: 0px; color: rgba(255, 255, 255, 0.541176); max-width: 356px;">
+  Hand crafted with love by 
+  <a href="https://github.com/fabioformosa" style="color: rgba(255, 255, 255, 0.870588);">Fabio Formosa</a>
+</p>
+<a style="margin-top: 22px;" mat-icon-button href="https://github.com/fabioformosa/quartz-manager">
+  <img src="assets/image/github.png"/>
+</a>

quartz-manager-frontend/src/app/components/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/components/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/components/footer/index.ts

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

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

@@ -0,0 +1,4 @@
+<h3>Want to help make this project? Check out repo.</h3>
+<a href="https://github.com/fabioformosa/quartz-manager" color="accent" mat-raised-button mat-ripple>
+  <span>GITHUB</span>
+</a>

quartz-manager-frontend/src/app/components/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/components/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/components/github/index.ts

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

quartz-manager-frontend/src/app/components/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/components/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 '../../../services';
+import {
+  MockUserService,
+  MockApiService
+} from '../../../services/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/components/header/account-menu/account-menu.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit, Input } from '@angular/core';
+import {
+  ConfigService,
+  AuthService,
+  UserService
+} from '../../../services';
+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/components/header/header.component.html

@@ -0,0 +1,35 @@
+<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="/login" mat-button mat-ripple>
+        <span>Login</span>
+      </button>
+      <button
+        class="greeting-button"
+        *ngIf="hasSignedIn() && !noAuthenticationRequired()"
+        mat-button mat-ripple
+        [matMenuTriggerFor]="accountMenu">
+        <span>Hi, {{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/components/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;
+}
+
+
+::ng-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/components/header/header.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+import {
+  UserService,
+  AuthService,
+  NO_AUTH
+} from '../../services';
+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;
+  }
+
+  noAuthenticationRequired = () => this.hasSignedIn() && this.userService.currentUser === NO_AUTH; 
+  
+
+  userName() {
+    const user = this.userService.currentUser;
+    return user.username;
+  }
+
+}

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

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

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

@@ -0,0 +1,7 @@
+export * from './header';
+export * from './github';
+export * from './footer';
+export * from './logs-panel';
+export * from './scheduler-config';
+export * from './scheduler-control';
+export * from './progress-panel';

quartz-manager-frontend/src/app/components/logs-panel/index.ts

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

quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.html

@@ -0,0 +1,29 @@
+<mat-card>
+    <mat-card-header>
+        <mat-card-title><b>JOB LOGS</b></mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+            <div id="logs">
+                <div *ngFor = "let log of logs" fxLayout="row" fxLayout.xs="column">
+                    <div fxFlex="1 1 20%">
+                        <span [ngClass]="{'animated zoomIn firstLog': $first}"> [{{log.time|date:'medium'}}]</span>
+                    </div>
+                    <div fxFlex="1 1 10%">
+                        <span [ngClass]="{'animated zoomIn firstLog': $first}">
+                        <i class = "fas" [ngClass]="{'fa-check-circle green': log.type == 'INFO',
+                                                     'fa-exclamation-triangle yellow': log.type == 'WARN',	
+                                                     'fa-times-circle red': log.type == 'ERROR'}"></i>	  		  
+                        </span>
+                    </div>
+                    <div fxFlex="1 1 20%">
+                        <span [ngClass]="{'animated zoomIn firstLog': $first}">
+                        {{log.threadName}}		  
+                        </span>
+                    </div>
+                    <div fxFlex="1 1 50%">
+                        <span [ngClass]="{'animated zoomIn firstLog': $first}"> {{log.msg}}</span>
+                    </div>
+                </div>
+            </div>
+    </mat-card-content>
+</mat-card>

quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.scss

@@ -0,0 +1,10 @@
+.red{
+  color: red;
+}
+.green{
+  color: green;
+}
+
+.yellow{
+  color: gold;
+}

quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.ts

@@ -0,0 +1,53 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+import { LogsWebsocketService, ApiService } from '../../services';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'logs-panel',
+  templateUrl: './logs-panel.component.html',
+  styleUrls: ['./logs-panel.component.scss']
+})
+export class LogsPanelComponent implements OnInit {
+
+  MAX_LOGS : number = 20;
+
+  logs : Array<any> = new Array();
+
+  constructor(
+    private logsWebsocketService: LogsWebsocketService,
+    private apiService : ApiService
+  ) { }
+
+  ngOnInit() {
+    let obs = this.logsWebsocketService.getObservable()
+    obs.subscribe({
+      'next' : this.onNewLogMsg,
+      'error' : (err) => {console.log(err)}
+    });
+  }
+
+  onNewLogMsg = (receivedMsg) => {
+    if(receivedMsg.type == 'SUCCESS')
+      this._showNewLog(receivedMsg.message);
+    else if(receivedMsg.type == 'ERROR')
+      this._refreshSession(); //if websocket has been closed for session expiration, try to refresh it
+  };
+
+  _showNewLog = (logRecord) => {
+    if(this.logs.length > this.MAX_LOGS)
+      this.logs.pop();
+    
+    this.logs.unshift({
+      time : logRecord.date,
+      type : logRecord.type,
+			msg : logRecord.message,
+			threadName : logRecord.threadName
+    });
+  }
+
+  _refreshSession = () => {
+    this.apiService.get('/quartz-manager/session/refresh')
+  }
+
+}

quartz-manager-frontend/src/app/components/progress-panel/index.ts

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

quartz-manager-frontend/src/app/components/progress-panel/progress-panel.component.html

@@ -0,0 +1,36 @@
+<!-- <div class="progress" [hidden]="progress.percentage < 0">
+    <div class="progress-bar" 
+            role="progressbar" 
+            [ngStyle]="{width: percentageStr}">
+        {{percentageStr}}
+    </div>
+</div> -->
+
+<mat-card>
+    <mat-card-header>
+        <mat-card-title><b>JOB PROGRESS</b></mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+                <div>
+                    <mat-progress-bar mode="determinate" value="{{progress.percentage}}"></mat-progress-bar>
+                    {{percentageStr}}
+                </div>
+                
+                <br>
+
+                <div>
+                    <mat-chip>counter</mat-chip>&nbsp; 
+                    <span class="animated pulse">{{progress.timesTriggered}}</span> <span ng-show="progress.repeatCount > 0">/ {{progress.repeatCount}} </span>
+                    
+                    <br/><br/>
+                    
+                    <mat-chip>job key</mat-chip> <span class="animated pulse">{{progress.jobKey}}</span><br>
+                    <mat-chip>job class</mat-chip> <span class="animated pulse">{{progress.jobClass}}</span><br/>
+                    
+                    <br/>
+                    <mat-chip>prev fire time</mat-chip> <span class="animated pulse">{{progress.previousFireTime|date:'dd-MM-yyyy HH:mm:ss'}}</span><br/>
+                    <mat-chip>next fire time</mat-chip> <span class="animated pulse">{{progress.nextFireTime|date:'dd-MM-yyyy HH:mm:ss'}}</span><br/>
+                    <mat-chip>final fire time</mat-chip> <span class="animated pulse">{{progress.finalFireTime|date:'dd-MM-yyyy HH:mm:ss'}}</span><br/>
+                </div>
+    </mat-card-content>
+</mat-card>

quartz-manager-frontend/src/app/components/progress-panel/progress-panel.component.ts

@@ -0,0 +1,85 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
+import {  ProgressWebsocketService } from '../../services';
+
+import { Observable } from 'rxjs';
+// import {Message} from '@stomp/stompjs';
+
+// import { Subscription } from 'rxjs/Subscription';
+// import {StompService} from '@stomp/ng2-stompjs';
+
+// import { QueueingSubject } from 'queueing-subject'
+// import websocketConnect from 'rxjs-websockets'
+// import 'rxjs/add/operator/share'
+// import {ServerSocket} from '../../services/qz.socket.service'
+
+@Component({
+  selector: 'progress-panel',
+  templateUrl: './progress-panel.component.html',
+  styleUrls: ['./progress-panel.component.scss']
+})
+export class ProgressPanelComponent implements OnInit {
+
+  progress : any = {}
+  percentageStr : string
+
+  // // Stream of messages
+  // private subscription: Subscription;
+  // public messages: Observable<Message>;
+  // // Subscription status
+  // public subscribed: boolean;
+  // // Array of historic message (bodies)
+  // public mq: Array<string> = [];
+
+
+  // private socketSubscription  
+
+  constructor(
+    private progressWebsocketService: ProgressWebsocketService,
+    // private _stompService: StompService,
+    // private serverSocket : ServerSocket
+  ) { }
+
+  onNewProgressMsg = (receivedMsg) => {
+    if (receivedMsg.type == 'SUCCESS') {
+      var newStatus = receivedMsg.message;
+      this.progress = newStatus;
+      this.percentageStr = this.progress.percentage + '%';
+    }
+  }
+
+  ngOnInit() {
+    let obs = this.progressWebsocketService.getObservable()
+    obs.subscribe({
+      'next' : this.onNewProgressMsg,
+      'error' : (err) => {console.log(err)}
+    });
+
+    // this.subscribed = false;
+    // this.subscribe();
+
+    // this.serverSocket.connect()
+    // this.socketSubscription = this.serverSocket.messages.subscribe((message: string) => {
+    //   console.log('received message from server: ', message)
+    // })
+  }
+
+  // public subscribe() {
+  //   if (this.subscribed) {
+  //     return;
+  //   }
+
+  //   // Stream of messages
+  //   this.messages = this._stompService.subscribe('/topic/progress');
+
+  //   // Subscribe a function to be run on_next message
+  //   this.subscription = this.messages.subscribe(this.on_next);
+
+  //   this.subscribed = true;
+  // }
+
+  // public on_next = (message: Message) => {
+  //   this.mq.push(message.body + '\n');
+  //   console.log(message);
+  // }
+
+}

quartz-manager-frontend/src/app/components/scheduler-config/index.ts

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

quartz-manager-frontend/src/app/components/scheduler-config/scheduler-config.component.html

@@ -0,0 +1,38 @@
+<mat-card>
+	<mat-card-header>
+		<mat-card-title><b>SCHEDULER CONFIG</b></mat-card-title>
+	</mat-card-header>
+	<mat-card-content>
+		<div fxLayout="column">
+			<form name="configForm" fxFlex="1 1 100%" #configForm="ngForm">
+				<mat-form-field>
+					<input matInput placeholder="Freq [Num per day]" [(ngModel)]="config.triggerPerDay" name="triggerPerDay" type="number">
+				</mat-form-field>
+				<mat-form-field>
+					<input matInput placeholder="Max Occurrences" [(ngModel)]="config.maxCount" name="maxCount" type="number">
+				</mat-form-field>
+			
+				<br>
+
+				<div>
+					<h5>Misfire Policy</h5>
+					<div>RESCHEDULE NEXT WITH EXISTING COUNT</div>
+					<div class="small">
+						In case of misfire event, the trigger is re-scheduled to the next scheduled time after 'now' with the repeat count left unchanged (missed events are definitively lost). 
+						<br/>
+						<strong>Warning:</strong> This policy could cause the trigger to go directly to the complete state if the end-time of the trigger has arrived,
+						so this misfire instruction doesn't guarantee that the repeat counter reaches your max value, but it guarantees that the end-time doesn't go over the expected final fire time.	
+					</div>
+				</div>
+				
+				<br>
+
+				<button mat-raised-button
+					 	type="button" 
+						(click)="submitConfig()">
+						Submit
+				</button>
+			</form>
+		</div>
+	</mat-card-content>
+</mat-card>

quartz-manager-frontend/src/app/components/scheduler-config/scheduler-config.component.scss

@@ -0,0 +1,3 @@
+.small{
+    font-size: 0.8em;
+}

quartz-manager-frontend/src/app/components/scheduler-config/scheduler-config.component.ts

@@ -0,0 +1,40 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { SchedulerService } from '../../services';
+import { SchedulerConfig } from '../../model/schedulerConfig.model'
+
+@Component({
+  selector: 'scheduler-config',
+  templateUrl: './scheduler-config.component.html',
+  styleUrls: ['./scheduler-config.component.scss']
+})
+export class SchedulerConfigComponent implements OnInit {
+
+  constructor(
+    private schedulerService: SchedulerService
+  ) { }
+
+  config : SchedulerConfig = new SchedulerConfig()
+  configBackup : SchedulerConfig = new SchedulerConfig()
+
+  ngOnInit() {
+    this.retrieveConfig()
+  }
+
+  retrieveConfig = () => {
+    this.schedulerService.getConfig()
+      .subscribe(res => {
+        this.config = new SchedulerConfig(res.triggerPerDay, res.maxCount)
+        this.configBackup = res
+      })
+  }
+
+  submitConfig = () => {
+    this.schedulerService.updateConfig(this.config)
+      .subscribe(res => {
+        this.configBackup = this.config;
+      }, error => {
+        this.config = this.configBackup;
+      });
+  };
+
+}

quartz-manager-frontend/src/app/components/scheduler-control/index.ts

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

quartz-manager-frontend/src/app/components/scheduler-control/scheduler-control.component.html

@@ -0,0 +1,15 @@
+<mat-card>
+	<mat-card-header>
+		<mat-card-title><b>SCHEDULER CONTROLLER</b></mat-card-title>
+	</mat-card-header>
+	<mat-card-content>
+		<button id="schedulerControllerBtn1" mat-raised-button class="btn btn-default large-btn" (click)="startOrPause()">
+			<span *ngIf = "schedulerState === 'running'">
+				<i class="fas fa-pause red"></i>
+			</span>
+			<span *ngIf = "schedulerState === 'stopped' || schedulerState === 'paused'">
+				<i class="fas fa-play green"></i>
+			</span>
+		</button>
+	</mat-card-content>
+</mat-card>

quartz-manager-frontend/src/app/components/scheduler-control/scheduler-control.component.scss

@@ -0,0 +1,6 @@
+.red{
+  color: red;
+}
+.green{
+  color: green;
+}

quartz-manager-frontend/src/app/components/scheduler-control/scheduler-control.component.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { UserService, SchedulerService } from '../../services';
+
+@Component({
+  selector: 'scheduler-control',
+  templateUrl: './scheduler-control.component.html',
+  styleUrls: ['./scheduler-control.component.scss']
+})
+export class SchedulerControlComponent implements OnInit {
+
+  schedulerState;
+  
+  constructor(
+    private userService: UserService,
+    private schedulerService: SchedulerService
+  ) { }
+
+  ngOnInit() {
+    this.schedulerService.getStatus().subscribe(res => {this.schedulerState = res.data}, err => {console.log(err)});
+  }
+
+  startScheduler = function(){
+    this.schedulerService.startScheduler().subscribe((res) => {this.schedulerState = 'running'}, (res) => {console.log(JSON.stringify(res))});
+  };
+
+  stopScheduler = function(){
+    this.schedulerService.stopScheduler().subscribe((res) => {this.schedulerState = 'stopped'}, (res) => {console.log(JSON.stringify(res))});
+  };
+
+  pauseScheduler = function(){
+    this.schedulerService.pauseScheduler().subscribe((res) => {this.schedulerState = 'paused'}, (res) => {console.log(JSON.stringify(res))});
+  };
+
+  resumeScheduler = function(){
+    this.schedulerService.resumeScheduler().subscribe((res) => {this.schedulerState = 'running'}, (res) => {console.log(JSON.stringify(res))});
+  };
+
+  stop = function(){  
+    if(this.schedulerState != 'stopped')
+      this.stopScheduler();
+  }
+
+  startOrPause = function(){
+    switch (this.schedulerState) {
+    case 'running':	this.pauseScheduler();
+            break;
+    case 'paused':	this.resumeScheduler();
+            break;
+    default:
+      this.startScheduler();
+      break;
+    }
+  };
+
+}

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

@@ -0,0 +1,105 @@
+import { TestBed, async, inject } from '@angular/core/testing';
+import { Router } from '@angular/router';
+import { NO_AUTH, UserService } from '../services';
+import { AdminGuard } from './admin.guard';
+import {jest} from '@jest/globals'
+
+export class RouterStub {
+  navigate(commands?: any[], extras?: any) {}
+}
+
+const RouterSpy = jest.spyOn(RouterStub.prototype, 'navigate');
+
+const MockUserServiceNoAuth = jest.fn(() => ({currentUser: NO_AUTH}));
+const MockUserService = jest.fn(() => ({
+  currentUser: {
+    authorities: ['ROLE_ADMIN']
+  }
+}));
+const MockUserServiceForbidden = jest.fn(() => ({
+  currentUser: {
+    authorities: ['ROLE_GUEST']
+  }
+}));
+
+describe('AdminGuard NoAuth', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        AdminGuard,
+        {
+          provide: Router,
+          useClass: RouterStub
+        },
+        {
+          provide: UserService,
+          useClass: MockUserServiceNoAuth
+        }
+      ]
+    });
+  });
+
+  it('should run', inject([AdminGuard], (guard: AdminGuard) => {
+    expect(guard).toBeTruthy();
+  }));
+
+  it('returns true if user is NO_AUTH',inject([AdminGuard], (guard: AdminGuard) => {
+    expect(guard.canActivate(null, null)).toBeTruthy();
+  }));
+
+});
+
+describe('AdminGuard activates the route', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        AdminGuard,
+        {
+          provide: Router,
+          useClass: RouterStub
+        },
+        {
+          provide: UserService,
+          useClass: MockUserService
+        }
+      ]
+    });
+  });
+
+  it('should run', inject([AdminGuard], (guard: AdminGuard) => {
+    expect(guard).toBeTruthy();
+  }));
+
+  it('returns true if user has admin role',inject([AdminGuard], (guard: AdminGuard) => {
+    expect(guard.canActivate(null, null)).toBeTruthy();
+  }));
+
+});
+
+describe('AdminGuard redirects to 403', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        AdminGuard,
+        {
+          provide: Router,
+          useClass: RouterStub
+        },
+        {
+          provide: UserService,
+          useClass: MockUserServiceForbidden
+        }
+      ]
+    });
+  });
+
+  it('should run', inject([AdminGuard], (guard: AdminGuard) => {
+    expect(guard).toBeTruthy();
+  }));
+
+  it('returns false if user is not authorized',inject([AdminGuard], (guard: AdminGuard) => {
+    expect(guard.canActivate(null, null)).toBeFalsy();
+    expect(RouterSpy).toHaveBeenCalledTimes(1);
+  }));
+
+});

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

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { UserService } from '../services';
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class AdminGuard implements CanActivate {
+  constructor(private router: Router, private userService: UserService) {}
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+    if (this.userService.currentUser) {
+      if(this.userService.currentUser === 'NO_AUTH')
+        return true;
+      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/guards/guest.guard.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Router, CanActivate } from '@angular/router';
+import { UserService } from '../services';
+import { Observable } from 'rxjs';
+
+@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/guards/index.ts

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

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

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Router, CanActivate } from '@angular/router';
+import { UserService } from '../services';
+import { Observable } from 'rxjs';
+
+@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/model/SocketEndpoint.model.ts

@@ -0,0 +1,4 @@
+export class SocketEndpoint{
+    client : any
+    stomp : any
+}

quartz-manager-frontend/src/app/model/SocketOption.model.ts

@@ -0,0 +1,17 @@
+export class SocketOption{
+    socketUrl  : string;
+    topicName  : string; 
+    brokerName : string;
+    reconnectionTimeout : number = 30000
+
+    getAccessToken: Function = () => null;
+
+    constructor(socketUrl : string, topicName : string, getAccessToken?: Function, brokerName : string = null, reconnectionTimeout : number = 30000){
+        this.socketUrl = socketUrl;
+        this.topicName = topicName;
+        this.brokerName = brokerName;
+        this.reconnectionTimeout = reconnectionTimeout;
+        this.getAccessToken = getAccessToken || (() => null);
+    }
+
+}

quartz-manager-frontend/src/app/model/schedulerConfig.model.ts

@@ -0,0 +1,11 @@
+export class SchedulerConfig {
+
+    triggerPerDay : number = 0
+    maxCount : number = 0
+
+    constructor(triggerPerDay = 0, maxCount = 0) {
+      this.triggerPerDay = triggerPerDay
+      this.maxCount = maxCount
+    }
+  
+  }

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/services/api.service.spec.ts

@@ -0,0 +1,83 @@
+import { TestBed } from "@angular/core/testing";
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { ApiService } from './api.service';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Router} from '@angular/router';
+import {jest} from '@jest/globals'
+
+class Data{
+    name: string
+}
+
+class HttpResponseMock {
+    constructor(
+      public body: unknown,
+      public opts?: {
+        headers?:
+          | HttpHeaders
+          | {
+              [name: string]: string | string[];
+            };
+        status?: number;
+        statusText?: string;
+      }
+    ) {}
+  }
+
+const routerSpy = jest.spyOn(Router.prototype, 'navigateByUrl');
+
+describe('ApiServiceTest', () => {
+
+    let apiService: ApiService;
+    let httpClient: HttpClient;
+    let httpTestingController: HttpTestingController;
+
+    const SAMPLE_URL = '/sample-url';
+    const URL_401 = '/url-response-401';
+    const testData: Data = {name: 'Test Data'};
+
+    beforeEach(() => {
+
+        TestBed.configureTestingModule({ 
+            imports: [HttpClientTestingModule],
+            providers: [ApiService, {provide: Router, useValue: routerSpy}]
+        });
+        apiService = TestBed.inject(ApiService);
+
+        httpClient = TestBed.inject(HttpClient);
+        httpTestingController = TestBed.inject(HttpTestingController);
+    });
+
+    it('should be created', (): void => {
+        expect(apiService).toBeTruthy();
+    });
+
+    it('can test HttpClient.get', (): void => {
+
+        apiService.get(SAMPLE_URL).subscribe((res: Data) => {
+            expect(res).toEqual(testData);
+        });
+        
+        const req = httpTestingController.expectOne(SAMPLE_URL)
+        expect(req.request.method).toEqual('GET');
+        req.flush(new HttpResponseMock(testData));
+        httpTestingController.verify();
+    });
+
+    it('doesn\'t do anything if 401 is received', (): void => {
+
+        apiService.get(URL_401).subscribe((res: Data) => {
+            expect(false);
+        }, (error) => 
+        {
+            expect(error.status).toBe(401);
+            expect(routerSpy).toHaveBeenCalledTimes(1);
+        });
+        
+        const req = httpTestingController.expectOne(URL_401)
+        expect(req.request.method).toEqual('GET');
+        req.flush(null, {status: 401, statusText: 'unauthenticated'});
+        httpTestingController.verify();
+    });
+
+});

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

@@ -0,0 +1,105 @@
+import { HttpClient, HttpHeaders, HttpResponse, HttpRequest, HttpEventType, HttpParams } from '@angular/common/http';
+import { Router} from '@angular/router';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { catchError, map, filter, tap } from 'rxjs/operators'
+import { serialize } from '../shared/utilities/serialize';
+
+export enum RequestMethod {
+  Get = 'GET',
+  Head = 'HEAD',
+  Post = 'POST',
+  Put = 'PUT',
+  Delete = 'DELETE',
+  Options = 'OPTIONS',
+  Patch = 'PATCH'
+}
+
+@Injectable()
+export class ApiService {
+
+  private static extractTokenFromHttpResponse(res: HttpResponse<any>): string {
+    let authorization: string = null;
+    let headers: HttpHeaders = res.headers;
+    if (headers && headers.has('Authorization')){
+      authorization = headers.get('Authorization');
+      if(authorization.startsWith('Bearer '))
+      authorization = authorization.substring(7);
+    }
+    return authorization;
+  }
+
+  headers = new HttpHeaders({
+    'Accept': 'application/json',
+    'Content-Type': 'application/json'
+  });
+
+  private jwtToken: string;
+
+  constructor( private http: HttpClient, private router: Router) { }
+
+  setToken(token: string) {
+    this.jwtToken = token;
+  }
+
+  getToken = () => this.jwtToken;
+
+  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)
+      .pipe(catchError(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, customHeaders?: HttpHeaders): Observable<any> {
+    const options = {
+      headers: customHeaders || this.headers,
+      withCredentials: true
+    }    
+
+    const req = new HttpRequest(method, path, body, options);
+
+    return this.http.request(req)
+      .pipe(
+              filter(response => response instanceof HttpResponse),
+              tap((resp: HttpResponse<any>) => {
+                let jwtToken = ApiService.extractTokenFromHttpResponse(resp);
+                if(jwtToken)
+                  this.setToken(jwtToken);
+              }),
+              map((response: HttpResponse<any>) => response.body),
+              catchError(error => this.checkError(error))
+      )
+  }
+
+  // Display error if logged in, otherwise redirect to IDP
+  private checkError(error: any): any {
+    if (error && error.status === 401) {
+      this.router.navigate(['/login']);
+    } else {
+      // this.displayError(error);
+    }
+    throw error;
+  }
+
+  
+
+}

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

@@ -0,0 +1,55 @@
+import { Injectable } from '@angular/core';
+import { HttpHeaders, HttpResponse } from '@angular/common/http';
+import { ApiService } from './api.service';
+import { UserService } from './user.service';
+import { ConfigService } from './config.service';
+import { map } from 'rxjs/operators';
+
+@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)
+						  .pipe(
+								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).pipe(map(() =>{
+      console.log("Sign up success");
+    }));
+  }
+  
+  logout() {
+    return this.apiService.post(this.config.logout_url, {})
+      .pipe(map(() => {
+        this.apiService.setToken(null);
+        this.userService.currentUser = null;
+      }));
+  }
+
+  changePassword(passwordChanger) {
+    return this.apiService.post(this.config.change_password_url, passwordChanger);
+  }
+
+
+}

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

@@ -0,0 +1,79 @@
+import { Injectable } from '@angular/core';
+import { environment } from '../../environments/environment';
+
+
+const WEBJAR_PATH = '/quartz-manager-ui/';
+
+export function getHtmlBaseUrl(){
+    const baseUrl = getBaseUrl() || '/';
+    return environment.production ? getBaseUrl() + WEBJAR_PATH: '/';
+  }
+
+export function getBaseUrl(){
+    if(environment.production){
+        let contextPath: string = window.location.pathname.split('/')[1] || '';
+        if(contextPath && ('/' + contextPath + '/') === WEBJAR_PATH)
+            return '';
+        if(contextPath)
+          contextPath = '/' + contextPath;
+       return contextPath;
+     }
+     return '';
+}
+
+@Injectable()
+export class ConfigService {
+
+  private _api_url = getBaseUrl() + '/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 _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 signup_url():string {
+      return this._signup_url;
+  }
+
+}

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

@@ -0,0 +1,9 @@
+export * from './api.service';
+export * from './user.service';
+export * from './config.service';
+export * from './auth.service';
+export * from './scheduler.service';
+export * from './websocket.service';
+export * from './progress.websocket.service';
+export * from './logs.websocket.service';
+

quartz-manager-frontend/src/app/services/logs.websocket.service.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+import { WebsocketService, ApiService, getBaseUrl } from '.';
+import { SocketOption } from '../model/SocketOption.model';
+
+@Injectable()
+export class LogsWebsocketService extends WebsocketService {
+
+    constructor(private apiService: ApiService){
+        super(new SocketOption( getBaseUrl() +'/quartz-manager/logs', '/topic/logs', apiService.getToken))
+    }
+
+}

quartz-manager-frontend/src/app/services/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/services/mocks/index.ts

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

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

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

quartz-manager-frontend/src/app/services/progress.websocket.service.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+import { WebsocketService, ApiService, getBaseUrl } from '.';
+import { SocketOption } from '../model/SocketOption.model';
+
+@Injectable()
+export class ProgressWebsocketService extends WebsocketService {
+
+    constructor(private apiService: ApiService){
+        super(new SocketOption(getBaseUrl() + '/quartz-manager/progress', '/topic/progress', apiService.getToken))
+    }
+
+}

quartz-manager-frontend/src/app/services/scheduler.service.ts

@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { getBaseUrl } from '.';
+import { ApiService } from './api.service';
+
+@Injectable()
+export class SchedulerService {
+
+  constructor(
+    private apiService: ApiService
+  ) { }
+
+  startScheduler = () => {
+    return this.apiService.get(getBaseUrl() + '/quartz-manager/scheduler/run')
+  }
+  
+  stopScheduler = () => {
+    return this.apiService.get(getBaseUrl() + '/quartz-manager/scheduler/stop')
+  }
+  
+  pauseScheduler = () => {
+    return this.apiService.get(getBaseUrl() + '/quartz-manager/scheduler/pause')
+  }
+  
+  resumeScheduler = () => {
+    return this.apiService.get(getBaseUrl() + '/quartz-manager/scheduler/resume')
+  }
+
+  getStatus = () => {
+    return this.apiService.get(getBaseUrl() + '/quartz-manager/scheduler')
+  }
+
+  getConfig = () => {
+    return this.apiService.get(getBaseUrl() + '/quartz-manager/scheduler/config')
+  }
+
+  updateConfig = (config: Object) => {
+    return this.apiService.post(getBaseUrl() + '/quartz-manager/scheduler/config', config)
+  }
+}

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

@@ -0,0 +1,55 @@
+import { Injectable } from '@angular/core';
+import { ApiService } from './api.service';
+import { ConfigService } from './config.service';
+
+import { map } from 'rxjs/operators'
+
+export const NO_AUTH: string = 'NO_AUTH'
+
+@Injectable()
+export class UserService {
+
+  currentUser;
+
+  constructor(
+    private apiService: ApiService,
+    private config: ConfigService
+  ) { }
+
+  jwtInitUser() {
+    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;
+  }
+
+  jsessionInitUser() {
+    return this.getMyInfo().toPromise()
+        .then(user => {
+          this.currentUser = user;
+        }, err => {
+          //not logged
+          console.log(`error retrieving current user due to ` + err);
+        });
+  }
+
+  resetCredentials() {
+    return this.apiService.get(this.config.reset_credentials_url);
+  }
+
+  getMyInfo() {
+    return this.apiService.get(this.config.whoami_url).pipe(map(user => this.currentUser = user));
+  }
+
+  getAll() {
+    return this.apiService.get(this.config.users_url);
+  }
+
+}

quartz-manager-frontend/src/app/services/websocket.service.ts

@@ -0,0 +1,125 @@
+import { Observable } from 'rxjs';
+import { SocketEndpoint } from '../model/SocketEndpoint.model'
+
+
+import Stomp from 'stompjs';
+import SockJS from 'sockjs-client';
+import { SocketOption } from '../model/SocketOption.model';
+
+export class WebsocketService {
+
+    _options : SocketOption;
+
+    _socket : SocketEndpoint = new SocketEndpoint();
+    
+    observableStompConnection : Observable<any>;
+    subscribers : Array<any> = [];
+    subscriberIndex : number = 0;
+
+    _messageIds : Array<any> = [];
+
+    reconnectionPromise : any;
+
+    constructor(options : SocketOption){
+        this._options = options
+        this.createObservableSocket();
+        this.connect();
+    }
+
+    //TO BE OVERIDDEN
+    getOptions =  ()  => {return {}}
+    
+    private createObservableSocket = () => {
+        this.observableStompConnection = new Observable((observer) => {
+            const subscriberIndex = this.subscriberIndex++;
+            this.addToSubscribers({ index: subscriberIndex, observer });
+            return () => this.removeFromSubscribers(subscriberIndex);
+        });
+    }
+
+    addToSubscribers = (subscriber) => {
+        this.subscribers.push(subscriber);
+    }
+
+    removeFromSubscribers = (index) => {
+        if(index > this.subscribers.length)
+            throw new Error(`Unexpected error removing subscriber from websocket, because index ${index} is greater than subscriber length ${this.subscribers.length}`);
+        this.subscribers.splice(index, 1);
+    }
+
+    getObservable = () => {
+        return this.observableStompConnection;
+    };
+
+    getMessage = function(data) {
+        let out : any = {};
+        out.type = 'SUCCESS';
+        out.message = JSON.parse(data.body);
+        out.headers = {};
+        out.headers.messageId = data.headers["message-id"];
+        
+        let messageIdIndex = this._messageIds.indexOf(out.headers.messageId);
+        if ( messageIdIndex > -1) {
+            out.self = true;
+            this._messageIds = this._messageIds.splice(messageIdIndex, 1);
+        }
+        return out;
+    };
+    
+    _socketListener = (frame) => {
+        console.log('Connected: ' + frame);
+        this._socket.stomp.subscribe(
+            this._options.topicName, 
+            data => this.subscribers.forEach(subscriber => subscriber.observer.next(this.getMessage(data)))
+        );
+    }
+    
+    _onSocketError = (errorMsg) => {
+        let out: any = {};
+        out.type = 'ERROR';
+        out.message = errorMsg;
+        this.subscribers.forEach(subscriber => subscriber.observer.error(out));
+        this.scheduleReconnection();
+    }
+    
+    scheduleReconnection = () => {
+        this.reconnectionPromise = setTimeout(() => {
+            console.log("Socket reconnecting... (if it fails, next attempt in " + this._options.reconnectionTimeout + " msec)");
+            this.connect();
+        }, this._options.reconnectionTimeout);
+    }
+
+    reconnectNow = function(){
+        this._socket.stomp.disconnect();
+        if(this.reconnectionPromise && this.reconnectionPromise.cancel)
+            this.reconnectionPromise.cancel();
+        this.connect();
+    };
+
+    send = (message) => {
+        var id = Math.floor(Math.random() * 1000000);
+        this._socket.stomp.send(this._options.brokerName, {
+            priority: 9
+        }, JSON.stringify({
+            message: message,
+            id: id
+        }));
+        this._messageIds.push(id);
+    };
+
+    connect = () => {
+        const headers = {};
+        
+        let socketUrl = this._options.socketUrl;
+        if(this._options.getAccessToken())
+            socketUrl += `?access_token=${this._options.getAccessToken()}`
+        
+        this._socket.client = new SockJS(socketUrl);
+        this._socket.stomp = Stomp.over(this._socket.client);
+        this._socket.stomp.connect(headers, this._socketListener, this._onSocketError);
+        this._socket.stomp.onclose = this.scheduleReconnection;
+    }
+
+    
+
+}

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/views/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-form-field>
+            <input matInput formControlName="oldPassword" required type="password" placeholder="old password">
+          </mat-form-field>
+          <mat-form-field>
+            <input matInput formControlName="newPassword" required type="password" placeholder="new password">
+          </mat-form-field>
+          <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/views/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-form-field {
+  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/views/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 '../../services';
+import { MockApiService } from '../../services/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/views/change-password/change-password.component.ts

@@ -0,0 +1,64 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AuthService } from '../../services';
+import { Router } from '@angular/router';
+import { DisplayMessage } from '../../shared/models/display-message';
+import { delay, mergeMap } from 'rxjs/operators';
+ 
+@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.changePassword(this.form.value)
+    .pipe(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/views/change-password/index.ts

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

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

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

quartz-manager-frontend/src/app/views/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/views/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/views/forbidden/index.ts

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

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

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

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

@@ -0,0 +1,35 @@
+<div class="content" fxLayout="row" fxLayoutAlign="center" style="padding-bottom:160px;">
+
+    <mat-card elevation="5" fxFlex>
+		
+      <mat-card-subtitle>
+        <h2>Quartz Manager</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-form-field>
+            <input matInput formControlName="username" required placeholder="user">
+          </mat-form-field>
+          <mat-form-field>
+            <input matInput formControlName="password" required type="password" placeholder="password">
+          </mat-form-field>
+          <button type="submit" [disabled]="!loginForm.form.valid" mat-raised-button color="primary">Login</button>
+        </form>
+
+        <mat-spinner *ngIf="submitted" mode="indeterminate"></mat-spinner>
+        <br>
+        <p> <i style="color: #b5b5b5; font-size: 10px">(Default credentials are admin/admin)</i></p>
+
+      </mat-card-content>
+
+    </mat-card>
+
+</div>

quartz-manager-frontend/src/app/views/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-form-field {
+  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/views/login/login.component.spec.ts

@@ -0,0 +1,48 @@
+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 '../../services/mocks/api.service.mock';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import {
+  ApiService,
+  AuthService,
+  UserService,
+  ConfigService
+} from '../../services';
+
+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/views/login/login.component.ts

@@ -0,0 +1,95 @@
+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';
+import { takeUntil, delay } from 'rxjs/operators'
+
+import {
+  UserService,
+  AuthService
+} from '../../services';
+
+import { Observable } from 'rxjs';
+import { Subject } from 'rxjs';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent implements OnInit, OnDestroy {
+  title = 'Login';
+  githubLink = 'https://github.com/fabioformosa/quartz-manager';
+  form: FormGroup;
+
+  submitted = false;
+
+  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
+        .pipe(takeUntil(this.ngUnsubscribe))
+        .subscribe((params: DisplayMessage) => {
+          this.notification = params;
+        });
+        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(48)])]
+        });
+  }
+
+  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() {
+    this.notification = undefined;
+    this.submitted = true;
+
+    this.authService.login(this.form.value)
+    .pipe(delay(1000))
+    .subscribe(data => {
+      this.router.navigate([this.returnUrl]);
+    },
+    error => {
+      this.submitted = false;
+      this.notification = { msgType: 'error', msgBody: 'Incorrect username or password.' };
+    });
+
+  }
+
+
+}

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

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

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

@@ -0,0 +1,19 @@
+<div class="content" fxLayout="row" fxLayoutAlign="center none">
+
+  <div fxFlex="1 1 30%" fxFill>
+		<div fxLayout="column">
+			<scheduler-control></scheduler-control>
+			<br/>
+			<scheduler-config></scheduler-config>	
+		</div>
+  </div>  
+	
+  <div fxFlex="1 1 70%" style="margin-left: 20px">
+    <div fxLayout="column">
+		<div fxFlex="1 1 100%"><progress-panel></progress-panel></div>
+		<br/>
+  	    <div fxFlex="1 1 100%"><logs-panel></logs-panel></div>
+  	</div>
+  </div>	
+   	  
+</div>

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

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import {
+  ConfigService,
+  UserService
+} from '../../services';
+
+@Component({
+  selector: 'manager',
+  templateUrl: './manager.component.html',
+  styleUrls: ['./manager.component.scss']
+})
+export class ManagerComponent implements OnInit {
+
+  whoamIResponse = {};
+  allUserResponse = {};
+  constructor(
+    private config: ConfigService,
+    private userService: UserService
+  ) { }
+
+  ngOnInit() {
+  }
+
+}