generator-jhipster 7.8.1 → 7.9.0

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

@@ -22,43 +22,43 @@
   </div>
 
   <div class="col-md-9">
-    <h1 class="display-4"><span <%= jhiPrefix %>Translate="home.title">Welcome, <%= backendName %> Hipster!</span> (<%= humanizedBaseName %>)</h1>
+    <h1 class="display-4"><span <%= jhiPrefix %>Translate="home.title"><%- this._getClientTranslation('home.title') %></span> (<%= humanizedBaseName %>)</h1>
 
-    <p class="lead" <%= jhiPrefix %>Translate="home.subtitle">This is your homepage</p>
+    <p class="lead" <%= jhiPrefix %>Translate="home.subtitle"><%- this._getClientTranslation('home.subtitle') %></p>
 
     <div [ngSwitch]="account !== null">
       <div class="alert alert-success" *ngSwitchCase="true">
         <span id="home-logged-message" *ngIf="account" <%= jhiPrefix %>Translate="home.logged.message"
-          [translateValues]="{ username: account.login }">You are logged in as user "{{ account.login }}".</span>
+          [translateValues]="{ username: account.login }"><%- this._getClientTranslation('home.logged.message', { username: '{{ account.login }}' }) %></span>
       </div>
 
       <div class="alert alert-warning" *ngSwitchCase="false">
-        <span <%= jhiPrefix %>Translate="global.messages.info.authenticated.prefix">If you want to </span>
-        <a class="alert-link" (click)="login()" <%= jhiPrefix %>Translate="global.messages.info.authenticated.link">sign in</a><span <%= jhiPrefix %>Translate="global.messages.info.authenticated.suffix">, you can try the default accounts:<br/>- Administrator (login="admin" and password="admin") <br/>- User (login="user" and password="user").</span>
+        <span <%= jhiPrefix %>Translate="global.messages.info.authenticated.prefix"><%- this._getClientTranslation('global.messages.info.authenticated.prefix') %></span>
+        <a class="alert-link" (click)="login()" <%= jhiPrefix %>Translate="global.messages.info.authenticated.link"><%- this._getClientTranslation('global.messages.info.authenticated.link') %></a><span <%= jhiPrefix %>Translate="global.messages.info.authenticated.suffix"><%- this._getClientTranslation('global.messages.info.authenticated.suffix') %></span>
       </div>
       <%_ if (!skipUserManagement) { _%>
 
       <div class="alert alert-warning" *ngSwitchCase="false">
-        <span <%= jhiPrefix %>Translate="global.messages.info.register.noaccount">You don't have an account yet?</span>&nbsp;
-        <a class="alert-link" routerLink="account/register" <%= jhiPrefix %>Translate="global.messages.info.register.link">Register a new account</a>
+        <span <%= jhiPrefix %>Translate="global.messages.info.register.noaccount"><%- this._getClientTranslation('global.messages.info.register.noaccount') %></span>&nbsp;
+        <a class="alert-link" routerLink="account/register" <%= jhiPrefix %>Translate="global.messages.info.register.link"><%- this._getClientTranslation('global.messages.info.register.link') %></a>
       </div>
       <%_ } _%>
     </div>
 
     <p <%= jhiPrefix %>Translate="home.question">
-      If you have any question on JHipster:
+      <%- this._getClientTranslation('home.question') %>
     </p>
 
     <ul>
