feat: added field validation in the UI (#28)

Issue: #13

.air.toml

@@ -14,7 +14,7 @@ tmp_dir = "tmp"
   follow_symlink = false
   full_bin = ""
   include_dir = []
-  include_ext = ["go", "tpl", "tmpl", "html"]
+  include_ext = ["go", "tpl", "tmpl", "html", "js"]
   include_file = []
   kill_delay = "0s"
   log = "build-errors.log"

internal/app/pem_parser.go

@@ -25,7 +25,11 @@ func NewPEMHandler(logger *slog.Logger) *PEMHandler {
 
 func (h *PEMHandler) Handle(pemRaw []byte) (*PEMResponse, error) {
 	block, rest := pem.Decode(pemRaw)
-	if block == nil || len(rest) > 0 {
+	if block == nil {
+		return nil, errors.New("failed to decode PEM block, the submitted data does not seem to be PEM encoded")
+	}
+
+	if len(rest) > 0 {
 		return nil, errors.New("PEM contains more than one PEM block, this is not yet supported")
 	}
 

internal/port/ui/assets/js/validation.js

@@ -0,0 +1,39 @@
+
+let form = document.getElementById("form");
+let handler =()=> {
+    console.log("validation triggered");
+    event.preventDefault(); // Prevent default form submission
+
+    validateForm()
+}
+['submit', 'blur', 'focusout'].forEach(event => form.addEventListener(event, handler));
+
+function validateForm() {
+    let isValid = true;
+    let errorMessage = ''
+
+    const pem = document.getElementById('pem');
+    if (pem.value.trim() === '') {
+        isValid = false;
+        errorMessage = "Must submit a PEM file"
+    }
+
+    if (pem.value.includes("PRIVATE")) {
+        isValid = false;
+        errorMessage = "It seems a private key is entered, do not submit a private key! Even though we do not store anything you should never submit a private key!!"
+    }
+
+    if (!isLikelyPEM(pem.value.trim())) {
+        isValid = false;
+        errorMessage = "The file you provided does not seem to be a PEM file"
+    }
+
+    pem.setAttribute('aria-invalid', !isValid)
+    const helperText = document.getElementById('pem-helper');
+    helperText.textContent = isValid ? "detected PEM file" : errorMessage;
+}
+
+function isLikelyPEM(input) {
+    const pemRegex = /-----BEGIN (?!PRIVATE KEY)([A-Z0-9 ]+)-----[\s\S]+?-----END \1-----/g;
+    return pemRegex.test(input);
+}

internal/port/ui/templates/pages/index.html

@@ -13,12 +13,13 @@
             href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css"
     />
     <script src="https://unpkg.com/[email protected]"></script>
+    <script defer type = "text/javascript" src="assets/js/validation.js"></script>
     <title>PEM Parser</title>
     <link rel="icon" type="image/x-icon" sizes="48x48" href="assets/favicon.ico"/>
 
     <style>
         :root {
-            --pico-border-radius: 1rem;
+            --pico-border-radius: 0.5rem;
             --pico-font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
             --pico-typography-spacing-vertical: 0.5rem;
         }

internal/port/ui/templates/partials/result-partial.html

@@ -1,18 +1,18 @@
 {{ block "result-block" . }}
     {{ if ne (len .SuccessMessage) 0 }}
-        <article class="pico-background-jade-500">
+        <article style="background-color: #62af9a">
             <hgroup>
-                <h4 class="pico-color-grey-50">Parsed PEM successfully!</h4><br>
-                <p class="pico-color-grey-50">{{ .SuccessMessage }}</p>
+                <h4 style="color: #fff">Parsed PEM successfully!</h4><br>
+                <p style="color: #fff">{{ .SuccessMessage }}</p>
             </hgroup>
         </article>
     {{ end }}
 
     {{ if ne (len .ErrorMessage) 0 }}
-        <article class="pico-background-red-500">
+        <article style="background-color: #ce7e7b">
             <hgroup>
-                <h4 class="pico-color-grey-50">Failed to parse PEM file</h4><br>
-                <p class="pico-color-grey-50" style="white-space: pre-wrap">{{ .ErrorMessage }}</p>
+                <h4 style="color: #fff">Failed to parse PEM file</h4><br>
+                <p style="color: #fff">{{ .ErrorMessage }}</p>
             </hgroup>
         </article>
     {{ end }}