@rpcbase/client 0.175.0 → 0.176.0

package/auth/components/SignIn/SignInEmailForm.js

@@ -2,6 +2,7 @@
 import assert from "assert"
 import debug from "debug"
 import {useState, useEffect} from "react"
+import {useTranslation} from "react-i18next"
 import useSearchParam from "react-use/lib/useSearchParam"
 import isEmail from "validator/lib/isEmail"
 
@@ -14,6 +15,8 @@ import {setIsSignedIn, setUid, setTenantId} from "../../index"
 const log = debug("rb:auth:signin")
 
 export const SignInEmailForm = ({onSuccess, onSuccessRedirect}) => {
+  const {t} = useTranslation("rb.sign_in", {useSuspense: false})
+
   const redirect = useSearchParam("redirect")
 
   const [isLoading, setIsLoading] = useState(false)
@@ -86,27 +89,27 @@ export const SignInEmailForm = ({onSuccess, onSuccessRedirect}) => {
         <input type="email"
           className="form-control"
           id="input-email"
-          placeholder="name@example.com"
+          placeholder={t("email_placeholder")}
           value={email}
           onChange={onChangeEmail} />
-        <label htmlFor="input-email">Email Address</label>
+        <label htmlFor="input-email">{t("email_address")}</label>
       </div>
 
       <div className="form-floating text-start">
         <input type="password"
           className="form-control"
           id="input-password"
-          placeholder="Password"
+          placeholder={t("password")}
           value={password}
           onChange={onChangePassword} />
-        <label htmlFor="input-password">Password</label>
+        <label htmlFor="input-password">{t("password")}</label>
       </div>
 
       <div className="mt-2 text-start w-100">
-        <a href={`/forgot-password${forgotUrlParam && "#" + forgotUrlParam}`}>Forgot your password?</a>
+        <a href={`/forgot-password${forgotUrlParam && "#" + forgotUrlParam}`}>{t("forgot_password")}</a>
       </div>
 
-      <button className="mt-4 mb-3 w-100 btn btn-lg btn-primary" type="submit" onClick={onSubmit}>Sign In</button>
+      <button className="mt-4 mb-3 w-100 btn btn-lg btn-primary" type="submit" onClick={onSubmit}>{t("submit_btn")}</button>
 
     </form>
   )

package/auth/components/SignIn/index.js

@@ -1,6 +1,6 @@
 /* @flow */
 import assert from "assert"
-
+import {useTranslation} from "react-i18next"
 import authConfig from "@rpcbase/dot-rb/auth"
 
 import {AUTH_BUTTONS} from "../../../src/ui/oauth"
@@ -20,6 +20,7 @@ export const SignIn = ({
   onSuccessRedirect = "/",
   onSuccess = () => null
 }) => {
+  const {t} = useTranslation("rb.sign_in", {useSuspense: false})
 
   return (
     <div id="sign-in-wrapper">
@@ -31,10 +32,10 @@ export const SignIn = ({
 
           <hr />
 
-          <h1 className="h4 mt-3 mb-3 fw-normal">Sign In</h1>
+          <h1 className="h4 mt-3 mb-3 fw-normal">{t("title")}</h1>
           <p className="text-start text-muted">
-            Don't have an account?
-            <a href="/signup" className="ms-1">Sign up here</a>
+            {t("dont_have_account")}
+            <a href="/signup" className="ms-1">{t("sign_up_here")}</a>
           </p>
 
           {hasEmail && (
@@ -47,7 +48,7 @@ export const SignIn = ({
           {hasEmail && hasOAuth && (
             <>
               <hr />
-              <p className="text-muted">OR</p>
+              <p className="text-muted">{t("or")}</p>
             </>
           )}
 
@@ -55,7 +56,7 @@ export const SignIn = ({
             const Comp = AUTH_BUTTONS[provider.id]
             assert(Comp, `unable to find oauth button for provider: ${JSON.stringify(provider)}`)
 
-            return <Comp key={`${provider.id}-${index}`} text="Sign in" className="w-100 justify-content-center" />
+            return <Comp key={`${provider.id}-${index}`} text={t("submit_btn")} className="w-100 justify-content-center" />
           })}
 
 

package/auth/components/SignOut/index.js

@@ -2,6 +2,7 @@
 import assert from "assert"
 import {useState, useEffect} from "react"
 import Alert from "react-bootstrap/Alert"
+import {useTranslation} from "react-i18next"
 
 import authConfig from "@rpcbase/dot-rb/auth"
 
@@ -23,6 +24,7 @@ export const SignOut = ({
   name,
   onSignOutSuccess = () => null
 }) => {
+  const {t} = useTranslation("rb.sign_out", {useSuspense: false})
 
   const [isSignedOut, setIsSignedOut] = useState(false)
 
@@ -55,19 +57,17 @@ export const SignOut = ({
     }
   }
 
-
   const onSubmit = () => {
-    console.log("sign out from selected accounts", selectedAccounts)
     onSignOut()
   }
 
-  const message = hasMultiAccounts ? "Select accounts to sign out of:" : "Click here to sign out of your account:"
+  const message = hasMultiAccounts ? "Select accounts to sign out of:" : t("click_here_signout")
 
   return (
     <div id="sign-out-wrapper">
 
       {isSignedOut && (
-        <Alert variant="light" data-bs-theme="dark" style={{maxWidth: 260, position: "absolute"}} onClose={() => setIsSignedOut(false)} dismissible>
+        <Alert variant="light" transition data-bs-theme="dark" style={{maxWidth: 260, position: "absolute"}} onClose={() => setIsSignedOut(false)} dismissible>
           Signed out successfully
         </Alert>
       )}
@@ -80,7 +80,7 @@ export const SignOut = ({
 
         <hr />
 
-        <h1 className="h4 mt-3 mb-3 fw-normal">Sign Out</h1>
+        <h1 className="h4 mt-3 mb-3 fw-normal">{t("title")}</h1>
 
         <p className="text-start text-muted">
           {message}

package/auth/index.js

@@ -17,11 +17,17 @@ const log = debug("rb:auth")
 
 // TODO: this should be refactored to AuthContext + Provider
 
-let __isAuthenticated = null
+let __isSignedIn = null
 
 let __tenantId = typeof storage !== "undefined" && storage.getItem(LAST_TENANT_KEY)
 let __userId = typeof storage !== "undefined" && __tenantId && storage.getItem(uidStorageKey(__tenantId))
 
+let __pendingSignedInStatusCallbacks = []
+
+const purgePendingSignedInStatusCallbacks = () => {
+  __pendingSignedInStatusCallbacks.forEach((fn) => fn(__isSignedIn))
+  __pendingSignedInStatusCallbacks = []
+}
 
 const getQueryStringAuthId = () => {
   const url = new URL(window.location.href)
@@ -51,11 +57,11 @@ const runSessionCheck = async() => {
 
   log("check_session response", res)
 
-  __isAuthenticated = res.is_signed_in
-
+  __isSignedIn = res.is_signed_in
+  purgePendingSignedInStatusCallbacks() // IMPORTANT: call and purge all pending callbacks
 
   // if not authenticated, clear __userId + __tenantId and disconnect socket
-  if (!__isAuthenticated) {
+  if (!__isSignedIn) {
     __userId = null
     __tenantId = null
     rtsDisconnect()
@@ -83,14 +89,14 @@ if (typeof window !== "undefined" && !isJest) runSessionCheck()
 
 
 export const getSessionRestrictMiddleware = () => (ctx, next) => {
-  log("session_restrict:__isAuthenticated", __isAuthenticated)
+  log("session_restrict:__isSignedIn", __isSignedIn)
 
-  if (typeof __isAuthenticated !== "boolean") {
+  if (typeof __isSignedIn !== "boolean") {
     log("session_restrict: will run session check")
 
     runSessionCheck()
       .then(() => {
-        if (__isAuthenticated) {
+        if (__isSignedIn) {
           next()
         } else {
           redirectSignIn(ctx)
@@ -100,13 +106,12 @@ export const getSessionRestrictMiddleware = () => (ctx, next) => {
         console.log("warning error in check session request", err)
         throw err
       })
-  } else if (__isAuthenticated) {
+  } else if (__isSignedIn) {
     next()
   } else {
-    log("AUTH", JSON.stringify(__isAuthenticated))
-    log("NOT AUTHENTICATED, REDIRECT HERE")
+    log("AUTH", JSON.stringify(__isSignedIn))
+    log("NOT SIGNED IN, REDIRECT HERE")
     redirectSignIn(ctx)
-    // next()
   }
 }
 
@@ -127,6 +132,18 @@ export const setTenantId = (val) => {
   storage.setItem(LAST_TENANT_KEY, val)
 }
 
-export const setIsSignedIn = (val) => __isAuthenticated = val
+export const setIsSignedIn = (val) => {
+  __isSignedIn = val
+  purgePendingSignedInStatusCallbacks() // IMPORTANT: call and purge all pending callbacks
+}
+
+export const getIsSignedIn = () => __isSignedIn
+
 
-export const getIsSignedIn = () => __isAuthenticated
+export const waitForSignedInStatus = () => new Promise((resolve) => {
+  if (typeof __isSignedIn === "boolean") {
+    resolve(__isSignedIn)
+  } else {
+    __pendingSignedInStatusCallbacks.push(resolve)
+  }
+})

package/i18n/en/rb.sign_in.json

@@ -0,0 +1,11 @@
+{
+  "title": "Sign In",
+  "dont_have_account": "Don't have an account?",
+  "sign_up_here": "Sign up here",
+  "or": "OR",
+  "email_address": "Email Address",
+  "email_placeholder": "name@example.com",
+  "password": "Password",
+  "forgot_password": "Forgot your password?",
+  "submit_btn": "Sign in"
+}

package/i18n/en/rb.sign_out.json

@@ -0,0 +1,5 @@
+{
+  "title": "Sign Out",
+  "click_here_signout": "Click here to sign out of your account:",
+  "success_text": "Signed out succesfully"
+}

package/i18n/fr/rb.sign_in.json

@@ -0,0 +1,11 @@
+{
+  "title": "Connexion",
+  "dont_have_account": "Vous n'avez pas de compte?",
+  "sign_up_here": "Créez un compte ici",
+  "or": "OU",
+  "email_address": "Addresse Email",
+  "email_placeholder": "nom@example.com",
+  "password": "Mot de passe",
+  "forgot_password": "Mot de passe oublié?",
+  "submit_btn": "Connexion"
+}

package/i18n/fr/rb.sign_out.json

@@ -0,0 +1,5 @@
+{
+  "title": "Déconnexion",
+  "click_here_signout": "Cliquez ici pour vous déconnecter:",
+  "success_text": "Opération complétée avec succès"
+}

package/{i18next.js → i18n/index.js}

@@ -1,5 +1,5 @@
 /* @flow */
-import i18n from "i18next"
+import i18next from "i18next"
 import {initReactI18next} from "react-i18next"
 import ChainedBackend from "i18next-chained-backend"
 import resourcesToBackend from "i18next-resources-to-backend"
@@ -22,20 +22,33 @@ if (!locale) {
 }
 
 // Do not call this code directly, it is injected from babel-plugin-i18next-client by the bundler
-export default (backendFn) => {
-
-  i18n
+export const registerI18N = async (backendFn) => {
+  i18next
     .use(ChainedBackend)
     .use(initReactI18next)
     .init({
       lng: locale,
-      fallbackLng: (code) => getLocaleFromCode(code, DEFAULT_LOCALE, SUPPORTED_LOCALES),
+      fallbackLng: (code) => {
+        const val = getLocaleFromCode({ code, supported_locales: SUPPORTED_LOCALES, default_locale: DEFAULT_LOCALE })
+        // console.log("GOT VAL", {code, val})
+        return val
+      },
       defaultNS: "common",
       backend: {
-        backends: [resourcesToBackend(backendFn)],
+        backends: [
+          // rb internal i18n
+          resourcesToBackend((lng, ns) => import(/* webpackChunkName: "rb-i18n" */ `./${lng}/${ns}.json`)),
+          // users's i18n
+          resourcesToBackend(backendFn)
+        ],
       },
       interpolation: {
         escapeValue: false,
       },
     })
+
+  // save preference to local storage so it works on reload
+  i18next.on('languageChanged', (lng) => {
+    localStorage.setItem(LOCALE_KEY, lng)
+  })
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.175.0",
+  "version": "0.176.0",
   "scripts": {
     "test": "../../node_modules/.bin/wireit"
   },
@@ -84,7 +84,7 @@
     "@rpcbase/redbox-react": "0.3.0",
     "figma-squircle": "0.3.1",
     "firebase": "10.12.3",
-    "i18next": "23.11.5",
+    "i18next": "23.12.2",
     "i18next-chained-backend": "4.6.2",
     "i18next-resources-to-backend": "1.2.1",
     "lz-string": "1.5.0",
@@ -92,7 +92,7 @@
     "pouchdb-adapter-indexeddb": "8.0.1",
     "pouchdb-core": "8.0.1",
     "pouchdb-find": "8.0.1",
-    "react-i18next": "14.1.2",
+    "react-i18next": "15.0.0",
     "socket.io-client": "4.7.5"
   },
   "devDependencies": {