Back and front end validation of recipes and chefs

martins-rafael · Nov 13, 2020 · 37933d5 · 37933d5
1 parent 4cf9c79
commit 37933d5
Show file tree

Hide file tree

Showing 22 changed files with 112 additions and 75 deletions.
diff --git a/public/scripts/index.js b/public/scripts/index.js
@@ -77,8 +77,11 @@ const Validate = {
         input.parentNode.appendChild(div);
     },
     clearErrors(input) {
-        const errorDiv = input.parentNode.querySelector('.error');
+        let errorDiv;
+        const formErrors = document.querySelectorAll('.error.messages');
+        if (input) errorDiv = input.parentNode.querySelector('.error');
         if (errorDiv) errorDiv.remove();
+        if (formErrors) formErrors.forEach(error => error.remove());
     },
     isEmail(value) {
         let error = null;
@@ -90,6 +93,23 @@ const Validate = {
             error,
             value
         };
+    },
+    allFields(event) {
+        Validate.clearErrors();
+
+        const items = document.querySelectorAll('.item input, .item select, .item textarea');
+        items.forEach(item => {
+            item.style.borderColor = '#ddd';
+            if (item.value == '' && item.name != 'removed_files' && item.type != 'file') {
+                const message = document.createElement('div');
+                message.classList.add('messages');
+                message.classList.add('error');
+                message.innerHTML = 'Por favor, preencha todos os campos.';
+                document.querySelector('body').appendChild(message);
+                item.style.borderColor = '#ff3131';
+                event.preventDefault();
+            }
+        });
     }
 }
 

