Merge pull request #9 from babolivier/development

Adding the labels setting

README.md

@@ -79,7 +79,8 @@ First, you must rename the `settings.example.conf` into `settings.conf`, and edi
         "someone.else@example.com"
     ],
     "formOrigin": "https://example.tld",
-    "language": "en"
+    "language": "en",
+    "labels": true
 }
 ```
 
@@ -89,7 +90,9 @@ The `recipients` section is an array containing the e-mail addresses any message
 
 The `formOrigin` part is a string containing the origin of the page you'll include the contact form into. This allows SMAM to work with the [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) security most browser use. For more info on how to fill this field, and what is an origin, please give a look at [the MDN's definition](https://developer.mozilla.org/en-US/docs/Glossary/origin).
 
-Finally, the `language` string tells SMAM in which language you want your form served. Possible values are all the files in `locales/`'s names (without the `.json`). To create your own translation, please read the section below.
+The `language` string tells SMAM in which language you want your form served. Possible values are all the files in `locales/`'s names (without the `.json`). To create your own translation, please read the section below.
+
+Finally, the `labels` setting is a boolean to set whether or not labels will be displayed in the `<form></form>` block. If set to `false`, the form will still display the front-end strings ("Your name", "Your e-mail address"...), but only as placeholders in the text fields. If set to true, the said strings will appear as text fields' placeholders but also as labels outside of the fields. If not set, defaults to `true`.
 
 ## Templating
 

front/form.js

@@ -6,8 +6,9 @@ var items = {
 };
 
 var server  = getServer();
-var token = "";
-var lang = {};
+var token   = "";
+var labels  = true;
+var lang    = {};
 
 var xhr = {
     lang: new XMLHttpRequest(),
@@ -25,7 +26,9 @@ xhr.token.onreadystatechange = function() {
 
 xhr.lang.onreadystatechange = function() {
     if(xhr.lang.readyState == XMLHttpRequest.DONE) {
-        lang = JSON.parse(xhr.lang.responseText);
+        let response = JSON.parse(xhr.lang.responseText);
+        lang = response.translations;
+        labels = response.labels;
     }
 };
 
@@ -115,7 +118,9 @@ function getField(id, placeholder, email, type) {
     var field = document.createElement('div');
     
     field.setAttribute('id', id); // TODO: configurable prefix
-    field.appendChild(getLabel(id, placeholder, type));
+    if(labels) {
+        field.appendChild(getLabel(id, placeholder, type));
+    }
     field.appendChild(getInputField(id, placeholder, email, type));
     
     return field;

server.js

@@ -121,11 +121,23 @@ app.post('/send', function(req, res, next) {
 
 
 // A request on /lang sends translated strings (according to the locale set in
-// the app settings)
+// the app settings), alongside the boolean for the display of labels in the
+// form block.
 app.get('/lang', function(req, res, next) {
     // Response will be JSON
     res.header('Access-Control-Allow-Headers', 'Content-Type');
-    res.status(200).send(locale.client);
+
+    // Preventing un-updated settings files
+    let labels = true;
+    if(settings.labels !== undefined) {
+        labels = settings.labels;
+    }
+    
+    // Send the infos
+    res.status(200).send({
+        'labels': labels,
+        'translations': locale.client
+    });
 });
 
 

settings.example.json

@@ -14,5 +14,6 @@
         "someone.else@example.com"
     ],
     "formOrigin": "https://example.tld",
-    "language": "en"
+    "language": "en",
+    "labels": true
 }