generator-jhipster 7.3.0 → 7.5.0

package/generators/client/templates/react/src/main/webapp/app/modules/home/home.tsx.ejs

@@ -53,7 +53,7 @@ export const Home = () => {
         <h2><Translate contentKey="home.title">Welcome, <%= backendName %> Hipster!</Translate></h2>
         <p className="lead"><Translate contentKey="home.subtitle">This is your homepage</Translate></p>
         {
-          (account && account.login) ? (
+          (account?.login) ? (
             <div>
               <Alert color="success">
                 <Translate contentKey="home.logged.message" interpolate={{ username: account.login }}>You are logged in as user {account.login}.</Translate>

package/generators/client/templates/react/src/main/webapp/app/shared/layout/header/header.scss.ejs

@@ -95,6 +95,15 @@ Navbar styles
   }
 }
 <%_ } _%>
+.navbar-brand {
+  overflow: hidden;
+}
+
+.jh-navbar .navbar-nav .nav-link {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .navbar-version {
   font-size: 10px;
   color: $header-color-secondary;

package/generators/client/templates/react/src/main/webapp/app/shared/layout/header/header.tsx.ejs

@@ -89,11 +89,11 @@ const Header = (props: IHeaderProps) => {
     <div id="app-header">
       {renderDevRibbon()}
       <LoadingBar className="loading-bar"/>
-      <Navbar data-cy="navbar" <% if (clientThemeNone || !clientThemeLight) { %>dark<% } else { %>light<% } %> expand="sm" fixed="top" className="<%_ if (clientThemeNone) { _%>jh-navbar<%_ } else { _%>bg-<%= clientThemeVariant %><%_ } _%>">
+      <Navbar data-cy="navbar" <% if (clientThemeNone || !clientThemeLight) { %>dark<% } else { %>light<% } %> expand="md" fixed="top" className="<%_ if (clientThemeNone) { _%>jh-navbar<%_ } else { _%>bg-<%= clientThemeVariant %><%_ } _%>">
         <NavbarToggler aria-label="Menu" onClick={toggleMenu} />
         <Brand />
         <Collapse isOpen={menuOpen} navbar>
-          <Nav id="header-tabs" className="ml-auto" navbar>
+          <Nav id="header-tabs" className="ms-auto" navbar>
             <Home />
             {props.isAuthenticated && <EntitiesMenu />}
             {props.isAuthenticated && props.isAdmin &&

package/generators/client/templates/react/src/main/webapp/app/shared/layout/menus/account.tsx.ejs

@@ -29,7 +29,7 @@ import { getLoginUrl } from 'app/shared/util/url-utils';
 import { NavDropdown } from './menu-components';
 
 
-const accountMenuItemsAuthenticated = (
+const accountMenuItemsAuthenticated = () => (
   <>
 <%_ if (!skipUserManagement) { _%>
     <MenuItem icon="wrench" to="/account/settings" data-cy="settings"><Translate contentKey="global.menu.account.settings">Settings</Translate></MenuItem>
@@ -42,7 +42,7 @@ const accountMenuItemsAuthenticated = (
   </>
   );
 
-const accountMenuItems = (
+const accountMenuItems = () => (
   <>
 <%_ if (!authenticationTypeOauth2) { _%>
     <MenuItem id="login-item" icon="sign-in-alt" to="/login" data-cy="login"><Translate contentKey="global.menu.account.login">Sign in</Translate></MenuItem>
@@ -57,7 +57,7 @@ const accountMenuItems = (
 
 export const AccountMenu = ({ isAuthenticated = false }) => (
   <NavDropdown icon="user" name={translate('global.menu.account.main')} id="account-menu" data-cy="accountMenu">
-    {isAuthenticated ? accountMenuItemsAuthenticated : accountMenuItems}
+    {isAuthenticated ? accountMenuItemsAuthenticated() : accountMenuItems()}
   </NavDropdown>
 );
 

package/generators/client/templates/react/src/main/webapp/app/shared/layout/menus/admin.tsx.ejs

@@ -25,7 +25,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { NavDropdown } from './menu-components';
 import { Translate, translate } from 'react-jhipster';
 
-const adminMenuItems = (
+const adminMenuItems = () => (
   <>
 <%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>
     <MenuItem icon="road" to="/admin/gateway"><Translate contentKey="global.menu.admin.gateway">Gateway</Translate></MenuItem>
@@ -44,14 +44,14 @@ const adminMenuItems = (
 <%_ } _%>
     {/* jhipster-needle-add-element-to-admin-menu - JHipster will add entities to the admin menu here */}
   </>
-  );
+);
 
-const openAPIItem = (
+const openAPIItem = () => (
   <MenuItem icon="book" to="/admin/docs"><Translate contentKey="global.menu.admin.apidocs">API</Translate></MenuItem>
 );
 
 <% if (devDatabaseTypeH2Any) { %>
-const databaseItem = (
+const databaseItem = () => (
   <DropdownItem tag="a" href="<% if (reactive) { %>http://localhost:8092/<% } else { %>./h2-console/<% } %>" target="_tab">
     <FontAwesomeIcon icon="database" fixedWidth /> <Translate contentKey="global.menu.admin.database">Database</Translate>
   </DropdownItem>
@@ -60,10 +60,10 @@ const databaseItem = (
 
 export const AdminMenu = ({ showOpenAPI <% if (devDatabaseTypeH2Any) { %>, showDatabase <%_ } _%>}) => (
   <NavDropdown icon="users-cog" name={translate('global.menu.admin.main')} id="admin-menu" data-cy="adminMenu">
-      {adminMenuItems}
-      {showOpenAPI && openAPIItem}
+      {adminMenuItems()}
+      {showOpenAPI && openAPIItem()}
 <% if (devDatabaseTypeH2Any) { %>
-      {showDatabase && databaseItem}
+      {showDatabase && databaseItem()}
 <%_ } _%>
   </NavDropdown>
 );

package/generators/client/templates/react/src/main/webapp/app/shared/layout/menus/menu-components.tsx.ejs

@@ -27,7 +27,7 @@ export const NavDropdown = props => (
     <FontAwesomeIcon icon={props.icon} />
     <span>{props.name}</span>
   </DropdownToggle>
-  <DropdownMenu right style={props.style}>
+  <DropdownMenu end style={props.style}>
     {props.children}
   </DropdownMenu>
 </UncontrolledDropdown>

package/generators/client/templates/react/src/main/webapp/app/shared/reducers/authentication.spec.ts.ejs

@@ -218,7 +218,7 @@ describe('Authentication reducer tests', () => {
           type: getAccount.fulfilled.type,
           payload: resolvedObject
         },
-        updateLocale('en'),
+        updateLocale('<%= nativeLanguage %>'),
         <%_ } _%>
       ];
       await store.dispatch(getSession());

package/generators/client/templates/react/webpack/webpack.dev.js.ejs

@@ -23,6 +23,9 @@ const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin');
 const WebpackNotifierPlugin = require('webpack-notifier');
 const path = require('path');
 const sass = require('sass');
+<%_ if (enableI18nRTL) { _%>
+const postcssRTLCSS = require('postcss-rtlcss');
+<%_ } _%>
 
 const utils = require('./utils.js');
 const commonConfig = require('./webpack.common.js');
@@ -47,7 +50,20 @@ module.exports = async (options) => webpackMerge(await commonConfig({ env: ENV }
     rules: [
       {
         test: /\.(sa|sc|c)ss$/,
-        use: ['style-loader', 'css-loader', 'postcss-loader', {
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+<%_ if (enableI18nRTL) { _%>
+            options: {
+              postcssOptions: {
+                plugins: [postcssRTLCSS()],
+              },
+            },
+<%_ } _%>
+          },
+          {
             loader: 'sass-loader',
             options: { implementation: sass }
           }
@@ -66,8 +82,6 @@ module.exports = async (options) => webpackMerge(await commonConfig({ env: ENV }
         '/api',
         '/services',
         '/management',
-        '/swagger-resources',
-        '/v2/api-docs',
         '/v3/api-docs',
         '/h2-console',<% if (authenticationTypeOauth2) { %>
         '/oauth2',

package/generators/client/templates/react/webpack/webpack.prod.js.ejs

@@ -23,6 +23,9 @@ const WorkboxPlugin = require('workbox-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const sass = require('sass');
+<%_ if (enableI18nRTL) { _%>
+const postcssRTLCSS = require('postcss-rtlcss');
+<%_ } _%>
 
 const utils = require('./utils.js');
 const commonConfig = require('./webpack.common.js');
@@ -52,7 +55,16 @@ module.exports = async () => webpackMerge(await commonConfig({ env: ENV }), {
             }
           },
           'css-loader',
-          'postcss-loader',
+          {
+            loader: 'postcss-loader',
+<%_ if (enableI18nRTL) { _%>
+            options: {
+              postcssOptions: {
+                plugins: [postcssRTLCSS()],
+              },
+            },
+<%_ } _%>
+          },
           {
             loader: 'sass-loader',
             options: { implementation: sass }

package/generators/client/templates/vue/.eslintrc.js.ejs

@@ -19,26 +19,29 @@
 module.exports = {
     root: true,
     env: {
-      node: true
+      node: true,
     },
     extends: [
       'plugin:vue/essential',
       'eslint:recommended',
       '@vue/typescript/recommended',
       '@vue/prettier',
-      '@vue/prettier/@typescript-eslint'
+      '@vue/prettier/@typescript-eslint',
     ],
     parserOptions: {
-      ecmaVersion: 2020
+      ecmaVersion: 2020,
+      project: ['./tsconfig.spec.json'],
     },
     rules: {
       'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
       'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'vue/multi-word-component-names': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-unused-vars': 'off',
       '@typescript-eslint/explicit-module-boundary-types': 'off',
       '@typescript-eslint/no-empty-function': 'off',
-      '@typescript-eslint/ban-ts-comment': 'off'
+      '@typescript-eslint/ban-ts-comment': 'off',
+      '@typescript-eslint/no-var-requires': 'off',
     },
-    "ignorePatterns": ["**/src/main docker/**/*.js"],
+    'ignorePatterns': ['<%= BUILD_DIR %>'],
   };

package/generators/client/templates/vue/package.json

@@ -2,80 +2,71 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@fortawesome/vue-fontawesome": "2.0.2",
-    "axios": "0.22.0",
-    "bootstrap": "4.6.0",
+    "@fortawesome/vue-fontawesome": "2.0.6",
+    "axios": "0.24.0",
+    "bootstrap": "4.6.1",
     "bootstrap-vue": "2.21.2",
-    "bootswatch": "5.1.2",
-    "swagger-ui-dist": "3.52.3",
+    "bootswatch": "5.1.3",
+    "swagger-ui-dist": "4.1.3",
     "vue": "2.6.14",
     "vue-class-component": "7.2.6",
     "vue-cookie": "1.1.4",
     "vue-infinite-loading": "2.4.5",
-    "vue-router": "3.5.2",
-    "vue-i18n": "8.26.5",
+    "vue-router": "3.5.3",
+    "vue-i18n": "8.26.8",
     "vue-property-decorator": "9.1.2",
-    "vuelidate": "0.7.6",
+    "vuelidate": "0.7.7",
     "vuex": "3.6.2",
-    "vue2-filters": "0.13.0"
+    "vue2-filters": "0.14.0"
   },
   "devDependencies": {
-    "@types/jest": "27.0.2",
-    "@types/node": "16.10.3",
-    "@types/sinon": "10.0.4",
+    "@types/jest": "27.4.0",
+    "@types/node": "16.11.17",
+    "@types/sinon": "10.0.6",
     "@types/vuelidate": "0.7.15",
-    "@typescript-eslint/eslint-plugin": "4.33.0",
-    "@typescript-eslint/parser": "4.33.0",
+    "@typescript-eslint/eslint-plugin": "5.8.1",
+    "@typescript-eslint/parser": "5.8.1",
     "@vue/eslint-config-prettier": "6.0.0",
-    "@vue/eslint-config-typescript": "7.0.0",
-    "@vue/cli-plugin-eslint": "4.5.13",
-    "@vue/cli-plugin-typescript": "4.5.13",
-    "@vue/cli-service": "4.5.13",
-    "@vue/test-utils": "1.2.2",
+    "@vue/eslint-config-typescript": "9.1.0",
+    "@vue/vue2-jest": "27.0.0-alpha.3",
+    "@vue/test-utils": "1.3.0",
     "axios-mock-adapter": "1.20.0",
-    "autoprefixer": "10.3.7",
-    "babel-core": "7.0.0-bridge.0",
-    "browser-sync": "2.27.5",
+    "autoprefixer": "10.4.1",
     "browser-sync-webpack-plugin": "2.3.0",
-    "copy-webpack-plugin": "9.0.1",
-    "css-loader": "6.3.0",
-    "css-minimizer-webpack-plugin": "3.1.1",
-    "file-loader": "6.2.0",
+    "copy-webpack-plugin": "10.2.0",
+    "css-loader": "6.5.1",
+    "css-minimizer-webpack-plugin": "3.3.1",
     "folder-hash": "4.0.1",
-    "fork-ts-checker-webpack-plugin": "6.3.3",
-    "html-webpack-plugin": "5.3.2",
-    "jest": "27.2.4",
+    "fork-ts-checker-webpack-plugin": "6.5.0",
+    "html-webpack-plugin": "5.5.0",
+    "jest": "27.4.5",
     "jest-junit": "13.0.0",
     "jest-serializer-vue": "2.0.2",
     "jest-sonar-reporter": "2.0.0",
     "jest-vue-preprocessor": "1.7.1",
-    "merge-jsons-webpack-plugin": "1.0.21",
-    "mini-css-extract-plugin": "2.4.1",
-    "node-notifier": "9.0.1",
+    "merge-jsons-webpack-plugin": "2.0.1",
+    "mini-css-extract-plugin": "2.4.5",
     "numeral": "2.0.6",
-    "portfinder": "1.0.28",
-    "postcss": "8.3.9",
     "postcss-import": "14.0.2",
-    "postcss-loader": "6.1.1",
+    "postcss-loader": "6.2.1",
     "postcss-url": "10.1.3",
     "rimraf": "3.0.2",
-    "sass": "1.42.1",
-    "sass-loader": "12.1.0",
-    "sinon": "11.1.2",
-    "terser-webpack-plugin": "5.2.4",
-    "ts-jest": "27.0.5",
+    "sass": "1.45.2",
+    "sass-loader": "12.4.0",
+    "sinon": "12.0.1",
+    "terser-webpack-plugin": "5.3.0",
+    "ts-jest": "27.1.2",
     "ts-loader": "9.2.6",
-    "eslint": "6.8.0",
+    "eslint": "8.5.0",
     "eslint-plugin-prettier": "3.4.1",
-    "eslint-plugin-vue": "7.19.0",
-    "typescript": "4.4.3",
-    "url-loader": "4.1.1",
-    "webpack": "5.57.1",
-    "webpack-bundle-analyzer": "4.4.2",
-    "webpack-cli": "4.9.0",
-    "webpack-dev-server": "4.3.1",
+    "eslint-plugin-vue": "8.2.0",
+    "typescript": "4.5.4",
+    "webpack": "5.65.0",
+    "webpack-bundle-analyzer": "4.5.0",
+    "webpack-cli": "4.9.1",
+    "webpack-dev-server": "4.7.2",
     "webpack-merge": "5.8.0",
-    "workbox-webpack-plugin": "6.3.0",
+    "workbox-webpack-plugin": "6.4.2",
     "vue-jest": "3.0.7",
     "vue-loader": "15.9.8"
   }

package/generators/client/templates/vue/package.json.ejs

@@ -66,27 +66,21 @@
     "ts-node": "8.10.1",
     "webdriver-manager": "12.1.8",
 <%_ } _%>
-    "babel-core": "<%= dependabotPackageJson.devDependencies['babel-core'] %>",
     "@types/jest": "<%= dependabotPackageJson.devDependencies['@types/jest'] %>",
     "@types/node": "<%= dependabotPackageJson.devDependencies['@types/node'] %>",
     "@types/sinon": "<%= dependabotPackageJson.devDependencies['@types/sinon'] %>",
     "@types/vuelidate": "<%= dependabotPackageJson.devDependencies['@types/vuelidate'] %>",
     "@typescript-eslint/eslint-plugin": "<%= dependabotPackageJson.devDependencies['@typescript-eslint/eslint-plugin'] %>",
     "@typescript-eslint/parser": "<%= dependabotPackageJson.devDependencies['@typescript-eslint/parser'] %>",
-    "@vue/cli-plugin-eslint": "<%= dependabotPackageJson.devDependencies['@vue/cli-plugin-eslint'] %>",
-    "@vue/cli-plugin-typescript": "<%= dependabotPackageJson.devDependencies['@vue/cli-plugin-typescript'] %>",
-    "@vue/cli-service": "<%= dependabotPackageJson.devDependencies['@vue/cli-service'] %>",
     "@vue/eslint-config-prettier": "<%= dependabotPackageJson.devDependencies['@vue/eslint-config-prettier'] %>",
     "@vue/eslint-config-typescript": "<%= dependabotPackageJson.devDependencies['@vue/eslint-config-typescript'] %>",
     "@vue/test-utils": "<%= dependabotPackageJson.devDependencies['@vue/test-utils'] %>",
     "axios-mock-adapter": "<%= dependabotPackageJson.devDependencies['axios-mock-adapter'] %>",
     "autoprefixer": "<%= dependabotPackageJson.devDependencies['autoprefixer'] %>",
-    "browser-sync": "<%= dependabotPackageJson.devDependencies['browser-sync'] %>",
     "browser-sync-webpack-plugin": "<%= dependabotPackageJson.devDependencies['browser-sync-webpack-plugin'] %>",
     "copy-webpack-plugin": "<%= dependabotPackageJson.devDependencies['copy-webpack-plugin'] %>",
     "css-loader": "<%= dependabotPackageJson.devDependencies['css-loader'] %>",
     "css-minimizer-webpack-plugin": "<%= dependabotPackageJson.devDependencies['css-minimizer-webpack-plugin'] %>",
-    "file-loader": "<%= dependabotPackageJson.devDependencies['file-loader'] %>",
     "fork-ts-checker-webpack-plugin": "<%= dependabotPackageJson.devDependencies['fork-ts-checker-webpack-plugin'] %>",
 <%_ if (!skipJhipsterDependencies) { _%>
     "generator-jhipster": "<%= packagejs.version %>",
@@ -105,10 +99,7 @@
     "merge-jsons-webpack-plugin": "<%= dependabotPackageJson.devDependencies['merge-jsons-webpack-plugin'] %>",
 <%_ } _%>
     "mini-css-extract-plugin": "<%= dependabotPackageJson.devDependencies['mini-css-extract-plugin'] %>",
-    "node-notifier": "<%= dependabotPackageJson.devDependencies['node-notifier'] %>",
     "numeral": "<%= dependabotPackageJson.devDependencies['numeral'] %>",
-    "portfinder": "<%= dependabotPackageJson.devDependencies['portfinder'] %>",
-    "postcss": "<%= dependabotPackageJson.devDependencies['postcss'] %>",
     "postcss-import": "<%= dependabotPackageJson.devDependencies['postcss-import'] %>",
     "postcss-loader": "<%= dependabotPackageJson.devDependencies['postcss-loader'] %>",
     "postcss-url": "<%= dependabotPackageJson.devDependencies['postcss-url'] %>",
@@ -131,8 +122,11 @@
     "eslint-plugin-prettier": "<%= dependabotPackageJson.devDependencies['eslint-plugin-prettier'] %>",
     "eslint-plugin-vue": "<%= dependabotPackageJson.devDependencies['eslint-plugin-vue'] %>",
     "typescript": "<%= dependabotPackageJson.devDependencies['typescript'] %>",
-    "url-loader": "<%= dependabotPackageJson.devDependencies['url-loader'] %>",
+<%_ if (microfrontend) { _%>
+    "@vue/vue2-jest": "<%= dependabotPackageJson.devDependencies['@vue/vue2-jest'] %>",
+<%_ } else { _%>
     "vue-jest": "<%= dependabotPackageJson.devDependencies['vue-jest'] %>",
+<%_ } _%>
     "vue-loader": "<%= dependabotPackageJson.devDependencies['vue-loader'] %>",
     "vue-template-compiler": "<%= dependabotPackageJson.dependencies['vue'] %>",
     "webpack": "<%= dependabotPackageJson.devDependencies['webpack'] %>",
@@ -152,14 +146,15 @@
   "scripts": {
     "prettier:check": "prettier --check \"{,src/**/,webpack/}*.{<%= getPrettierExtensions() %>}\"",
     "prettier:format": "prettier --write \"{,src/**/,webpack/}*.{<%= getPrettierExtensions() %>}\"",
-    "lint": "vue-cli-service lint --no-fix",
-    "lint:fix": "vue-cli-service lint",
+    "lint": "eslint . --ext .ts,.vue ",
+    "lint:fix": "eslint . --ext .ts,.vue --fix",
     "cleanup": "rimraf <%= DIST_DIR %>",
     "clean-www": "rimraf <%= DIST_DIR %>app/{src,<%= BUILD_DIR %>}",
     "start": "<%= clientPackageManager %> run webapp:dev --",
     "start-tls": "<%= clientPackageManager %> run webapp:dev -- --env.tls",
     "serve": "<%= clientPackageManager %> run start --",
     "build": "<%= clientPackageManager %> run webapp:prod --",
+    "build-watch": "concurrently 'npm run webapp:build:dev -- --watch'<% if(!skipServer) { %> npm:backend:start<% } %>",
 <%_ if (protractorTests && !cypressTests) { _%>
     "e2e": "<%= clientPackageManager %> run e2e:protractor --",
     "e2e:headless": "<%= clientPackageManager %> run e2e:protractor:headless --",
@@ -186,14 +181,15 @@
     "test": "<%= clientPackageManager %> run jest --",
     "test-ci": "<%= clientPackageManager %> run lint && <%= clientPackageManager %> run jest:update --",
     "test:watch": "<%= clientPackageManager %> run jest -- --watch",
+    "watch": "concurrently npm:start<% if(!skipServer) { %> npm:backend:start<% } %>",
     "webapp:build": "<%= clientPackageManager %> run clean-www && <%= clientPackageManager %> run webapp:build:dev --",
-    "webapp:build:dev": "<%= clientPackageManager %> run webpack -- --config webpack/webpack.dev.js --progress=profile --env stats=minimal",
-    "webapp:build:prod": "<%= clientPackageManager %> run webpack -- --config webpack/webpack.prod.js --progress=profile --env stats=minimal",
-    "webapp:dev": "<%= clientPackageManager %> run webpack-dev-server -- --config webpack/webpack.dev.js --progress=profile --env stats=normal",
+    "webapp:build:dev": "<%= clientPackageManager %> run webpack -- --mode development --env stats=minimal",
+    "webapp:build:prod": "<%= clientPackageManager %> run webpack -- --mode production --env stats=minimal",
+    "webapp:dev": "<%= clientPackageManager %> run webpack-dev-server -- --mode development --env stats=normal",
     "webapp:prod": "<%= clientPackageManager %> run clean-www && <%= clientPackageManager %> run webapp:build:prod --",
     "webapp:test": "<%= clientPackageManager %> run test --",
-    "webpack-dev-server": "webpack serve",
-    "webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js"
+    "webpack-dev-server": "webpack serve --config webpack/webpack.common.js",
+    "webpack": "webpack --config webpack/webpack.common.js"
   },
   "jestSonar": {
     "reportPath": "<%= BUILD_DIR %>test-results/jest",

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

@@ -65,7 +65,9 @@ export default class AccountService {
 <%_ } _%>
         } else {
           this.store.commit('logout');
-          this.router.push('/');
+          if (this.router.currentRoute.path !== '/') {
+            this.router.push('/');
+          }
           sessionStorage.removeItem("requested-url");
         }
 <%_ if (enableTranslation) { _%>
@@ -87,19 +89,17 @@ export default class AccountService {
     if (!this.authenticated || !this.userAuthorities) {
       const token = <%_ if (authenticationTypeJwt) { _%> localStorage.getItem('<%=jhiPrefixDashed %>-authenticationToken') || sessionStorage.getItem('<%=jhiPrefixDashed %>-authenticationToken'); <%_ } else { _%> this.cookie.get('JSESSIONID') || this.cookie.get('XSRF-TOKEN'); <%_ } _%>
       if (!this.store.getters.account && !this.store.getters.logon && token) {
-        return this.retrieveAccount();
-      } else {
-        return Promise.resolve(false);
-      }
-    }
-
-    for (const authority of authorities) {
-      if (this.userAuthorities.includes(authority)) {
-        return Promise.resolve(true);
+        return this.retrieveAccount().then(resp => {
+          if (resp) {
+            return this.checkAuthorities(authorities);
+          }
+          return Promise.resolve(false);
+        });
       }
+      return Promise.resolve(false);
     }
 
-    return Promise.resolve(false);
+    return this.checkAuthorities(authorities);
   }
 
   public get authenticated(): boolean {
@@ -107,6 +107,17 @@ export default class AccountService {
   }
 
   public get userAuthorities(): any {
-    return this.store.getters.account.authorities;
+    return this.store.getters.account?.authorities;
+  }
+
+  private checkAuthorities(authorities: any): Promise<boolean> {
+    if (this.userAuthorities) {
+      for (const authority of authorities) {
+        if (this.userAuthorities.includes(authority)) {
+          return Promise.resolve(true);
+        }
+      }
+    }
+    return Promise.resolve(false);
   }
 }

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

@@ -3,7 +3,13 @@
     <div class="row justify-content-center">
       <div class="col-md-8 toastify-container">
         <h2 v-if="username" id="settings-title">
-          <span v-html="$t('settings.title', { 'username': username })">User settings for [<strong>{{username}}</strong>]</span>
+          <span v-html="$t('settings.title', { 'username': username })">
+            User settings for [
+            <strong>
+              {{username}}
+            </strong>
+            ]
+          </span>
         </h2>
 
         <div class="alert alert-success" role="alert" v-if="success" v-html="$t('settings.messages.success')">

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

@@ -17,7 +17,7 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="entry in orderBy(filterBy(configuration, filtered), orderProp, reverse === true ? 1 : -1)"
+          <tr v-for="entry in orderBy(filterBy(configuration, filtered), orderProp, reverse ? 1 : -1)"
             :key="entry.prefix">
             <td>
               <span>{{ entry.prefix }}</span>

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

@@ -107,7 +107,7 @@ export default class <%=jhiPrefixCapitalized%>Metrics extends Vue {
         } else {
           plural = '';
         }
-        time_string += Math.floor(ms / times[key]).toString() + ' ' + key.toString() + plural + ' ';
+        time_string += `${Math.floor(ms / times[key])} ${key}${plural} `;
         ms = ms - times[key] * Math.floor(ms / times[key]);
       }
     }

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

@@ -1,11 +1,21 @@
-// These constants are injected via webpack environment variables.
-// You can add more variables in webpack.common.js or in profile specific webpack.<dev|prod>.js files.
-// If you change the values in the webpack config files, you need to re run webpack to update the application
+<%#
+ Copyright 2013-2021 the original author or authors from the JHipster project.
 
-export const VERSION = process.env.VERSION;
-// export const DEBUG_INFO_ENABLED: boolean = !!process.env.DEBUG_INFO_ENABLED;
-export const SERVER_API_URL = process.env.SERVER_API_URL;
+ This file is part of the JHipster project, see https://www.jhipster.tech/
+ for more information.
 
+ 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
+
+      https://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.
+-%>
 // Errors
 export const PROBLEM_BASE_URL = 'https://www.jhipster.tech/problem';
 export const EMAIL_ALREADY_USED_TYPE = `${PROBLEM_BASE_URL}/email-already-used`;