-      <li><a href="https://www.jhipster.tech/" target="_blank" rel="noopener noreferrer" <%= jhiPrefix %>Translate="home.link.homepage">JHipster homepage</a></li>
-      <li><a href="https://stackoverflow.com/tags/jhipster/info" target="_blank" rel="noopener noreferrer" <%= jhiPrefix %>Translate="home.link.stackoverflow">JHipster on Stack Overflow</a></li>
-      <li><a href="https://github.com/jhipster/generator-jhipster/issues?state=open" target="_blank" rel="noopener noreferrer" <%= jhiPrefix %>Translate="home.link.bugtracker">JHipster bug tracker</a></li>
-      <li><a href="https://gitter.im/jhipster/generator-jhipster" target="_blank" rel="noopener noreferrer" <%= jhiPrefix %>Translate="home.link.chat">JHipster public chat room</a></li>
-      <li><a href="https://twitter.com/jhipster" target="_blank" rel="noopener noreferrer" <%= jhiPrefix %>Translate="home.link.follow">follow @jhipster on Twitter</a></li>
+      <li><a href="https://www.jhipster.tech/" target="_blank" rel="noopener noreferrer" <%= jhiPrefix %>Translate="home.link.homepage"><%- this._getClientTranslation('home.link.homepage') %></a></li>
+      <li><a href="https://stackoverflow.com/tags/jhipster/info" target="_blank" rel="noopener noreferrer" <%= jhiPrefix %>Translate="home.link.stackoverflow"><%- this._getClientTranslation('home.link.stackoverflow') %></a></li>
+      <li><a href="https://github.com/jhipster/generator-jhipster/issues?state=open" target="_blank" rel="noopener noreferrer" <%= jhiPrefix %>Translate="home.link.bugtracker"><%- this._getClientTranslation('home.link.bugtracker') %></a></li>
+      <li><a href="https://gitter.im/jhipster/generator-jhipster" target="_blank" rel="noopener noreferrer" <%= jhiPrefix %>Translate="home.link.chat"><%- this._getClientTranslation('home.link.chat') %></a></li>
+      <li><a href="https://twitter.com/jhipster" target="_blank" rel="noopener noreferrer" <%= jhiPrefix %>Translate="home.link.follow"><%- this._getClientTranslation('home.link.follow') %></a></li>
     </ul>
 
     <p>
-      <span <%= jhiPrefix %>Translate="home.like">If you like JHipster, don't forget to give us a star on</span> <a href="https://github.com/jhipster/generator-jhipster" target="_blank" rel="noopener noreferrer" <%= jhiPrefix %>Translate="home.github">GitHub</a>!
+      <span <%= jhiPrefix %>Translate="home.like"><%- this._getClientTranslation('home.like') %></span> <a href="https://github.com/jhipster/generator-jhipster" target="_blank" rel="noopener noreferrer" <%= jhiPrefix %>Translate="home.github"><%- this._getClientTranslation('home.github') %></a>!
     </p>
   </div>
 </div>

package/generators/client/templates/angular/src/main/webapp/app/layouts/error/error.component.html.ejs

@@ -23,7 +23,7 @@
     </div>
 
     <div class="col-md-8">
-      <h1 <%= jhiPrefix %>Translate="error.title">Error Page!</h1>
+      <h1 <%= jhiPrefix %>Translate="error.title"><%- this._getClientTranslation('error.title') %></h1>
 
       <div *ngIf="errorMessage">
         <div class="alert alert-danger">{{ errorMessage }}</div>

package/generators/client/templates/angular/src/main/webapp/app/layouts/footer/footer.component.html.ejs

@@ -17,5 +17,5 @@
  limitations under the License.
 -%>
 <div class="footer">
-  <p <%= jhiPrefix %>Translate="footer">This is your footer</p>
+  <p <%= jhiPrefix %>Translate="footer"><%- this._getClientTranslation('footer') %></p>
 </div>

package/generators/client/templates/angular/src/main/webapp/app/layouts/navbar/navbar.component.html.ejs

@@ -20,7 +20,7 @@
   <div class="container-fluid">
   <a class="navbar-brand logo" routerLink="/" (click)="collapseNavbar()">
     <span class="logo-img"></span>
-    <span <%= jhiPrefix %>Translate="global.title" class="navbar-title"><%= capitalizedBaseName %></span>
+    <span <%= jhiPrefix %>Translate="global.title" class="navbar-title"><%- this._getClientTranslation('global.title') %></span>
     <span class="navbar-version">{{ version }}</span>
   </a>
   <a
@@ -41,7 +41,7 @@
         <a class="nav-link" routerLink="/" (click)="collapseNavbar()">
           <span>
             <fa-icon icon="home"></fa-icon>
-            <span <%= jhiPrefix %>Translate="global.menu.home">Home</span>
+            <span <%= jhiPrefix %>Translate="global.menu.home"><%- this._getClientTranslation('global.menu.home') %></span>
           </span>
         </a>
       </li>
