Merge pull request #91 from Rebolon/fix/loader-angular-and-login-js-jwt

jwt isLoggedin now check jwt validity (it previsouly returned true ev…

Author: Rebolon

.scrutinizer.yml

@@ -6,6 +6,8 @@ build:
  version: '7.1'
  node:
  version: '8.10.0'
+ hosts:
+ localhost: 127.0.0.1
  nodes:
 # angular:
 # project_setup:
@@ -27,6 +29,8 @@ build:
  root_path: './'
  tests:
  override:
+ - npm run sf-dev &
+ - npm run test-cafe
  - npm run test-karma
  - php-scrutinizer-run
  -
@@ -39,6 +43,8 @@ build:
  coverage:
  file: 'var/report/clover.xml'
  format: 'clover'
+ #it fails look at this build where localhost doesn't seem to respond https://scrutinizer-ci.com/g/Rebolon/php-sf-flex-webpack-encore-vuejs/inspections/b75b10a6-6e41-4936-a453-da3632eda436
+ #- npm run test-cafe
 
 filter:
  excluded_paths:

.travis.yml

@@ -29,7 +29,7 @@ before_install:
  - sudo add-apt-repository -y ppa:ondrej/nginx-mainline
  - sudo apt-get update
  - sudo apt-get install nginx
-# - sudo apt-get install php7.1-fpm
+ - sudo apt-get install php7.1-fpm
  - sudo cp ~/.phpenv/versions/$(phpenv version-name)/etc/php-fpm.conf.default ~/.phpenv/versions/$(phpenv version-name)/etc/php-fpm.conf
  - sudo cp ~/.phpenv/versions/$(phpenv version-name)/etc/php-fpm.d/www.conf.default ~/.phpenv/versions/$(phpenv version-name)/etc/php-fpm.d/www.conf
  - echo "cgi.fix_pathinfo = 1" >> ~/.phpenv/versions/$(phpenv version-name)/etc/php.ini
@@ -43,12 +43,14 @@ before_install:
 
 install:
  - npm run init-project
+ - php bin/console cache:warmup
  - npm run jwt-generation-test
 
 before_script:
 # - curl -H "Accept: application/json" https://security.sensiolabs.org/check_lock -F lock=@composer.lock
 # - sudo service php7.1-fpm restart
- - sudo service nginx restart
+# - sudo service nginx restart
+ - npm run sf-dev &
 # see http://devexpress.github.io/testcafe/documentation/recipes/integrating-testcafe-with-ci-systems/travis.html
  - "export DISPLAY=:99.0"
  - "sh -e /etc/init.d/xvfb start"
@@ -58,6 +60,7 @@ before_script:
 script:
 # until this issue is open i disable npm test and use test-php and test-karma in place (issue:https://github.com/DevExpress/testcafe/issues/2195, original post: https://testcafe-discuss.devexpress.com/t/role-sometime-it-doesnt-seem-to-be-played/875/9)
 # - npm test
+ - npm run test-cafe
  - npm run test-php
  - npm run test-karma
 

README.md

@@ -46,6 +46,7 @@ Then some php controllers has been created on following routes :
  * /demo/http-plug : HttpPlugController to show how to call external API from your controller
  * /demo/login/standard/secured : LoginController for standard login by Symfony
  * /demo/login/json/authenticate : LoginJsonController for json login with JS applications but in stateful context
+ * /demo/login/jwt/frontend: LoginJwtController for jwt login with JS applications in a stateless context
  * /demo/vuejs : VuejsController with route config in annotations and VueJS app with specific js/css import
  * /demo/quasar : QuasarController like VuejsController but with the Quasar framework for UX components
  * /demo/form/quasar-vuejs : [Work in progress] authentification with javascript, and a full web application with vuejs and api-platform(rest/graphql)
@@ -232,6 +233,12 @@ On JS i use snyk services.
 @TODO explain the usage of tools like OWASP ZED, sqlmap, php avenger...
 @TODO help to setup security system: stateful app = take care at csrf ; stateless app = should i use jwt, api key, OAuth, anything else ?
 
+Don't forget to use HTTPS, even in local to help you find errors that will happen in production. One certificate has been generated for localhost (with http://www.selfsignedcertificate.com/) and is available in /var/certificates/*.cert|*.key
+There is a simple nginx conf (used for travis CI) that use those certificates so you can use nginx to work (just don't forget to change the port that is fixed to 80 like setup in the package.json).
+
+TestCafé for functional testing generate an error when you don't use ssl: Uncaught (in promise) DOMException: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).
+But for instance i didn't found any solution to run it finely without --skip-js-errors parameters.
+
 ### Symfony security
 In Symfony i configured different firewalls:
  * *security_js* and *security_php* share the same context so when you are logged on one, you are also logged on the other. I did this because a firewall cannot use both form_login and json_login (or i didn't found the way), and i wnated you to understand the concept of context.
@@ -479,11 +486,12 @@ It takes the following JSON string as Body:
 - [ ] api: graphQL: multiple mutations in one call ?
 - [ ] api: graphQL: how to mutate nested objects in a minimal call ?
 - [X] api: check best security system to setup with ApiPlatform (JWT / ApiKey / cookie & csrf system but in that case we are stateful which is not cool for deployment and replication ?). Finally we use JWT which is the best thing to do and compliant with statefull or stateless.
-- [ ] api: JWT setup the pattern for the refresh-token or anything else more info here https://auth0.com/blog/refresh-tokens-what-are-they-and-when-to-use-them/
+- [ ] api: JWT setup the pattern for the refresh-token or anything else more info here https://auth0.com/blog/refresh-tokens-what-are-they-and-when-to-use-them/ : when getting a 401 from api it should tells more information: does the token is valid or not ?
 - [x] front: setup VueJS
 - [x] front: use Quasar with VueJS
 - [x] front: move on Quasar 0.15.x
 - [x] front: setup CSRF protection with VueJS app
+- [ ] front: migrate app 'form-devextrem-angular' to angular6 when there will be compatible (this thread may helps: https://stackoverflow.com/questions/48970553/want-to-upgrade-project-from-angular-v5-to-angular-v6)
 - [x] quality: setup unit tests for JS (karma/jasmine)
 - [x] quality: setup e2e tests for JS (testcafé)
 - [x] quality: setup phpunit tests for PHP (unit test and webtestcase)
@@ -506,6 +514,8 @@ It takes the following JSON string as Body:
 - [x] security: check if i need the JMSSerializerBundle or if the serializer component is enough (if autowiring runs well, why not): **I prefer to use Symfony serializer, it's enough**
 - [ ] db: have a lookAt the HauteLookAliceBundle to help in the creation of real fixtures during tests (instead of generating a new test.db which could be long)
 - [ ] api: try https://github.com/overblog/GraphQLBundle instead of ApiPlatform to try nested query/mutations (resolver are not auto-generated)
+- [ ] quality: use a server logger for both JS and PHP (and also maybe HTTP, DB, MessageQueuing, ...), it will helps to improve quality of the app by identifing users system/browser and most current errors (Sentry or other service must be tested https://www.slant.co/options/964/alternatives/~sentry-alternatives)
+- [ ] front: move on babel 7 with babel-preset-env (remove all related babel from readme and read babeljs.io for more info on update)
 
 * improve this tutorial with ~~an API Route built with Api platform (without DB)~~ and install the vue-generator from api-platform for a crud sample
 * manage Entity orphanRemoval / CASCADE onDelete
@@ -564,7 +574,10 @@ I wrote some articles on medium to explain some practices setup in this project:
  * https://github.com/symfony/symfony/issues/25806
  * https://github.com/symfony/symfony/issues/8467
  * https://github.com/symfony/webpack-encore/issues/256
+ * https://github.com/symfony/webpack-encore/issues/326 (compat with vue-loader >15)
  * https://testcafe-discuss.devexpress.com/t/role-sometime-it-doesnt-seem-to-be-played/875
+ * https://testcafe-discuss.devexpress.com/t/it-doesnt-run-all-tests-files/1230/2
+ * https://testcafe-discuss.devexpress.com/t/object-domexceptio-error-when-running-tests/1231
 
 
 ## License

assets/js/form-devxpress-angular/src/app/book-container/book/book.component.html

@@ -1,14 +1,20 @@
-<div class="row">
- <my-wizard-sumup></my-wizard-sumup>
-</div>
+<dx-load-indicator class='button-indicator'
+  [visible]="isLoading">
+</dx-load-indicator>
 
-<div class="form-group">
- <div class="form-row">
- <label for="titleChange">Change the title:</label>
- <input #newTitle [value]=book?.title class="input-sm form-control" type="text" id="titleChange">
+<div *ngIf="!isLoading" id="form-edit-title">
+ <div class="row">
+ <my-wizard-sumup></my-wizard-sumup>
  </div>
- <div class="form-row">
- <button (click)="sendBookToParent(newTitle.value)" class="btn btn-primary btn-lg btn-block">send Book with new title</button>
- <button (click)="sendMessage()" class="btn btn-info btn-lg btn-block">send event to other window</button>
+
+ <div *ngIf="!isLoading" class="form-group form-edit-title">
+ <div class="form-row">
+ <label for="titleChange">Change the title:</label>
+ <input #newTitle [value]=book?.title class="input-sm form-control" type="text" id="titleChange">
+ </div>
+ <div class="form-row">
+ <button (click)="sendBookToParent(newTitle.value)" class="btn btn-primary btn-lg btn-block">send Book with new title</button>
+ <button *ngIf="isSecondWindow()" (click)="sendMessage()" class="btn btn-info btn-lg btn-block">send event to other window</button>
+ </div>
  </div>
 </div>

assets/js/form-devxpress-angular/src/app/book-container/book/book.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnDestroy, OnInit} from '@angular/core'
+import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core'
 import { Observable } from 'rxjs/Observable'
 import {Subject} from "rxjs/Subject";
 import 'rxjs/add/operator/toPromise';
@@ -16,6 +16,7 @@ import {Book} from "../../../entities/library/book";
 export class BookComponent implements OnInit, OnDestroy {
  protected ngUnsubscribe: Subject<void> = new Subject()
  protected book: Book
+ protected isLoading = true
 
  constructor(private route: ActivatedRoute, private bookService: WizardBook, private broadcastChannel: BroadcastChannelApi) {}
 
@@ -39,7 +40,9 @@ export class BookComponent implements OnInit, OnDestroy {
  this.bookService
  .get(parseInt(bookId, 10))
  .takeUntil(this.ngUnsubscribe)
- .subscribe()
+ .subscribe((res: Book) => {
+ this.isLoading = false
+ })
  })
  }
 
@@ -57,4 +60,8 @@ export class BookComponent implements OnInit, OnDestroy {
 
  this.broadcastChannel.sendBook(this.book)
  }
+
+ isSecondWindow() {
+ return window['name'] === 'second-screen'
+ }
 }

assets/js/form-devxpress-angular/src/app/datagrid/datagrid.component.ts

@@ -47,14 +47,14 @@ export class DatagridComponent implements OnInit {
 
  // Take care, until you click on the parent window, data won't be refreshed in datagrid. don't know if it's because of browser behavior or DevXpress.datagrid
  notify(`new Book received with id ${book.id}, focus the window to see the changes in datagrid. 
- Data is not saved until you edit it`, "info", 5000)
+  Data is not saved until you edit it`, "info", 5000)
  this.dataGrid.instance.clearSelection()
 
  break
  case 'hello':
  case 'ping':
  default:
- notify("data received from second screen", "info", 5000)
+ notify(`data received from second screen (cmd=${message.cmd})`, "info", 5000)
  break
  }
  })
@@ -151,7 +151,7 @@ export class DatagridComponent implements OnInit {
 
  getSelectedRow () {
  const rows = this.dataGrid.instance.getSelectedRowKeys()
- const url = `/demo/devxpress-angular/book/${rows[0].id}`
+ const url = `/demo/form/devxpress-angular/book/${rows[0].id}`
  const options = {
  menubar: 'false',
  toolbar: 'false',

assets/js/form-devxpress-angular/src/services/api.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'
 import { HttpClient } from '@angular/common/http'
 import { Observable } from 'rxjs/Observable'
 import { environment } from '../environments/environment'
-import {apiPlatformPrefix} from '../../../lib/config'
+import {apiPlatformPrefix, tokenJwtBearer} from '../../../lib/config'
 import 'rxjs/add/operator/do'
 import 'rxjs/add/operator/map'
 
@@ -107,7 +107,12 @@ export class ApiService {
  }*/
 
  if (!Object.keys(this.options.headers).find(prop => prop.toLowerCase() === 'authorization')) {
- this.options.headers['Authorization'] = `Bearer ${user.token}`
+ let token = user.token
+ if (!token.match(tokenJwtBearer + ' ')) {
+ token = `${tokenJwtBearer} ${token}`
+ }
+
+ this.options.headers['Authorization'] = token
  }
 
  return this

assets/js/lib/axiosMiddlewares.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 import { logout } from './login'
-import { getTokenFromMeta } from './csrfToken'
-import { csrfParameter } from './config'
+import getToken, { getTokenFromMeta } from './csrfToken'
+import { csrfParameter, tokenJwtBearer } from './config'
 import { Notify } from 'quasar-framework/dist/quasar.mat.esm'
 
 // @todo add an interceptors that will always retrieve the csrf token and add it inside the request
@@ -53,8 +53,13 @@ const JwtTokenHeader = function (config) {
  const rememberMe = localStorage.getItem('rememberMe')
  if (rememberMe) {
  const jsonInfos = JSON.parse(rememberMe)
+ let token = jsonInfos.token
+ if (!token.match(tokenJwtBearer + ' ')) {
+ token = `${tokenJwtBearer} ${token}`
+ }
+
  const headers = {
- 'Authorization': `Bearer ${jsonInfos.token}`,
+ 'Authorization': token,
  }
 
  config.headers = Object.assign(config.headers ? config.headers : {}, headers)
@@ -82,6 +87,12 @@ const CsrfTokenRetreiveOnInvalidResponse = function (error) {
  console.info('axios intercep response error', 'csrf')
  // @todo Is it possible to do a retry of the request with a new token ?
 
+ if (!error.response) {
+ console.info('axios intercep response error, unknown error', 'csrf', error)
+
+ return Promise.reject(error)
+ }
+
  let status = error.response.status
  if (error.response.data && error.response.data.code) {
  status = error.response.data.code

assets/js/login/components/Login.vue

@@ -175,12 +175,17 @@ export default {
  let errMsg = err.response.statusText
  let code = err.response.status
  if (err.response.data) {
- if (err.response.data.message) {
- errMsg = err.response.data.message
- }
-
- if (err.response.data.code) {
- code = err.response.data.code
+ if (err.response.data.error.exception) {
+ err.response.data.error.exception["0"].message.startsWith('Exception: UsernameNotFoundException')
+ errMsg = 'User not found'
+ } else {
+ if (err.response.data.message) {
+ errMsg = err.response.data.message
+ }
+
+ if (err.response.data.code) {
+ code = err.response.data.code
+ }
  }
  }
 
@@ -196,6 +201,12 @@ export default {
  type: 'warning'
  })
  break;
+ case 404:
+ Notify.create({
+ message: `Wrong credentials, please try again (${errMsg})`,
+ type: 'warning'
+ })
+ break;
  case 420:
  Notify.create({
  message: `Invalid user name or password (${errMsg})`,

assets/tests/login-js.js

@@ -1,18 +1,21 @@
 import { Selector, ClientFunction } from 'testcafe'
-import { StandardVueJSAccUser } from './tools/authentification'
+import {StandardVueJSAccUser, usernameStd, passwordStd, scheme} from './tools/authentification'
 import { jsLoginFormPath, jsLoginSuccessPath } from './tools/uris'
 import { host, csrfParameter } from '../js/lib/config'
 
 const booksList = Selector('div.books')
 const head = Selector('head')
 const form = Selector('form.login')
-const toast = Selector('div.q-toast-container')
+const toast = Selector('div.q-notifications')
 const getLocation = ClientFunction(() => document.location.href)
 
-fixture.only `Test vuejs login`
- .page `http://${host}${jsLoginFormPath}`
+// to debug in testcafe, use .debug() on t variable, or add --debug-mode in the running script
+// to focus on this test use 'only'
+//fixture.only `Test vuejs login`
+fixture `Test vuejs login`
+ .page `${scheme}://${host}${jsLoginFormPath}`
 
-test('Login page: fake user', async t => {
+test('Login page: vuejs login', async t => {
  await t
  .navigateTo(jsLoginSuccessPath)
  .expect(getLocation()).notContains('#/books')
@@ -23,21 +26,11 @@ test('Login page: fake user', async t => {
  .typeText('input[name="password"]', 'fakeUser11111')
  .click('button')
  .expect(getLocation()).contains(jsLoginFormPath)
- .expect(toast.find('div.q-toast.bg-warning').count).eql(1, "Missing warning toast message")
-})
-
-// don't understand why, but sometimes it works (and the login form is well filled) and sometimes nothing happen !
-// ugly behavior
-test('Login page: normal user', async t => {
- await t
- //.useRole(StandardVueJSAccUser)
- // @todo until role doesn't work each time, i prefer to use those 3 lines of code
- .typeText('input[name="username"]', 'test')
- .typeText('input[name="password"]', 'test')
- .click('button')
- // works with it but useless
- //.navigateTo(jsLoginSuccessPath)
- .expect(getLocation()).contains(jsLoginSuccessPath)
- .expect(booksList.exists).ok()
+ .expect(toast.find('div.q-alert.bg-warning').count).eql(1, "Missing warning toast message")
 
+ .useRole(StandardVueJSAccUser)
+ //.debug() //this is where firefox seems to crash, but not sure
+ .wait(3000)
+ .expect(getLocation()).contains(jsLoginSuccessPath)
+ .expect(booksList.exists).ok()
 })