fix: add missing providers translations, add locale select to demo

Author: erezrokah

src/components/app.js

@@ -176,6 +176,7 @@ class App extends Component {
         providers={providers}
         labels={store.settings.external_labels || {}}
         onLogin={this.handleExternalLogin}
+        t={store.translate}
       />
     ) : null;
   }

src/components/forms/providers.js

@@ -7,14 +7,14 @@ class Provider extends Component {
   };
 
   render() {
-    const { provider, label } = this.props;
+    const { provider, label, t } = this.props;
 
     return (
       <button
         onClick={this.handleLogin}
         className={`provider${provider} btn btnProvider`}
       >
-        Continue with {label}
+        {`${t("continue_with")} ${label}`}
       </button>
     );
   }
@@ -30,7 +30,7 @@ export default class Providers extends Component {
   }
 
   render() {
-    const { providers, onLogin } = this.props;
+    const { providers, onLogin, t } = this.props;
 
     return (
       <div className="providersGroup">
@@ -41,6 +41,7 @@ export default class Providers extends Component {
             provider={p}
             label={this.getLabel(p)}
             onLogin={onLogin}
+            t={t}
           />
         ))}
       </div>

src/index.ejs

@@ -185,6 +185,11 @@
 			position: absolute;
 			bottom: 32px;
 			margin-top: 104px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			width: 100%;
+			max-width: 800px;
 		}
 
 		.github-link {
@@ -212,6 +217,13 @@
 			background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE3IDE3Ij4gIDxwYXRoIGZpbGw9IiMxNjE1MTQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTkuNDk5MjM0NTUsMS4xODc1IEM0LjkwOTYxMzk0LDEuMTg3NSAxLjE4NzUsNS4wMDMyODcwNCAxLjE4NzUsOS43MTA2Mjc3OCBDMS4xODc1LDEzLjQ3NjE4NjQgMy41NjkwNjA5NywxNi42NzAzOTczIDYuODcyMjIwMjIsMTcuNzk3Mzk2NSBDNy4yODgxMTMxMywxNy44NzU4Nzg0IDcuNDM5NjcxNjQsMTcuNjEyNzAyNiA3LjQzOTY3MTY0LDE3LjM4NjY3NDkgQzcuNDM5NjcxNjQsMTcuMTg0NzE1IDcuNDMyNTI3NDcsMTYuNjQ4NDIyNCA3LjQyODQ0NTA5LDE1LjkzNzM3NjkgQzUuMTE2Mjg0NjUsMTYuNDUyMjE3OCA0LjYyODQzOTcyLDE0Ljc5NDY4MTMgNC42Mjg0Mzk3MiwxNC43OTQ2ODEzIEM0LjI1MDMwODg2LDEzLjgwOTk5NTkgMy43MDUzMTA1NSwxMy41NDc4NjY1IDMuNzA1MzEwNTUsMTMuNTQ3ODY2NSBDMi45NTA1Nzk3NCwxMy4wMTk0MjIxIDMuNzYyNDYzOTMsMTMuMDI5ODg2NCAzLjc2MjQ2MzkzLDEzLjAyOTg4NjQgQzQuNTk2ODAxMjQsMTMuMDkwMDU1OCA1LjAzNTY1NzU2LDEzLjkwODM1OTggNS4wMzU2NTc1NiwxMy45MDgzNTk4IEM1Ljc3NzEyMDYxLDE1LjIxMDYzNTEgNi45ODE0MjQsMTQuODM0NDQ1NSA3LjQ1NDk4MDU5LDE0LjYxNjI2NiBDNy41MzA1MDQ3LDE0LjA2NTg0NjcgNy43NDUzNDAxNywxMy42OTAxODAzIDcuOTgyNjI4NzYsMTMuNDc3MjMyOSBDNi4xMzY4ODA3NCwxMy4yNjIxOTI2IDQuMTk2MjE3MjcsMTIuNTMwNzQxOSA0LjE5NjIxNzI3LDkuMjY0ODUwOTMgQzQuMTk2MjE3MjcsOC4zMzQ1Nzk1MyA0LjUyMDI1NjUzLDcuNTczMzA1NjggNS4wNTE5ODcwOSw2Ljk3Nzg5MDEzIEM0Ljk2NjI1NzAyLDYuNzYyMzI2NjcgNC42ODEwMDA0MSw1Ljg5NTM2Mzk1IDUuMTMzNjM0NzgsNC43MjIzMjIwNiBDNS4xMzM2MzQ3OCw0LjcyMjMyMjA2IDUuODMxMjEyMjEsNC40OTMxNTUwOCA3LjQxOTI1OTcyLDUuNTk2MDg2NTQgQzguMDgyMTM2ODgsNS40MDY2ODM3IDguNzkzNDkyMzYsNS4zMTI1MDU0OSA5LjUwMDI1NTE1LDUuMzA4ODQzIEMxMC4yMDY1MDc2LDUuMzEyNTA1NDkgMTAuOTE3MzUyOCw1LjQwNjY4MzcgMTEuNTgxMjUwNiw1LjU5NjA4NjU0IEMxMy4xNjgyNzc1LDQuNDkzMTU1MDggMTMuODY0ODM0Myw0LjcyMjMyMjA2IDEzLjg2NDgzNDMsNC43MjIzMjIwNiBDMTQuMzE4NDg5Myw1Ljg5NTM2Mzk1IDE0LjAzMzIzMjcsNi43NjIzMjY2NyAxMy45NDgwMTI5LDYuOTc3ODkwMTMgQzE0LjQ4MDc2NDEsNy41NzMzMDU2OCAxNC44MDIyNTE4LDguMzM0NTc5NTMgMTQuODAyMjUxOCw5LjI2NDg1MDkzIEMxNC44MDIyNTE4LDEyLjUzOTExMzMgMTIuODU4NTI2NiwxMy4yNTk1NzY2IDExLjAwNzE2NTMsMTMuNDcwNDMxMSBDMTEuMzA1MTc5MywxMy43MzM2MDY5IDExLjU3MTA0NDYsMTQuMjUzNjc5OSAxMS41NzEwNDQ2LDE1LjA0ODk2MjUgQzExLjU3MTA0NDYsMTYuMTg3OTk1NiAxMS41NjA4Mzg3LDE3LjEwNzI3OTYgMTEuNTYwODM4NywxNy4zODY2NzQ5IEMxMS41NjA4Mzg3LDE3LjYxNDc5NTUgMTEuNzEwODY2MywxNy44ODAwNjQxIDEyLjEzMjM3MjUsMTcuNzk2ODczMyBDMTUuNDMyOTgwMiwxNi42NjcyNTggMTcuODEyNSwxMy40NzUxNCAxNy44MTI1LDkuNzEwNjI3NzggQzE3LjgxMjUsNS4wMDMyODcwNCAxNC4wOTAzODYxLDEuMTg3NSA5LjQ5OTIzNDU1LDEuMTg3NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEgLTEpIi8+PC9zdmc+);
 		}
 