@@ -57,7 +57,7 @@
         <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="entity-menu" data-cy="entity">
           <span>
             <fa-icon icon="th-list"></fa-icon>
-            <span <%= jhiPrefix %>Translate="global.menu.entities.main">Entities</span>
+            <span <%= jhiPrefix %>Translate="global.menu.entities.main"><%- this._getClientTranslation('global.menu.entities.main') %></span>
           </span>
         </a>
         <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="entity-menu">
@@ -95,7 +95,7 @@
         <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="admin-menu" data-cy="adminMenu">
           <span>
             <fa-icon icon="users-cog"></fa-icon>
-            <span <%= jhiPrefix %>Translate="global.menu.admin.main">Administration</span>
+            <span <%= jhiPrefix %>Translate="global.menu.admin.main"><%- this._getClientTranslation('global.menu.admin.main') %></span>
           </span>
         </a>
         <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="admin-menu">
@@ -103,7 +103,7 @@
           <li>
             <a class="dropdown-item" routerLink="admin/gateway" routerLinkActive="active" (click)="collapseNavbar()">
               <fa-icon icon="road" [fixedWidth]="true"></fa-icon>
-              <span <%= jhiPrefix %>Translate="global.menu.admin.gateway">Gateway</span>
+              <span <%= jhiPrefix %>Translate="global.menu.admin.gateway"><%- this._getClientTranslation('global.menu.admin.gateway') %></span>
             </a>
           </li>
 <%_ } _%>
@@ -111,7 +111,7 @@
           <li>
             <a class="dropdown-item" routerLink="admin/user-management" routerLinkActive="active" (click)="collapseNavbar()">
               <fa-icon icon="users" [fixedWidth]="true"></fa-icon>
-              <span <%= jhiPrefix %>Translate="global.menu.admin.userManagement">User management</span>
+              <span <%= jhiPrefix %>Translate="global.menu.admin.userManagement"><%- this._getClientTranslation('global.menu.admin.userManagement') %></span>
             </a>
           </li>
 <%_ } _%>
@@ -119,7 +119,7 @@
           <li>
             <a class="dropdown-item" routerLink="admin/tracker" routerLinkActive="active" (click)="collapseNavbar()">
               <fa-icon icon="eye" [fixedWidth]="true"></fa-icon>
-              <span <%= jhiPrefix %>Translate="global.menu.admin.tracker">User tracker</span>
+              <span <%= jhiPrefix %>Translate="global.menu.admin.tracker"><%- this._getClientTranslation('global.menu.admin.tracker') %></span>
             </a>
           </li>
 <%_ } _%>
@@ -127,25 +127,25 @@
           <li>
             <a class="dropdown-item" routerLink="admin/metrics" routerLinkActive="active" (click)="collapseNavbar()">
               <fa-icon icon="tachometer-alt" [fixedWidth]="true"></fa-icon>
-              <span <%= jhiPrefix %>Translate="global.menu.admin.metrics">Metrics</span>
+              <span <%= jhiPrefix %>Translate="global.menu.admin.metrics"><%- this._getClientTranslation('global.menu.admin.metrics') %></span>
             </a>
           </li>
           <li>
             <a class="dropdown-item" routerLink="admin/health" routerLinkActive="active" (click)="collapseNavbar()">
               <fa-icon icon="heart" [fixedWidth]="true"></fa-icon>
-              <span <%= jhiPrefix %>Translate="global.menu.admin.health">Health</span>
+              <span <%= jhiPrefix %>Translate="global.menu.admin.health"><%- this._getClientTranslation('global.menu.admin.health') %></span>
             </a>
           </li>
           <li>
             <a class="dropdown-item" routerLink="admin/configuration" routerLinkActive="active" (click)="collapseNavbar()">
               <fa-icon icon="cogs" [fixedWidth]="true"></fa-icon>
-              <span <%= jhiPrefix %>Translate="global.menu.admin.configuration">Configuration</span>
+              <span <%= jhiPrefix %>Translate="global.menu.admin.configuration"><%- this._getClientTranslation('global.menu.admin.configuration') %></span>
             </a>
           </li>
           <li>
             <a class="dropdown-item" routerLink="admin/logs" routerLinkActive="active" (click)="collapseNavbar()">
               <fa-icon icon="tasks" [fixedWidth]="true"></fa-icon>
