feat: add multilingual support

Author: marierigal

README.md

@@ -74,6 +74,9 @@ netlifyIdentity.logout();
 // refresh the user's JWT 
 // Note: this method returns a promise.
 netlifyIdentity.refresh().then((jwt)=>console.log(jwt))
+
+// Change language
+netlifyIdentity.setLocale('en');
 ```
 
 #### A note on script tag versioning
@@ -120,6 +123,9 @@ netlifyIdentity.logout();
 // Note: this method returns a promise.
 netlifyIdentity.refresh().then((jwt)=>console.log(jwt))
 
+// Change language
+netlifyIdentity.setLocale('en');
+
 // Access the underlying GoTrue JS client.
 // Note that doing things directly through the GoTrue client brings a risk of getting out of
 // sync between your state and the widget’s state.
@@ -136,6 +142,7 @@ module API. Options include:
   container: '#some-query-selector'; // container to attach to
   APIUrl: 'https://www.example.com/.netlify/functions/identity'; // Absolute url to endpoint.  ONLY USE IN SPECIAL CASES!
   namePlaceholder: 'some-placeholder-for-Name'; // custom placeholder for name input form
+  locale: 'en'; // language code for translations - available: en, fr - default to en
 }
 ```
 

src/components/app.js

@@ -11,48 +11,48 @@ const pagesWithHeader = { login: true, signup: true };
 const pages = {
   login: {
     login: true,
-    button: "Log in",
-    button_saving: "Logging in",
+    button: "log_in",
+    button_saving: "logging_in",
     email: true,
     password: true,
     link: "amnesia",
-    link_text: "Forgot password?",
+    link_text: "forgot_password",
     providers: true
   },
   signup: {
     signup: true,
-    button: "Sign up",
-    button_saving: "Signing Up",
+    button: "sign_up",
+    button_saving: "signing_up",
     name: true,
     email: true,
     password: true,
     providers: true
   },
   amnesia: {
-    title: "Recover password",
-    button: "Send recovery email",
-    button_saving: "Sending recovery email",
+    title: "recover_password",
+    button: "send_recovery_email",
+    button_saving: "sending_recovery_email",
     email: true,
     link: "login",
-    link_text: "Never mind"
+    link_text: "never_mind"
   },
   recovery: {
-    title: "Recover password",
-    button: "Update password",
-    button_saving: "Updating password",
+    title: "recover_password",
+    button: "update_password",
+    button_saving: "updating_password",
     password: true,
     link: "login",
-    link_text: "Never mind"
+    link_text: "never_mind"
   },
   invite: {
-    title: "Complete your signup",
-    button: "Sign up",
-    button_saving: "Signing Up",
+    title: "complete_your_signup",
+    button: "sign_up",
+    button_saving: "signing_up",
     password: true,
     providers: true
   },
   user: {
-    title: "Logged in"
+    title: "logged_in"
   }
 };
 
@@ -96,6 +96,7 @@ class App extends Component {
         <SiteURLForm
           devMode={store.siteURL != null}
           onSiteURL={store.siteURL ? this.clearSiteURL : this.handleSiteURL}
+          t={store.translate}
         />
       );
     }
