Update README.md

#32 Renamed modules

.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

.travis.yml

@@ -0,0 +1,3 @@
+language: java
+jdk: openjdk8
+before_script: cd quartz-manager-parent

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,249 @@
-# 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.
+[![Build Status](https://travis-ci.org/fabioformosa/quartz-manager.svg?branch=master)](https://travis-ci.org/fabioformosa/quartz-manager)
+[![Maven Central](https://maven-badges.herokuapp.com/maven-central/it.fabioformosa.quartz-manager/quartz-manager-starter-api/badge.svg)](https://maven-badges.herokuapp.com/maven-central/it.fabioformosa.quartz-manager/quartz-manager-starter-api)
+[![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
+Quartz Manager is a library you can import in your spring webapp to easily enable the [Quartz Scheduler](http://www.quartz-scheduler.org/) and to control it by REST APIs or by a UI Manager Panel (angular-based). 
+
+Your Spring Webapp should provide the java class of the job you want schedule. Importing the Quartz Manager your project will have the REST API and (optionally) the UI to launch and control the job.
+The UI Dashboard is composed by a management panel to set the quartz trigger, to start/stop the scheduler and a log panel with a progress bar to display the job output. 
+
+![](https://github.com/fabioformosa/quartz-manager/blob/master/quartz-manager-parent/quartz-manager-web-showcase/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`
+## QUICK START
 
-## HOW TO RUN YOUR JOB
-By default, quartz-manager executes the dummy job that logs "hello world!".
+* **Requirements** 
+  Java 8+
+
+* **add the dependency**
+
+MAVEN
+
+```
+<dependency>
+  <groupId>it.fabioformosa.quartz-manager</groupId>
+  <artifactId>quartz-manager-starter-api</artifactId>
+  <version>3.0.1</version>
+</dependency>
+
+<!-- OPTIONALLY -->
+<dependency>
+  <groupId>it.fabioformosa.quartz-manager</groupId>
+  <artifactId>quartz-manager-starter-ui</artifactId>
+  <version>3.0.1</version>
+</dependency>
+```
+
+GRADLE
+  
+```
+compile group: 'it.fabioformosa.quartz-manager', name: 'quartz-manager-starter-api', version: '3.0.1'
+
+//optionally
+compile group: 'it.fabioformosa.quartz-manager', name: 'quartz-manager-starter-ui', version: '3.0.1'
+
+```
+Import  `quartz-manager-starter-ui` as well, if you want use the Quartz Manager API by the angular frontend.  
+
+* **add a `quartz.properties` file in the classpath (`src/main/resources`)**
+
+```
+org.quartz.scheduler.instanceName=example
+org.quartz.scheduler.instanceId=AUTO
+org.quartz.threadPool.threadCount=1
+```
+
+
+* **Create the job class that you want to schedule**
+ 
+ ```
+ public class SampleJob extends AbstractLoggingJob {
+
+    @Override
+    public LogRecord doIt(JobExecutionContext jobExecutionContext) {
+        return new LogRecord(LogType.INFO, "Hello from QuartManagerDemo!");
+    }
+
+}
+```
+Extend the super-class `AbstractLoggingJob`
+
+
+* **Enable quartz-manager adding into the application.yml**
+
+```
+quartz:
+  enabled: true
+
+job: 
+  frequency: 4000
+  repeatCount: 19
+
+quartz-manager:
+  jobClass: <QUALIFIED NAME OF THE YOUR JOB CLASS>
+```
+
+* **REST API**  
+You can access the REST API, through the swagger-ui. Open the URL:  
+[http://localhost:8080/swagger-ui.html](http://localhost:8080/swagger-ui.html)
+
+(Change the port and the contextPath accordingly with the setup of your webapp)
+
+* **Frontend**  
+If you've imported the `quartz-manager-starter-ui` you can open the UI at URL:  
+[http://localhost:8080/quartz-manager-ui/index.html](http://localhost:8080/quartz-manager-ui/index.html)
+
+(Change the port and the contextPath accordingly with the setup of your webapp)
+
+* **Security**
+If you want enable a security layer and allow the access to the REST API and to the UI only to authenticated users, add the dependency:
+
+MAVEN
+
+```
+<dependency>
+  <groupId>it.fabioformosa.quartz-manager</groupId>
+  <artifactId>quartz-manager-starter-security</artifactId>
+  <version>3.0.1</version>
+</dependency>
+```
+
+GRADLE
+
+```
+compile group: 'it.fabioformosa.quartz-manager', name: 'quartz-manager-starter-security', version: '3.0.1'
+```
+
+and in your application.yml:
+
+```
+quartz-manager:
+  security:
+    login-model:
+      form-login-enabled: true
+      userpwd-filter-enabled : false
+    jwt:
+      enabled: true
+      secret: "PLEASE_TYPE_HERE_A_SECRET"
+      expiration-in-sec: 28800  # 8 hours
+      header-strategy:
+        enabled: false
+        header: "Authorization"
+      cookie-strategy:
+        enabled: true
+        cookie: AUTH-TOKEN
+  accounts:
+    in-memory:
+      enabled: true
+      users:
+        - name: admin
+          password: admin
+          roles:
+            - ADMIN      
+
+```
+
+* **DEMO**
+
+Take a loot to the project [Quartz-Manager Demo](https://github.com/fabioformosa/quartz-manager-demo), it is an example of how-to:
+ * import the quartz-manager-api library in your webapp
+ * include the quartz-manager frontend (angular based) through a webjar
+ * set properties into the application.yml
+ * add a secure layer to allow the API only to logged users
+ * schedule a custom job (a dummy `hello world`)
+
+## ROADMAP
+Open the [Project Roadmap](https://github.com/fabioformosa/quartz-manager/projects) to take a look at the plan of Quartz Manager.  
+
+Next steps in the roadmap are:
+* to add a persistent layer to save all job setup.
+* to add a complete setup UI panel for quartz, in term of cronjobs and multiple jobs.
+* to add CI/CD pipeline to ease the deploy pulling a docker container.
+* Enabling adapters for integrations: kafka, etc.
+
+
+## HOW-TO CONTRIBUTE  
+
+### PROJECT STRUCTURE
+* **quartz-parent/quartz-manager-starter-api** is the library that can be imported in webapp to have the quartz-manager API.
+* **quartz-parent/quartz-manager-starter-ui** is a maven module to build and package the angular frontend in a webjar.
+* **quartz-parent/quartz-manager-starter-security** is ther library that can be imported in a webapp to have a security layer (login) over the quartz-manager API.
+* **quartz-parent/quartz-manager-web-showcase** is an example of webapp that imports quartz-manager-api. Useful to develop the frontend started locally with the webpack dev server.
+* **quartz-frontend** is the angular app that interacts with the Quartz Manager API.
+
+### PROJECT DETAILS
+**[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
+mvn install
+cd quartz-manager/quartz-parent/quartz-manager-web-showcase
+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-showcase` 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>