Add friendly-looking notif and error pages

Much less scary than all that plaintext, what?

server/index.js

@@ -190,7 +190,7 @@ function validatePledge(body, PledgeModel = Pledge) {
 
   let was_robot = body.was_robot
   if(was_robot != 'no') {
-    errors.push('Only humans are allowed to donate money. Robots are too digital 🙁')
+    errors.push('Only humans are allowed to donate money. Robots are too digital 🤖')
   }
 
   let amount = body.amount
@@ -265,8 +265,12 @@ router.post('/pledge', async (req, res) => {
 
   // fail if there were errors
   if (!!errors.length) {
-		res.send(`Errors: ${'' + errors}`)
-		return
+    let output = await twing.render('form-errors.htm.twig', {
+      errors: errors,
+    })
+
+    res.end(output)
+    return
 	}
 
   // save if there weren't
@@ -274,8 +278,13 @@ router.post('/pledge', async (req, res) => {
 	try {
 		await pledge.save()
 	} catch (err) {
-		res.send("Sorry, something went wrong while saving your pledge and we don't know what 🙁. Please try again...")
-		return
+
+    let output = await twing.render('error.htm.twig', {
+      error: "Sorry, something went wrong while saving your pledge and we don't know what in was. This website is still in beta so we do have a glitches once in a while. Apologies and please try again...🙁",
+    })
+
+    res.end(output)
+    return
 	}
 
   // check for existing pledge
@@ -317,13 +326,19 @@ anytime to editors@snipettemag.com.
 Thanks,
 The Snipette Team`
 
-  let receipt = await sendMail({
+  // to make things snappier, we don't `await` for the sending to finish.
+  let receipt = sendMail({
     to: req.body.email,
     subject: `Finish ${existingPledge ? 'updating' : 'saving'} your pledge to Snipette`,
     text: text,
   })
 
-	res.send("Thank you! We're still working on setting up this website, so as you can see this page doesn't look great at the moment, but we will be sending you a confirmation email in a few days. Watch out for an email from editors@snipettemag.com, and if it doesn't reach, check your spam box :P")
+  // return the success page
+  twing.render('pledge.htm.twig', {
+    'email': pledge.get('email'),
+  }).then((output) => {
+    res.end(output)
+  })
 })
 
 // save pledge after verification complete
@@ -338,10 +353,20 @@ router.get('/verify', async (req, res) => {
     amount = serialiser.loads(req.query.key, 300) // number in seconds
   } catch(e) {
     if (e.name == 'SignatureExpired') {
-      res.send("Oops, looks like your link has expired. Please go back and try pledging again. Sorry :(")
+
+      let output = await twing.render('error.htm.twig', {
+        error: "Sorry, looks like your link has expired. Please go back and try pledging again. Hopefully you'll manage it quicker this time 😛",
+      })
+
+      res.end(output)
       return
     } else {
-      res.send("An unknown error occurred. Please generate a new link and try again. Sorry for the inconvenience :(")
+
+      let output = await twing.render('error.htm.twig', {
+        error: "An unknown error occurred. Please generate a new link and try again. Sorry for the inconvenience 🤦",
+      })
+
+      res.end(output)
       return
     }
   }
@@ -360,11 +385,20 @@ router.get('/verify', async (req, res) => {
     .fetch())
   } catch(e) {
     if (e.name == 'EmptyResponse') {
-      res.send('That pledge was not found in our records. Are you sure you made it? Please go back and try again :(')
+
+      let output = await twing.render('error.htm.twig', {
+        error: "That pledge was not found in our records. Are you sure you made it? 🔎",
+      })
+
+      res.end(output)
       return
     } else {
-      throw e
-      res.send("An unknown error occurred. Please generate a new link and try again. Sorry for the inconvenience :(")
+
+      let output = await twing.render('error.htm.twig', {
+        error: "An unknown error occurred. Please generate a new link and try again. Sorry for the inconvenience 🤦",
+      })
+
+      res.end(output)
       return
     }
   }
@@ -426,14 +460,22 @@ anytime to editors@snipettemag.com.
 Thanks,
 The Snipette Team`
 
-  let receipt = await sendMail({
+  // to make things snappier, we don't `await` for the sending to finish
+  let receipt = sendMail({
     to: pledge.get('email'),
     subject: `Your pledge has been saved!`,
     text: text,
   })
 
   // Send confirmation message
-  res.send('Thank you! Your pledge has been saved. Watch out for the confirmation email in your inbox :)')
+  res.redirect('/thanks')
+})
+
+router.get('/thanks', async (req, res) => {
+  let output = await twing.render('thanks.htm.twig')
+
+  res.end(output)
+  return
 })
 
 router.use(express.static('src/assets'))

src/base.htm.twig

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <title>{% block title %}Snipette Crowdfunding{% endblock %}</title>
+    <link rel="stylesheet" href="css/style.css"/>
+
+    <!-- Fonts: Fanwood Text, Abhaya Libre, Didact Gothic -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@800&family=Didact+Gothic&family=Fanwood+Text:ital@0;1&display=swap" rel="stylesheet">
+  </head>
+  <body class="bg-orange-200 font-serif flex h-screen w-screen">
+    {% block content %}
+    <div class="max-w-md m-auto grow-0 text-center font-sans p-4 md:p-0">
+        <h1 class="text-4xl font-heading font-extrabold lowercase mb-4">{% block heading %}It worked!{% endblock %}</h1>
+        {% block message %}
+          <p class="text-lg">This page worked, we mean. <a href="/">Return to the home page</a> to continue 🙂</p>
+        {% endblock %}
+    </div>
+    {% endblock %}
+  </body>
+</html>

src/error.htm.twig

@@ -0,0 +1,8 @@
+{% extends "base.htm.twig" %}
+
+{% block title %}Snipette Crowdfunding: Error{% endblock %}
+{% block heading %}{{ title ?? 'Oh no!' }}{% endblock %}
+{% block message %}
+<p class="text-lg mb-8">{{ error ?? 'Something went wrong. Please <a href="javascript:history.go(-1)">go back</a> and try again. Sorry for the inconvenience 🙁' }}</p>
+<a href="/" class="p-2 text-sm uppercase no-underline border-orange-700 text-orange-700 border-solid border-2 hover:cursor-pointer hover:border-orange-500 hover:text-orange-500 font-sans">Return home</a>
+{% endblock %}

src/form-errors.htm.twig

@@ -0,0 +1,18 @@
+{% extends "base.htm.twig" %}
+
+{% block title %}Snipette Crowdfunding: Error{% endblock %}
+{% block content %}
+<div class="max-w-md m-auto grow-0 text-left font-sans bg-white p-4 sm:rounded-lg">
+  <h1 class="text-4xl font-heading font-extrabold lowercase mb-4 text-center">Hang on a minute</h1>
+  <p class="text-lg">We found some errors in the form you submitted. Please fix them before proceeding!</p>
+  <ol class="text-lg list-decimal list-inside m-2 p-1">
+    {% for error in errors %}
+    <li>{{error}}</li>
+    {% endfor %}
+  </ol>
+  <p class="text-lg mb-8">You can <a href="javascript:history.go(-1)">go back</a> to the previous page to fix the errors. (We'd have provided the pre-filled form here, but that's for a future website update...)</p>
+  <p class="text-center">
+    <a href="javascript:history.go(-1)" class="p-2 text-sm uppercase no-underline border-orange-700 text-orange-700 border-solid border-2 hover:cursor-pointer hover:border-orange-500 hover:text-orange-500 font-sans">Go back</a>
+  </p>
+</div>
+{% endblock %}

src/pledge.htm.twig

@@ -0,0 +1,7 @@
+{% extends "base.htm.twig" %}
+
+{% block title %}Snipette Crowdfunding: Verify Pledge{% endblock %}
+{% block heading %}Almost there!{% endblock %}
+{% block message %}
+<p class="text-lg">We've sent a verification link to <strong>{{ email }}</strong>. Click the link there to finish saving your pledge. (If you don't receive it in a few minutes, check your spam box for an email from treasurer@fund.snipettemag.com!)</p>
+{% endblock %}

src/thanks.htm.twig

@@ -0,0 +1,30 @@
+{% extends "base.htm.twig" %}
+
+{% block title %}Snipette Crowdfunding: Error{% endblock %}
+{% block heading %}Thank you!{% endblock %}
+{% block message %}
+<p class="text-lg mb-2">Your pledge has been recorded. Thank you so much! Please check your inbox for a receipt.</p>
+<p class="text-md mb-8">Meanwhile, to help us reach our subscriber goal, do consider sharing our campaign with your friends and family. We can't print if we don't have enough subscribers to send copies too, so who knows: this could be even more helpful than the pledge itself!</p>
+<p class="flex space-x-1 items-center justify-center mb-8">
+  <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large" data-text="Just added my #micropledge to help Snipette&#39;s print version! Help them reach their subscriber goals to bring down the price for everyone 💗" data-url="https://fund.snipettemag.com/" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+  <iframe src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Ffund.snipettemag.com&layout=button&size=large&appId=878224506053413&width=77&height=28" width="77" height="28" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
+  <a class="bg-green-500 text-white no-underline text-sm bold p-2 rounded-lg" href="whatsapp://send?text=Just added my #micropledge to help Snipette&#39;s print version! Help them reach their subscriber goals to bring down the price for everyone 💗" data-action="share/whatsapp/share" target="_blank">WhatsApp</a>
+</p>
+<p class="mb-8 flex justify-center">
+  <input type="text" disabled id="share_link" name="share_link" value="https://fund.snipettemag.com" class="p-2 inline-block h-auto grow sm:grow-0"/>
+  <script type="text/javascript">
+    function copyShareURL() {
+      let shareLink = document.getElementById('share_link')
+      shareLink.select()
+      shareLink.setSelectionRange(0, 99999) // for mobile devices
+
+      // copy to clipboard
+      navigator.clipboard.writeText(shareLink.value)
+
+      alert('The link has been copied to your clipboard. Paste it wherever you like 🙂')
+    }
+  </script>
+  <a class="bg-white no-underline text-sm bold p-2 grow sm:grow-0" href="javascript:copyShareURL()">Copy Link</a>
+</p>
+<p><a href="https://www.snipettemag.com/" target="_blank" class="p-4 bg-orange-700 text-white no-underline rounded-xl hover:bg-orange-500 hover:cursor-pointer inline-block w-full sm:w-auto">Continue to Snipette</a></p>
+{% endblock %}