diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index d6adebbf1..fd7ab3a3d 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -58,6 +58,7 @@ import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-poli import { TrademarkPolicyComponent } from './components/trademark-policy/trademark-policy.component'; import { StorageService } from './services/storage.service'; import { HttpCacheInterceptor } from './services/http-cache.interceptor'; +import { LanguageService } from './services/language.service'; import { SponsorComponent } from './components/sponsor/sponsor.component'; import { PushTransactionComponent } from './components/push-transaction/push-transaction.component'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; @@ -128,6 +129,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; AudioService, SeoService, StorageService, + LanguageService, { provide: HTTP_INTERCEPTORS, useClass: HttpCacheInterceptor, multi: true } ], bootstrap: [AppComponent] diff --git a/frontend/src/app/components/bisq-master-page/bisq-master-page.component.html b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.html index 777fa6680..d77f96423 100644 --- a/frontend/src/app/components/bisq-master-page/bisq-master-page.component.html +++ b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.html @@ -15,13 +15,13 @@
- Mainnet - Signet - Testnet + Mainnet + Signet + Testnet - Liquid - Liquid Testnet + Liquid + Liquid Testnet
diff --git a/frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts index 4bb21a414..0f10a106d 100644 --- a/frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts +++ b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { Env, StateService } from '../../services/state.service'; import { Observable } from 'rxjs'; +import { LanguageService } from 'src/app/services/language.service'; @Component({ selector: 'app-bisq-master-page', @@ -12,14 +13,17 @@ export class BisqMasterPageComponent implements OnInit { navCollapsed = false; env: Env; isMobile = window.innerWidth <= 767.98; - + urlLanguage: string; + constructor( private stateService: StateService, + private languageService: LanguageService, ) { } ngOnInit() { this.env = this.stateService.env; this.connectionState$ = this.stateService.connectionState$; + this.urlLanguage = this.languageService.getLanguageForUrl(); } collapse(): void { diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts index 2f08fee85..a3841a3a6 100644 --- a/frontend/src/app/components/block/block.component.ts +++ b/frontend/src/app/components/block/block.component.ts @@ -13,7 +13,6 @@ import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url. @Component({ selector: 'app-block', templateUrl: './block.component.html', - providers: [RelativeUrlPipe], styleUrls: ['./block.component.scss'] }) export class BlockComponent implements OnInit, OnDestroy { diff --git a/frontend/src/app/components/language-selector/language-selector.component.ts b/frontend/src/app/components/language-selector/language-selector.component.ts index f90a3a5e9..a2b10b7db 100644 --- a/frontend/src/app/components/language-selector/language-selector.component.ts +++ b/frontend/src/app/components/language-selector/language-selector.component.ts @@ -1,8 +1,8 @@ import { DOCUMENT } from '@angular/common'; import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; -import { Language, languages } from 'src/app/app.constants'; -import { StateService } from 'src/app/services/state.service'; +import { languages } from 'src/app/app.constants'; +import { LanguageService } from 'src/app/services/language.service'; @Component({ selector: 'app-language-selector', @@ -12,42 +12,25 @@ import { StateService } from 'src/app/services/state.service'; }) export class LanguageSelectorComponent implements OnInit { languageForm: FormGroup; - languages: Language[]; + languages = languages; constructor( + @Inject(DOCUMENT) private document: Document, private formBuilder: FormBuilder, - private stateService: StateService, - @Inject(DOCUMENT) private document: Document + private languageService: LanguageService, ) { } ngOnInit() { - this.languages = languages; - this.languageForm = this.formBuilder.group({ - language: [''] + language: ['en'] }); - this.setLanguageFromUrl(); - } - - setLanguageFromUrl() { - const urlLanguage = this.document.location.pathname.split('/')[1]; - if (this.languages.map((lang) => lang.code).indexOf(urlLanguage) > -1) { - this.languageForm.get('language').setValue(urlLanguage); - } else { - this.languageForm.get('language').setValue('en'); - } + this.languageForm.get('language').setValue(this.languageService.getLanguage()); } changeLanguage() { - const language = this.languageForm.get('language').value; - try { - document.cookie = `lang=${language}; expires=Thu, 18 Dec 2050 12:00:00 UTC; path=/`; - } catch (e) { } - - if (this.stateService.env.BASE_MODULE === 'mempool') { - this.document.location.href = `/${language}/${this.stateService.network}`; - } else { - this.document.location.href = `/${language}`; - } + const newLang = this.languageForm.get('language').value; + this.languageService.setLanguage(newLang); + const rawUrlPath = this.languageService.stripLanguageFromUrl(null); + this.document.location.href = (newLang !== 'en' ? `/${newLang}` : '') + rawUrlPath; } } diff --git a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html index 58bd9bd73..b3635ceae 100644 --- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html +++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html @@ -16,11 +16,11 @@
- Mainnet - Signet - Testnet + Mainnet + Signet + Testnet - Bisq + Bisq
diff --git a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts index f71e63e46..65f07320d 100644 --- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts +++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { Env, StateService } from '../../services/state.service'; import { merge, Observable, of} from 'rxjs'; +import { LanguageService } from 'src/app/services/language.service'; @Component({ selector: 'app-liquid-master-page', @@ -14,15 +15,18 @@ export class LiquidMasterPageComponent implements OnInit { isMobile = window.innerWidth <= 767.98; officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE; network$: Observable; + urlLanguage: string; constructor( private stateService: StateService, + private languageService: LanguageService, ) { } ngOnInit() { this.env = this.stateService.env; this.connectionState$ = this.stateService.connectionState$; this.network$ = merge(of(''), this.stateService.networkChanged$); + this.urlLanguage = this.languageService.getLanguageForUrl(); } collapse(): void { diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html index 85b8d250f..8d871e3b6 100644 --- a/frontend/src/app/components/master-page/master-page.component.html +++ b/frontend/src/app/components/master-page/master-page.component.html @@ -20,9 +20,9 @@ - Bisq - Liquid - Liquid Testnet + Bisq + Liquid + Liquid Testnet diff --git a/frontend/src/app/components/master-page/master-page.component.ts b/frontend/src/app/components/master-page/master-page.component.ts index 32466afa7..fcff5629c 100644 --- a/frontend/src/app/components/master-page/master-page.component.ts +++ b/frontend/src/app/components/master-page/master-page.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { Env, StateService } from '../../services/state.service'; import { Observable, merge, of } from 'rxjs'; +import { LanguageService } from 'src/app/services/language.service'; @Component({ selector: 'app-master-page', @@ -14,15 +15,18 @@ export class MasterPageComponent implements OnInit { navCollapsed = false; isMobile = window.innerWidth <= 767.98; officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE; + urlLanguage: string; constructor( private stateService: StateService, + private languageService: LanguageService, ) { } ngOnInit() { this.env = this.stateService.env; this.connectionState$ = this.stateService.connectionState$; this.network$ = merge(of(''), this.stateService.networkChanged$); + this.urlLanguage = this.languageService.getLanguageForUrl(); } collapse(): void { diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts index 8db685248..5257d6a9e 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts @@ -12,7 +12,6 @@ import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url. selector: 'app-mempool-blocks', templateUrl: './mempool-blocks.component.html', styleUrls: ['./mempool-blocks.component.scss'], - providers: [RelativeUrlPipe], changeDetection: ChangeDetectionStrategy.OnPush, }) export class MempoolBlocksComponent implements OnInit, OnDestroy { diff --git a/frontend/src/app/components/search-form/search-form.component.ts b/frontend/src/app/components/search-form/search-form.component.ts index b9cb1ee9c..40f2c1e88 100644 --- a/frontend/src/app/components/search-form/search-form.component.ts +++ b/frontend/src/app/components/search-form/search-form.component.ts @@ -13,7 +13,6 @@ import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url. selector: 'app-search-form', templateUrl: './search-form.component.html', styleUrls: ['./search-form.component.scss'], - providers: [RelativeUrlPipe], changeDetection: ChangeDetectionStrategy.OnPush }) export class SearchFormComponent implements OnInit { diff --git a/frontend/src/app/services/language.service.ts b/frontend/src/app/services/language.service.ts new file mode 100644 index 000000000..370028015 --- /dev/null +++ b/frontend/src/app/services/language.service.ts @@ -0,0 +1,40 @@ +import { DOCUMENT, getLocaleId } from '@angular/common'; +import { LOCALE_ID, Inject, Injectable } from '@angular/core'; +import { languages } from 'src/app/app.constants'; + +@Injectable({ + providedIn: 'root' +}) +export class LanguageService { + private language = 'en'; + private languages = languages; + constructor( + @Inject(DOCUMENT) private document: Document, + @Inject(LOCALE_ID) private locale: string, + ) { + this.language = getLocaleId(this.locale).substring(0, 2); + } + + getLanguage(): string { + return this.language; + } + + stripLanguageFromUrl(urlPath: string) { + let rawUrlPath = urlPath ? urlPath : document.location.pathname; + const urlLanguage = this.document.location.pathname.split('/')[1]; + if (this.languages.map((lang) => lang.code).indexOf(urlLanguage) != -1) { + rawUrlPath = rawUrlPath.substring(3); + } + return rawUrlPath; + } + + getLanguageForUrl(): string { + return this.language === 'en' ? '' : '/' + this.language; + } + + setLanguage(language: string): void { + try { + document.cookie = `lang=${language}; expires=Thu, 18 Dec 2050 12:00:00 UTC; path=/`; + } catch (e) { } + } +} diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index ead7b20c2..b29303c27 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -60,6 +60,7 @@ import { ColoredPriceDirective } from './directives/colored-price.directive'; ], providers: [ VbytesPipe, + RelativeUrlPipe, ], exports: [ NgbAccordionModule,