локализация firebaseui в приложении React

Question

Я пытаюсь локализовать FirebaseUI в моем приложении React. Когда пользователь меняет язык, отправляется действие. Я использую промежуточное программное обеспечение (в настоящее время Sagate-Redx-Saga, но у меня также есть Red-Thunk).

Я не могу понять, как изменить интерфейс аутентификации для отображения локализованных строк кнопок.

Сначала я использовал:

var firebase = require('firebase')
var firebaseui = require('firebaseui')

, который загружался из node_modules.

Теперь я знаю, что мне нужно загрузить определенный локализованный CDN, например, если я хочу французский. Поэтому я изменил приложение, чтобы иметь ссылки на cdn на странице index.html, а затем использую

var firebase = window.firebase
var firebaseui = window.firebaseui
let ui = new firebaseui.auth.AuthUI(firebase.auth())

и затем, когда они переходят на страницу входа в систему:

ui.start('#firebase-auth-container',uiconfig)

Однако это, очевидно, загружает определенный язык, когда пользователь получает index.html. Как мне затем изменить этот cdn в приложении SPA React? Я пытался использовать шлем-реактив, но

a) Я не думаю, что это заменяет оригинальный cdn, оно просто добавляет новый

б) Это не работает для меня. Я попытался ui.reset (), но это, похоже, ничего не делает.

Кто-нибудь сделал это и может сказать мне, как это должно быть сделано?

спасибо

Answer 1

Я искал то же самое. Кажется, они предлагают загрузить локализованный виджет , но я не вижу простого способа сделать это с динамическими языками.

Вот мое решение, вдохновленное этим :

setTimeout(() => {
  let providers = [{
      key: 'email',
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
    },
    {
      key: 'google',
      provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    },
    {
      key: 'facebook',
      provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    }
  ]

  providers.forEach(({
    key,
    provider
  }) => {
    let button = document.querySelector(`[data-provider-id="${provider}"] .firebaseui-idp-text-long`)
    if (button) {
      button.innerHTML = this.$t(`Sign_in_with_${key}`)
    }
  })
})