feat(config): Add "lang" field with language code value to "useValue"…

… property

Description:
This commit introduces a new feature to enhance language selection for the Google login button in "@abacritt/angularx-social-login". The "lang" field, with a language code value, has been added to the "useValue" property in the configuration file. This addition allows developers to manually specify the language for the Google button interface, improving usability for multilingual applications.

Changes Made:

Added "lang" field to the "useValue" property in the configuration file
Enabled manual language selection for the Google login button
Related Issue: abacritt#762 - "Add manual support for language selection in the Google button"

README.MD

@@ -50,6 +50,7 @@ import {
       provide: 'SocialAuthServiceConfig',
       useValue: {
         autoLogin: false,
+        lang: 'en',
         providers: [
           {
             id: GoogleLoginProvider.PROVIDER_ID,
@@ -284,6 +285,7 @@ export class MyCustomLoginProvider extends BaseLoginProvider {
       provide: 'SocialAuthServiceConfig',
       useValue: {
         autoLogin: true,
+        lang: 'en',
         providers: [
           {
             id: MyCustomLoginProvider.PROVIDER_ID,

projects/lib/README.md

@@ -50,6 +50,7 @@ import {
       provide: 'SocialAuthServiceConfig',
       useValue: {
         autoLogin: false,
+        lang: 'en',
         providers: [
           {
             id: GoogleLoginProvider.PROVIDER_ID,
@@ -316,6 +317,7 @@ export class MyCustomLoginProvider extends BaseLoginProvider {
       provide: 'SocialAuthServiceConfig',
       useValue: {
         autoLogin: true,
+        lang: 'en',
         providers: [
           {
             id: MyCustomLoginProvider.PROVIDER_ID,

projects/lib/src/entities/base-login-provider.ts

@@ -5,7 +5,7 @@ import { SocialUser } from './social-user';
 export abstract class BaseLoginProvider implements LoginProvider {
   constructor() {}
   readonly changeUser?: EventEmitter<SocialUser>;
-  abstract initialize(autoLogin?: boolean): Promise<void>;
+  abstract initialize(autoLogin?: boolean, lang?: string): Promise<void>;
   abstract getLoginStatus(): Promise<SocialUser>;
   abstract signIn(signInOptions?: object): Promise<SocialUser>;
   abstract signOut(revoke?: boolean): Promise<void>;

projects/lib/src/entities/login-provider.ts

@@ -3,7 +3,7 @@ import { SocialUser } from './social-user';
 
 export interface LoginProvider {
   readonly changeUser?: EventEmitter<SocialUser>;
-  initialize(autoLogin?: boolean): Promise<void>;
+  initialize(autoLogin?: boolean, lang?: string): Promise<void>;
   getLoginStatus(): Promise<SocialUser>;
   signIn(signInOptions?: object): Promise<SocialUser>;
   signOut(revoke?: boolean): Promise<void>;

projects/lib/src/providers/google-login-provider.ts

@@ -49,7 +49,7 @@ export class GoogleLoginProvider extends BaseLoginProvider {
 
   constructor(
     private clientId: string,
-    private readonly initOptions?: GoogleInitOptions
+    private readonly initOptions?: GoogleInitOptions,
   ) {
     super();
 
@@ -62,12 +62,12 @@ export class GoogleLoginProvider extends BaseLoginProvider {
     this._accessToken.pipe(skip(1)).subscribe(this._receivedAccessToken);
   }
 
-  initialize(autoLogin?: boolean): Promise<void> {
+  initialize(autoLogin?: boolean, lang?: string): Promise<void> {
     return new Promise((resolve, reject) => {
       try {
         this.loadScript(
           GoogleLoginProvider.PROVIDER_ID,
-          'https://accounts.google.com/gsi/client',
+          this.getGoogleLoginScriptSrc(lang),
           () => {
             google.accounts.id.initialize({
               client_id: this.clientId,
@@ -215,4 +215,10 @@ export class GoogleLoginProvider extends BaseLoginProvider {
     );
     return JSON.parse(jsonPayload);
   }
+
+  private getGoogleLoginScriptSrc(lang: string): string {
+    return lang ?
+           `https://accounts.google.com/gsi/client?hl=${lang}` :
+           'https://accounts.google.com/gsi/client';
+  }
 }

projects/lib/src/socialauth.service.ts

@@ -9,6 +9,7 @@ import { GoogleLoginProvider } from './providers/google-login-provider';
  */
 export interface SocialAuthServiceConfig {
   autoLogin?: boolean;
+  lang?: string;
   providers: { id: string; provider: LoginProvider | Type<LoginProvider> }[];
   onError?: (error: any) => any;
 }
@@ -34,6 +35,7 @@ export class SocialAuthService {
 
   private providers: Map<string, LoginProvider> = new Map();
   private autoLogin = false;
+  private lang: string = '';
 
   private _user: SocialUser | null = null;
   private _authState: ReplaySubject<SocialUser | null> = new ReplaySubject(1);
@@ -72,6 +74,7 @@ export class SocialAuthService {
 
   private initialize(config: SocialAuthServiceConfig) {
     this.autoLogin = config.autoLogin !== undefined ? config.autoLogin : false;
+    this.lang = config.lang !== undefined ? config.lang : '';
     const { onError = console.error } = config;
 
     config.providers.forEach((item) => {
@@ -85,7 +88,7 @@ export class SocialAuthService {
 
     Promise.all(
       Array.from(this.providers.values()).map((provider) =>
-        provider.initialize(this.autoLogin)
+        provider.initialize(this.autoLogin, this.lang),
       )
     )
       .then(() => {