Implement feedback as a JSON API, fix missing await on all post_request() calls

[ndcode_site.git] / _lib / navbar.jst

diff --git a/_lib/navbar.jst b/_lib/navbar.jst
index 4e80d95..a993c46 100644 (file)
--- a/_lib/navbar.jst
+++ b/_lib/navbar.jst
@@ -253,21 +253,8 @@ return async (env, head, body, scripts) => {
               div.row {
                 div.col-md-12 {
                   div.form-group {
-                    label(for="feedback-message") {'Message *'}
-                    textarea.form-control#feedback-message(placeholder="Please tell us your thoughts" rows="4" required="required" data-error="Please, leave us a message.") {}
-                    div.help-block.with-errors {}
-                  }
-                }
-              }
-              p {} // fix this later
-              div.row {
-                div.col-md-12 {
-                  p.text-muted {
-                    strong {'*'}
-                    'These fields are required.'
-                    //'Contact form template by '
-                    //a(href="https://bootstrapious.com/p/how-to-build-a-working-bootstrap-feedback-form" target="_blank") {'Bootstrapious'}
-                    //'.'
+                    label.form-label(for="feedback-message") {'Message'}
+                    textarea.form-control#feedback-message(placeholder="Please tell us your thoughts" rows="4" required="required") {}
                   }
                 }
               }
@@ -314,6 +301,10 @@ return async (env, head, body, scripts) => {
           '/api/sign_out.json',
           ...arguments
         )
+        let feedback = async (...arguments) => api_call(
+          '/api/feedback.json',
+          ...arguments
+        )
 
         // this function can be overridden in a further script
         function sign_in_out(status) {
@@ -442,28 +433,35 @@ return async (env, head, body, scripts) => {
 
             document.getElementById('feedback-submit').addEventListener(
               'click',
-              () => {
-                $.ajax(
-                  {
-                    url: '/api/feedback.html',
-                    type: 'POST',
-                    data: {
-                      page: window.location.href,
-                      message: $('#feedback-message').val()
-                    },
-                    success: (data, textStatus, jqXHR) => {
-                      $('#feedback-modal').modal('hide')
-                      document.getElementById('message-modal-message').textContent = data
-                      $('#message-modal-message').text(data)
-                      $('#message-modal').modal('show')
-                    },
-                    error: (jqXHR, textStatus, errorThrown) => {
-                      $('#feedback-modal').modal('hide')
-                      document.getElementById('message-modal-message').textContent = errorThrown
-                      $('#message-modal').modal('show')
-                    }
-                  }
-                )
+              async () => {
+                try {
+                  await feedback(
+                    location.href,
+                    document.getElementById('feedback-message').value.slice(0, 65536)
+                  )
+                }
+                catch (error) {
+                  let problem =
+                    error instanceof Problem ?
+                      error :
+                      new Problem(
+                        // title
+                        'Bad request',
+                        // details
+                        (error.stack || error.message).toString()
+                        // status
+                        400
+                      )
+
+                  document.getElementById('message-modal-message').textContent = problem.detail
+                  $('#feedback-modal').modal('hide')
+                  $('#message-modal').modal('show')
+                  return
+                }
+
+                document.getElementById('message-modal-message').textContent = 'Thanks! We have received your feedback.'
+                $('#feedback-modal').modal('hide')
+                $('#message-modal').modal('show')
               }
             )
           }