-              <span <%= jhiPrefix %>Translate="global.menu.admin.logs">Logs</span>
+              <span <%= jhiPrefix %>Translate="global.menu.admin.logs"><%- this._getClientTranslation('global.menu.admin.logs') %></span>
             </a>
           </li>
 <%_ } _%>
@@ -153,7 +153,7 @@
           <li *ngIf="openAPIEnabled">
             <a class="dropdown-item" routerLink="admin/docs" routerLinkActive="active" (click)="collapseNavbar()">
               <fa-icon icon="book" [fixedWidth]="true"></fa-icon>
-              <span <%= jhiPrefix %>Translate="global.menu.admin.apidocs">API</span>
+              <span <%= jhiPrefix %>Translate="global.menu.admin.apidocs"><%- this._getClientTranslation('global.menu.admin.apidocs') %></span>
             </a>
           </li>
 <%_ } _%>
@@ -162,7 +162,7 @@
           <li *ngIf="!inProduction">
             <a class="dropdown-item" href="<% if (devDatabaseTypeCouchbase) { %>http://localhost:8091/<% } else if (reactive) { %> http://localhost:8092/ <% } else { %>./h2-console/<% } %>" target="_tab" (click)="collapseNavbar()">
               <fa-icon icon="database" [fixedWidth]="true"></fa-icon>
-              <span <%= jhiPrefix %>Translate="global.menu.admin.database">Database</span>
+              <span <%= jhiPrefix %>Translate="global.menu.admin.database"><%- this._getClientTranslation('global.menu.admin.database') %></span>
             </a>
           </li>
 <%_ } _%>
@@ -173,7 +173,7 @@
         <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="languagesnavBarDropdown">
           <span>
             <fa-icon icon="flag"></fa-icon>
-            <span <%= jhiPrefix %>Translate="global.menu.language">Language</span>
+            <span <%= jhiPrefix %>Translate="global.menu.language"><%- this._getClientTranslation('global.menu.language') %></span>
           </span>
         </a>
         <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="languagesnavBarDropdown">
@@ -187,7 +187,7 @@
         <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="account-menu" data-cy="accountMenu">
           <span *ngIf="!account?.imageUrl">
             <fa-icon icon="user"></fa-icon>
-            <span <%= jhiPrefix %>Translate="global.menu.account.main">Account</span>
+            <span <%= jhiPrefix %>Translate="global.menu.account.main"><%- this._getClientTranslation('global.menu.account.main') %></span>
           </span>
           <span *ngIf="account?.imageUrl">
             <img [src]="account!.imageUrl" class="profile-image rounded-circle" alt="Avatar" />
@@ -198,13 +198,13 @@
           <li *ngSwitchCase="true">
             <a class="dropdown-item" routerLink="account/settings" routerLinkActive="active" (click)="collapseNavbar()" data-cy="settings">
               <fa-icon icon="wrench" [fixedWidth]="true"></fa-icon>
-              <span <%= jhiPrefix %>Translate="global.menu.account.settings">Settings</span>
+              <span <%= jhiPrefix %>Translate="global.menu.account.settings"><%- this._getClientTranslation('global.menu.account.settings') %></span>
             </a>
           </li>
           <li *ngSwitchCase="true">
             <a class="dropdown-item" routerLink="account/password" routerLinkActive="active" (click)="collapseNavbar()" data-cy="passwordItem">
               <fa-icon icon="lock" [fixedWidth]="true"></fa-icon>
-              <span <%= jhiPrefix %>Translate="global.menu.account.password">Password</span>
+              <span <%= jhiPrefix %>Translate="global.menu.account.password"><%- this._getClientTranslation('global.menu.account.password') %></span>
             </a>
           </li>
 <%_ } _%>
@@ -212,27 +212,27 @@
           <li *ngSwitchCase="true">
             <a class="dropdown-item" routerLink="account/sessions" routerLinkActive="active" (click)="collapseNavbar()">
               <fa-icon icon="cloud" [fixedWidth]="true"></fa-icon>
