Ajout mini backend Node.js

backend-init.js

@@ -0,0 +1,17 @@
+var express      = require('express');
+var bodyParser   = require('body-parser');
+var cors         = require('cors');
+var app          = express();
+
+app.use(cors());
+
+app.use(function(req, res, next) {
+   res.header("Access-Control-Allow-Origin", "*");
+   res.header('Access-Control-Allow-Methods', 'DELETE, PUT, GET, POST');
+   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
+   next();
+});
+app.use(express.static(__dirname));
+app.use(bodyParser.json());
+
+module.exports = app;

backend.js

@@ -0,0 +1,28 @@
+/**
+ * Initialisation du serveur
+ */
+var app = require('./backend-init');
+
+var userList = [];
+
+app.post('/register', function(req, res) {
+  var user = req.body;
+  userList.push({
+    id: userList.length + 1,
+    username: user.username,
+    email:    user.email,
+    password: user.password
+  });
+  console.log('Utilisateur enregistré: ', user);
+
+});
+
+app.get('/username-check', function(req, res) {
+  console.log(req.query);
+  res.json({ success: true });
+});
+
+
+
+console.log('Le serveur écoute sur le port 3001. Laissez cette console ouverte !')
+app.listen(3001);

exemples/validation-de-formulaires-bootstrap/script.js

@@ -1,3 +1,4 @@
+
 $('#registerInputUsername1')
 .change(function(e) {
     var inputUsername = $(this);
@@ -8,15 +9,28 @@ $('#registerInputUsername1')
         inputUsername
         .addClass('is-invalid')
         .removeClass('is-valid');
+        return;
     }
-    else {
-        inputUsername
-        .addClass('is-valid')
-        .removeClass('is-invalid');
-    }
-    
-    
-})
+
+    $.get(
+        'http://localhost:3001/username-check?username=' + username,
+        function(response) {
+            console.log(response.success)
+            if(response.success) {
+                inputUsername
+                .addClass('is-valid')
+                .removeClass('is-invalid');
+            }
+            else {
+                inputUsername
+                .addClass('is-invalid')
+                .removeClass('is-valid');
+                return;
+            }
+                
+        }
+    );
+});
 
 var onglets = $('#onglets li a');
 

js/editor.js

@@ -29,7 +29,7 @@ $(document).ready(function() {
     }
   });
   $window.resize(function() {
-    // $editor.height($window.height() - 96);
+    $editor.width($leftPanel.width());
     $(".panel-container").height($(window).height());
 
   });
@@ -43,7 +43,7 @@ $(document).ready(function() {
   editor.getSession().setUseWrapMode(true);
 
   function setCurrentHash(slug) {
-    console.log('setCurrentHash', slug)
+    // console.log('setCurrentHash', slug)
     if(slug) {
       // console.log('save current hash', slug);
       window.location.hash = currentHash = slug;
@@ -67,7 +67,7 @@ $(document).ready(function() {
   }
 
   function editorContentChanged() {
-    console.log('editorContent changed')
+    // console.log('editorContent changed')
     if(saveTimeout1 || saveTimeout2) {
       clearTimeout(saveTimeout1);
       clearTimeout(saveTimeout2);
@@ -113,7 +113,7 @@ $(document).ready(function() {
   }
 
   function loadExample(exampleSlug) {
-    console.log('loadExample', exampleSlug);
+    // console.log('loadExample', exampleSlug);
     var serverPath = 'exemples/' + exampleSlug + '/';
     loadAsync(serverPath + 'script.js', 'text')
     .then(javascript => $editorJs.html(javascript))

package.json

@@ -2,6 +2,7 @@
   "name": "ipi-inline-editor",
   "dependencies": {
     "body-parser": "^1.18.2",
+    "cors": "^2.8.4",
     "express": "^4.16.2",
     "json-beautify": "^1.0.1",
     "lodash": "^4.17.4",