Update du mini backend + exemple

backend.js

@@ -5,16 +5,29 @@ var app = require('./backend-init');
 
 var userList = [];
 
-app.post('/register', function(req, res) {
-  var user = req.body;
+function createNewUser(user) {
+  if(! user || ! user.username || ! user.email || ! user.password) {
+    throw new Error('Champs manquants');
+  }
   userList.push({
     id: userList.length + 1,
     username: user.username,
     email:    user.email,
     password: user.password
   });
-  console.log('Utilisateur enregistré: ', user);
+}
 
+app.post('/register', function(req, res) {
+  console.log(req.body);
+  var user = req.body;
+  try {
+    createNewUser(user);
+    console.log('Utilisateur enregistré: ', user);
+    res.json({ user: user });
+  }
+  catch(err) {
+    res.status(400).json({ error: err.message });
+  }
 });
 
 app.get('/username-check', function(req, res) {

exemples/validation-de-formulaires-bootstrap/contenu.html

@@ -8,15 +8,15 @@
 
 </ul>
 <div class="tab" id="tab-login">
-    <form>
+    <form id="form-login">
       <div class="form-group">
-        <label for="loginInputEmail1">Email address</label>
-        <input type="email" class="form-control" id="loginInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+        <label for="login-email">Email address</label>
+        <input type="email" class="form-control" id="login-email" aria-describedby="emailHelp" placeholder="Enter email">
         <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
       </div>
       <div class="form-group">
-        <label for="loginInputPassword1">Password</label>
-        <input type="password" class="form-control" id="loginInputPassword1" placeholder="Password">
+        <label for="login-password">Password</label>
+        <input type="password" class="form-control" id="login-password" placeholder="Password">
       </div>
       <div class="form-check">
         <label class="form-check-label">
@@ -28,19 +28,19 @@
     </form>
 </div>
 <div class="tab" id="tab-register" style="display:none">
-    <form>
+    <form id="form-register">
       <div class="form-group">
-        <label for="registerInputUsername1">Username</label>
-        <input type="text" class="form-control" id="registerInputUsername1" aria-describedby="usernameHelp" placeholder="Enter username" />
+        <label for="register-username">Username</label>
+        <input type="text" class="form-control" id="register-username" aria-describedby="usernameHelp" placeholder="Enter username" />
       </div>
       <div class="form-group">
-        <label for="registerInputEmail1">Email address</label>
-        <input type="email" class="form-control" id="registerInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+        <label for="register-email">Email address</label>
+        <input type="email" class="form-control" id="register-email" aria-describedby="emailHelp" placeholder="Enter email">
         <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
       </div>
       <div class="form-group">
-        <label for="registerInputPassword1">Password</label>
-        <input type="password" class="form-control" id="registerInputPassword1" placeholder="Password">
+        <label for="register-password">Password</label>
+        <input type="password" class="form-control" id="register-password" placeholder="Password">
       </div>
 
       <button type="submit" class="btn btn-primary">Register</button>

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

@@ -1,5 +1,13 @@
+var backendUrl = 'http://' + window.location.host.replace('3000', '3001');
+console.log(backendUrl);
 
-$('#registerInputUsername1')
+$.ajaxSetup({
+    headers: {
+        'content-type': 'application/json'
+    }
+});
+
+$('#register-username')
 .change(function(e) {
     var inputUsername = $(this);
     var username = inputUsername.val();
@@ -27,11 +35,26 @@ $('#registerInputUsername1')
                 .removeClass('is-valid');
                 return;
             }
-                
         }
     );
 });
 
+
+$('#form-register').submit(function(e) {
+    var username = $('#register-username').val();
+    var email    = $('#register-email').val();
+    var password = $('#register-password').val();
+    var user = {
+        username: username,
+        email: email,
+        password: password
+    };
+    var userJSON = JSON.stringify(user);
+    console.log(username, email, password);
+    e.preventDefault();
+    $.post(backendUrl + '/register', userJSON, 'json');
+})
+
 var onglets = $('#onglets li a');
 
 onglets.click(function(e) {

js/editor.js

@@ -1,4 +1,5 @@
 $(document).ready(function() {
+
   var $editor        = $('#editor');
   var $editorJs      = $('#editor-javascript');
   var $editorHtml    = $('#editor-html');
@@ -30,8 +31,6 @@ $(document).ready(function() {
   });
   $window.resize(function() {
     $editor.width($leftPanel.width());
-    $(".panel-container").height($(window).height());
-
   });
   $(".panel-container").height($(window).height());
   $editor.width($leftPanel.width());