-              <span <%= jhiPrefix %>Translate="global.menu.account.sessions">Sessions</span>
+              <span <%= jhiPrefix %>Translate="global.menu.account.sessions"><%- this._getClientTranslation('global.menu.account.sessions') %></span>
             </a>
           </li>
 <%_ } _%>
           <li *ngSwitchCase="true">
             <a class="dropdown-item" (click)="logout()" id="logout" data-cy="logout">
               <fa-icon icon="sign-out-alt" [fixedWidth]="true"></fa-icon>
-              <span <%= jhiPrefix %>Translate="global.menu.account.logout">Sign out</span>
+              <span <%= jhiPrefix %>Translate="global.menu.account.logout"><%- this._getClientTranslation('global.menu.account.logout') %></span>
             </a>
           </li>
           <li *ngSwitchCase="false">
             <a class="dropdown-item" (click)="login()" id="login" data-cy="login">
               <fa-icon icon="sign-in-alt" [fixedWidth]="true"></fa-icon>
-              <span <%= jhiPrefix %>Translate="global.menu.account.login">Sign in</span>
+              <span <%= jhiPrefix %>Translate="global.menu.account.login"><%- this._getClientTranslation('global.menu.account.login') %></span>
             </a>
           </li>
 <%_ if (!skipUserManagement) { _%>
           <li *ngSwitchCase="false">
             <a class="dropdown-item" routerLink="account/register" routerLinkActive="active" (click)="collapseNavbar()" data-cy="register">
               <fa-icon icon="user-plus" [fixedWidth]="true"></fa-icon>
-              <span <%= jhiPrefix %>Translate="global.menu.account.register">Register</span>
+              <span <%= jhiPrefix %>Translate="global.menu.account.register"><%- this._getClientTranslation('global.menu.account.register') %></span>
             </a>
           </li>
 <%_ } _%>

package/generators/client/templates/angular/src/main/webapp/app/layouts/profiles/page-ribbon.component.ts.ejs

@@ -26,7 +26,7 @@ import { ProfileService } from './profile.service';
   selector: '<%= jhiPrefixDashed %>-page-ribbon',
   template: `
     <div class="ribbon" *ngIf="ribbonEnv$ | async as ribbonEnv">
-      <a href=""<% if (enableTranslation) { %> <%= jhiPrefix %>Translate="global.ribbon.{{ ribbonEnv }}"<% } %>>{{ ribbonEnv }}</a>
+      <a href=""<% if (enableTranslation) { %> <%= jhiPrefix %>Translate="global.ribbon.{{ ribbonEnv }}"<% } %>>{{ <%- JSON.stringify(this._getClientTranslation('global.ribbon')) %>[ribbonEnv] || '' }}</a>
     </div>
   `,
   styleUrls: ['./page-ribbon.component.scss'],

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

@@ -19,18 +19,18 @@
 <div>
   <div class="d-flex justify-content-center">
     <div class="col-lg-6 col-md-8 col-sm-10">
-      <h1 <%= jhiPrefix %>Translate="login.title" data-cy="loginTitle">Sign in</h1>
+      <h1 <%= jhiPrefix %>Translate="login.title" data-cy="loginTitle"><%- this._getClientTranslation('login.title') %></h1>
       <div
         class="alert alert-danger"
         *ngIf="authenticationError"
         <%= jhiPrefix %>Translate="login.messages.error.authentication"
         data-cy="loginError"
       >
-        <strong>Failed to sign in!</strong> Please check your credentials and try again.
+        <%- this._getClientTranslation('login.messages.error.authentication') %>
       </div>
       <form class="form" role="form" (ngSubmit)="login()" [formGroup]="loginForm">
         <div class="mb-3">
-          <label class="username-label" for="username" <%= jhiPrefix %>Translate="global.form.username.label">Login</label>
+          <label class="username-label" for="username" <%= jhiPrefix %>Translate="global.form.username.label"><%- this._getClientTranslation('global.form["username.label"]') %></label>
           <input
             type="text"
             class="form-control"
@@ -44,7 +44,7 @@
         </div>
 
         <div class="mb-3">
-          <label for="password" <%= jhiPrefix %>Translate="login.form.password">Password</label>
+          <label for="password" <%= jhiPrefix %>Translate="login.form.password"><%- this._getClientTranslation('login.form.password') %></label>
           <input
             type="password"
             class="form-control"
