Added custom multi language support #120

l0ll098 · 2020-03-31T11:33:25Z

Hi,
Since the version of the FirebaseUI-Web library published on npm doesn't yet support i18n (firebase/firebaseui-web#242), I've wrote a small piece of code that can dynamically change the language of the FirebaseUI widget.
It does this by deleting the old one, loading the correctly localized build of FirebaseUI from the Firebase CDNs and starting it again. A default language can be specified in the firebaseUiAuthConfig object in the src/app/app.module.ts file, even though this is not required. In case the language has not been set or if it's set to "en", it will use the FirebaseUI version shipped with NPM.
This approach adds also support for RtL (Right to Left) languages.

I've also edited the main page of the test app, to demonstrate this in action.

@RaphaelJenni Let me know what you think

Fixes #115 #102 #42 #39
Addresses also: #119

david-franca · 2020-04-20T18:57:33Z

How can I change the language? I can't get it to work. I didn't find the instructions in the 'readme'. Would you help me?

l0ll098 · 2020-04-21T13:15:27Z

@francinha02 In the forked version you can do it using the setFirebaseUILanguage method exposed by the FirebaseuiAngularLibraryService class. You can find an example here.
The code parameter has to be a supported language from the FirebaseUILanguages array, that can be found here.

So, for example, if you want to set the language to be Portuguese (Brazil), at run time, you can do something like this:

this.firebaseUiService
      .setFirebaseUILanguage("pt_br")
      .then(() => {
        console.log("Changed language");
      })
      .catch((err) => {
        console.log(err);
      });

ℹ A default language can be provided with the firebaseUiAuthConfig object in the app.module.ts when intializing the FirebaseUIModule. This can be done adding a new property called language and setting to the desired language. Here's an example

hungtranpg · 2020-05-04T10:01:12Z

npm install git://github.com/l0ll098/FirebaseUI-Angular#multi-lang --save

Hi @francinha02, I installed your branch to use the language support. but it show error "Cannot find module 'firebaseui-angular'".
How can I install it?

UPDATE: I clone the code of your banch and run npm run build-lib, then copy FirebaseUI-Angular\dist\firebaseui-angular-library folder to myProject\node_modules\firebaseui-angular.
It working now. The pull request should be approved soon to master branch. 💯

LoudSilencex666 · 2020-05-04T10:45:46Z

Hi everyone, Great job @l0ll098. One question to Creators, when will it be merged to master?
It would be great improvement in functionality for this ui wrapper.

RobinGiel · 2020-05-21T15:56:52Z

Is this going to be merge any time soon. Or do we need to help resolving the conflict?

RaphaelJenni · 2020-05-24T13:25:59Z

First of all thanks to @l0ll098 for the PR.

The PR is quite a big change, and I have to fully test this, before releasing it. Currently, I'm a bit short in time, but this should change in the next few weeks.

The thing that I have to check is also, that the plugin doesn't get bloated by additional features as well as, that it keeps being easy to maintain (especially regarding the original firebaseui library - this still is just a wrapper)

RaphaelJenni · 2020-05-24T13:26:43Z

@l0ll098 Please try to resolve the conflicts, in order for me to check it.

l0ll098 · 2020-05-24T17:36:21Z

@RaphaelJenni thanks for your reply.
I'll do it as soon as I can as i'm a bit short in time too 😃

l0ll098 · 2020-05-27T07:48:24Z

@RaphaelJenni Resolved, now you should be able to test it and eventually merge it

RaphaelJenni · 2020-05-30T09:26:10Z

Strangely, there is still a conflict somewhere... I'll review your PR anyway. Just make sure, that it is mergeable.

RaphaelJenni · 2020-05-30T09:29:16Z

projects/firebaseui-angular-library/src/lib/dynamic-loader.service.ts