diff --git a/public/styles/global.css b/public/styles/global.css
@@ -196,7 +196,7 @@ button.btn-delete:hover {
 }
 
 .messages {
-    position: absolute;
+    position: fixed;
     top: 16px;
     right: 16px;
     display: flex;

diff --git a/src/app/controllers/ChefController.js b/src/app/controllers/ChefController.js
@@ -18,16 +18,6 @@ module.exports = {
     },
     async post(req, res) {
         try {
-            const keys = Object.keys(req.body);
-
-            for (let key of keys) {
-                if (req.body[key] == '')
-                    return res.send('Por favor, preencha todos os campos.');
-            };
-
-            if (req.files.length == 0)
-                return res.send('Por favor, envie uma imagem.');
-
             const { filename, path } = req.files[0];
             const file_id = await File.create({ name: filename, path });
 
@@ -59,16 +49,6 @@ module.exports = {
     },
     async put(req, res) {
         try {
-            const keys = Object.keys(req.body);
-
-            for (let key of keys) {
-                if (req.body[key] == '' & key != 'removed_files')
-                    return res.send('Por favor, preencha todos os campos.');
-            };
-
-            if (req.body.removed_files && req.files == 0)
-                return res.send('Por favor, envie uma imagem.');
-
             let file_id;
 
             if (req.files.length != 0) {

diff --git a/src/app/controllers/RecipeController.js b/src/app/controllers/RecipeController.js
@@ -32,16 +32,6 @@ module.exports = {
     },
     async post(req, res) {
         try {
-            const keys = Object.keys(req.body);
-
-            for (let key of keys) {
-                if (req.body[key] == '')
-                    return res.send('Por favor, preencha todos os campos.');
-            };
-
-            if (req.files.length == 0)
-                return res.send('Por favor, envie pelo menos uma imagem.');
-
             const { chef: chef_id, title, ingredients,
                 preparation, information } = req.body;
 
@@ -93,13 +83,6 @@ module.exports = {
     },
     async put(req, res) {
         try {
-            const keys = Object.keys(req.body);
-
-            for (let key of keys) {
-                if (req.body[key] == '' && key != 'removed_files')
-                    return res.send('Por favor, preencha todos os campos.');
-            };
-
             let { id, removed_files, chef: chef_id, title, ingredients,
                 preparation, information } = req.body;
 

diff --git a/src/app/validators/chef.js b/src/app/validators/chef.js
@@ -0,0 +1,27 @@
+const { checkAllFields } = require('../../lib/utils');
+
+function post(req, res, next) {
+    const fillAllFields = checkAllFields(req.body);
+    if (fillAllFields) return res.send(fillAllFields.error);
+
+    if (req.files.length == 0) {
+        return res.send('Por favor, envie uma imagem.');
+    }
+    next();
+}
+
+function put(req, res, next) {
+    const fillAllFields = checkAllFields(req.body);
+    if (fillAllFields) return res.send(fillAllFields.error);
+
+    if (req.body.removed_files && req.files == 0) {
+        return res.send('Por favor, envie uma imagem.');
+    }
+
+    next();
+}
+
+module.exports = {
+    post,
+    put
+}
diff --git a/src/app/validators/recipe.js b/src/app/validators/recipe.js
@@ -0,0 +1,22 @@
+const { checkAllFields } = require('../../lib/utils');
+
+function post(req, res, next) {
+    const fillAllFields = checkAllFields(req.body);
+    if (fillAllFields) return res.send(fillAllFields.error);
+
+    if (req.files.length == 0) {
+        return res.send('Por favor, envie uma imagem.');
+    }
+    next();
+}
+
+function put(req, res, next) {
+    const fillAllFields = checkAllFields(req.body);
+    if (fillAllFields) return res.send(fillAllFields.error);
+    next();
+}
+
+module.exports = {
+    post,
+    put
+}
diff --git a/src/app/validators/session.js b/src/app/validators/session.js
@@ -5,6 +5,11 @@ const User = require('../models/User');
 async function login(req, res, next) {
     const { email, password } = req.body;
 
+    if (!email || !password) return res.render('session/login', {
+        user: req.body,
+        error: 'Por favor, entre com seu email e senha.'
+    });
+
     const mailFormat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
     if (!email.match(mailFormat)) return res.render('session/login', {
         user: req.body,

diff --git a/src/app/validators/user.js b/src/app/validators/user.js
@@ -1,17 +1,5 @@
 const User = require('../models/User');
-
-function checkAllFields(body) {
-    const keys = Object.keys(body);
-
-    for (let key of keys) {
-        if (body[key] == '') {
-            return {
-                user: body,
-                error: 'Por favor, preencha todos os campos!'
-            };
-        }
-    }
-}
+const { checkAllFields } = require('../../lib/utils');
 
 async function show(req, res, next) {
     const { userId: id } = req.session;

diff --git a/src/app/views/admin/chefs/create.njk b/src/app/views/admin/chefs/create.njk
@@ -12,7 +12,7 @@
                 <h2>Novo Chef</h2>
                 <div>
                     <a href="/admin/chefs" class="btn cancel">Cancelar</a>
-                    <button class="btn" type="submit">Salvar chef</button>
+                    <button class="btn" type="submit" onclick="Validate.allFields(event)">Salvar chef</button>
                 </div>
             </div>
 

diff --git a/src/app/views/admin/chefs/edit.njk b/src/app/views/admin/chefs/edit.njk
@@ -13,7 +13,7 @@
 
                 <div>
                     <button class="btn btn-delete" type="submit" form="form-delete">Deletar</button>
-                    <button class="btn" type="submit">Salvar chef</button>
+                    <button class="btn" type="submit" onclick="Validate.allFields(event)">Salvar chef</button>
                 </div>
             </div>
 

diff --git a/src/app/views/admin/recipes/create.njk b/src/app/views/admin/recipes/create.njk
@@ -12,7 +12,7 @@
                 <h2>Nova receita</h2>
                 <div>
                     <a href="/admin/recipes" class="btn cancel">Cancelar</a>
-                    <button class="btn" type="submit">Salvar receita</button>
+                    <button class="btn" type="submit" onclick="Validate.allFields(event)">Salvar receita</button>
                 </div>
             </div>
 

diff --git a/src/app/views/admin/recipes/edit.njk b/src/app/views/admin/recipes/edit.njk
@@ -13,7 +13,7 @@
 
                 <div>
                     <button class="btn btn-delete" type="submit" form="form-delete">Deletar</button>
-                    <button class="btn" type="submit">Salvar receita</button>
+                    <button class="btn" type="submit" onclick="Validate.allFields(event)">Salvar receita</button>
                 </div>
             </div>
 

diff --git a/src/app/views/session/login.njk b/src/app/views/session/login.njk
@@ -21,7 +21,7 @@
                         <a href="/admin/users/forgot-password">Perdeu a senha?</a>
                     </li>
                     <li>
-                        <button class="btn" type="submit">Acessar</button>
+                        <button onclick="Validate.allFields(event)" class="btn" type="submit">Acessar</button>
                     </li>
                 </ul>
             </div>

diff --git a/src/app/views/templates/includes/chefs/chefs-fields.njk b/src/app/views/templates/includes/chefs/chefs-fields.njk
@@ -4,7 +4,6 @@
         <input
             type="text"
             name="name"
-            required
             value="{{chef.name}}"
         >
     </div>

diff --git a/src/app/views/templates/includes/recipes/recipes-fields.njk b/src/app/views/templates/includes/recipes/recipes-fields.njk
@@ -38,7 +38,7 @@
         <input
             type="text"
             name="title"
-            required
+
             value="{{recipe.title}}"
         >
     </div>
@@ -47,7 +47,7 @@
 <div class="item">
     <div>Chef</div>
     <div>
-        <select name="chef" required>
+        <select name="chef">
             <option disabled selected value>Selecione um chef</option>
             {% for chef in chefsOptions %}
                 <option
@@ -68,7 +68,7 @@
             <input
                 type="text"
                 name="ingredients[]"
-                required
+
                 value="{{ingredient}}"
             >
         </div>
@@ -77,7 +77,7 @@
             <input
                 type="text"
                 name="ingredients[]"
-                required
+
             >
         </div>
     {% endfor %}
@@ -92,7 +92,7 @@
             <input
                 type="text"
                 name="preparation[]"
-                required
+
                 value="{{preparation}}"
             >
         </div>
@@ -101,7 +101,7 @@
             <input
                 type="text"
                 name="preparation[]"
-                required
+
             >
         </div>
     {% endfor %}
@@ -112,6 +112,6 @@
 <div class="item">
     <div>informações adicionais</div>
     <div>
-        <textarea name="information" required>{{recipe.information}}</textarea>
+        <textarea name="information">{{recipe.information}}</textarea>
     </div>
 </div>
diff --git a/src/app/views/templates/includes/sessions/login-fields.njk b/src/app/views/templates/includes/sessions/login-fields.njk
@@ -5,7 +5,6 @@
             type="email"
             name="email"
             placeholder="Digite seu email"
-            required
             value="{{user.email}}"
             onblur="Validate.apply(this, 'isEmail')"
         >
@@ -19,7 +18,6 @@
             type="password"
             name="password"
             placeholder="Digite sua senha"
-            required
         >
     </div>
 </div>
diff --git a/src/app/views/users/edit.njk b/src/app/views/users/edit.njk
@@ -13,7 +13,7 @@
 
                 <div>
                     <button class="btn btn-delete" type="submit" form="form-delete">Deletar</button>
-                    <button class="btn" type="submit">Salvar</button>
+                    <button class="btn" type="submit" onclick="Validate.allFields(event)">Salvar</button>
                 </div>
             </div>
 

diff --git a/src/app/views/users/index.njk b/src/app/views/users/index.njk
@@ -12,7 +12,8 @@
                 <h2>Bem-vindo {{user.name}}</h2>
 
                 <div>
-                    <button class="btn" type="submit">Salvar</button>
+                    <button class="btn" type="submit" onclick="Validate.allFields(event)"
+                    >Salvar</button>
                 </div>
             </div>
 

diff --git a/src/app/views/users/register.njk b/src/app/views/users/register.njk
@@ -13,7 +13,7 @@
 
                 <div>
                     <a href="/admin/users" class="btn cancel">Cancelar</a>
-                    <button class="btn" type="submit">Salvar</button>
+                    <button class="btn" type="submit" onclick="Validate.allFields(event)">Salvar</button>
                 </div>
             </div>
 

diff --git a/src/lib/utils.js b/src/lib/utils.js
@@ -10,7 +10,7 @@ module.exports = {
                         <img
                             style="display:block;"
                             alt="Logo Foodfy"
-                            src="https://raw.githubusercontent.com/martins-rafael/foodfy/master/public/images/logo_admin.png"
+                            src="https://raw.githubusercontent.com/martins-rafael/foodfy/master/public/assets/logo_admin.png"
                         />
                     </td>
                 </tr>
@@ -46,5 +46,17 @@ module.exports = {
             src: `${file.path.replace('public', '')}`
         }));
         return files;
+    },
+    checkAllFields(body) {
+        const keys = Object.keys(body);
+
+        for (let key of keys) {
+            if (body[key] == '' & key != 'removed_files') {
+                return {
+                    user: body,
+                    error: 'Por favor, preencha todos os campos!'
+                };
+            }
+        }
     }
 };