Merge pull request #178 from wsheung/143

Added custom placeholder option

Author: shortdiv

README.md

@@ -128,6 +128,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
 }
 ```
 

src/components/app.js

@@ -117,6 +117,7 @@ class App extends Component {
           message={store.message}
           saving={store.saving}
           onSubmit={this.handleUser}
+          namePlaceholder={store.namePlaceholder}
         />
         {!store.user && page.link && store.gotrue && (
           <button

src/components/forms/user.js

@@ -18,7 +18,7 @@ export default class UserForm extends Component {
   };
 
   render() {
-    const { page, message, saving } = this.props;
+    const { page, message, saving, namePlaceholder } = this.props;
     const { name, email, password } = this.state;
 
     return (
@@ -36,7 +36,7 @@ export default class UserForm extends Component {
                 type="name"
                 name="name"
                 value={name}
-                placeholder="Name"
+                placeholder={namePlaceholder ? namePlaceholder : "Name"}
                 autocapitalize="off"
                 required
                 oninput={this.handleInput}

src/netlify-identity.js

@@ -184,7 +184,7 @@ function runRoutes() {
 }
 
 function init(options = {}) {
-  const { APIUrl, logo = true } = options;
+  const { APIUrl, logo = true, namePlaceholder } = options;
   const controlEls = document.querySelectorAll(
     "[data-netlify-identity-menu],[data-netlify-identity-button]"
   );
@@ -205,6 +205,7 @@ function init(options = {}) {
 
   store.init(instantiateGotrue(APIUrl));
   store.modal.logo = logo;
+  store.setNamePlaceholder(namePlaceholder);
   iframe = document.createElement("iframe");
   iframe.id = "netlify-identity-widget";
   iframe.onload = () => {

src/state/store.js

@@ -12,13 +12,18 @@ const store = observable({
   saving: false,
   invite_token: null,
   email_change_token: null,
+  namePlaceholder: null,
   modal: {
     page: "login",
     isOpen: false,
     logo: true
   }
 });
 
+store.setNamePlaceholder = action(function setNamePlaceholder(namePlaceholder) {
+  store.namePlaceholder = namePlaceholder;
+});
+
 store.startAction = action(function startAction() {
   store.saving = true;
   store.error = null;