chg: [UI] refactor of the genericForm/submitbutton to support ajax

app/View/Attributes/add.ctp

@@ -1,166 +1,117 @@
-<div class="attributes <?php if (!isset($ajax) || !$ajax) echo 'form';?>">
 <?php
-    $url_params = $action == 'add' ? 'add/' . $event_id : 'edit/' . $attribute['Attribute']['id'];
+    $modelForForm = 'Attribute';
-    echo $this->Form->create('Attribute', array('id', 'url' => '/attributes/' . $url_params));
+    echo $this->element('genericElements/Form/genericForm', array(
-?>
+        'form' => $this->Form,
-    <fieldset>
+        'data' => array(
-        <legend><?php echo $action == 'add' ? __('Add Attribute') : __('Edit Attribute'); ?></legend>
+            'title' => $action === 'add' ? __('Add Attribute') : __('Edit Attribute'),
-        <div id="formWarning" class="message ajaxMessage"></div>
+            'model' => $modelForForm,
-        <div id="compositeWarning" class="message <?php echo !empty($ajax) ? 'ajaxMessage' : '';?>" style="display:none;">Did you consider adding an object instead of a composite attribute?</div>
+            'fields' => array(
-        <div class="add_attribute_fields">
+                array(
-            <?php
+                    'field' => 'event_id',
-            echo $this->Form->hidden('event_id');
+                    'class' => 'org-id-picker-hidden-field',
-            echo $this->Form->input('category', array(
-                'empty' => __('(choose one)'),
-                'label' => __('Category ') . $this->element('formInfo', array('type' => 'category')),
-            ));
-            echo $this->Form->input('type', array(
-                'empty' => __('(first choose category)'),
-                'label' => __('Type ') . $this->element('formInfo', array('type' => 'type')),
-            ));
-
-            $initialDistribution = 5;
-            if (Configure::read('MISP.default_attribute_distribution') != null) {
-                if (Configure::read('MISP.default_attribute_distribution') === 'event') {
-                    $initialDistribution = 5;
-                } else {
-                    $initialDistribution = Configure::read('MISP.default_attribute_distribution');
-                }
-            }
-
-            ?>
-                <div class="input clear"></div>
-            <?php
-            $distArray = array(
-                'options' => array($distributionLevels),
-                'label' => __('Distribution ') . $this->element('formInfo', array('type' => 'distribution')),
-            );
-
-            if ($action == 'add') {
-                $distArray['selected'] = $initialDistribution;
-            }
-
-            echo $this->Form->input('distribution', $distArray);
-            ?>
-                <div id="SGContainer" style="display:none;">
-            <?php
-                if (!empty($sharingGroups)) {
-                    echo $this->Form->input('sharing_group_id', array(
-                            'options' => array($sharingGroups),
-                            'label' => __('Sharing Group'),
-                    ));
-                }
-            ?>
-                </div>
-            <?php
-            echo $this->Form->input('value', array(
-                    'type' => 'textarea',
-                    'error' => array('escape' => false),
-                    'div' => 'input clear',
-                    'class' => 'input-xxlarge'
-            ));
-            ?>
-                <div class="input clear"></div>
-            <?php
-            echo $this->Form->input('comment', array(
                     'type' => 'text',
-                    'label' => __('Contextual Comment'),
+                    'hidden' => true
-                    'error' => array('escape' => false),
+                ),
+                array(
+                    'field' => 'category',
+                    'class' => 'input',
+                    'empty' => __('(choose one)'),
+                    'options' => $categories,
+                    'stayInLine' => 1
+                ),
+                array(
+                    'field' => 'type',
+                    'class' => 'input',
+                    'empty' => __('(choose category first)'),
+                    'options' => $types
+                ),
+                array(
+                    'field' => 'distribution',
+                    'class' => 'input',
+                    'options' => $distributionLevels,
+                    'default' => isset($attribute['Attribute']['distribution']) ? $attribute['Attribute']['distribution'] : $initialDistribution,
+                    'stayInLine' => 1
+                ),
+                array(
+                    'field' => 'sharing_group_id',
+                    'class' => 'input',
+                    'options' => $sharingGroups,
+                    'label' => __("Sharing Group")
+                ),
+                array(
+                    'field'=> 'value',
+                    'type' => 'textarea',
+                    'class' => 'input span6',
+                    'div' => 'input clear'
+                ),
+                array(
+                    'field' => 'comment',
+                    'type' => 'text',
+                    'class' => 'input span6',
                     'div' => 'input clear',
-                    'class' => 'input-xxlarge'
+                    'label' => __("Contextual Comment")
-            ));
+                ),
-            ?>
+                array(
-            <div class="input clear"></div>
+                    'field' => 'to_ids',
-            <?php
+                    'type' => 'checkbox',
-            echo $this->Form->input('to_ids', array(
+                    'label' => __("for Intrusion Detection System"),
-                        'label' => __('for Intrusion Detection System'),
+                    //'stayInLine' => 1
-                        'type' => 'checkbox'
+                ),
-            ));
+                array(
-            echo $this->Form->input('batch_import', array(
+                    'field' => 'batch_import',
                     'type' => 'checkbox'
-            ));
+                ),
-            echo '<div class="input clear"></div>';
+                array(
-            echo $this->Form->input('disable_correlation', array(
+                    'field' => 'disable_correlation',
                     'type' => 'checkbox'
-            ));
+                ),
-        ?>
+                '<div id="extended_event_preview" style="width:446px;"></div>'
-        </div>
+            ),
-    </fieldset>
+            'submit' => array(
-    <p id="notice_message" style="display:none;"></p>
+                'action' => $action,
-    <?php if ($ajax): ?>
+                'ajaxSubmit' => sprintf(
-        <div class="overlay_spacing">
+                    'submitPopoverForm(%s, %s)',
-            <span id="submitButton" class="btn btn-primary" style="margin-bottom:5px;float:left;" title="<?php echo __('Submit'); ?>" role="button" tabindex="0" aria-label="<?php echo __('Submit'); ?>" onClick="submitPopoverForm('<?php echo $action == 'add' ? $event_id : $attribute['Attribute']['id'];?>', '<?php echo $action; ?>')"><?php echo __('Submit'); ?></span>
+                    "'" . ($action == 'add' ? h($event_id) : h($attribute['Attribute']['id'])) . "'",
-            <span class="btn btn-inverse" style="float:right;" title="<?php echo __('Cancel'); ?>" role="button" tabindex="0" aria-label="<?php echo __('Cancel'); ?>" id="cancel_attribute_add"><?php echo __('Cancel'); ?></span>
+                    "'" . h($action) . "'"
-        </div>
+                )
-    <?php
+            )
-        else:
+        )
-    ?>
+    ));
-    <?php
-            echo $this->Form->button('Submit', array('class' => 'btn btn-primary'));
-        endif;
-        echo $this->Form->end();
-    ?>
-</div>
-<?php
     if (!$ajax) {
-        $event['Event']['id'] = $event_id;
+        echo $this->element('/genericElements/SideMenu/side_menu', array('menuList' => 'event-collection', 'menuItem' => $this->action === 'add' ? 'add' : 'editEvent'));
-        $event['Event']['published'] = $published;
-        echo $this->element('/genericElements/SideMenu/side_menu', array('menuList' => 'event', 'menuItem' => 'addAttribute', 'event' => $event));
-    }
-?>
-<script type="text/javascript">
-var notice_list_triggers = <?php echo $notice_list_triggers; ?>;
-var fieldsArray = new Array('AttributeCategory', 'AttributeType', 'AttributeValue', 'AttributeDistribution', 'AttributeComment', 'AttributeToIds', 'AttributeBatchImport', 'AttributeSharingGroupId');
-<?php
-    $formInfoTypes = array('distribution' => 'Distribution', 'category' => 'Category', 'type' => 'Type');
-    echo 'var formInfoFields = ' . json_encode($formInfoTypes) . PHP_EOL;
-    foreach ($formInfoTypes as $formInfoType => $humanisedName) {
-        echo 'var ' . $formInfoType . 'FormInfoValues = {' . PHP_EOL;
-        foreach ($info[$formInfoType] as $key => $formInfoData) {
-            echo '"' . $key . '": "<span class=\"blue bold\">' . h($formInfoData['key']) . '</span>: ' . h($formInfoData['desc']) . '<br />",' . PHP_EOL;
-        }
-        echo '}' . PHP_EOL;
     }
 ?>
 
