generator-jhipster 7.4.1 → 7.7.0

package/generators/client/templates/vue/src/main/webapp/app/admin/tracker/tracker.service.ts.ejs

@@ -1,107 +1,113 @@
 import * as SockJS from 'sockjs-client';
-import * as Stomp from 'webstomp-client';
-import { Observable, Observer } from 'rxjs';
+import { Observer, map } from 'rxjs';
 import VueRouter from 'vue-router';
+import { Store } from 'vuex';
+import { RxStomp } from '@stomp/rx-stomp';
 
-export default class TrackerService {
-
-  public stompClient: Stomp.Client = null;
-  public subscriber: any = null;
-  public connection: Promise<any>;
-  public connectedPromise: any = null;
-  public listener: Observable<any>;
-  public listenerObserver: Observer<any> = null;
-  public alreadyConnectedOnce = false;
+import { AccountStateStorable } from '@/shared/config/store/account-store';
 
-  private router: VueRouter;
+const DESTINATION_TRACKER = '/topic/tracker';
+const DESTINATION_ACTIVITY = '/topic/activity';
 
-  constructor(router: VueRouter<%_ if (authenticationTypeSession) { _%>, private cookie: any<%_ } _%>) {
-    this.router = router;
-    this.connection = this.createConnection();
-    this.listener = this.createListener();
-  }
+export default class TrackerService {
+  private rxStomp: RxStomp;
 
-  public connect(): void {
-    if (this.connectedPromise === null) {
-      this.connection = this.createConnection();
-    }
-    // building absolute path so that websocket doesn't fail when deploying with a context path
-    const loc = window.location;
-    const baseHref = document.querySelector('base').getAttribute('href');
-<%_ if (authenticationTypeJwt) { _%>
-    let url = '//' + loc.host + baseHref + 'websocket/tracker';
-    const authToken = localStorage.getItem('<%=jhiPrefixDashed %>-authenticationToken') || sessionStorage.getItem('<%=jhiPrefixDashed %>-authenticationToken');
-    if (authToken) {
-      url += '?access_token=' + authToken;
-    }
-<%_ } else { _%>
-    const url = '//' + loc.host + baseHref + 'websocket/tracker';
-<%_ } _%>
-    const socket = new SockJS(url);
-    this.stompClient = Stomp.over(socket, { protocols: ['v12.stomp'] });
-    const headers = {};
+  constructor(
+      private router: VueRouter,
+      private store: Store<AccountStateStorable>,
 <%_ if (authenticationTypeSession) { _%>
-    headers['X-XSRF-TOKEN'] = this.cookie.get('JSESSIONID') || this.cookie.get('XSRF-TOKEN');
+      private cookie: any,
 <%_ } _%>
-    this.stompClient.connect(headers, () => this.afterConnect());
+    ) {
+    this.stomp = new RxStomp();
+    this.router.afterEach(() => this.sendActivity());
+
+    this.store.watch(
+      (_state, getters) => getters.authenticated,
+      (value, oldValue) => {
+        if (value === oldValue) return;
+        if (value) {
+          return this.connect();
+        }
+        return this.disconnect();
+      }
+    );
   }
 
-  public afterConnect() {
-    this.connectedPromise('success');
-    this.connectedPromise = null;
-    this.sendActivity();
-    if (!this.alreadyConnectedOnce) {
-      this.router.afterEach(() => this.sendActivity());
-      this.alreadyConnectedOnce = true;
-    }
+  get stomp() {
+    return this.rxStomp;
   }
 
-  public disconnect(): void {
-    if (this.stompClient !== null) {
-      this.stompClient.disconnect();
-      this.stompClient = null;
-    }
-    this.router.afterEach(() => {});
-    this.alreadyConnectedOnce = false;
+  set stomp(rxStomp) {
+    this.rxStomp = rxStomp;
+    this.rxStomp.configure({
+      debug: (msg: string): void => {
+        console.log(new Date(), msg);
+      },
+    });
+    this.rxStomp.connected$.subscribe(() => {
+      this.sendActivity();
+    });
   }
 
-  public receive(): Observable<any> {
-    return this.listener;
+  private connect(): void {
+    this.updateCredentials();
+    return this.rxStomp.activate();
   }
 
-  public sendActivity(): void {
-    if (this.stompClient !== null && this.stompClient.connected) {
-      this.stompClient.send(
-        '/topic/activity', // destination
-        JSON.stringify({ page: this.router.currentRoute.fullPath }), // body
-        {} // header
-      );
-    }
+  private disconnect(): Promise<void> {
+    return this.rxStomp.deactivate();
   }
+<%_ if (authenticationTypeJwt) { _%>
 
-  public subscribe(): void {
-    this.connection.then(() => {
-      this.subscriber = this.stompClient.subscribe('/topic/tracker', data => {
-        this.listenerObserver.next(JSON.parse(data.body));
-      });
-    });
+  private getAuthToken() {
+    const authToken = localStorage.getItem('jhi-authenticationToken') || sessionStorage.getItem('jhi-authenticationToken');
+  <%_ if (clientFrameworkAngular || clientFrameworkReact) { _%>
+    return JSON.parse(authToken);
+  <%_ } else { _%>
+    return authToken;
+  <%_ } _%>
   }
+<%_ } _%>
 
-  public unsubscribe(): any {
-    if (this.subscriber !== null) {
-      this.subscriber.unsubscribe();
+  private buildUrl(): string {
+    // building absolute path so that websocket doesn't fail when deploying with a context path
+    const loc = window.location;
+    const baseHref = document.querySelector('base').getAttribute('href');
+    const url = '//' + loc.host + baseHref + 'websocket/tracker';
+<%_ if (authenticationTypeJwt) { _%>
+    const authToken = this.getAuthToken();
+    if (authToken) {
+      return `${url}?access_token=${authToken}`;
     }
-    this.listener = this.createListener();
+<%_ } _%>
+    return url;
   }
 
-  public createListener(): any {
-    return new Observable(observer => {
-      this.listenerObserver = observer;
+  private updateCredentials(): void {
+    this.rxStomp.configure({
+      webSocketFactory: () => {
+        return new SockJS(this.buildUrl());
+      },
+<%_ if (authenticationTypeSession) { _%>
+      connectHeaders: {
+        ['X-XSRF-TOKEN']: this.cookie.get('JSESSIONID') || this.cookie.get('XSRF-TOKEN'),
+      }
+<%_ } _%>
     });
   }
 
-  public createConnection(): Promise<any> {
-    return new Promise((resolve, reject) => (this.connectedPromise = resolve));
+  private sendActivity(): void {
+    this.rxStomp.publish({
+      destination: DESTINATION_ACTIVITY,
+      body: JSON.stringify({ page: this.router.currentRoute.fullPath }),
+    });
   }
 
+  public subscribe(observer) {
+    return this.rxStomp
+      .watch(DESTINATION_TRACKER)
+      .pipe(map(imessage => JSON.parse(imessage.body)))
+      .subscribe(observer);
+  }
 };

package/generators/client/templates/vue/src/main/webapp/app/admin/user-management/user-management-edit.component.ts.ejs

@@ -37,7 +37,7 @@ const validations: any = {
   validations
 })
 export default class <%=jhiPrefixCapitalized%>UserManagementEdit extends Vue {
-  @Inject('userService') private userManagementService: () => UserManagementService;
+  @Inject('userManagementService') private userManagementService: () => UserManagementService;
   @Inject('alertService') private alertService: () => AlertService;
 
   public userAccount: IUser;

package/generators/client/templates/vue/src/main/webapp/app/admin/user-management/user-management-view.component.ts.ejs

@@ -5,7 +5,7 @@ import AlertService from '@/shared/alert/alert.service';
 
 @Component
 export default class <%=jhiPrefixCapitalized%>UserManagementView extends Vue {
-  @Inject('userService') private userManagementService: () => UserManagementService;
+  @Inject('userManagementService') private userManagementService: () => UserManagementService;
   @Inject('alertService') private alertService: () => AlertService;
 
   public user: any = null;

package/generators/client/templates/vue/src/main/webapp/app/admin/user-management/user-management.component.ts.ejs

@@ -7,7 +7,7 @@ import AlertService from '@/shared/alert/alert.service';
   mixins: [Vue2Filters.mixin]
 })
 export default class <%=jhiPrefixCapitalized%>UserManagementComponent extends Vue {
-  @Inject('userService') private userManagementService: () => UserManagementService;
+  @Inject('userManagementService') private userManagementService: () => UserManagementService;
   @Inject('alertService') private alertService: () => AlertService;
 
   public error = '';

package/generators/client/templates/vue/src/main/webapp/app/constants.ts.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2021 the original author or authors from the JHipster project.
+ Copyright 2013-2022 the original author or authors from the JHipster project.
 
  This file is part of the JHipster project, see https://www.jhipster.tech/
  for more information.

package/generators/client/templates/vue/src/main/webapp/app/core/jhi-navbar/jhi-navbar.component.ts.ejs

@@ -27,7 +27,7 @@ export default class JhiNavbar extends Vue {
   public version = 'v' + VERSION;
   private currentLanguage = this.$store.getters.currentLanguage;
   private languages: any = this.$store.getters.languages;
-  private hasAnyAuthorityValue = false;
+  private hasAnyAuthorityValues = {};
 
   created() {
 <%_ if (enableTranslation) { _%>
@@ -93,9 +93,9 @@ export default class JhiNavbar extends Vue {
 
   public hasAnyAuthority(authorities: any): boolean {
     this.accountService().hasAnyAuthorityAndCheckAuth(authorities).then(value => {
-      this.hasAnyAuthorityValue = value;
+      this.hasAnyAuthorityValues[authorities] = value;
     });
-    return this.hasAnyAuthorityValue;
+    return this.hasAnyAuthorityValues[authorities] ?? false;
   }
 
   public get openAPIEnabled() : boolean {

package/generators/client/templates/vue/src/main/webapp/app/declarations.d.ts.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2021 the original author or authors from the JHipster project.
+ Copyright 2013-2022 the original author or authors from the JHipster project.
 
  This file is part of the JHipster project, see https://www.jhipster.tech/
  for more information.

package/generators/client/templates/vue/src/main/webapp/app/entities/entities.component.ts.ejs

@@ -1,5 +1,8 @@
 import { Component, Provide, Vue } from 'vue-property-decorator';
 
+<%_ if (!skipUserManagement || authenticationTypeOauth2) { %>
+import UserService from '@/entities/user/user.service';
+<%_ } _%>
 <%_ for (entity of this.localEntities.filter(entity => !entity.embedded)) { _%>
 import <%= entity.entityAngularName %>Service from './<%= entity.entityFolderName %>/<%= entity.entityFileName %>.service';
 <%_ } _%>
@@ -7,6 +10,9 @@ import <%= entity.entityAngularName %>Service from './<%= entity.entityFolderNam
 
 @Component
 export default class Entities extends Vue {
+<%_ if (!skipUserManagement || authenticationTypeOauth2) { %>
+  @Provide('userService') private userService = () => new UserService();
+<%_ } _%>
 <%_ for (entity of this.localEntities.filter(entity => !entity.embedded)) { _%>
   @Provide('<%= entity.entityInstance %>Service') private <%= entity.entityInstance %>Service = () => new <%= entity.entityAngularName %>Service();
 <%_ } _%>

package/generators/client/templates/vue/src/main/webapp/app/entities/user/{user.oauth2.service.ts.ejs → user.service.ts.ejs}

@@ -2,7 +2,7 @@ import axios from 'axios';
 
 const baseApiUrl = 'api/users';
 
-export default class UserOAuth2Service {
+export default class UserService {
   public retrieve(): Promise<any> {
     return new Promise<any>((resolve, reject) => {
       axios

package/generators/client/templates/vue/src/main/webapp/app/index.ts.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2021 the original author or authors from the JHipster project.
+ Copyright 2013-2022 the original author or authors from the JHipster project.
 
  This file is part of the JHipster project, see https://www.jhipster.tech/
  for more information.

package/generators/client/templates/vue/src/main/webapp/app/main.ts.ejs

@@ -2,6 +2,8 @@
 // (runtime-only or standalone) has been set in webpack.common with an alias.
 import Vue from 'vue';
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
+import { setupAxiosInterceptors } from '@/shared/config/axios-interceptor';
+
 import App from './app.vue';
 import Vue2Filters from 'vue2-filters';
 import { ToastPlugin } from 'bootstrap-vue';
@@ -20,7 +22,7 @@ import ConfigurationService from '@/admin/configuration/configuration.service';
 <%_ if (!skipUserManagement) { _%>
 import ActivateService from './account/activate/activate.service';
 import RegisterService from './account/register/register.service';
-import UserManagementService from '@/admin/user-management/user-management.service';
+import UserManagementService from './admin/user-management/user-management.service';
 <%_ } _%>
 import LoginService from './account/login.service';
 import AccountService from './account/account.service';
@@ -37,9 +39,6 @@ import GatewayService from '@/admin/gateway/gateway.service';
 <%_ if (communicationSpringWebsocket) { _%>
 import TrackerService from './admin/tracker/tracker.service';
 <%_ } _%>
-<%_ if (!skipUserManagement || authenticationTypeOauth2) { %>
-import UserOAuth2Service from '@/entities/user/user.oauth2.service';
-<%_ } _%>
 /* tslint:disable */
 
 // jhipster-needle-add-entity-service-to-main-import - JHipster will import entities services here
@@ -61,13 +60,13 @@ const i18n = config.initI18N(Vue);
 const store = config.initVueXStore(Vue);
 
 <%_ if (communicationSpringWebsocket) { _%>
-const trackerService = new TrackerService(router<%_ if (authenticationTypeSession) { _%>, (<any>Vue).cookie<%_ } _%>);
+const trackerService = new TrackerService(router, store<%_ if (authenticationTypeSession) { _%>, (<any>Vue).cookie<%_ } _%>);
 <%_ } _%>
 <%_ if (enableTranslation) { _%>
 const translationService = new TranslationService(store, i18n);
 <%_ } _%>
 const loginService = new LoginService();
-const accountService = new AccountService(store, <%_ if (enableTranslation) { _%>translationService, <%_ } _%><%_ if (authenticationTypeSession || authenticationTypeOauth2) { _%>(<any>Vue).cookie, <%_ } _%><%_ if (communicationSpringWebsocket) { _%>trackerService, <%_ } _%>router);
+const accountService = new AccountService(store, <%_ if (enableTranslation) { _%>translationService, <%_ } _%><%_ if (authenticationTypeSession || authenticationTypeOauth2) { _%>(<any>Vue).cookie, <%_ } _%>router);
 
 router.beforeEach(async (to, from, next) => {
   if (!to.matched.length) {
@@ -96,7 +95,7 @@ router.beforeEach(async (to, from, next) => {
 });
 
 /* tslint:disable */
-new Vue({
+<% if (!authenticationTypeOauth2) { %>const vue = <% } %>new Vue({
   el: '#app',
   components: { App },
   template: '<App/>',
@@ -106,7 +105,7 @@ new Vue({
 <%_ if (!skipUserManagement) { _%>
     activateService: () => new ActivateService(),
     registerService: () => new RegisterService(),
-    userService: () => new UserManagementService(),
+    userManagementService: () => new UserManagementService(),
 <%_ } _%>
 <%_ if (applicationTypeGateway && serviceDiscoveryType) { %>
     gatewayService: () => new GatewayService(),
@@ -120,9 +119,6 @@ new Vue({
 <%_ if (communicationSpringWebsocket) { _%>
     trackerService: () => trackerService,
 <%_ } %>
-<%_ if (!skipUserManagement || authenticationTypeOauth2) { %>
-    userOAuth2Service: () => new UserOAuth2Service(),
-<%_ } _%>
 <%_ if (enableTranslation) { _%>
     translationService: () => translationService,
 <%_ } _%>
@@ -138,3 +134,29 @@ new Vue({
 <%_ } _%>
   store,
 });
+
+setupAxiosInterceptors(
+  error => {
+	const url = error.response?.config?.url;
+    const status = error.status || error.response.status;
+    if (status === 401) {
+      // Store logged out state.
+      store.commit('logout');
+      if (!url.endsWith('api/account') && !url.endsWith('api/<% if (authenticationTypeSession) { %>authentication<% } else { %>authenticate<% } %>')) {
+        // Ask for a new authentication
+<%_ if (authenticationTypeOauth2) { _%>
+        window.location.reload();
+<%_ } else { _%>
+        loginService.openLogin(vue);
+<%_ } _%>
+        return;
+      }
+    }
+    console.log('Unauthorized!');
+    return Promise.reject(error);
+  },
+  error => {
+    console.log('Server error!');
+    return Promise.reject(error);
+  }
+);

package/generators/client/templates/vue/src/main/webapp/app/shared/config/axios-interceptor.ts.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2021 the original author or authors from the JHipster project.
+ Copyright 2013-2022 the original author or authors from the JHipster project.
 
  This file is part of the JHipster project, see https://www.jhipster.tech/
  for more information.
@@ -37,10 +37,10 @@ const setupAxiosInterceptors = (onUnauthenticated, onServerError) => {
   const onResponseError = err => {
     const status = err.status || err.response.status;
     if (status === 403 || status === 401) {
-      onUnauthenticated();
+      return onUnauthenticated(err);
     }
     if (status >= 500) {
-      onServerError();
+      return onServerError(err);
     }
     return Promise.reject(err);
   };

package/generators/client/templates/vue/src/main/webapp/app/shared/config/config.ts.ejs

@@ -3,7 +3,6 @@ import Vuex from 'vuex';
 import VueI18n, { DateTimeFormats } from 'vue-i18n';
 import <%=jhiPrefixCapitalized%>Formatter from './formatter';
 <%_ } _%>
-import { setupAxiosInterceptors } from '@/shared/config/axios-interceptor';
 
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faArrowLeft } from '@fortawesome/free-solid-svg-icons/faArrowLeft';
@@ -64,9 +63,6 @@ export function initVueApp(vue) {
   vue.use(VueCookie);
   vue.use(Vuelidate);
   vue.use(Vue2Filters);
-  setupAxiosInterceptors(
-    () => console.log('Unauthorized!'),
-    () => console.log('Server error!'));
   filters.initFilters();
 }
 

package/generators/client/templates/vue/src/main/webapp/app/shared/config/formatter.ts.ejs

@@ -27,8 +27,8 @@ export default class <%=jhiPrefixCapitalized%>Formatter {
 
   constructor() {
       this.caches = Object.create(null);
-      this.leftBraces = new RegExp("{{ |{{", "g");
-      this.rightBraces = new RegExp(" }}|}}", "g");
+      this.leftBraces = /{{ |{{/g;
+      this.rightBraces = / }}|}}/g;
   }
 
   interpolate(message: string, values: any): Array<any> {

package/generators/client/templates/vue/src/main/webapp/app/shared/config/store/account-store.ts.ejs

@@ -1,39 +1,49 @@
 import { Module } from 'vuex';
 
-export const accountStore: Module<any, any> = {
-    state: {
-        logon: false,
-        userIdentity: null,
-        authenticated: false,
-        ribbonOnProfiles: '',
-        activeProfiles: '',
+export interface AccountStateStorable {
+  logon: boolean;
+  userIdentity: null | any;
+  authenticated: boolean;
+  ribbonOnProfiles: string;
+  activeProfiles: string;
+};
+
+export const defaultAccountState: AccountStateStorable = {
+  logon: false,
+  userIdentity: null,
+  authenticated: false,
+  ribbonOnProfiles: '',
+  activeProfiles: '',
+};
+
+export const accountStore: Module<AccountStateStorable, any> = {
+  state: { ...defaultAccountState },
+  getters: {
+    logon: state => state.logon,
+    account: state => state.userIdentity,
+    authenticated: state => state.authenticated,
+    activeProfiles: state => state.activeProfiles,
+    ribbonOnProfiles: state => state.ribbonOnProfiles,
+  },
+  mutations: {
+    authenticate(state) {
+      state.logon = true;
+    },
+    authenticated(state, identity) {
+      state.userIdentity = identity;
+      state.authenticated = true;
+      state.logon = false;
+    },
+    logout(state) {
+      state.userIdentity = null;
+      state.authenticated = false;
+      state.logon = false;
     },
-    getters: {
-        logon: state => state.logon,
-        account: state => state.userIdentity,
-        authenticated: state => state.authenticated,
-        activeProfiles: state => state.activeProfiles,
-        ribbonOnProfiles: state => state.ribbonOnProfiles,
+    setActiveProfiles(state, profile) {
+      state.activeProfiles = profile;
     },
-    mutations: {
-        authenticate(state) {
-            state.logon = true;
-        },
-        authenticated(state, identity) {
-            state.userIdentity = identity;
-            state.authenticated = true;
-            state.logon = false;
-        },
-        logout(state) {
-            state.userIdentity = null;
-            state.authenticated = false;
-            state.logon = false;
-        },
-        setActiveProfiles(state, profile) {
-            state.activeProfiles = profile;
-        },
-        setRibbonOnProfiles(state, ribbon) {
-            state.ribbonOnProfiles = ribbon;
-        },
+    setRibbonOnProfiles(state, ribbon) {
+      state.ribbonOnProfiles = ribbon;
     },
+  },
 };

package/generators/client/templates/vue/src/main/webapp/app/shared/data/data-utils.service.ts.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2021 the original author or authors from the JHipster project.
+ Copyright 2013-2022 the original author or authors from the JHipster project.
 
  This file is part of the JHipster project, see https://www.jhipster.tech/
  for more information.
@@ -165,7 +165,7 @@ export default class JhiDataUtils extends Vue {
       const url = section[0].replace(/<(.*)/, '$1').trim();
       const queryString = {page:null};
       url.replace(
-        new RegExp('([^?=&]+)(=([^&]*))?', 'g'),
+        new RegExp(/([^?=&]+)(=([^&]*))?/g),
         ($0, $1, $2, $3) => { queryString[$1] = $3; }
       );
       let page = queryString.page;

package/generators/client/templates/vue/src/main/webapp/app/shims-vue.d.ts.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2021 the original author or authors from the JHipster project.
+ Copyright 2013-2022 the original author or authors from the JHipster project.
 
  This file is part of the JHipster project, see https://www.jhipster.tech/
  for more information.

package/generators/client/templates/vue/src/main/webapp/content/scss/global.scss.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2021 the original author or authors from the JHipster project.
+ Copyright 2013-2022 the original author or authors from the JHipster project.
 
  This file is part of the JHipster project, see https://www.jhipster.tech/
  for more information.

package/generators/client/templates/vue/src/main/webapp/content/scss/vendor.scss.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2021 the original author or authors from the JHipster project.
+ Copyright 2013-2022 the original author or authors from the JHipster project.
 
  This file is part of the JHipster project, see https://www.jhipster.tech/
  for more information.