From 5206046c5a65d3b507f35d3c3e3c0fc44f69972b Mon Sep 17 00:00:00 2001 From: Hippo Date: Thu, 6 Jan 2022 18:20:50 +0530 Subject: [PATCH] Add friendly-looking notif and error pages Much less scary than all that plaintext, what? --- server/index.js | 70 ++++++++++++++++++++++++++++++++-------- src/base.htm.twig | 24 ++++++++++++++ src/error.htm.twig | 8 +++++ src/form-errors.htm.twig | 18 +++++++++++ src/pledge.htm.twig | 7 ++++ src/thanks.htm.twig | 30 +++++++++++++++++ 6 files changed, 143 insertions(+), 14 deletions(-) create mode 100644 src/base.htm.twig create mode 100644 src/error.htm.twig create mode 100644 src/form-errors.htm.twig create mode 100644 src/pledge.htm.twig create mode 100644 src/thanks.htm.twig diff --git a/server/index.js b/server/index.js index dab58f1..9f75402 100644 --- a/server/index.js +++ b/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')) diff --git a/src/base.htm.twig b/src/base.htm.twig new file mode 100644 index 0000000..9a86cb8 --- /dev/null +++ b/src/base.htm.twig @@ -0,0 +1,24 @@ + + + + + + {% block title %}Snipette Crowdfunding{% endblock %} + + + + + + + + + {% block content %} +
+

{% block heading %}It worked!{% endblock %}

+ {% block message %} +

This page worked, we mean. Return to the home page to continue 🙂

+ {% endblock %} +
+ {% endblock %} + + diff --git a/src/error.htm.twig b/src/error.htm.twig new file mode 100644 index 0000000..a445ed7 --- /dev/null +++ b/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 %} +

{{ error ?? 'Something went wrong. Please go back and try again. Sorry for the inconvenience 🙁' }}

+Return home +{% endblock %} diff --git a/src/form-errors.htm.twig b/src/form-errors.htm.twig new file mode 100644 index 0000000..1a28955 --- /dev/null +++ b/src/form-errors.htm.twig @@ -0,0 +1,18 @@ +{% extends "base.htm.twig" %} + +{% block title %}Snipette Crowdfunding: Error{% endblock %} +{% block content %} +
+

Hang on a minute

+

We found some errors in the form you submitted. Please fix them before proceeding!

+
    + {% for error in errors %} +
  1. {{error}}
    2. + {% endfor %} +
+

You can go back 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...)

+

+ Go back +

+
+{% endblock %} diff --git a/src/pledge.htm.twig b/src/pledge.htm.twig new file mode 100644 index 0000000..276232b --- /dev/null +++ b/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 %} +

We've sent a verification link to {{ email }}. 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!)

+{% endblock %} diff --git a/src/thanks.htm.twig b/src/thanks.htm.twig new file mode 100644 index 0000000..e4549cd --- /dev/null +++ b/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 %} +

Your pledge has been recorded. Thank you so much! Please check your inbox for a receipt.

+

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!

+

+ + + WhatsApp +

+

+ + + Copy Link +

+

Continue to Snipette

+{% endblock %}