Merge pull request #1064 from ORCID/introduce-angular-i18n

Introduce angular i18n

ui/angular.json

@@ -4,6 +4,21 @@
   "newProjectRoot": "projects",
   "projects": {
     "ui": {
+      "i18n": {
+        "sourceLocale": "en",
+        "locales": {
+          "cs": "src/i18n/messages.cs.xlf",
+          "es": "src/i18n/messages.es.xlf",
+          "fr": "src/i18n/messages.fr.xlf",
+          "it": "src/i18n/messages.it.xlf",
+          "ja": "src/i18n/messages.ja.xlf",
+          "ko": "src/i18n/messages.ko.xlf",
+          "pt": "src/i18n/messages.pt.xlf",
+          "ru": "src/i18n/messages.ru.xlf",
+          "zh-CN": "src/i18n/messages.zh-CN.xlf",
+          "zh-TW": "src/i18n/messages.zh-TW.xlf"
+        }
+      },
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
@@ -17,6 +32,18 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "localize": [
+              "fr",
+              "es",
+              "cs",
+              "it",
+              "ja",
+              "ko",
+              "pt",
+              "ru",
+              "zh-CN",
+              "zh-TW"
+            ],
             "outputPath": "dist/",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -50,6 +77,7 @@
               "outputHashing": "all"
             },
             "development": {
+              "localize": ["en"],
               "buildOptimizer": false,
               "optimization": false,
               "vendorChunk": true,
@@ -77,9 +105,24 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "ng-extract-i18n-merge:ng-extract-i18n-merge",
           "options": {
-            "browserTarget": "ui:build"
+            "includeContext": true,
+            "browserTarget": "ui:build",
+            "format": "xlf",
+            "outputPath": "src/i18n",
+            "targetFiles": [
+              "messages.cs.xlf",
+              "messages.es.xlf",
+              "messages.fr.xlf",
+              "messages.it.xlf",
+              "messages.ja.xlf",
+              "messages.ko.xlf",
+              "messages.pt.xlf",
+              "messages.ru.xlf",
+              "messages.zh-CN.xlf",
+              "messages.zh-TW.xlf"
+            ]
           }
         },
         "test": {

ui/src/app/account/login/login.component.html

@@ -2,49 +2,45 @@
   <div class="container">
     <div class="row justify-content-center">
       <div class="col-md-8">
-        <div
-          class="alert alert-danger"
-          *ngIf="authenticationError"
-          jhiTranslate="login.messages.error.authentication.string"
-        >
+        <div class="alert alert-danger" *ngIf="authenticationError" i18n="@@login.messages.error.authentication.string">
           <strong>Failed to sign in!</strong> Please check your credentials and try again.
         </div>
         <form id="signin-form" class="form" role="form" (ngSubmit)="login()" [formGroup]="loginForm">
           <div class="form-group">
-            <label class="username-label" for="username" jhiTranslate="global.form.email.label.string">Email</label>
-            <!-- TODO: add translation -->
+            <label class="username-label" for="username" i18n="@@global.form.email.label.string">Email</label>
             <input
               type="text"
               class="form-control"
               name="username"
               id="username"
-              placeholder="{{ 'global.form.email.placeholder.string' }}"
+              placeholder="Your email"
+              i18n-placeholder="@@global.form.email.placeholder.string"
               formControlName="username"
             />
           </div>
           <div class="form-group">
-            <label for="password" jhiTranslate="login.form.password.label.string">Password</label>
-            <!-- TODO: add translation -->
+            <label for="password" i18n="@@login.form.password.label.string">Password</label>
             <input
               type="password"
               class="form-control"
               name="password"
               id="password"
-              placeholder="{{ 'login.form.password.placeholder.string' }}"
+              placeholder="Your password"
+              i18n-placeholder="@@login.form.password.placeholder.string"
               formControlName="password"
             />
           </div>
           <div *ngIf="showMfa" class="form-group">
-            <div class="alert alert-danger" jhiTranslate="login.form.mfaCode.prompt.string">
+            <div class="alert alert-danger" i18n="@@login.form.mfaCode.prompt.string">
               Please enter the MFA code from your authenticator app
             </div>
-            <div *ngIf="mfaError" class="alert alert-danger" jhiTranslate="login.form.mfaCode.error.string">
+            <div *ngIf="mfaError" class="alert alert-danger" i18n="@@login.form.mfaCode.error.string">
               Invalid MFA code
             </div>
-            <label for="mfaCode" jhiTranslate="login.form.mfaCode.label.string">MFA code</label>
+            <label for="mfaCode" i18n="@@login.form.mfaCode.label.string">MFA code</label>
             <input type="text" class="form-control" name="mfaCode" id="mfaCode" formControlName="mfaCode" />
           </div>
-          <button id="signin-button" type="submit" class="btn btn-primary" jhiTranslate="login.form.button.string">
+          <button id="signin-button" type="submit" class="btn btn-primary" i18n="@@login.form.button.string">
             Sign in
           </button>
         </form>
@@ -55,7 +51,7 @@
             class="alert-link"
             (click)="requestResetPassword()"
             (keypress)="requestResetPassword()"
-            jhiTranslate="login.password.forgot.string"
+            i18n="@@login.password.forgot.string"
             >Did you forget your password?</a
           >
         </div>

ui/src/app/account/login/login.component.ts

@@ -86,8 +86,6 @@ export class LoginComponent implements AfterViewInit, OnDestroy {
                   take(1)
                 )
                 .subscribe((account) => {
-                  // TODO: remove after sprint review
-                  console.log('Login successful, account data:', account)
                   this.loginSuccess()
                 })
             } else {

ui/src/app/account/password/password-reset-init.component.html

@@ -1,46 +1,81 @@
 <div class="container m-3">
-    <div class="row justify-content-center">
-        <div class="col-md-8">
-            <h1 jhiTranslate="reset.request.title.string">Reset your password</h1>
+  <div class="row justify-content-center">
+    <div class="col-md-8">
+      <h1 i18n="@@reset.request.title.string">Reset your password</h1>
 
-            <div class="alert alert-danger" jhiTranslate="reset.request.messages.notfound.string" *ngIf="errorEmailNotExists">
-                <strong>Email address isn't registered!</strong> Please check and try again.
-            </div>
+      <div class="alert alert-danger" i18n="@@reset.request.messages.notfound.string" *ngIf="errorEmailNotExists">
+        <strong>Email address isn't registered!</strong> Please check and try again.
+      </div>
 
-            <div class="alert alert-warning" *ngIf="!success">
-                <p jhiTranslate="reset.request.messages.info.string">Enter the email address you used to register.</p>
-            </div>
+      <div class="alert alert-warning" *ngIf="!success">
+        <p i18n="@@reset.request.messages.info.string">Enter the email address you used to register.</p>
+      </div>
 
-            <div class="alert alert-success" *ngIf="success === 'OK'">
-                <p jhiTranslate="reset.request.messages.success.string">Check your emails for details on how to reset your password.</p>
-            </div>
+      <div class="alert alert-success" *ngIf="success === 'OK'">
+        <p i18n="@@reset.request.messages.success.string">
+          Check your emails for details on how to reset your password.
+        </p>
+      </div>
 
-            <form *ngIf="!success" name="form" role="form" (ngSubmit)="requestReset()" [formGroup]="resetRequestForm">
-                <div class="form-group">
-                    <label class="form-control-label" for="email" jhiTranslate="global.form.email.label.string">Email</label>
-                    <input type="email" class="form-control" id="email" name="email" placeholder="{{'global.form.email.placeholder.string'}}"
-                           formControlName="email">
-                    <div *ngIf="resetRequestForm.get('email')?.invalid && (resetRequestForm.get('email')?.dirty || resetRequestForm.get('email')?.touched)">
-                        <small class="form-text text-danger"
-                           *ngIf="resetRequestForm.get('email')?.errors!['required']" jhiTranslate="global.messages.validate.email.required.string">
-                            Your email is required.
-                        </small>
-                        <small class="form-text text-danger"
-                           *ngIf="resetRequestForm.get('email')?.errors!['email']" jhiTranslate="global.messages.validate.email.invalid.string">
-                            Your email is invalid.
-                        </small>
-                        <small class="form-text text-danger"
-                           *ngIf="resetRequestForm.get('email')?.errors!['minlength']" jhiTranslate="global.messages.validate.email.minlength.string">
-                            Your email is required to be at least 5 characters.
-                        </small>
-                        <small class="form-text text-danger" id="maxlengthError"
-                           *ngIf="resetRequestForm.get('email')?.errors!['maxlength']" jhiTranslate="global.messages.validate.email.maxlength.string">
-                            Your email cannot be longer than 100 characters.
-                        </small>
-                    </div>
-                </div>
-                <button type="submit" id="reset" [disabled]="resetRequestForm.invalid" class="btn btn-primary" jhiTranslate="reset.request.form.button.string">Reset</button>
-            </form>
+      <form *ngIf="!success" name="form" role="form" (ngSubmit)="requestReset()" [formGroup]="resetRequestForm">
+        <div class="form-group">
+          <label class="form-control-label" for="email" i18n="@@global.form.email.label.string">Email</label>
+          <input
+            type="email"
+            class="form-control"
+            id="email"
+            name="email"
+            placeholder="Your email"
+            i18n-placeholder="@@global.form.email.placeholder.string"
+            formControlName="email"
+          />
+          <div
+            *ngIf="
+              resetRequestForm.get('email')?.invalid &&
+              (resetRequestForm.get('email')?.dirty || resetRequestForm.get('email')?.touched)
+            "
+          >
+            <small
+              class="form-text text-danger"
+              *ngIf="(resetRequestForm.get('email')?.errors)!['required']"
+              i18n="@@global.messages.validate.email.required.string"
+            >
+              Your email is required.
+            </small>
+            <small
+              class="form-text text-danger"
+              *ngIf="(resetRequestForm.get('email')?.errors)!['email']"
+              i18n="@@global.messages.validate.email.invalid.string"
+            >
+              Your email is invalid.
+            </small>
+            <small
+              class="form-text text-danger"
+              *ngIf="(resetRequestForm.get('email')?.errors)!['minlength']"
+              i18n="@@global.messages.validate.email.minlength.string"
+            >
+              Your email is required to be at least 5 characters.
+            </small>
+            <small
+              class="form-text text-danger"
+              id="maxlengthError"
+              *ngIf="(resetRequestForm.get('email')?.errors)!['maxlength']"
+              i18n="@@global.messages.validate.email.maxlength.string"
+            >
+              Your email cannot be longer than 100 characters.
+            </small>
+          </div>
         </div>
+        <button
+          type="submit"
+          id="reset"
+          [disabled]="resetRequestForm.invalid"
+          class="btn btn-primary"
+          i18n="@@reset.request.form.button.string"
+        >
+          Reset
+        </button>
+      </form>
     </div>
+  </div>
 </div>

ui/src/app/account/service/account.service.ts

@@ -71,8 +71,9 @@ export class AccountService {
     return this.http.get<any>('/services/userservice/api/account/mfa')
   }
 
-  save(account: any): Observable<HttpResponse<any>> {
-    return this.http.post('/services/userservice/api/account', account, { observe: 'response' })
+  save(account: IAccount): Observable<HttpResponse<any>> {
+    const headers = { 'Accept-Language': account.langKey }
+    return this.http.post('/services/userservice/api/account', account, { observe: 'response', headers })
   }
 
   enableMfa(mfaSetup: any): Observable<HttpResponse<any>> {