@@ -59,20 +59,20 @@
         <div class="form-check"<% if (authenticationTypeSession && databaseTypeNo) { %> hidden<% } %>>
           <label class="form-check-label" for="rememberMe">
             <input class="form-check-input" type="checkbox" name="rememberMe" id="rememberMe" formControlName="rememberMe" />
-            <span <%= jhiPrefix %>Translate="login.form.rememberme">Remember me</span>
+            <span <%= jhiPrefix %>Translate="login.form.rememberme"><%- this._getClientTranslation('login.form.rememberme') %></span>
           </label>
         </div>
 
-        <button type="submit" class="btn btn-primary" <%= jhiPrefix %>Translate="login.form.button" data-cy="submit">Sign in</button>
+        <button type="submit" class="btn btn-primary" <%= jhiPrefix %>Translate="login.form.button" data-cy="submit"><%- this._getClientTranslation('login.form.button') %></button>
       </form>
 <%_ if (!skipUserManagement) { _%>
       <div class="mt-3 alert alert-warning">
-        <a class="alert-link" routerLink="/account/reset/request" <%= jhiPrefix %>Translate="login.password.forgot" data-cy="forgetYourPasswordSelector">Did you forget your password?</a>
+        <a class="alert-link" routerLink="/account/reset/request" <%= jhiPrefix %>Translate="login.password.forgot" data-cy="forgetYourPasswordSelector"><%- this._getClientTranslation('login.password.forgot') %></a>
       </div>
 
       <div class="alert alert-warning">
-        <span <%= jhiPrefix %>Translate="global.messages.info.register.noaccount">You don't have an account yet?</span>
-        <a class="alert-link" routerLink="/account/register" <%= jhiPrefix %>Translate="global.messages.info.register.link">Register a new account</a>
+        <span <%= jhiPrefix %>Translate="global.messages.info.register.noaccount"><%- this._getClientTranslation('global.messages.info.register.noaccount') %></span>
+        <a class="alert-link" routerLink="/account/register" <%= jhiPrefix %>Translate="global.messages.info.register.link"><%- this._getClientTranslation('global.messages.info.register.link') %></a>
       </div>
 <%_ } _%>
     </div>

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

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 import { Component, ViewChild, OnInit, AfterViewInit, ElementRef } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 
 import { LoginService } from 'app/login/login.service';
