fix: Auth login page language

apps/cloud/src/app/@core/config/index.ts

@@ -0,0 +1 @@
+export * from './language'

apps/cloud/src/app/@core/config/language.ts

@@ -0,0 +1,13 @@
+export enum LanguagesEnum {
+  Chinese = 'zh-CN',
+  SimplifiedChinese = 'zh-Hans',
+  TraditionalChinese = 'zh-Hant',
+  English = 'en'
+}
+
+export const LanguagesMap = {
+  'zh-CN': LanguagesEnum.SimplifiedChinese,
+  'zh-Hans': LanguagesEnum.SimplifiedChinese,
+  zh: LanguagesEnum.SimplifiedChinese,
+  'zh-HK': LanguagesEnum.TraditionalChinese,
+}

apps/cloud/src/app/@core/index.ts

@@ -8,4 +8,5 @@ export * from './theme/index'
 export * from './types'
 export * from './validators/index'
 export * from './animations/index'
-export * from './utils'
+export * from './utils'
+export * from './providers/'

apps/cloud/src/app/@core/providers/index.ts

@@ -0,0 +1,2 @@
+export * from './translate'
+export * from './logger'

apps/cloud/src/app/@core/providers/logger.ts

@@ -0,0 +1,13 @@
+import { EnvironmentProviders, importProvidersFrom } from '@angular/core'
+import { environment } from 'apps/cloud/src/environments/environment'
+import { LoggerModule, NgxLoggerLevel } from 'ngx-logger'
+
+export function provideLogger(): EnvironmentProviders {
+  return importProvidersFrom(
+    LoggerModule.forRoot({
+      // serverLoggingUrl: '/api/logs',
+      level: environment.production ? NgxLoggerLevel.WARN : NgxLoggerLevel.DEBUG,
+      serverLogLevel: NgxLoggerLevel.ERROR
+    })
+  )
+}

apps/cloud/src/app/@core/providers/translate.ts

@@ -0,0 +1,5 @@
+import { LanguagesMap } from '../config'
+
+export function navigatorLanguage() {
+  return LanguagesMap[navigator.language] || navigator.language
+}

apps/cloud/src/app/app.component.ts

@@ -11,7 +11,7 @@ import { TranslateService } from '@ngx-translate/core'
 import { NGXLogger } from 'ngx-logger'
 import { combineLatest } from 'rxjs'
 import { filter, map } from 'rxjs/operators'
-import { ICONS, LanguagesService, PACThemeService, Store, UpdateService, mapDateLocale } from './@core'
+import { ICONS, LanguagesService, PACThemeService, Store, UpdateService, mapDateLocale, navigatorLanguage } from './@core'
 import { AppService } from './app.service'
 
 
@@ -48,7 +48,7 @@ export class AppComponent implements OnInit {
   ) {
     translate.setDefaultLang('en')
     // the lang to use, if the lang isn't available, it will use the current loader to get them
-    translate.use(this.store.preferredLanguage || navigator.language || 'en')
+    translate.use(this.store.preferredLanguage || navigatorLanguage())
     this.document.documentElement.lang = translate.currentLang
 
     this.store.preferredLanguage$.pipe(filter(nonNullable)).subscribe((language) => {

libs/apps/auth/src/lib/auth.component.html

@@ -14,11 +14,11 @@
       <select
         id="countries"
         class="text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-        [ngModel]="preferredLanguage$ | async"
+        [ngModel]="language()"
         (ngModelChange)="onLanguage($event)"
       >
         <option value="en">English</option>
-        <option value="zh-CN">中文简体</option>
+        <option value="zh-Hans">中文简体</option>
         <option value="zh-Hant">中文繁体</option>
       </select>
 

libs/apps/auth/src/lib/auth.component.ts

@@ -1,7 +1,9 @@
 import { Location } from '@angular/common'
-import { Component } from '@angular/core'
-import { UntilDestroy } from '@ngneat/until-destroy'
+import { Component, effect, inject } from '@angular/core'
+import { toSignal } from '@angular/core/rxjs-interop'
 import { Store } from '@metad/cloud/state'
+import { UntilDestroy } from '@ngneat/until-destroy'
+import { TranslateService } from '@ngx-translate/core'
 import { map } from 'rxjs/operators'
 import { PacAuthService } from './services/auth.service'
 
@@ -15,7 +17,13 @@ import { PacAuthService } from './services/auth.service'
   }
 })
 export class PacAuthComponent {
-  authenticated = false
+  readonly #translate = inject(TranslateService)
+  protected auth = inject(PacAuthService)
+  protected store = inject(Store)
+  protected location = inject(Location)
+
+  readonly language = toSignal(this.#translate.onLangChange.pipe(map(() => this.#translate.currentLang)))
+
   token = ''
 
   // showcase of how to use the onAuthenticationChange method
@@ -34,29 +42,18 @@ export class PacAuthComponent {
     }
   ]
 
-  set language(value: string) {
-    this.store.preferredLanguage = value
+  constructor() {
+    effect(() => {
+      console.log(this.language())
+    })
   }
 
-  public readonly preferredLanguage$ = this.store.preferredLanguage$.pipe(
-    map((preferredLanguage) => preferredLanguage ?? navigator.language ?? 'en')
-  )
-
-  private _AuthSub = this.auth.onAuthenticationChange().subscribe((authenticated: boolean) => {
-    this.authenticated = authenticated
-  })
-  constructor(
-    protected auth: PacAuthService,
-    protected store: Store,
-    protected location: Location,
-  ) {}
-
   back() {
     this.location.back()
     return false
   }
 
   onLanguage(value) {
-    this.language = value
+    this.store.preferredLanguage = value
   }
 }