diff --git a/index.html b/index.html
index 61aac55fdaa09f0303f0582e4acb61e502e1fb26..941c855dcc5477b4cd94a048614636fba58fcf51 100644
--- a/index.html
+++ b/index.html
@@ -18,33 +18,41 @@
<div id="textareas_headers">
<div>
<select name="doc_type" id="doc_type"></select>
- <input type="button" id="get_example" value="Get example" disabled>
+ <input type="button" id="get_example" value="Get document example" disabled>
</div>
</div>
<div id="textareas">
<textarea id="textarea_left" rows="25" cols="80"></textarea>
- <input type="button" id="convert_button" value=">>>">
+ <div class="blank_separators"></div>
+ <div class="vl"></div>
+ <div class="blank_separators"></div>
<textarea id="textarea_right" rows="25" cols="80"></textarea>
</div>
<div id="textareas_footers">
<div>
<b>
- <p id="check_result">-</p>
+ <p id="check_result"></p>
</b>
</div>
<div>
<pre id="parse_err"></pre>
</div>
+ <div>
+ <div class="w-50 ta-center">
+ <input type="button" id="verify_button" value="Verify document">
+ </div>
+ <div class="w-50"></div>
+ </div>
</div>
</div>
</main>
<footer>
<a href="https://git.duniter.org/tools/dup-tools-front" id="sourceRibbon" title="Fork me !">
- <span>AGPL-3.0</span>
- <span>Logiciel Libre</span>
- <span>Remonter aux sources</span>
+ <span>AGPL-3.0</span>
+ <span>Logiciel Libre</span>
+ <span>Remonter aux sources</span>
</a>
-</footer>
+ </footer>
<script src="./bootstrap.js"></script>
</body>
diff --git a/index.js b/index.js
index faab44589ed388ba251709f56b0c7fc0619c0ce5..d2de4aa6c33c8bc7cef5da20591635026b273d94 100644
--- a/index.js
+++ b/index.js
@@ -22,7 +22,7 @@ const CHECK_RESULT_VALID_SIG = 3;
const doc_type = document.getElementById('doc_type');
const get_example = document.getElementById('get_example');
const textarea_left = document.getElementById('textarea_left');
-const convert_button = document.getElementById('convert_button');
+const verify_button = document.getElementById('verify_button');
const textarea_right = document.getElementById('textarea_right');
const check_result = document.getElementById('check_result');
const parse_err = document.getElementById('parse_err');
@@ -37,7 +37,7 @@ for (let i = 1; i <= DOCUMENTS_TYPES_COUNT; i++) {
}
// Create listeners
-convert_button.addEventListener("click", check_input);
+verify_button.addEventListener("click", check_input);
doc_type.addEventListener("change", () => {
if (doc_type.value != ANY_DOC_TYPE) {
get_example.disabled = false;
@@ -69,43 +69,46 @@ function create_doc_type_options() {
// Check user input
function check_input() {
const input = textarea_left.value;
- const result = wasm.parse_doc_and_verify(input, doc_type.value);
- let output = wasm.parse_doc_into_json(input, doc_type.value);
+ if (input.length > 0) {
+ const result = wasm.parse_doc_and_verify(input, doc_type.value);
+ let output = wasm.parse_doc_into_json(input, doc_type.value);
- // Log for debug
- console.log("input="+input);
- console.log("result="+result);
- console.log("output="+output);
+ // Log for debug
+ console.log("input="+input);
+ console.log("result="+result);
+ console.log("output="+output);
- // Clear all texts
- textarea_right.value = "";
- check_result.innerText = "";
- parse_err.innerText = "";
+ // Clear all texts
+ textarea_right.value = "";
+ check_result.innerText = "";
+ parse_err.innerText = "";
- switch (result) {
- case CHECK_RESULT_UNKNOWN_DOC_TYPE:
- check_result.style.color = 'red';
- check_result.innerText = "Invalid document. Specify expected document type for more informations.";
- break;
- case CHECK_RESULT_WRONG_FORMAT:
- check_result.style.color = 'red';
- check_result.innerText = "Wrong format.";
- breakText(output, parse_err);
- break;
- case CHECK_RESULT_INVALID_SIG:
- check_result.style.color = 'orange';
- prettyPrintJsonInTextarea(output, textarea_right);
- check_result.innerText = "Correct format but invalid signature !";
- break;
- case CHECK_RESULT_VALID_SIG:
- check_result.style.color = 'green';
- prettyPrintJsonInTextarea(output, textarea_right);
- check_result.innerText = "Valid Document.";
- break;
+ switch (result) {
+ case CHECK_RESULT_UNKNOWN_DOC_TYPE:
+ check_result.style.color = 'red';
+ check_result.innerText = "Format : Invalid \u2716";
+ parse_err.innerText = "Specify expected document type for more informations !"
+ break;
+ case CHECK_RESULT_WRONG_FORMAT:
+ check_result.style.color = 'red';
+ check_result.innerText = "Format : Invalid \u2716";
+ breakText(output, parse_err);
+ break;
+ case CHECK_RESULT_INVALID_SIG:
+ check_result.style.color = 'orange';
+ prettyPrintJson(output, textarea_right);
+ check_result.innerHTML = "Format: Valid \u2714<br>Signature: Invalid \u2716";
+ break;
+ case CHECK_RESULT_VALID_SIG:
+ check_result.style.color = 'green';
+ prettyPrintJson(output, textarea_right);
+ check_result.innerHTML = "Format: Valid \u2714<br>Signature: Valid \u2714";
+ break;
+ }
}
}
-function prettyPrintJsonInTextarea(str, elem) {
+function prettyPrintJson(str, elem) {
let obj = JSON.parse(str);
let pretty = JSON.stringify(obj, undefined, 4);
elem.value = pretty;
diff --git a/main.css b/main.css
index 1d45fa813dee7b02940cf9f07612f235100bf301..e88c5460c04f5d6d26156ff1a5b6c744984f77cd 100644
--- a/main.css
+++ b/main.css
@@ -1,3 +1,19 @@
+/* Generic class */
+
+.ta-center {
+ text-align: center;
+}
+
+.w-50 {
+ width: 50%;
+}
+
+.vl {
+ border-left:1px solid #ccc;
+}
+
+/* Css */
+
header {
text-align: center;
}
@@ -10,7 +26,7 @@ main {
}
#documents_validator {
- width: 80%;
+ width: 90%;
}
#textareas {
@@ -19,6 +35,10 @@ main {
justify-content: center;
}
+.blank_separators {
+ width: 20px;
+}
+
#textareas_headers #textareas_footers {
display: flex;
flex-direction: column;
@@ -35,10 +55,22 @@ main {
textarea {
width: 100%;
white-space: pre-line;
+ resize : none;
}
-#convert_button {
+#verify_button {
+ font-size: 1.2em;
+ border: 1px solid green;
+ border-radius: 50px;
+ color: green;
+ background-color: rgb(255, 255, 255);
margin: 10px;
+ box-shadow: 0px 0px 15px black;
+}
+
+#verify_button:disabled {
+ border: 1px solid grey;
+ color: grey;
}
#parse_err {