generator-jhipster 7.8.1 → 7.9.0

package/generators/client/files-vue.js

@@ -16,8 +16,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+const { replaceVueTranslations } = require('./transform-vue.cjs');
 const constants = require('../generator-constants');
-const utils = require('../utils');
 const { OAUTH2, SESSION } = require('../../jdl/jhipster/authentication-types');
 const { SPRING_WEBSOCKET } = require('../../jdl/jhipster/websocket-types');
 const { GATEWAY } = require('../../jdl/jhipster/application-types');
@@ -25,6 +25,9 @@ const { GATEWAY } = require('../../jdl/jhipster/application-types');
 const { CLIENT_MAIN_SRC_DIR, CLIENT_TEST_SRC_DIR, VUE_DIR } = constants;
 
 const vueFiles = {
+  _: {
+    transform: [replaceVueTranslations],
+  },
   common: [
     {
       templates: [
@@ -369,63 +372,14 @@ function cleanup() {
 }
 
 function writeFiles() {
-  // write Vue files
-  return this.writeFilesToDisk(vueFiles, 'vue');
-}
-
-function customizeFiles() {
-  if (!this.enableTranslation) {
-    utils.vueReplaceTranslation(this, [
-      'app/app.vue',
-      'app/core/home/home.vue',
-      'app/core/error/error.vue',
-      'app/core/jhi-footer/jhi-footer.vue',
-      'app/core/jhi-navbar/jhi-navbar.vue',
-      'app/core/ribbon/ribbon.vue',
-      'app/shared/jhi-item-count.vue',
-      'app/entities/entities-menu.vue',
-    ]);
-    if (this.withAdminUi) {
-      utils.vueReplaceTranslation(this, [
-        'app/admin/configuration/configuration.vue',
-        'app/admin/health/health.vue',
-        'app/admin/health/health-modal.vue',
-        'app/admin/logs/logs.vue',
-        'app/admin/metrics/metrics.vue',
-        'app/admin/metrics/metrics-modal.vue',
-      ]);
-    }
-    if (this.authenticationType !== OAUTH2) {
-      utils.vueReplaceTranslation(this, ['app/account/login-form/login-form.vue']);
-    }
-    if (!this.skipUserManagement) {
-      utils.vueReplaceTranslation(this, [
-        'app/account/change-password/change-password.vue',
-        'app/account/activate/activate.vue',
-        'app/account/register/register.vue',
-        'app/account/reset-password/init/reset-password-init.vue',
-        'app/account/reset-password/finish/reset-password-finish.vue',
-        'app/account/settings/settings.vue',
-        'app/admin/user-management/user-management.vue',
-        'app/admin/user-management/user-management-view.vue',
-        'app/admin/user-management/user-management-edit.vue',
-      ]);
-    }
-    if (this.authenticationType === SESSION && !this.skipUserManagement) {
-      utils.vueReplaceTranslation(this, ['app/account/sessions/sessions.vue']);
-    }
-    if (this.applicationType === GATEWAY && this.serviceDiscoveryType) {
-      utils.vueReplaceTranslation(this, ['app/admin/gateway/gateway.vue']);
-    }
-    if (this.websocket === SPRING_WEBSOCKET) {
-      utils.vueReplaceTranslation(this, ['app/admin/tracker/tracker.vue']);
-    }
-  }
+  return this.writeFiles({
+    sections: vueFiles,
+    rootTemplatesPath: 'vue',
+  });
 }
 
 module.exports = {
   files: vueFiles,
   cleanup,
   writeFiles,
-  customizeFiles,
 };

package/generators/client/index.js

@@ -37,7 +37,7 @@ const {
 const prompts = require('./prompts');
 const { cleanup: cleanupAngular, writeFiles: writeAngularFiles } = require('./files-angular');
 const { cleanup: cleanupReact, writeFiles: writeReactFiles } = require('./files-react');
-const { cleanup: cleanupVue, writeFiles: writeVueFiles, customizeFiles: customizeVueFiles } = require('./files-vue');
+const { cleanup: cleanupVue, writeFiles: writeVueFiles } = require('./files-vue');
 const writeCommonFiles = require('./files-common').writeFiles;
 const { clientI18nFiles } = require('../languages/files');
 
@@ -373,14 +373,6 @@ module.exports = class JHipsterClientGenerator extends BaseBlueprintGenerator {
   // Public API method used by the getter and also by Blueprints
   _postWriting() {
     return {
-      customizeFiles() {
-        if (this.skipClient) return;
-        if (this.clientFramework === VUE) {
-          return customizeVueFiles.call(this);
-        }
-        return undefined;
-      },
-
       packageJsonScripts() {
         if (this.skipClient) return;
         const packageJsonStorage = this.createStorage('package.json');
@@ -493,8 +485,23 @@ module.exports = class JHipsterClientGenerator extends BaseBlueprintGenerator {
   /**
    * @experimental
    * Get translation value for a key.
+   *
+   * @param translationKey {string} - key to be translated
+   * @param [data] {object} - template data in case translated value is a template
    */
-  _getClientTranslation(translationKey) {
-    return _.get(this.clientTranslations, translationKey, `Translation missing for ${translationKey}`);
+  _getClientTranslation(translationKey, data) {
+    let translatedValue = _.get(this.clientTranslations, translationKey);
+    if (translatedValue === undefined) {
+      const [last, second, ...others] = translationKey.split('.').reverse();
+      translatedValue = _.get(this.clientTranslations, `${others.reverse().join('.')}['${second}.${last}']`);
+    }
+    if (translatedValue === undefined) {
+      return `Translation missing for ${translationKey}`;
+    }
+    if (!data) {
+      return translatedValue;
+    }
+    const compiledTemplate = _.template(translatedValue, { interpolate: /{{([\s\S]+?)}}/g });
+    return compiledTemplate(data);
   }
 };

package/generators/client/needle-api/needle-client-angular.js

@@ -235,10 +235,7 @@ module.exports = class extends needleClientBase {
       const isSpecificEntityAlreadyGenerated = jhipsterUtils.checkStringInFile(entityModulePath, `path: '${entityUrl}'`, this.generator);
 
       if (!isSpecificEntityAlreadyGenerated) {
-        const modulePath =
-          this.generator.microfrontend && this.generator.applicationTypeGateway && microserviceName
-            ? `${microserviceName}/${entityFileName}`
-            : `./${entityFolderName}/${entityFileName}.module`;
+        const modulePath = `./${entityFolderName}/${entityFileName}.module`;
         const moduleName = microserviceName
           ? `${this.generator.upperFirstCamelCase(microserviceName)}${entityAngularName}Module`
           : `${entityAngularName}Module`;

package/generators/client/needle-api/needle-client-react.js

@@ -60,9 +60,9 @@ module.exports = class extends needleClientBase {
       indexModulePath,
       'jhipster-needle-add-route-path',
       this.generator.stripMargin(
-        `|<ErrorBoundaryRoute path={\`\${match.url}${
+        `|<Route path="${
           this.generator.microfrontend && this.generator.applicationTypeMicroservice ? '/' : ''
-        }${entityFileName}\`} component={${entityName}} />`
+        }${entityFileName}/*" element={<${entityName} />} />`
       )
     );
     this.addBlockContentToFile(indexAddRoutePathRewriteFileModel, errorMessage(indexModulePath));

package/generators/client/prompts.js

@@ -75,6 +75,7 @@ async function askForClient() {
   this.clientFramework = this.jhipsterConfig.clientFramework = answers.clientFramework;
   if (this.clientFramework === NO_CLIENT_FRAMEWORK) {
     this.skipClient = this.jhipsterConfig.skipClient = true;
+    this.cancelCancellableTasks();
   }
 }
 

package/generators/client/templates/angular/.eslintrc.json.ejs

@@ -35,7 +35,16 @@
   "parserOptions": {
     "ecmaVersion": 2018,
     "sourceType": "module",
-    "project": "./tsconfig.json"
+    "project": [
+      "./tsconfig.app.json",
+<%_ if (cypressTests) { _%>
+      "./<%= CLIENT_TEST_SRC_DIR %>cypress/tsconfig.json",
+<%_ } _%>
+<%_ if (protractorTests) { _%>
+      "./tsconfig.e2e.json",
+<%_ } _%>
+      "./tsconfig.spec.json"
+    ]
   },
   "rules": {
     "@angular-eslint/component-selector": [

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

@@ -116,7 +116,6 @@
       }
     }
   },
-  "defaultProject": "<%= dasherizedBaseName %>",
   "cli": {
     "cache": {
       "enabled": true,

package/generators/client/templates/angular/jest.conf.js.ejs

@@ -36,5 +36,7 @@ module.exports = {
   reporters: ['default', ['jest-junit', { outputDirectory: '<rootDir>/<%= BUILD_DIR %>test-results/', outputName: 'TESTS-results-jest.xml' }]],
   testResultsProcessor: 'jest-sonar-reporter',
   testMatch: ['<rootDir>/<%= CLIENT_MAIN_SRC_DIR %>app/**/@(*.)@(spec.ts)'],
-  testURL: 'http://localhost/',
+  testEnvironmentOptions: {
+    url: 'http://localhost/',
+  },
 };

package/generators/client/templates/angular/package.json

@@ -1,48 +1,48 @@
 {
   "dependencies": {
-    "@angular/common": "13.3.1",
-    "@fortawesome/angular-fontawesome": "0.10.2",
-    "@fortawesome/fontawesome-svg-core": "6.1.1",
-    "@fortawesome/free-solid-svg-icons": "6.1.1",
-    "@ng-bootstrap/ng-bootstrap": "12.0.1",
+    "@angular/common": "14.1.0",
+    "@fortawesome/angular-fontawesome": "0.11.1",
+    "@fortawesome/fontawesome-svg-core": "6.1.2",
+    "@fortawesome/free-solid-svg-icons": "6.1.2",
+    "@ng-bootstrap/ng-bootstrap": "13.0.0",
     "@ngx-translate/core": "14.0.0",
     "@ngx-translate/http-loader": "7.0.0",
     "@popperjs/core": "2.11.5",
-    "bootstrap": "5.1.3",
-    "bootswatch": "5.1.3",
-    "ngx-cookie-service": "13.1.2",
-    "ngx-infinite-scroll": "13.0.1",
-    "ngx-webstorage": "9.0.0",
-    "rxjs": "7.5.5",
-    "tslib": "2.3.1",
-    "zone.js": "0.11.4"
+    "bootstrap": "5.2.0",
+    "bootswatch": "5.2.0",
+    "ngx-cookie-service": "14.0.1",
+    "ngx-infinite-scroll": "14.0.0",
+    "ngx-webstorage": "10.0.1",
+    "rxjs": "7.5.6",
+    "tslib": "2.4.0",
+    "zone.js": "0.11.6"
   },
   "devDependencies": {
-    "@angular/cli": "13.3.1",
-    "@angular-builders/custom-webpack": "13.1.0",
-    "@angular-builders/jest": "13.0.3",
-    "@angular-eslint/eslint-plugin": "13.2.0",
-    "@types/node": "16.11.26",
-    "@types/jest": "27.4.1",
-    "@typescript-eslint/eslint-plugin": "5.18.0",
-    "browser-sync": "2.27.9",
+    "@angular/cli": "14.1.0",
+    "@angular-builders/custom-webpack": "14.0.0",
+    "@angular-builders/jest": "14.0.0",
+    "@angular-eslint/eslint-plugin": "14.0.2",
+    "@types/node": "16.11.47",
+    "@types/jest": "28.1.6",
+    "@typescript-eslint/eslint-plugin": "5.31.0",
+    "browser-sync": "2.27.10",
     "browser-sync-webpack-plugin": "2.3.0",
-    "copy-webpack-plugin": "10.2.4",
-    "eslint": "8.12.0",
+    "copy-webpack-plugin": "11.0.0",
+    "eslint": "8.20.0",
     "eslint-config-prettier": "8.5.0",
-    "eslint-webpack-plugin": "3.1.1",
+    "eslint-webpack-plugin": "3.2.0",
     "folder-hash": "4.0.2",
-    "jest": "27.5.1",
-    "jest-preset-angular": "11.1.1",
+    "jest": "28.1.3",
+    "jest-preset-angular": "12.2.0",
     "jest-date-mock": "1.0.8",
-    "jest-junit": "13.1.0",
+    "jest-junit": "14.0.0",
     "jest-sonar-reporter": "2.0.0",
     "merge-jsons-webpack-plugin": "2.0.1",
-    "postcss-rtlcss": "3.5.4",
+    "postcss-rtlcss": "3.7.2",
     "rimraf": "3.0.2",
-    "ts-jest": "27.1.4",
-    "typescript": "4.6.3",
-    "webpack": "5.71.0",
+    "ts-jest": "28.0.7",
+    "typescript": "4.7.4",
+    "webpack": "5.74.0",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-merge": "5.8.0",
     "webpack-notifier": "1.15.0"

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

@@ -48,20 +48,20 @@
     "bootswatch": "<%= dependabotPackageJson.dependencies.bootswatch %>",
     <%_ } _%>
     "dayjs": "<%= dependabotPackageJson.dependencies['dayjs'] %>",
-    <%_ if (authenticationTypeSession && websocket === 'spring-websocket') { _%>
+    <%_ if (authenticationTypeSession && communicationSpringWebsocket) { _%>
     "ngx-cookie-service": "<%= dependabotPackageJson.dependencies['ngx-cookie-service'] %>",
     <%_ } _%>
     "ngx-infinite-scroll": "<%= dependabotPackageJson.dependencies['ngx-infinite-scroll'] %>",
     "ngx-webstorage": "<%= dependabotPackageJson.dependencies['ngx-webstorage'] %>",
     "@popperjs/core": "<%= dependabotPackageJson.dependencies['@popperjs/core'] %>",
     "rxjs": "<%= dependabotPackageJson.dependencies['rxjs'] %>",
-    <%_ if (websocket === 'spring-websocket') { _%>
+<%_ if (communicationSpringWebsocket) { _%>
     "sockjs-client": "1.5.0",
     "webstomp-client": "1.2.6",
-    <%_ } _%>
-    <%_ if (skipServer) { _%>
+<%_ } _%>
+<%_ if (skipServer) { _%>
     "sonar-scanner": "3.1.0",
-    <%_ } _%>
+<%_ } _%>
     "tslib": "<%= dependabotPackageJson.dependencies['tslib'] %>",
     "zone.js": "<%= dependabotPackageJson.dependencies['zone.js'] %>"
   },
@@ -79,7 +79,7 @@
     "ts-node": "9.1.1",
     "webdriver-manager": "12.1.8",
 <%_ } _%>
-<%_ if (websocket === 'spring-websocket') { _%>
+<%_ if (communicationSpringWebsocket) { _%>
     "@types/sockjs-client": "1.5.0",
 <%_ } _%>
 <%_ if (cypressTests) { _%>
@@ -111,11 +111,12 @@
     "eslint-webpack-plugin": "<%= dependabotPackageJson.devDependencies['eslint-webpack-plugin'] %>",
 <%_ if (!skipJhipsterDependencies) { _%>
     "generator-jhipster": "<%= packagejs.version %>",
-    <%_ otherModules.forEach(module => { _%>
+  <%_ otherModules.forEach(module => { _%>
     "<%= module.name %>": "<%= module.version %>",
-    <%_ });
-} _%>
+  <%_ }); _%>
+<%_ } _%>
     "jest": "<%= dependabotPackageJson.devDependencies['jest'] %>",
+    "jest-environment-jsdom": "<%= dependabotPackageJson.devDependencies['jest'] %>",
     "jest-preset-angular": "<%= dependabotPackageJson.devDependencies['jest-preset-angular'] %>",
     "jest-date-mock": "<%= dependabotPackageJson.devDependencies['jest-date-mock'] %>",
     "jest-junit": "<%= dependabotPackageJson.devDependencies['jest-junit'] %>",
@@ -149,32 +150,32 @@
     "lint:fix": "<%= clientPackageManager %> run lint -- --fix",
     "cleanup": "rimraf <%= DIST_DIR %>",
     "clean-www": "rimraf <%= DIST_DIR %>app/{src,<%= BUILD_DIR %>}",
-    <%_ if (protractorTests && !cypressTests) { _%>
+<%_ if (protractorTests && !cypressTests) { _%>
     "e2e": "<%= clientPackageManager %> run e2e:protractor --",
     "e2e:headless": "<%= clientPackageManager %> run e2e:protractor:headless --",
-    <%_ } else if ((cypressTests && !protractorTests) || (protractorTests && cypressTests)) {  _%>
+<%_ } else if ((cypressTests && !protractorTests) || (protractorTests && cypressTests)) {  _%>
     "e2e": "<%= clientPackageManager %> run e2e:cypress:headed --",
     "e2e:headless": "<%= clientPackageManager %> run e2e:cypress --",
-    <%_ } _%>
-    <%_ if (protractorTests) { _%>
+<%_ } _%>
+<%_ if (protractorTests) { _%>
     "e2e:protractor:headless": "<%= clientPackageManager %> run e2e:protractor --",
     "e2e:protractor": "protractor <%= TEST_SRC_DIR %>protractor.conf.js",
-    <%_ } _%>
-    <%_ if (cypressTests) { _%>
+<%_ } _%>
+<%_ if (cypressTests) { _%>
     "e2e:cypress:headed": "<%= clientPackageManager %> run e2e:cypress -- --headed",
-    "e2e:cypress": "cypress run --browser chrome --record ${CYPRESS_ENABLE_RECORD:-false}",
-    "cypress": "cypress open",
-    <%_ } _%>
-    <%_ if (protractorTests) { _%>
+    "e2e:cypress": "cypress run --e2e --browser chrome --record ${CYPRESS_ENABLE_RECORD:-false}",
+    "cypress": "cypress open --e2e",
+<%_ } _%>
+<%_ if (protractorTests) { _%>
     "postinstall": "<%= clientPackageManager %> run e2e:update-webdriver",
     "e2e:update-webdriver": "webdriver-manager update --gecko false",
-    <%_ } _%>
+<%_ } _%>
     "jest": "jest --coverage --logHeapUsage --maxWorkers=2 --config jest.conf.js",
     "start": "ng serve<% if (!microfrontend) { %> --hmr<% } %>",
     "start-tls": "<%= clientPackageManager %> run webapp:dev-ssl",
-    <%_ if (skipServer) { _%>
+<%_ if (skipServer) { _%>
     "sonar": "sonar-scanner",
-    <%_ } _%>
+<%_ } _%>
     "serve": "<%= clientPackageManager %> run start --",
     "build": "<%= clientPackageManager %> run webapp:prod --",
     "pretest": "<%= clientPackageManager %> run lint",

package/generators/client/templates/angular/src/main/webapp/app/account/activate/activate.component.html.ejs

@@ -19,15 +19,15 @@
 <div>
   <div class="d-flex justify-content-center">
     <div class="col-md-8">
-      <h1 <%= jhiPrefix %>Translate="activate.title">Activation</h1>
+      <h1 <%= jhiPrefix %>Translate="activate.title"><%- this._getClientTranslation('activate.title') %></h1>
 
       <div class="alert alert-success" *ngIf="success">
-        <span <%= jhiPrefix %>Translate="activate.messages.success"><strong>Your user account has been activated.</strong> Please </span>
-        <a class="alert-link" routerLink="/login" <%= jhiPrefix %>Translate="global.messages.info.authenticated.link">sign in</a>.
+        <span <%= jhiPrefix %>Translate="activate.messages.success"><%- this._getClientTranslation('activate.messages.success') %></span>
+        <a class="alert-link" routerLink="/login" <%= jhiPrefix %>Translate="global.messages.info.authenticated.link"><%- this._getClientTranslation('global.messages.info.authenticated.link') %></a>.
       </div>
 
       <div class="alert alert-danger" *ngIf="error" <%= jhiPrefix %>Translate="activate.messages.error">
-        <strong>Your user could not be activated.</strong> Please use the registration form to sign up.
+        <%- this._getClientTranslation('activate.messages.error') %>
       </div>
     </div>
   </div>

package/generators/client/templates/angular/src/main/webapp/app/account/password/password-strength-bar/password-strength-bar.component.html.ejs

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 <div id="strength">
-  <small<% if (enableTranslation) { %> <%= jhiPrefix %>Translate="global.messages.validate.newpassword.strength"<% } %>>Password strength:</small>
+  <small<% if (enableTranslation) { %> <%= jhiPrefix %>Translate="global.messages.validate.newpassword.strength"<% } %>><%- this._getClientTranslation('global.messages.validate.newpassword.strength') %></small>
   <ul id="strengthBar">
     <li class="point"></li>
     <li class="point"></li>

package/generators/client/templates/angular/src/main/webapp/app/account/password/password.component.html.ejs

@@ -20,24 +20,24 @@
   <div class="d-flex justify-content-center">
     <div class="col-md-8" *ngIf="account$ | async as account">
       <h2 <%= jhiPrefix %>Translate="password.title" [translateValues]="{ username: account.login }">
-        Password for [<strong>{{ account.login }}</strong>]
+        <%- this._getClientTranslation('password.title', { username: '{{ account.login }}' }) %>
       </h2>
 
       <div class="alert alert-success" *ngIf="success" <%= jhiPrefix %>Translate="password.messages.success">
-        <strong>Password changed!</strong>
+        <%- this._getClientTranslation('password.messages.success') %>
       </div>
 
       <div class="alert alert-danger" *ngIf="error" <%= jhiPrefix %>Translate="password.messages.error">
-        <strong>An error has occurred!</strong> The password could not be changed.
+         <%- this._getClientTranslation('password.messages.error') %>
       </div>
 
       <div class="alert alert-danger" *ngIf="doNotMatch" <%= jhiPrefix %>Translate="global.messages.error.dontmatch">
-        The password and its confirmation do not match!
+         <%- this._getClientTranslation('global.messages.error.dontmatch') %>
       </div>
 
       <form name="form" role="form" (ngSubmit)="changePassword()" [formGroup]="passwordForm">
         <div class="mb-3">
-          <label class="form-label" for="currentPassword" <%= jhiPrefix %>Translate="global.form.currentpassword.label">Current password</label>
+          <label class="form-label" for="currentPassword" <%= jhiPrefix %>Translate="global.form.currentpassword.label"><%- this._getClientTranslation('global.form["currentpassword.label"]') %></label>
           <input
             type="password"
             class="form-control"
@@ -59,13 +59,13 @@
               *ngIf="passwordForm.get('currentPassword')?.errors?.required"
               <%= jhiPrefix %>Translate="global.messages.validate.newpassword.required"
             >
-              Your password is required.
+              <%- this._getClientTranslation('global.messages.validate.newpassword.required') %>
             </small>
           </div>
         </div>
 
         <div class="mb-3">
-          <label class="form-label" for="newPassword" <%= jhiPrefix %>Translate="global.form.newpassword.label">New password</label>
+          <label class="form-label" for="newPassword" <%= jhiPrefix %>Translate="global.form.newpassword.label"><%- this._getClientTranslation('global.form["newpassword.label"]') %></label>
           <input
             type="password"
             class="form-control"
@@ -87,7 +87,7 @@
               *ngIf="passwordForm.get('newPassword')?.errors?.required"
               <%= jhiPrefix %>Translate="global.messages.validate.newpassword.required"
             >
-              Your password is required.
+             <%- this._getClientTranslation('global.messages.validate.newpassword.required') %>
             </small>
 
             <small
@@ -95,7 +95,7 @@
               *ngIf="passwordForm.get('newPassword')?.errors?.minlength"
               <%= jhiPrefix %>Translate="global.messages.validate.newpassword.minlength"
             >
-              Your password is required to be at least 4 characters.
+              <%- this._getClientTranslation('global.messages.validate.newpassword.minlength') %>
             </small>
 
             <small
@@ -103,7 +103,7 @@
               *ngIf="passwordForm.get('newPassword')?.errors?.maxlength"
               <%= jhiPrefix %>Translate="global.messages.validate.newpassword.maxlength"
             >
-              Your password cannot be longer than 50 characters.
+              <%- this._getClientTranslation('global.messages.validate.newpassword.maxlength') %>
             </small>
           </div>
 
@@ -111,7 +111,7 @@
         </div>
 
         <div class="mb-3">
-          <label class="form-label" for="confirmPassword" <%= jhiPrefix %>Translate="global.form.confirmpassword.label">New password confirmation</label>
+          <label class="form-label" for="confirmPassword" <%= jhiPrefix %>Translate="global.form.confirmpassword.label"><%- this._getClientTranslation('global.form["confirmpassword.label"]') %></label>
           <input
             type="password"
             class="form-control"
@@ -133,7 +133,7 @@
               *ngIf="passwordForm.get('confirmPassword')?.errors?.required"
               <%= jhiPrefix %>Translate="global.messages.validate.confirmpassword.required"
             >
-              Your confirmation password is required.
+            <%- this._getClientTranslation('global.messages.validate.confirmpassword.required') %>
             </small>
 
             <small
@@ -141,7 +141,7 @@
               *ngIf="passwordForm.get('confirmPassword')?.errors?.minlength"
               <%= jhiPrefix %>Translate="global.messages.validate.confirmpassword.minlength"
             >
-              Your confirmation password is required to be at least 4 characters.
+              <%- this._getClientTranslation('global.messages.validate.confirmpassword.minlength') %>
             </small>
 
             <small
@@ -149,7 +149,7 @@
               *ngIf="passwordForm.get('confirmPassword')?.errors?.maxlength"
               <%= jhiPrefix %>Translate="global.messages.validate.confirmpassword.maxlength"
             >
-              Your confirmation password cannot be longer than 50 characters.
+               <%- this._getClientTranslation('global.messages.validate.confirmpassword.maxlength') %>
             </small>
           </div>
         </div>
@@ -161,7 +161,7 @@
           <%= jhiPrefix %>Translate="password.form.button"
           data-cy="submit"
         >
-          Save
+          <%- this._getClientTranslation('password.form.button') %>
         </button>
       </form>
     </div>

package/generators/client/templates/angular/src/main/webapp/app/account/password/password.component.ts.ejs

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { Observable } from 'rxjs';
 
 import { AccountService } from 'app/core/auth/account.service';
@@ -33,13 +33,19 @@ export class PasswordComponent implements OnInit {
   error = false;
   success = false;
   account$?: Observable<Account | null>;
-  passwordForm = this.fb.group({
-    currentPassword: ['', [Validators.required]],
-    newPassword: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(50)]],
-    confirmPassword: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(50)]],
+  passwordForm = new FormGroup({
+    currentPassword: new FormControl('', { nonNullable: true, validators: Validators.required }),
+    newPassword: new FormControl('', {
+      nonNullable: true,
+      validators: [Validators.required, Validators.minLength(4), Validators.maxLength(50)],
+    }),
+    confirmPassword: new FormControl('', {
+      nonNullable: true,
+      validators: [Validators.required, Validators.minLength(4), Validators.maxLength(50)],
+    }),
   });
 
-  constructor(private passwordService: PasswordService, private accountService: AccountService, private fb: FormBuilder) {}
+  constructor(private passwordService: PasswordService, private accountService: AccountService) {}
 
   ngOnInit(): void {
     this.account$ = this.accountService.identity();
@@ -50,13 +56,13 @@ export class PasswordComponent implements OnInit {
     this.success = false;
     this.doNotMatch = false;
 
-    const newPassword = this.passwordForm.get(['newPassword'])!.value;
-    if (newPassword !== this.passwordForm.get(['confirmPassword'])!.value) {
+    const { newPassword, confirmPassword, currentPassword } = this.passwordForm.getRawValue();
+    if (newPassword !== confirmPassword) {
       this.doNotMatch = true;
     } else {
-      this.passwordService.save(newPassword, this.passwordForm.get(['currentPassword'])!.value).subscribe({
-        next: () => this.success = true,
-        error: () => this.error = true
+      this.passwordService.save(newPassword, currentPassword).subscribe({
+        next: () => (this.success = true),
+        error: () => (this.error = true),
       });
     }
   }