-//
+<script type="text/javascript">
-//Generate Category / Type filtering array
+    var notice_list_triggers = <?php echo $notice_list_triggers; ?>;
-//
+    var composite_types = <?php echo json_encode($compositeTypes); ?>;
-var category_type_mapping = new Array();
+    var category_type_mapping = new Array();
-<?php
+
+    <?php
     foreach ($categoryDefinitions as $category => $def) {
         echo "category_type_mapping['" . addslashes($category) . "'] = {";
         $first = true;
         foreach ($def['types'] as $type) {
-            if ($first) $first = false;
+            if ($first) {
-            else echo ', ';
+                $first = false;
+            } else {
+                echo ', ';
+            }
             echo "'" . addslashes($type) . "' : '" . addslashes($type) . "'";
         }
         echo "}; \n";
     }
-?>
-
-var composite_types = <?php echo json_encode($compositeTypes); ?>;
-
-$(document).ready(function() {
-    <?php
-        if ($action == 'edit'):
     ?>
-        checkNoticeList('attribute');
+
-    <?php
-        endif;
-    ?>
-    initPopoverContent('Attribute');
     $('#AttributeDistribution').change(function() {
-        if ($('#AttributeDistribution').val() == 4) $('#SGContainer').show();
+        checkSharingGroup('Attribute');
-        else $('#SGContainer').hide();
     });
 
-    $("#AttributeCategory").on('change', function(e) {
+    $('#AttributeCategory').change(function() {
         formCategoryChanged('Attribute');
         if ($(this).val() === 'Internal reference') {
             $("#AttributeDistribution").val('0');
-            $('#SGContainer').hide();
+            checkSharingGroup('Attribute');
         }
     });
 
@@ -168,22 +119,15 @@ $(document).ready(function() {
         checkNoticeList('attribute');
     });
 
-    $("#AttributeCategory, #AttributeType, #AttributeDistribution").change(function() {
+    $(document).ready(function() {
-        var start = $("#AttributeType").val();
+        <?php
-        initPopoverContent('Attribute');
+            if ($action == 'edit'):
-        $("#AttributeType").val(start);
+        ?>
-        if ($.inArray(start, composite_types) > -1) {
+            checkNoticeList('attribute');
-            $('#compositeWarning').show();
+        <?php
-        } else {
+            endif;
-            $('#compositeWarning').hide();
+        ?>
-        }
+        checkSharingGroup('Attribute');
     });
-    <?php if ($ajax): ?>
-        $('#cancel_attribute_add').click(function() {
-            cancelPopoverForm();
-        });
-
-    <?php endif; ?>
-});
 </script>
 <?php echo $this->Js->writeBuffer(); // Write cached scripts

app/View/Attributes/test_add.ctp

@@ -1,128 +0,0 @@
-<?php
-    $modelForForm = 'Attribute';
-    echo $this->element('genericElements/Form/genericForm', array(
-        'form' => $this->Form,
-        'data' => array(
-            'title' => $action === 'add' ? __('Add Attribute') : __('Edit Attribute'),
-            'model' => $modelForForm,
-            'fields' => array(
-                array(
-                    'field' => 'event_id',
-                    'class' => 'org-id-picker-hidden-field',
-                    'type' => 'text',
-                    'hidden' => true
-                ),
-                array(
-                    'field' => 'category',
-                    'class' => 'input',
-                    'empty' => __('(choose one)'),
-                    'options' => $categories,
-                    'stayInLine' => 1
-                ),
-                array(
-                    'field' => 'type',
-                    'class' => 'input',
-                    'empty' => __('(choose category first)'),
-                    'options' => $types
-                ),
-                array(
-                    'field' => 'distribution',
-                    'class' => 'input',
-                    'options' => $distributionLevels,
-                    'default' => isset($attribute['Attribute']['distribution']) ? $attribute['Attribute']['distribution'] : $initialDistribution,
-                    'stayInLine' => 1
-                ),
-                array(
-                    'field' => 'sharing_group_id',
-                    'class' => 'input',
-                    'options' => $sharingGroups,
-                    'label' => __("Sharing Group")
-                ),
-                array(
-                    'field'=> 'value',
-                    'type' => 'textarea',
-                    'class' => 'input span6',
-                    'div' => 'input clear'
-                ),
-                array(
-                    'field' => 'comment',
-                    'type' => 'text',
-                    'class' => 'input span6',
-                    'div' => 'input clear',
-                    'label' => __("Contextual Comment")
-                ),
-                array(
-                    'field' => 'to_ids',
-                    'type' => 'checkbox',
-                    'label' => __("for Intrusion Detection System"),
-                    'stayInLine' => 1
-                ),
-                array(
-                    'field' => 'batch_import',
-                    'type' => 'checkbox'
-                ),
-                array(
-                    'field' => 'disable_correlation',
-                    'type' => 'checkbox'
-                ),
-                '<div id="extended_event_preview" style="width:446px;"></div>'
-            ),
-            'submit' => array(
-                'action' => $action
-            )
-        )
-    ));
-    if (!$ajax) {
-        echo $this->element('/genericElements/SideMenu/side_menu', array('menuList' => 'event-collection', 'menuItem' => $this->action === 'add' ? 'add' : 'editEvent'));
-    }
-?>
-
-<script type="text/javascript">
-    var notice_list_triggers = <?php echo $notice_list_triggers; ?>;
-    var composite_types = <?php echo json_encode($compositeTypes); ?>;
-    var category_type_mapping = new Array();
-
-    <?php
-    foreach ($categoryDefinitions as $category => $def) {
-        echo "category_type_mapping['" . addslashes($category) . "'] = {";
-        $first = true;
-        foreach ($def['types'] as $type) {
-            if ($first) {
-                $first = false;
-            } else {
-                echo ', ';
-            }
-            echo "'" . addslashes($type) . "' : '" . addslashes($type) . "'";
-        }
-        echo "}; \n";
-    }
-    ?>
-
-    $('#AttributeDistribution').change(function() {
-        checkSharingGroup('Attribute');
-    });
-
-    $('#AttributeCategory').change(function() {
-        formCategoryChanged('Attribute');
-        if ($(this).val() === 'Internal reference') {
-            $("#AttributeDistribution").val('0');
-            checkSharingGroup('Attribute');
-        }
-    });
-
-    $("#AttributeCategory, #AttributeType").change(function() {
-        checkNoticeList('attribute');
-    });
-
-    $(document).ready(function() {
-        <?php
-            if ($action == 'edit'):
-        ?>
-            checkNoticeList('attribute');
-        <?php
-            endif;
-        ?>
-        checkSharingGroup('Attribute');
-    });
-</script>
-<?php echo $this->Js->writeBuffer(); // Write cached scripts

app/View/Elements/genericElements/Form/genericForm.ctp

@@ -73,12 +73,26 @@
     if (!empty($data['submit'])) {
         $submitButtonData = array_merge($submitButtonData, $data['submit']);
     }
+    if (!empty($data['ajaxSubmit'])) {
+        $submitButtonData['ajaxSubmit'] = $ajaxSubmit;
+    }
+    $ajaxFlashMessage = '';
+    if ($ajax) {
+        $ajaxFlashMessage = sprintf(
+            '<div id="flashContainer"><div id="main-view-container" class="container-fluid ">%s</div></div>',
+            $this->Flash->render()
+        );
+    }
     $formEnd = $this->Form->end();
     echo sprintf(
-        '<div class="form">%s<fieldset><legend>%s</legend>%s</fieldset>%s%s%s</div>',
+        '<div class="%s">%s<fieldset><legend>%s</legend>%s<div class="%s">%s</div></fieldset><div class="%s">%s%s%s</div></div>',
+        $ajax ? 'ajax' : 'form',
         $formCreate,
         empty($data['title']) ? h(Inflector::humanize($this->request->params['action'])) . ' ' . $modelForForm : h($data['title']),
+        $ajaxFlashMessage,
+        empty($ajax) ? '' : 'ajax_fieldset',
         $fieldsString,
+        empty($ajax) ? '' : 'ajax_fieldset',
         $formEnd,
         $metaFieldString,
         $this->element('genericElements/Form/submitButton', $submitButtonData)

app/View/Elements/genericElements/Form/submitButton.ctp

@@ -1,12 +1,32 @@
 <?php
-    echo sprintf(
+    if ($ajax) {
-        '<button onClick="%s" class="btn btn-%s">%s</button>',
+        echo sprintf(
-        sprintf(
+            '%s%s',
-            "$('#%s%sForm').submit();",
+            sprintf(
-            h($model),
+                '<span id="submitButton" class="btn btn-primary" style="margin-bottom:5px;float:left;" title="%s" role="button" tabindex="0" aria-label="%s" onClick="%s">%s</span>',
-            h(Inflector::classify($action))
+                __('Submit'),
-        ),
+                __('Submit'),
-        empty($type) ? 'primary' : h($type),
+                $ajaxSubmit,
-        empty($text) ? __('Submit') : h($text)
+                __('Submit')
-    );
+            ),
+            sprintf(
+                '<span class="btn btn-inverse" style="margin-bottom:5px;float:right;" title="%s" role="button" tabindex="0" aria-label="%s" id="cancel_attribute_add" onClick="%s">%s</span>',
+                __('Cancel'),
+                __('Cancel'),
+                'cancelPopoverForm();',
+                __('Cancel')
+            )
+        );
+    } else {
+        echo sprintf(
+            '<button onClick="%s" class="btn btn-%s">%s</button>',
+            sprintf(
+                "$('#%s%sForm').submit();",
+                h($model),
+                h(Inflector::classify($action))
+            ),
+            empty($type) ? 'primary' : h($type),
+            empty($text) ? __('Submit') : h($text)
+        );
+    }
 ?>

app/webroot/css/main.css

@@ -882,9 +882,10 @@ a.proposal_link_red:hover {
 
 .ajax_popover_form {
     display:none;
-    width: 700px;
+    max-width: 700px;
     top:15%;
-    left:calc(50% - 350px);
+    margin-left:auto;
+    margin-right:auto;
     position: fixed;
     background-color:#f4f4f4;
     border-radius: 11px 11px 10px 10px;
@@ -942,7 +943,7 @@ a.proposal_link_red:hover {
     border-radius: 10px 10px 0px 0px;
     padding-left:10px;
     margin-bottom:0px;
-    width:690px;
+    width:calc(100% - 10px);
     background-color:black;
     color:white;
     font-size: 21px;
@@ -976,8 +977,9 @@ a.proposal_link_red:hover {
     height:120px !important;
 }
 
-.ajax_popover_form .add_attribute_fields {
+.ajax_fieldset, .ajax_popover_form .add_attribute_fields {
     padding-left:10px;
+    padding-right:10px;
 }
 
 .hover_enrichment_text {
@@ -2431,4 +2433,4 @@ table tr:hover .down-expand-button {
     background-color: #3b3b3b;
     color: white;
     border-radius: 3px;
-}
+}

app/webroot/js/misp.js

@@ -1187,7 +1187,7 @@ function submitPopoverForm(context_id, referer, update_context_id) {
             break;
     }
     if (url !== null) {
-        url = baseurl + url;
+        url = baseurl + $("#submitButton").closest("form").attr('action');
         $.ajax({
             beforeSend: function (XMLHttpRequest) {
                 $(".loading").show();