Allow override of provider names from settings

Author: mraerino

src/components/app.js

@@ -141,7 +141,11 @@ class App extends Component {
     ].filter(p => store.settings.external[p.toLowerCase()]);
 
     return providers.length ? (
-      <Providers providers={providers} onLogin={this.handleExternalLogin} />
+      <Providers
+        providers={providers}
+        labels={store.settings.external_labels || {}}
+        onLogin={this.handleExternalLogin}
+      />
     ) : null;
   }
 

src/components/forms/providers.js

@@ -7,28 +7,41 @@ class Provider extends Component {
   };
 
   render() {
-    const { provider } = this.props;
+    const { provider, label } = this.props;
 
     return (
       <button
         onClick={this.handleLogin}
         className={`provider${provider} btn btnProvider`}
       >
-        Continue with {provider}
+        Continue with {label}
       </button>
     );
   }
 }
 
 export default class Providers extends Component {
+  getLabel(p) {
+    const pId = p.toLowerCase();
+    if (pId in this.props.labels) {
+      return this.props.labels[pId];
+    }
+    return p;
+  }
+
   render() {
     const { providers, onLogin } = this.props;
 
     return (
       <div className="providersGroup">
         <hr className="hr" />
         {providers.map(p => (
-          <Provider key={p} provider={p} onLogin={onLogin} />
+          <Provider
+            key={p}
+            provider={p}
+            label={this.getLabel(p)}
+            onLogin={onLogin}
+          />
         ))}
       </div>
     );