app en-uk-be-ru localization

README.md

@@ -10,6 +10,7 @@
 | ------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 
 ## Table of contents
+
 - [Demo](#demo)
 - [Tech Stack](#tech-stack)
 - [Features](#features)
@@ -19,7 +20,6 @@
 - [Used By](#used-by)
 - [FAQ](#faq)
 
-
 ## Demo
 
 Link to demo

package.json

@@ -25,6 +25,8 @@
     "@angular/platform-browser": "~13.3.0",
     "@angular/platform-browser-dynamic": "~13.3.0",
     "@angular/router": "~13.3.0",
+    "@ngx-translate/core": "^14.0.0",
+    "@ngx-translate/http-loader": "^7.0.0",
     "jwt-decode": "^3.1.2",
     "moment": "^2.29.3",
     "ng-zorro-antd": "^13.2.1",

src/app/app.component.html

@@ -5,3 +5,4 @@
   </section>
   <app-footer class="main-container__footer"></app-footer>
 </main>
+<app-localization></app-localization>

src/app/app.module.ts

@@ -17,6 +17,7 @@ import { BoardModule } from './board/board.module';
 import { DialogModule } from './dialog/dialog.module';
 
 import { ErrorIntercept } from './services/error.interceptor';
+import { LocalizationModule } from './localization/localization.module';
 
 registerLocaleData(en);
 
@@ -32,6 +33,7 @@ registerLocaleData(en);
     SpaceModule,
     BoardModule,
     DialogModule,
+    LocalizationModule,
   ],
   providers: [
     { provide: NZ_I18N, useValue: en_US },

src/app/auth/auth.component.html

@@ -1,13 +1,14 @@
+<app-localization></app-localization>
 <div class="login-page">
   <div class="login-wrapper">
     <nz-tabset class="login-tabs">
-      <nz-tab nzTitle="Sign in">
+      <nz-tab [nzTitle]="'signin' | translate">
         <form class="login-form" [formGroup]="form" novalidate (ngSubmit)="submit()">
           <label class="label">
-            Login:
+            {{ 'loginH' | translate }}:
             <input
               type="text"
-              placeholder="your login"
+              [placeholder]="'yourLogin' | translate"
               #myLogin
               [value]="authService.login"
               (input)="authService.loginHandle(myLogin.value)"
@@ -21,23 +22,20 @@
               class="alert alert-danger"
               *ngIf="form.controls['userEmail'].errors?.['required'] && form.controls['userEmail'].touched"
             >
-              Please enter a login
+              {{ 'enterALogin' | translate }}
             </div>
           </label>
           <label class="label">
-            Password:
+            {{ 'password' | translate }}:
             <input
               [type]="showPassSighIn ? 'text' : 'password'"
-              placeholder="your password"
+              [placeholder]="'yourPassword' | translate"
               #myPassword
               [value]="authService.password"
               (input)="authService.passwordHandle(myPassword.value)"
               formControlName="userPassword"
-              [class]="{
-                input: true,
-                error: form.controls['userPassword'].errors?.['required']
-                    && form.controls['userPassword'].touched
-              }"
+              [class]="{ input: true, error:
+            form.controls['userPassword'].errors?.['required'] && form.controls['userPassword'].touched }"
             />
             <div class="input-eye" *ngIf="!showPassSighIn" (click)="showPassSighInHandle()">
               <i nz-icon nzType="eye-invisible" nzTheme="outline"></i>
@@ -50,19 +48,19 @@
               *ngIf="form.controls['userPassword'].errors?.['required']
                 && form.controls['userPassword'].touched"
             >
-              Please enter a password
+              {{ 'enterAPassword' | translate }}
             </div>
           </label>
-          <button class="login-button" nzType="primary" nz-button>Sign in</button>
+          <button class="login-button" nzType="primary" nz-button>{{ 'signin' | translate }}</button>
         </form>
       </nz-tab>
-      <nz-tab nzTitle="Sign up">
+      <nz-tab [nzTitle]="'signup' | translate">
         <form class="login-form" [formGroup]="formSignUp" novalidate (ngSubmit)="submitSignUp()">
           <label class="label">
-            Name:
+            {{ 'name' | translate }}:
             <input
               type="text"
-              placeholder="your name"
+              [placeholder]="'yourName' | translate"
               #mySName
               [value]="authService.signUpName"
               (input)="authService.signUpNameHandle(mySName.value)"
@@ -76,14 +74,14 @@
               class="alert alert-danger"
               *ngIf="formSignUp.controls['userName'].errors?.['required'] && formSignUp.controls['userName'].touched"
             >
-              Please enter your name
+              {{ 'enterYourName' | translate }}
             </div>
           </label>
           <label class="label">
-            Login:
+            {{ 'loginH' | translate }}:
             <input
               type="text"
-              placeholder="your login"
+              [placeholder]="'yourLogin' | translate"
               #mySLogin
               [value]="authService.signUpLogin"
               (input)="authService.signUpLoginHandle(mySLogin.value)"
@@ -97,14 +95,14 @@
               class="alert alert-danger"
               *ngIf="formSignUp.controls['userLogin'].errors?.['required'] && formSignUp.controls['userLogin'].touched"
             >
-              Please enter a login
+              {{ 'enterALogin' | translate }}
             </div>
           </label>
           <label class="label">
-            Password:
+            {{ 'password' | translate }}:
             <input
               [type]="showPassSighUp ? 'text' : 'password'"
-              placeholder="your password"
+              [placeholder]="'yourPassword' | translate"
               #mySPassword
               [value]="authService.signUpPassword"
               (input)="authService.signUpPasswordHandle(mySPassword.value)"
@@ -127,18 +125,17 @@
               *ngIf="formSignUp.controls['userNewPassword'].errors?.['required']
                 && formSignUp.controls['userNewPassword'].touched"
             >
-              Please enter a password
+              {{ 'enterAPassword' | translate }}
             </div>
             <div
               class="alert alert-danger"
               *ngIf="formSignUp.controls['userNewPassword'].errors?.['pattern']
                 && formSignUp.controls['userNewPassword'].touched"
             >
-              Your password isn't strong enough! You should have one upper letter, one lower letter, one number, one
-              special symbol (?, !, @, #, $, %, ^, &, *, -) and length more 8 symbols.
+              {{ 'passwordVar' | translate }}
             </div>
           </label>
-          <button class="login-button" nzType="primary" nz-button>Sign up</button>
+          <button class="login-button" nzType="primary" nz-button>{{ 'signup' | translate }}</button>
         </form>
       </nz-tab>
     </nz-tabset>

src/app/auth/auth.module.ts

@@ -11,6 +11,7 @@ import { AuthComponent } from './auth.component';
 import { AuthRoutingModule } from './auth-routing.module';
 import { AuthButtonComponent } from './components/auth-button/auth-button.component';
 import { LoaderModule } from '../loader/loader.module';
+import { LocalizationModule } from '../localization/localization.module';
 
 @NgModule({
   declarations: [AuthButtonComponent, AuthComponent],
@@ -23,6 +24,7 @@ import { LoaderModule } from '../loader/loader.module';
     NzTabsModule,
     LoaderModule,
     NzIconModule,
+    LocalizationModule,
   ],
   exports: [AuthButtonComponent],
   providers: [NzMessageService],

src/app/auth/components/auth-button/auth-button.component.html

@@ -12,9 +12,9 @@
     <svg class="login__authorization" viewBox="0 0 70 70" width="100%">
       <path d="M35,35m-23,0a23,23 0 1,1 46,0a23,23 0 1,1 -46,0" fill="transparent" id="tophalf" />
       <text>
-        <textPath xlink:href="#tophalf" startOffset="0%">{{ isLogged ? 'Log out ·' : 'Log in ·' }}</textPath>
-        <textPath xlink:href="#tophalf" startOffset="33%">{{ isLogged ? 'Log out ·' : 'Log in ·' }}</textPath>
-        <textPath xlink:href="#tophalf" startOffset="66%">{{ isLogged ? 'Log out ·' : 'Log in ·' }}</textPath>
+        <textPath xlink:href="#tophalf" startOffset="0%">{{ (isLogged ? 'logout' : 'login') | translate }} ·</textPath>
+        <textPath xlink:href="#tophalf" startOffset="33%">{{ (isLogged ? 'logout' : 'login') | translate }} ·</textPath>
+        <textPath xlink:href="#tophalf" startOffset="66%">{{ (isLogged ? 'logout' : 'login') | translate }} ·</textPath>
       </text>
     </svg>
   </ng-template>

src/app/board/board-item/board-item.component.html

@@ -1,12 +1,12 @@
 <app-dialog (emitText)="editTask($event, item)" [isNeedDescription]="true" [question]="'Edit task: ' + item.text">
-  <div nz-tooltip nzTooltipTitle="Edit" nzTooltipPlacement="left">
+  <div nz-tooltip [nzTooltipTitle]="'edit' | translate" nzTooltipPlacement="left">
     <div class="board-item">
       <div class="board-item__text">
         <div class="mt-1">{{ item.text }}</div>
         <div class="mt-1">{{ item.description }}</div>
       </div>
       <app-confirm
-        [question]="'Are you sure you want to delete \'' + item.text + '\'?'"
+        [question]="('deleteColumn' | translate) + item.text + '?'"
         (click)="$event.stopPropagation()"
         (emitConfirm)="onCardDelete($event, item.id)"
       >
@@ -42,7 +42,7 @@
 
     <div *ngIf="open" (click)="$event.stopPropagation()">
       <form class="w-100 mb-2">
-        <div>Leave a comment</div>
+        <div>{{ 'leaveAComment' | translate }}</div>
         <div class="board-comment-add">
           <input
             class="input"

src/app/board/board.module.ts

@@ -17,6 +17,7 @@ import { SpaceModule } from '../space/space.module';
 import { ConfirmModule } from '../confirm/confirm.module';
 import { EditColumnTitleComponent } from './edit-column-title/edit-column-title.component';
 import { LoaderModule } from '../loader/loader.module';
+import { LocalizationModule } from '../localization/localization.module';
 
 @NgModule({
   declarations: [
@@ -38,6 +39,7 @@ import { LoaderModule } from '../loader/loader.module';
     ConfirmModule,
     NzToolTipModule,
     LoaderModule,
+    LocalizationModule,
   ],
   exports: [BoardComponent, BoardItemComponent],
 })

src/app/board/board/board.component.html

@@ -1,5 +1,6 @@
+<app-localization></app-localization>
 <div class="space">
-  <space-left-aside pageName="Board Page"></space-left-aside>
+  <space-left-aside [pageName]="'boardPage' | translate"></space-left-aside>
   <div
     class="space__main"
     [class]="{
@@ -19,7 +20,7 @@
           <div class="board-title column-header" cdkDropList (cdkDropListDropped)="drop($event)">
             <app-edit-column-title [column]="column"></app-edit-column-title>
             <app-confirm
-              [question]="'Are you sure you want to delete \'' + column.title + '\'?'"
+              [question]="('deleteColumn' | translate) + column.title + '?'"
               (click)="$event.stopPropagation()"
               (emitConfirm)="onDeleteColumn($event, column.id)"
             >
@@ -31,7 +32,7 @@
           <app-dialog
             (emitText)="onAddCard($event, column.id)"
             [isNeedDescription]="true"
-            [question]="'Add new card in ' + column.title + ' column'"
+            [question]="('addCard' | translate) + column.title + ' ' + ('column' | translate)"
           >
             <button class="btn-add" nzType="default" nz-button>+</button>
           </app-dialog>

src/app/board/header/header.component.html

@@ -3,9 +3,9 @@
     <span class="mat-h2 header__title">{{ title }}</span>
   </div>
   <div>
-    <app-dialog (emitText)="addColumn($event)" question="Add new column">
+    <app-dialog (emitText)="addColumn($event)" [question]="'addNewColum' | translate">
       <button nz-button nzType="primary" [disabled]="boardService.isLoadingDesk" class="header__button">
-        New Column
+        {{ 'newColumn' | translate }}
       </button>
     </app-dialog>
   </div>

src/app/confirm/confirm-body/confirm-body.component.html

@@ -1,10 +1,11 @@
 <div>
   <h3>{{ data.question }}</h3>
   <form class="w-100">
-    <div>Confirmation modal</div>
+    <div>{{ 'confirmationModal' | translate }}</div>
   </form>
 </div>
 <div class="gap-10">
-  <button nz-button nzType="primary" [mat-dialog-close]="true">Confirm</button>
-  <button nz-button nzType="default" (click)="onNoClick()">Cancel</button>
+  <button nz-button nzType="primary" [mat-dialog-close]="true">{{ 'сonfirm' | translate }}</button>
+  <button nz-button nzType="default" (click)="onNoClick()">{{ 'cancel' | translate }}</button>
 </div>
+<app-localization></app-localization>

src/app/confirm/confirm.module.ts

@@ -5,10 +5,11 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { ConfirmComponent } from './confirm/confirm.component';
 import { ConfirmBodyComponent } from './confirm-body/confirm-body.component';
+import { LocalizationModule } from '../localization/localization.module';
 
 @NgModule({
   declarations: [ConfirmComponent, ConfirmBodyComponent],
-  imports: [CommonModule, MatDialogModule, NzButtonModule],
+  imports: [CommonModule, MatDialogModule, NzButtonModule, LocalizationModule],
   exports: [ConfirmComponent],
 })
 export class ConfirmModule {}

src/app/core/components/footer/footer.component.html

@@ -4,7 +4,7 @@
   </a>
   <b class="footer__text">2022</b>
   <p class="footer__text footer__links">
-    <strong>App developers: </strong>
+    <strong>{{ 'appDevelopers' | translate }}: </strong>
     <a class="footer__link" href="https://github.com/PoMaKoM" target="_blank" rel="author">
       <i nz-icon nzType="github" nzTheme="outline"></i>
       PoMaKoM,
@@ -23,3 +23,4 @@
     </a>
   </p>
 </footer>
+<app-localization></app-localization>