+		.select-locale {
+			font-weight: 500;
+			font-size: 16px;
+			color: inherit;
+			text-decoration: none;
+		}
+
 		@media (max-width: 880px) {
 			.main {
 				padding: 16px;
@@ -257,6 +269,11 @@
 		netlifyIdentity.on("open", () => console.log("Widget opened"));
 		netlifyIdentity.on("close", () => console.log("Widget closed"));
 </script>
+<script>
+	function changeLocale(locale) {
+		netlifyIdentity.setLocale(locale)
+	}
+</script>
 </head>
 <body>
 	<div class="main">
@@ -283,7 +300,16 @@
 		</svg>
 		</div>
 		<div class="footer">
-			<a href="https://github.com/netlify/netlify-identity-widget" class="github-link">Open sourced on GitHub</a>
+			<div>
+				<a href="https://github.com/netlify/netlify-identity-widget" class="github-link">Open sourced on GitHub</a>
+			</div>
+			<div>
+				<label for="locale" class="select-locale">Select Widget Locale</label>
+				<select name="locale" id="locale" onChange="changeLocale(this.value)">
+					<option value="en">English</option>
+					<option value="fr">French</option>
+				</select>
+			</div>
 		</div>
 	</div>
 </body>

src/translations/en.json

@@ -34,5 +34,6 @@
   "form_password_placeholder": "Password",
   "coded_by": "Coded by Netlify",
   "No user found with this email": "No user found with this email",
-  "Invalid Password": "Invalid Password"
+  "Invalid Password": "Invalid Password",
+  "continue_with": "Continue with"
 }