@@ -108,11 +109,12 @@ class App extends Component {
           user={store.user}
           saving={store.saving}
           onLogout={this.handleLogout}
+          t={store.translate}
         />
       );
     }
     if (store.modal.page === "signup" && store.settings.disable_signup) {
-      return <Message type="signup_disabled" />;
+      return <Message type="signup_disabled" t={store.translate} />;
     }
 
     return (
@@ -123,19 +125,21 @@ class App extends Component {
           saving={store.saving}
           onSubmit={this.handleUser}
           namePlaceholder={store.namePlaceholder}
+          t={store.translate}
         />
         {!store.user && page.link && store.gotrue && (
           <button
             onclick={pageLinkHandler}
             className="btnLink forgotPasswordLink"
           >
-            {page.link_text}
+            {store.translate(page.link_text)}
           </button>
         )}
         {store.isLocal ? (
           <SiteURLForm
             devMode={store.siteURL != null}
             onSiteURL={store.siteURL ? this.clearSiteURL : this.handleSiteURL}
+            t={store.translate}
           />
         ) : (
           <div />
@@ -195,6 +199,7 @@ class App extends Component {
           onPage={this.handlePage}
           onClose={this.handleClose}
           logo={store.modal.logo}
+          t={store.translate}
         >
           {this.renderBody()}
           {this.renderProviders()}

src/components/controls.js

@@ -24,7 +24,7 @@ class Controls extends Component {
   };
 
   render() {
-    const { user } = this.props.store;
+    const { user, translate: t } = this.props.store;
 
     if (this.props.mode === "button") {
       return (
@@ -33,7 +33,7 @@ class Controls extends Component {
           href="#"
           onClick={this.handleButton}
         >
-          {this.props.text || (user ? "Log out" : "Log in")}
+          {this.props.text || (user ? t("log_out") : t("log_in"))}
         </a>
       );
     }
@@ -42,7 +42,7 @@ class Controls extends Component {
       return (
         <ul className="netlify-identity-menu">
           <li className="netlify-identity-item netlify-identity-user-details">
-            Logged in as{" "}
+            {t("logged_in_as")}{" "}
             <span className="netlify-identity-user">
               {user.user_metadata.name || user.email}
             </span>
@@ -53,7 +53,7 @@ class Controls extends Component {
               href="#"
               onClick={this.handleLogout}
             >
-              Log out
+              {t("log_out")}
             </a>
           </li>
         </ul>
@@ -68,7 +68,7 @@ class Controls extends Component {
             href="#"
             onClick={this.handleSignup}
           >
-            Sign up
+            {t("sign_up")}
           </a>
         </li>
         <li className="netlify-identity-item">
@@ -77,7 +77,7 @@ class Controls extends Component {
             href="#"
             onClick={this.handleLogin}
           >
-            Log in
+            {t("log_in")}
           </a>
         </li>
       </ul>

src/components/forms/logout.js

@@ -7,22 +7,26 @@ export default class LogoutForm extends Component {
     this.props.onLogout();
   };
   render() {
-    const { user, saving } = this.props;
+    const { user, saving, t } = this.props;
 
     return (
       <form
         onSubmit={this.handleLogout}
         className={`form ${saving ? "disabled" : ""}`}
       >
         <p className="infoText">
-          Logged in as <br />
+          {t("logged_in_as")} <br />
           <span className="infoTextEmail">
             {user.user_metadata.full_name ||
               user.user_metadata.name ||
               user.email}
           </span>
         </p>
-        <Button saving={saving} text="Log out" saving_text="Logging out" />
+        <Button
+          saving={saving}
+          text={t("log_out")}
+          saving_text={t("logging_out")}
+        />
       </form>
     );
   }

src/components/forms/message.js

@@ -3,38 +3,34 @@ import { h, Component } from "preact";
 const messages = {
   confirm: {
     type: "success",
-    text:
-      "A confirmation message was sent to your email, click the link there to continue."
+    text: "message_confirm"
   },
   password_mail: {
     type: "success",
-    text:
-      "We've sent a recovery email to your account, follow the link there to reset your password."
+    text: "message_password_mail"
   },
   email_changed: {
     type: "sucess",
-    text: "Your email address has been updated!"
+    text: "message_email_changed"
   },
   verfication_error: {
     type: "error",
-    text:
-      "There was an error verifying your account. Please try again or contact an administrator."
+    text: "message_verfication_error"
   },
   signup_disabled: {
     type: "error",
-    text:
-      "Public signups are disabled. Contact an administrator and ask for an invite."
+    text: "message_signup_disabled"
   }
 };
 
 export default class Message extends Component {
   render() {
-    const { type } = this.props;
+    const { type, t } = this.props;
     const msg = messages[type];
 
     return (
       <div className={`flashMessage ${msg.type}`}>
-        <span>{msg.text}</span>
+        <span>{t(msg.text)}</span>
       </div>
     );
   }

src/components/forms/siteurl.js

@@ -22,37 +22,32 @@ export default class SiteURLForm extends Component {
 
   render() {
     const { url, development } = this.state;
+    const { t } = this.props;
 
     return (
       <div>
         {development ? (
           <div class="subheader">
-            <h3>Development Settings</h3>
+            <h3>{t("site_url_title")}</h3>
             <button
               onclick={e => this.clearSiteURL(e)}
               className="btnLink forgotPasswordLink"
             >
-              Clear localhost URL
+              {t("site_url_link_text")}
             </button>
           </div>
         ) : (
           <form onsubmit={this.addSiteURL} className="form">
-            <div className="flashMessage">
-              {
-                "Looks like you're running a local server. Please let us know the URL of your Netlify site."
-              }
-            </div>
+            <div className="flashMessage">{t("site_url_message")}</div>
             <div className="formGroup">
               <label>
-                <span className="visuallyHidden">
-                  Enter your Netlify Site URL
-                </span>
+                <span className="visuallyHidden">{t("site_url_label")}</span>
                 <input
                   className="formControl"
                   type="url"
                   name="url"
                   value={url}
-                  placeholder="URL of your Netlify site"
+                  placeholder={t("site_url_placeholder")}
                   autocapitalize="off"
                   required
                   oninput={this.handleInput}
@@ -61,7 +56,7 @@ export default class SiteURLForm extends Component {
               </label>
             </div>
             <button type="submit" className="btn">
-              Set site's URL
+              {t("site_url_submit")}
             </button>
           </form>
         )}