Merge branch 'develop' into fix/bad_token_response_type

system/modules/search/templates/index.tpl.php

@@ -1,74 +1,82 @@
 <div>
-    <h3 class="subheading columns large-6">Search</h3>
-    <span class="columns large-6" style="text-align: right;">
-        <p style="font-size: 12px;">
-        <strong>Note:</strong> Search terms must contain minimum 3 characters.
-        <br>
-        <strong>Tip:</strong> To search by Id, use 'id##' eg. id5.
-        </p>
-    </span>
+	<h3 class="subheading columns large-6">Search</h3>
+	<span class="columns large-6" style="text-align: right;">
+		<p style="font-size: 12px;">
+			<strong>Note:</strong> Search terms must contain minimum 3 characters.
+			<br>
+			<strong>Tip:</strong> To search by Id, use 'id##' eg. id5.
+		</p>
+	</span>
 </div>
 <hr>
 <div class="row-fluid">
-<!--    <form action="<?php // echo $webroot; ?>/search/results" method="GET">-->
-    <form id="search_form" class="clearfix">
-        <input type="hidden" name="<?php echo CSRF::getTokenID(); ?>" value="<?php echo CSRF::getTokenValue(); ?>" />
-        <div class="row-fluid">
-            <div class="small-12 medium-6 columns">
-                <input class="input-large" type="text" name="q" id="q" autofocus/>
-            </div>
+	<!--    <form action="<?php // echo $webroot; 
+							?>/search/results" method="GET">-->
+	<form id="search_form" class="clearfix">
+		<input type="hidden" name="<?php echo CSRF::getTokenID(); ?>" value="<?php echo CSRF::getTokenValue(); ?>" />
+		<div class="row-fluid">
+			<div class="small-12 medium-6 columns">
+				<input class="input-large" type="text" name="q" id="q" autofocus />
+			</div>
 			<div class="small-12 medium-2 columns">
-                <?php echo Html::select("idx", $indexes); ?>
-            </div>
-            <div class="small-12 medium-2 columns">
-                <?php echo Html::select("tags", $tags); ?>
-            </div>
-            <div class="small-12 medium-2 columns">
-                <button class="button tiny small-12" type="submit">Go</button>
-            </div>
-        </div>
-    </form>
+				<?php echo Html::select("idx", $indexes); ?>
+			</div>
+			<div class="small-12 medium-2 columns">
+				<?php echo Html::select("tags", $tags); ?>
+			</div>
+			<div class="small-12 medium-2 columns">
+				<button class="button tiny small-12" type="submit">Go</button>
+			</div>
+		</div>
+	</form>
 
 
 </div>
 
-<div id="search_message" class="row hide">
-    <div data-alert class="alert-box warning" id="message_box"></div>
+<div id="search_message" class="row">
+	<div data-alert style="margin-top: 1rem" class="alert-box warning" id="message_box"></div>
 </div>
 
 <div id="result" class="row" style="display: none;">
 
 </div>
 
 <script>
-    $("#search_form").submit(function(event) {
-        event.preventDefault();
-        $("#search_message").hide();
-        $("#result").hide();
+	const setError = (str) => {
+		if (!str) {
+			document.querySelector("#search_message").style.display = "none";
+			document.querySelector("#result").style.display = "block";
+			return;
+		}
+
+		document.querySelector("#message_box").innerText = str;
+		document.querySelector("#search_message").style.display = "block";
+		document.querySelector("#result").style.display = "none";
+	}
+
+	document.querySelector("#search_form").addEventListener("submit", async function(event) {
+		event.preventDefault();
+
+		setError(false);
+
+		const form = new FormData(event.target);
+		const body = new URLSearchParams(form);
+
+		try {
+			const response = await fetch(`/search/results?` + body.toString());
 
-        var data = $("#search_form").serialize();
+			const json = await response.json();
 
-        $.getJSON("/search/results", data,
-            function(response) {
-                if (response.success === false) {
-                    $("#message_box").html(response.data);
-                    $("#search_message").show();
-                } else {
-                    var text_data = "<span style='padding-left: 20px;'>No results found</span>";
-                    if (response.data) {
-                        text_data = response.data;
-                    }
-                    $("#result").html(text_data).delay(100).fadeIn();
-                }
-            },
-            function(response) {
-                $("#message_box").html("Failed to receive a response from search");
-                $("#search_message").show();
-            }
-        );
+			if (!json.success)
+				return setError(json.data);
 
-        return false;
-    });
+			document.querySelector("#result").innerHTML =
+				json.data || `<span style="padding-left: 20px;">No results found</span>`;
+		} catch (e) {
+			setError(`Failed to receive a response from search`);
+		}
 
+		return false;
+	});
 </script>
-<br>
+<br>

system/templates/base/src/js/app.ts

@@ -1,6 +1,6 @@
 // src/app.ts
 import { AlertAdaptation, DropdownAdaptation, FavouritesAdaptation, TabAdaptation, TableAdaptation } from './adaptations';
-import { QuillEditor, InputWithOther, MultiFileUpload, MultiSelect, Overlay, CodeMirror } from './components';
+import { CodeMirror, InputWithOther, MultiFileUpload, MultiSelect, Overlay, QuillEditor } from './components';
 
 import { Modal, Toast, Tooltip } from 'bootstrap';
 
@@ -97,6 +97,13 @@ class Cmfive {
             return response.text()
         }).then((content) => {
             modalContent.innerHTML = content + modalContent.innerHTML;
+
+			// https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#security_considerations
+			// Appending scripts to the DOM via innerHTML is not meant to execute them for security purposes
+			// Unfortunately, various modals however contian script tags we need to execute
+			modalContent.querySelectorAll("script").forEach(x => {
+				eval(x.innerHTML);
+			})
 
             // Rebind elements for modal
             Cmfive.ready(modalContent);

system/templates/base/src/scss/cmfive/_forms.scss

@@ -50,4 +50,8 @@ form {
             width: 100%;
         }
     }
+
+	input.input-large {
+		width: 100%;
+	}
 }