Merge pull request #5 from babolivier/development

Added translations

README.md

@@ -78,15 +78,18 @@ First, you must rename the `settings.example.conf` into `settings.conf`, and edi
         "you@example.tld",
         "someone.else@example.com"
     ],
-    "formOrigin": "https://example.tld"
+    "formOrigin": "https://example.tld",
+    "language": "en"
 }
 ```
 
 The `mailserver` section is the set of parameters which will be passed to nodemailer's transporter initialisation, describing the output mail server and following the same structure as the `option` object in [nodemailer's SMTP configuration section](https://github.com/nodemailer/nodemailer#set-up-smtp). Please head there to have the full list of parameters.
 
-The `recipients` server is an array containing the e-mail addresses any message sent via the form will be sent to. Just write down the form's recipient(s)'s addresse(s).
+The `recipients` section is an array containing the e-mail addresses any message sent via the form will be sent to. Just write down the form's recipient(s)'s addresse(s).
 
-Finally, 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).
+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.
 
 ## Templating
 
@@ -125,6 +128,11 @@ Now it's all yours to make good use of all these identifiers and have a magnific
 
 I think that the code in itself is clear enough, if not please tell me so I can detail everything here!
 
+## Translating
+
+Right now, SMAM is only available in French and English. If you want to implement your own language, you can do so by creating a new file in the `locales/` directory, named following your language's identifier with the `.json` extension (`en.json` for exemple). You can then have a look at the strings in `en.json`, copy them and translate them in your language. To use this translation, just set the `language` field (in your settings file) to your language's identifier.
+
+As I don't speak all languages, [pull requests](#contribute) with new languages are more than welcome! You'd be sharing your knowledge with the whole community and help more people using SMAM around the world :smile:
 
 ## Contribute
 

front/form.js

@@ -6,16 +6,44 @@ var items = {
 };
 
 var server  = getServer();
-var xhrSend = new XMLHttpRequest();
-
 var token = "";
-var xhrToken = new XMLHttpRequest();
-xhrToken.onreadystatechange = function() {
-    if(xhrToken.readyState == XMLHttpRequest.DONE) {
-        token = xhrToken.responseText;
-    }
+var lang = {};
+
+var xhr = {
+    lang: new XMLHttpRequest(),
+    token: new XMLHttpRequest(),
+    send: new XMLHttpRequest()
 }
 
+// XHR callbacks
+
+xhr.token.onreadystatechange = function() {
+    if(xhr.token.readyState == XMLHttpRequest.DONE) {
+        token = xhr.token.responseText;
+    }
+};
+
+xhr.lang.onreadystatechange = function() {
+    if(xhr.lang.readyState == XMLHttpRequest.DONE) {
+        lang = JSON.parse(xhr.lang.responseText);
+    }
+};
+
+xhr.send.onreadystatechange = function() {
+    if(xhr.send.readyState == XMLHttpRequest.DONE) {
+        let status = document.getElementById('form_status');
+        status.setAttribute('class', '');
+        if(xhr.send.status === 200) {
+            cleanForm();
+            status.setAttribute('class', 'success');
+            status.innerHTML = lang.send_status_success;
+        } else {
+            status.setAttribute('class', 'failure');
+            status.innerHTML = lang.send_status_failure;
+        }
+    }
+};
+
 
 // Returns the server's base URI based on the user's script tag
 // return: the SMAM server's base URI
@@ -40,6 +68,9 @@ function getServer() {
 // id: HTML identifier of the document's block to create the form into
 // return: nothing
 function generateForm(id) {
+    // Get translated strings
+    getLangSync();
+    
     var el = document.getElementById(id);
     
     // Set the form's behaviour
@@ -51,10 +82,10 @@ function generateForm(id) {
     el.appendChild(status);
     
     var input = {
-        name: getField(items.name, 'Your name', false, 'input'), // TODO: configurable prefix
-        addr: getField(items.addr, 'Your e-mail address', true, 'input'),
-        subj: getField(items.subj, 'Your message\'s subject', false, 'input'),
-        text: getField(items.text, 'Your message', false, 'textarea')
+        name: getField(items.name, lang.form_name_label, false, 'input'),
+        addr: getField(items.addr, lang.form_addr_label, true, 'input'),
+        subj: getField(items.subj, lang.form_subj_label, false, 'input'),
+        text: getField(items.text, lang.form_mesg_label, false, 'textarea')
     };
     
     // Adding nodes to document
@@ -66,24 +97,7 @@ function generateForm(id) {
     
     // Adding submit button
     
-    el.appendChild(getSubmitButton('form_subm', 'Send the mail'));
-    
-    // Setting the XHR callback
-    
-    xhrSend.onreadystatechange = function() {
-        if(xhrSend.readyState == XMLHttpRequest.DONE) {
-            let status = document.getElementById('form_status');
-            status.setAttribute('class', '');
-            if(xhrSend.status === 200) {
-                cleanForm();
-                status.setAttribute('class', 'success');
-                status.innerHTML = 'Your message has been sent.';
-            } else {
-                status.setAttribute('class', 'failure');
-                status.innerHTML = 'An error happened while sending your message, please retry later.';
-            }
-        }
-    };
+    el.appendChild(getSubmitButton('form_subm', lang.form_subm_label));
     
     // Retrieve the token from the server
     
@@ -177,11 +191,11 @@ function sendForm() {
     // Clear status
     let status = document.getElementById('form_status');
     status.setAttribute('class', 'sending');
-    status.innerHTML = 'Sending the e-mail';
+    status.innerHTML = lang.send_status_progress;
     
-    xhrSend.open('POST', server + '/send');
-    xhrSend.setRequestHeader('Content-Type', 'application/json');
-    xhrSend.send(JSON.stringify(getFormData()));
+    xhr.send.open('POST', server + '/send');
+    xhr.send.setRequestHeader('Content-Type', 'application/json');
+    xhr.send.send(JSON.stringify(getFormData()));
     
     // Get a new token
     getToken();
@@ -211,9 +225,17 @@ function cleanForm() {
 }
 
 
-// Ask the server for a token
+// Asks the server for a token
 // return: nothing
 function getToken() {
-    xhrToken.open('GET', server + '/register');
-    xhrToken.send();
+    xhr.token.open('GET', server + '/register');
+    xhr.token.send();
+}
+
+
+// Asks the server for translated strings to display
+// return: notghing
+function getLangSync() {
+    xhr.lang.open('GET', server + '/lang', false);
+    xhr.lang.send();
 }

locales/en.json

@@ -0,0 +1,20 @@
+{
+    "client": {
+        "form_name_label": "Your name",
+        "form_addr_label": "Your e-mail address",
+        "form_subj_label": "Your message's subject",
+        "form_mesg_label": "Your message",
+        "form_subm_label": "Send the mail",
+        "send_status_success": "Your message has been sent.",
+        "send_status_failure": "An error happened while sending your message, please retry later.",
+        "send_status_progress": "Sending the e-mail"
+    },
+    "server": {
+        "log_server_start": "Server started on",
+        "log_sending": "Sending message from",
+        "log_send_success": "Message sent to",
+        "log_send_failure": "Message failed to send to",
+        "log_invalid_token": "just tried to send a message with an invalid token",
+        "log_cleared_token": "Cleared expired tokens"
+    }
+}

locales/fr.json

@@ -0,0 +1,20 @@
+{
+    "client": {
+        "form_name_label": "Votre nom",
+        "form_addr_label": "Votre adresse e-mail",
+        "form_subj_label": "Sujet de votre message",
+        "form_mesg_label": "Votre message",
+        "form_subm_label": "Envoyer",
+        "send_status_success": "Votre message a été envoyé.",
+        "send_status_failure": "Une erreur est survenue lors de l'envoi du message, merci de réessayer plus tard.",
+        "send_status_progress": "Envoi du message en cours"
+    },
+    "server": {
+        "log_server_start": "Serveur démarré pour",
+        "log_sending": "Envoi d'un message de",
+        "log_send_success": "Message envoyé à",
+        "log_send_failure": "Erreur lors de l'envoi du message à",
+        "log_invalid_token": "vient d'essayer d'envoyer un message avec un jeton invalide",
+        "log_cleared_token": "Les jetons expirés ont été effacés"
+    }
+}

server.js

@@ -3,6 +3,10 @@ var nodemailer  = require('nodemailer');
 var crypto      = require('crypto');
 var settings    = require('./settings');
 
+// Translation
+var locale  = require('./locales/' + settings.language);
+var lang    = locale.server;
+
 // Web server
 var bodyParser  = require('body-parser');
 var cors        = require('cors');
@@ -98,7 +102,7 @@ app.post('/send', function(req, res, next) {
     // text entered by the user
     params.html = pug.renderFile('template.pug', params);
     
-    log.info('Sending message from ' + params.replyTo);
+    log.info(lang.log_sending, params.replyTo);
     
     // Send the email to all users
     sendMails(params, function(err, infos) {
@@ -116,13 +120,22 @@ app.post('/send', function(req, res, next) {
 });
 
 
+// A request on /lang sends translated strings (according to the locale set in
+// the app settings)
+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);
+});
+
+
 // Use either the default port or the one chosen by the user (PORT env variable)
 var port = process.env.PORT || 1970;
 // Same for the host (using the HOST env variable)
 var host = process.env.HOST || '0.0.0.0';
 // Start the server
 app.listen(port, host, function() {
-    log.info('Server started on ' + host + ':' + port);
+    log.info(lang.log_server_start, host + ':' + port);
 });
 
 
@@ -166,11 +179,11 @@ function sendMails(params, update, done) {
 // return: nothing
 function logStatus(infos) {
     if(infos.accepted.length !== 0) {
-        log.info('Message sent to ' + infos.accepted[0]);
+        log.info(lang.log_send_success, infos.accepted[0]);
     }
     if(infos.rejected.length !== 0) {
         status.failed++;
-        log.info('Message failed to send to ' + infos.rejected[0]);
+        log.info(lang.log_send_failure, infos.rejected[0]);
     }
 }
 
@@ -199,7 +212,7 @@ function checkToken(ip, token) {
     }
     
     if(!verified) {
-        log.warn(ip + ' just tried to send a message with an invalid token');
+        log.warn(ip, lang.log_invalid_token);
     }
     
     return verified;
@@ -239,5 +252,5 @@ function cleanTokens() {
         }
     }
     
-    log.info('Cleared expired tokens');
+    log.info(lang.log_cleared_token);
 }

settings.example.json

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

template.pug

@@ -5,6 +5,6 @@ html
             span= subject
         p.from
             span(style="font-weight:bold") Sent from: 
-            span= from
+            span= replyTo
         
         p= html