+     * Loads a series of previously registered Script(s)
+     * @param resNames The list of resources to load
+     */
+    load(...resNames: string[]) {


Please add a return type

RaphaelJenni · 2020-05-30T09:31:29Z

projects/firebaseui-angular-library/src/lib/dynamic-loader.service.ts

+     */
+    load(...resNames: string[]) {
+        let promises: any[] = [];
+        promises = resNames.map((name) => this.loadResource(name));


This can be written as a shorthand form. No need for initializing the array first. Additionally, the array should be correctly typed - not with any.

RaphaelJenni · 2020-05-30T09:31:53Z

projects/firebaseui-angular-library/src/lib/dynamic-loader.service.ts

+     * Loads a script given it's name.
+     * @param name Name of the script to laod.
+     */
+    loadResource(name: string) {


Add return type

RaphaelJenni · 2020-05-30T09:35:02Z

projects/firebaseui-angular-library/src/lib/dynamic-loader.service.ts

+     * Registers and then loads a list of Resource(s)
+     * @param resource The list of resources
+     */
+    registerAndLoad(...resource: Resource[]) {


Add return type

RaphaelJenni · 2020-05-30T09:40:34Z

projects/firebaseui-angular-library/src/lib/firebaseui-angular-library.service.ts

-              @Optional() @Inject(FIREBASE_APP_NAME) nameOrConfig: string | FirebaseAppConfig | null | undefined,
-              zone: NgZone) {
+  private static readonly COMPUTED_CALLBACKS = "COMPUTED_CALLBACKS";
+  private static readonly FIREBASEUI_CDN_VERSION = "4.5.0";


This version can't be hardcoded.

I would need to update this string on every release.

The firebaseui library is as such independent from this wrapper plugin, and as such everyone who uses this wrapper could use a different verison.

RaphaelJenni · 2020-05-30T09:42:14Z

projects/firebaseui-angular-library/src/lib/firebaseui-angular-library.service.ts

-              zone: NgZone) {
+  private static readonly COMPUTED_CALLBACKS = "COMPUTED_CALLBACKS";
+  private static readonly FIREBASEUI_CDN_VERSION = "4.5.0";
+  private static readonly FIREBASEUI_CDN_URL = `https://www.gstatic.com/firebasejs/ui/${FirebaseuiAngularLibraryService.FIREBASEUI_CDN_VERSION}`;


It should be possible to set a different URL. If someone wants to store it locally, this has to be adjusted.

RaphaelJenni · 2020-05-30T09:45:09Z

projects/firebaseui-angular-library/src/lib/firebaseui-angular-library.service.ts

+    return await new Promise((resolve) => {
+
+      // Each "pollingMs" this method will check if the firebaseUiInstance has been defined
+      const interval = setInterval(() => {


I don't like this approach. Polling isn't the way to go.

RaphaelJenni · 2020-05-30T09:58:55Z

@l0ll098 I really like your approach to the whole language thing, but there are a few problems with it.

Angular as such, doesn't support realtime language switching. There is a third-party library for that, but it is not included in the core. From this perspective, adding something with this functionality is just not the way to go for an angular app.

Secondly, for everyone using this library, not willing to change the language, has a package that is much bigger and does much more in the background as intended - after all this is just a lightweight wrapper.

We now have two options:

You create a fork and deploy it on npm as something like firebaseui-angular-i18n. I then could link your fork as the i18n version (this would be the preferred way)
I could include your change in the repo and deploy it separately on npm. This option I don't really like, as I then would have to maintain such a version, for which I currently don't have time for. Especially as I'm not using this plugin in any of my projects at the moment.

l0ll098 · 2021-02-23T07:15:49Z

Hi everyone, I know it's been a while but here I am.
I finally had some time to work on this stuff and, as suggested by @RaphaelJenni, I've decided to publish a forked version of this project that contains all the required changes needed to have a localized FirebaseUI widget.

Since new versions of the original project were pubblished, I've updated the fork to the latest version available. I've also improved those things pointed out by @RaphaelJenni in his review of this pr. And I have to admit it, they were good points 😎

The forked version with i18n support is available on npm with the name firebaseui-angular-i18n. Source code is available here.
It works in the same way as firebaseui-angular library so, if one decide to do so, it should be pretty easy to switch from the non-i18n version to the forked one (it's pretty much a library swap).

@RaphaelJenni could you please link it somewhere in your readme file?

RaphaelJenni · 2021-02-27T12:50:21Z

@l0ll098 Cool! Nice to have my first real fork 😄

I'm gonna add a reference on the README page. Thanks for your work!

l0ll098 added 10 commits March 29, 2020 19:45

Added support for i18n (including RtL languages)

b9cc289

Improved stability and reliability

a2924e3

Improvements to the core logic

081c0f6

Added a select in the demo page to show the change language feature

d216b26

Now the select element will show correctly the initial language

966b1a8

Renamed a type

1e812e5

Fixed a wrong import

a180a42

Fixed text direction when switching from a RtL language to a LtR one

d6a8d12

Made the CDN url parametric

1431f29

Should fix issue 119

d726628

Malin-C approved these changes Apr 20, 2020

View reviewed changes

Merge branch 'master'

3f49812

RaphaelJenni reviewed May 30, 2020

View reviewed changes

RaphaelJenni added a commit that referenced this pull request Feb 27, 2021

Add reference to i18n verison of pluging #120

b808197

RaphaelJenni closed this Feb 27, 2021

This was referenced Feb 27, 2021

Help: change ui language and direction #115

Closed

Internationalization #102

Closed

Uh oh!

Added custom multi language support #120

Added custom multi language support #120

Uh oh!

Conversation

l0ll098 commented Mar 31, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

david-franca commented Apr 20, 2020

Uh oh!

l0ll098 commented Apr 21, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hungtranpg commented May 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LoudSilencex666 commented May 4, 2020

Uh oh!

RobinGiel commented May 21, 2020

Uh oh!

RaphaelJenni commented May 24, 2020

Uh oh!

RaphaelJenni commented May 24, 2020

Uh oh!

l0ll098 commented May 24, 2020

Uh oh!

l0ll098 commented May 27, 2020

Uh oh!

RaphaelJenni commented May 30, 2020

Uh oh!

RaphaelJenni May 30, 2020

Choose a reason for hiding this comment

Uh oh!

RaphaelJenni May 30, 2020

Choose a reason for hiding this comment

Uh oh!

RaphaelJenni May 30, 2020

Choose a reason for hiding this comment

Uh oh!

RaphaelJenni May 30, 2020

Choose a reason for hiding this comment

Uh oh!

RaphaelJenni May 30, 2020

Choose a reason for hiding this comment

Uh oh!

RaphaelJenni May 30, 2020

Choose a reason for hiding this comment

Uh oh!

RaphaelJenni May 30, 2020

Choose a reason for hiding this comment

Uh oh!

RaphaelJenni commented May 30, 2020

Uh oh!

l0ll098 commented Feb 23, 2021

Uh oh!

RaphaelJenni commented Feb 27, 2021

Uh oh!

Uh oh!

l0ll098 commented Mar 31, 2020 •

edited

Loading

l0ll098 commented Apr 21, 2020 •

edited

Loading

hungtranpg commented May 4, 2020 •

edited

Loading