@@ -33,18 +33,13 @@ export class LoginComponent implements OnInit, AfterViewInit {
 
   authenticationError = false;
 
-  loginForm = this.fb.group({
-    username: [null, [Validators.required]],
-    password: [null, [Validators.required]],
-    rememberMe: [false],
+  loginForm = new FormGroup({
+    username: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
+    password: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
+    rememberMe: new FormControl(false, { nonNullable: true, validators: [Validators.required] }),
   });
 
-  constructor(
-    private accountService: AccountService,
-    private loginService: LoginService,
-    private router: Router,
-    private fb: FormBuilder
-  ) {}
+  constructor(private accountService: AccountService, private loginService: LoginService, private router: Router) {}
 
   ngOnInit(): void {
     // if already authenticated then navigate to home page
@@ -60,21 +55,15 @@ export class LoginComponent implements OnInit, AfterViewInit {
   }
 
   login(): void {
-    this.loginService
-      .login({
-        username: this.loginForm.get('username')!.value,
-        password: this.loginForm.get('password')!.value,
-        rememberMe: this.loginForm.get('rememberMe')!.value,
-      })
-      .subscribe({
-        next: () => {
-          this.authenticationError = false;
-          if (!this.router.getCurrentNavigation()) {
-            // There were no routing during login (eg from navigationToStoredUrl)
-            this.router.navigate(['']);
-          }
-        },
-        error: () => this.authenticationError = true
-      });
+    this.loginService.login(this.loginForm.getRawValue()).subscribe({
+      next: () => {
+        this.authenticationError = false;
+        if (!this.router.getCurrentNavigation()) {
+          // There were no routing during login (eg from navigationToStoredUrl)
+          this.router.navigate(['']);
+        }
+      },
+      error: () => (this.authenticationError = true),
+    });
   }
 }

package/generators/client/templates/angular/src/main/webapp/app/shared/filter/filter.component.html.ejs

@@ -0,0 +1,10 @@
+<div class="filter-display" *ngIf="filters.hasAnyFilterSet()">
+  <span <%= jhiPrefix %>Translate="entity.filters.set"><%- this._getClientTranslation('entity.filters.set') %></span>
+  <fa-icon icon="times" (click)="clearAllFilters()"  title="{{ 'entity.filters.clearAll' | translate }}"></fa-icon >
+  <ul>
+    <li *ngFor="let filterOption of filters.filterOptions">
+      <span>{{ filterOption.name }}:</span> {{ filterOption.value }}
+      <fa-icon icon="times" (click)="clearFilter(filterOption.name)" title="{{ 'entity.filters.clear' | translate }}"></fa-icon>
+    </li>
+  </ul>
+</div>

package/generators/client/templates/angular/src/main/webapp/app/shared/filter/filter.component.ts.ejs

@@ -0,0 +1,23 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { IFilterableComponent, IFilterOptions } from './filter.model';
+
+@Component({
+  selector: '<%= jhiPrefixDashed %>-filter',
+  templateUrl: './filter.component.html',
+})
+export class FilterComponent implements IFilterableComponent {
+  @Input()
+  filters!: IFilterOptions;
+
+  @Output() filterChange = new EventEmitter<IFilterOptions>();
+
+  clearAllFilters(): void {
+    this.filters.clear();
+    this.filterChange.emit();
+  }
+
+  clearFilter(filterName: string): void {
+    this.filters.removeByName(filterName);
+    this.filterChange.emit();
+  }
+}

package/generators/client/templates/angular/src/main/webapp/app/shared/filter/filter.model.spec.ts.ejs

@@ -0,0 +1,40 @@
+import { convertToParamMap, ParamMap, Params } from '@angular/router';
+import { FilterOptions, IFilterOptions } from './filter.model';
+
+describe('FilterModel Tests', () => {
+  const oneValidParam: Params = {
+    test: 'blub',
+    'filter[hello.in]': 'world',
+    'filter[invalid': 'invalid',
+    filter_invalid2: 'invalid',
+  };
+
+  const noValidParam: Params = {
+    test: 'blub',
+    'filter[invalid': 'invalid',
+    filter_invalid2: 'invalid',
+  };
+
+  it('should parse from Params if there are any', () => {
+    const filters: IFilterOptions = new FilterOptions();
+
+    const paramMap: ParamMap = convertToParamMap(oneValidParam);
+
+    filters.initializeFromParams(paramMap);
+
+    expect(filters.hasAnyFilterSet()).toBeTruthy();
+
+    expect(filters.filterOptions[0].name).toBe('hello.in');
+    expect(filters.filterOptions[0].value).toBe('world');
+  });
+
+  it('should parse from Params and have none if there are none', () => {
+    const filters: IFilterOptions = new FilterOptions();
+
+    const paramMap: ParamMap = convertToParamMap(noValidParam);
+
+    filters.initializeFromParams(paramMap);
+
+    expect(filters.hasAnyFilterSet()).toBeFalsy();
+  });
+});

package/generators/client/templates/angular/src/main/webapp/app/shared/filter/filter.model.ts.ejs

@@ -0,0 +1,95 @@
+import { ParamMap } from '@angular/router';
+
+export interface IFilterOptions {
+  containsSameOption(option: IFilterOption): unknown;
+  filterOptions: IFilterOption[];
+  hasAnyFilterSet(): boolean;
+  clear(): void;
+  removeByName(name: string): void;
+  initializeFromParams(params: ParamMap): boolean;
+  equals(other: IFilterOptions): boolean;
+  clone(): IFilterOptions;
+}
+
+export interface IFilterOption {
+  name: string;
+  value: string | null;
+  isSet(): boolean;
+  nameAsQueryParam(): string;
+}
+
+export interface IFilterableComponent {
+  clearFilter(filterName: string): void;
+  clearAllFilters(): void;
+}
+
+export class FilterOption implements IFilterOption {
+  constructor(public name: string, public value: string | null) {}
+
+  nameAsQueryParam(): string {
+    return 'filter[' + this.name + ']';
+  }
+
+  isSet(): boolean {
+    return this.value != null && this.value.length > 0;
+  }
+}
+
+export class FilterOptions implements IFilterOptions {
+  filterOptions: IFilterOption[] = [];
+
+  hasAnyFilterSet(): boolean {
+    return this.filterOptions.length > 0 && this.filterOptions.every(e => e.isSet());
+  }
+
+  clear(): void {
+    this.filterOptions = [];
+  }
+
+  add(option: IFilterOption): void {
+    this.filterOptions.push(option);
+  }
+
+  removeByName(name: string): void {
+    this.filterOptions = this.filterOptions.filter(option => option.name !== name);
+  }
+
+  equals(other: IFilterOptions): boolean {
+    return (
+      this.filterOptions.every(thisOption => other.containsSameOption(thisOption)) &&
+      other.filterOptions.every(otherOption => this.containsSameOption(otherOption))
+    );
+  }
+
+  clone(): IFilterOptions {
+    const newObject: FilterOptions = new FilterOptions();
+
+    this.filterOptions.forEach(option => {
+      newObject.add(new FilterOption(option.name, option.value));
+    });
+
+    return newObject;
+  }
+
+  initializeFromParams(params: ParamMap): boolean {
+    const oldFilters: IFilterOptions = this.clone();
+
+    this.clear();
+
+    const filterRegex = /filter\[(.+)\]/;
+    params.keys
+      .filter(paramKey => filterRegex.test(paramKey))
+      .forEach(matchingParam => {
+        const matches = matchingParam.match(filterRegex);
+        if (matches && matches.length > 1) {
+          this.add(new FilterOption(matches[1], params.get(matchingParam)));
+        }
+      });
+
+    return !oldFilters.equals(this);
+  }
+
+  containsSameOption(optionToSearch: IFilterOption): boolean {
+    return this.filterOptions.some(option => option.name === optionToSearch.name && option.value === optionToSearch.value);
+  }
+}

package/generators/client/templates/angular/src/main/webapp/app/shared/pagination/item-count.component.ts.ejs

@@ -27,7 +27,7 @@ import { Component, Input } from '@angular/core';
 <%_ if (enableTranslation) { _%>
     <div <%= jhiPrefix %>Translate="global.item-count" [translateValues]="{ first: first, second: second, total: total }"></div>
 <%_ } else { _%>
-    <div>Showing {{ first }} - {{ second }} of {{ total }} items.</div>
+    <div><%- this._getClientTranslation('global.item-count') %></div>
 <%_ } _%>
   `
 })

package/generators/client/templates/angular/src/main/webapp/app/shared/shared.module.ts.ejs

@@ -32,6 +32,7 @@ import { FormatMediumDatePipe } from './date/format-medium-date.pipe';
 import { SortByDirective } from './sort/sort-by.directive';
 import { SortDirective } from './sort/sort.directive';
 import { ItemCountComponent } from './pagination/item-count.component';
+import { FilterComponent } from './filter/filter.component';
 
 @NgModule({
   imports: [SharedLibsModule],
@@ -49,6 +50,7 @@ import { ItemCountComponent } from './pagination/item-count.component';
     SortByDirective,
     SortDirective,
     ItemCountComponent,
+    FilterComponent,
   ],
   exports: [
     SharedLibsModule,
@@ -65,6 +67,7 @@ import { ItemCountComponent } from './pagination/item-count.component';
     SortByDirective,
     SortDirective,
     ItemCountComponent,
+    FilterComponent,
   ],
 })
 export class SharedModule {}

package/generators/client/templates/angular/src/main/webapp/app/shared/sort/sort.service.ts.ejs

@@ -0,0 +1,31 @@
+<%#
+ 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.
+
+ 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.
+-%>
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class SortService {
+  private collator = new Intl.Collator(undefined, {
+    numeric: true,
+    sensitivity: 'base',
+  });
+
+  public startSort(property: string, order: number): (a: any, b: any) => number {
+    return (a: any, b: any) => this.collator.compare(a[property], b[property]) * order;
+  }
+}