Frontend Validation. Sanitize values in the back.

admin/templates/comments.html.twig

@@ -56,7 +56,7 @@
                         <span data-toggle="children" data-hint="Something" class="hint--bottom js__comments-list-toggle">
                             <i class="page-icon fa fa-fw fa-circle-o children-closed"></i>
                         </span>
-                        <a href="#" class="page-edit">{{ file.data.name ?: file.fileName }}</a>
+                        <a href="#" class="page-edit">{{ file.data.title ?: file.fileName }}</a>
                        <!--  <span class="page-home"><i class="fa fa-home"></i></span> -->
                         <p class="page-route">{% if file.data.hasUnread %}<span class="gpm-version">Has {{file.data.unreadCount}} unread comments</span>{% else %}<span class="gpm-version">{{file.data.comments|length}} comments</span>{% endif %}</p>
 

comments.php

@@ -31,12 +31,6 @@ class CommentsPlugin extends Plugin
     {
         if (!$this->isAdmin()) {
 
-            // //Site
-            // $this->enable([
-            //     'onPageProcessed' => ['onPageProcessed', 0],
-            // ]);
-
-
             $this->enable([
                 'onTwigTemplatePaths' => ['onTwigTemplatePaths', 0],
             ]);
@@ -66,26 +60,37 @@ class CommentsPlugin extends Plugin
     public function addComment()
     {
         $post = !empty($_POST) ? $_POST : [];
-        $filename = DATA_DIR . 'comments' . $post['path'] . '.yaml';
+
+        $lang = filter_var(urldecode($post['lang']), FILTER_SANITIZE_STRING);
+        $path = filter_var(urldecode($post['path']), FILTER_SANITIZE_STRING);
+        $text = filter_var(urldecode($post['text']), FILTER_SANITIZE_STRING);
+        $name = filter_var(urldecode($post['name']), FILTER_SANITIZE_STRING);
+        $email = filter_var(urldecode($post['email']), FILTER_SANITIZE_STRING);
+        $title = filter_var(urldecode($post['title']), FILTER_SANITIZE_STRING);
+
+
+        $filename = DATA_DIR . 'comments';
+        $filename .= ($lang ? '/' . $lang : '');
+        $filename .= $path . '.yaml';
         $file = File::instance($filename);
 
         if (file_exists($filename)) {
             $data = Yaml::parse($file->content());
 
             $data['comments'][] = [
-                'text' => $post['text'],
+                'text' => $text,
                 'date' => gmdate('D, d M Y H:i:s', time()),
-                'author' => $post['name'],
+                'author' => $name,
-                'email' => $post['email']
+                'email' => $email
             ];
         } else {
             $data = array(
-                'name' => $post['name'],
+                'title' => $title,
                 'comments' => array([
-                    'text' => $post['text'],
+                    'text' => $text,
                     'date' => gmdate('D, d M Y H:i:s', time()),
-                    'author' => $post['name'],
+                    'author' => $name,
-                    'email' => $post['email']
+                    'email' => $email
                 ])
             );
         }
@@ -131,13 +136,17 @@ class CommentsPlugin extends Plugin
      * Return the comments associated to the current route
      */
     private function fetchComments() {
-        return $this->getFileContentFromRoute($this->grav['uri']->path() . '.yaml')['comments'];
+        $lang = $this->grav['language']->getActive();
+        $filename = $lang ? '/' . $lang : '';
+        $filename .= $this->grav['uri']->path() . '.yaml';
+
+        return $this->getDataFromFilename($filename)['comments'];
     }
 
     /**
      * Given a data file route, return the YAML content already parsed
      */
-    private function getFileContentFromRoute($fileRoute) {
+    private function getDataFromFilename($fileRoute) {
 
         //Single item details
         $fileInstance = File::instance(DATA_DIR . 'comments/' . $fileRoute);

templates/partials/comments.html.twig

@@ -1,15 +1,36 @@
 <h3>Add a Comment</h3>
 
 <script>
+function validateEmail(email) {
+    var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
+    return re.test(email);
+}
+
 jQuery(document).on('click tap', '.js__add-new-comment', function(event) {
     event.preventDefault();
+
+    var text = $('.js__new-comment-text').val();
+    var name = $('.js__new-comment-name').val();
+    var email = $('.js__new-comment-email').val();
+
+    if (text.length == 0 || email.length == 0 || name.length == 0) {
+        alert('Please fill all the fields');
+        return;
+    }
+
+    if (!validateEmail(email)) {
+        alert('Please enter a valid email');
+        return;
+    }
+
     jQuery.ajax({
         url: "{{ grav.uri.rootUrl }}/add-comment",
         data: {
             text: $('.js__new-comment-text').val(),
             name: $('.js__new-comment-name').val(),
             email: $('.js__new-comment-email').val(),
-            name: "{{ grav.page.header.title }}"
+            title: "{{ grav.page.header.title }}",
+            lang: "{{ grav.language.getActive }}",
             path: "{{ grav.uri.path }}"
         },
         type: 'POST'
@@ -25,25 +46,25 @@ jQuery(document).on('click tap', '.js__add-new-comment', function(event) {
 
 <form>
     <textarea class="js__new-comment-text"></textarea>
-
     Name: <input type="text" class="js__new-comment-name" />
-    <br>
+    Email: <input type="email" class="js__new-comment-email" />
-    Email: <input type="text" class="js__new-comment-email" />
 
-    <br>
     <input type="submit" class="js__add-new-comment" />
 </form>
 
+{% if grav.twig.comments|length %}
+
     <h3>Comments</h3>
 
     <table>
         {% for comment in grav.twig.comments|array_reverse %}
         <tr>
             <td>
-            {{ comment.text }}
+                {{comment.text|e}}
                 <br />
-            Written on {{comment.date}} by {{comment.author}}
+                Written on {{comment.date|e}} by {{comment.author|e}}
             </td>
         </tr>
         {% endfor %}
     </table>
+{% endif %}