Save and accept incoming pledges

server/index.js

@@ -1,4 +1,5 @@
 const express = require('express')
+const bodyParser = require('body-parser')
 const path = require('path')
 
 require('dotenv').config()
@@ -69,7 +70,9 @@ const app = express()
 const router = express.Router()
 app.use(baseUrl, router)
 
-app.use(express.static('dist'))
+router.use(bodyParser.urlencoded({
+  extended: true,
+}))
 
 // main views
 router.get('/', async (req, res) => {
@@ -82,8 +85,6 @@ router.get('/', async (req, res) => {
   let result = await Pledge.fetchAll()
 
   for (let pledge of result.models) {
-    if (DEBUG) console.log('Adding', pledge.get('amount'))
-
     total_people += 1
     total_rupees += pledge.get('amount')
   }
@@ -100,6 +101,81 @@ router.get('/', async (req, res) => {
   })
 })
 
+router.post('/pledge', async (req, res) => {
+  if (DEBUG) console.debug('New pledge:', req.body)
+
+  // validate pledge
+  let errors = []
+
+	let submit = req.body.submit
+  if (submit != 'Save Pledge') {
+		errors.push("This request seems to have been tampered with. Are you sure it wasn't you doing the tampering?")
+	}
+
+  let robo = req.body.robo
+  if(robo != 'no') {
+    errors.push('Only humans are allowed to donate money. Robots are too digital 🙁')
+  }
+
+  let amount = req.body.amount
+  if (!amount || amount == 'custom') {
+    amount = req.body['amount-custom']
+  }
+  if (!amount || amount <= 0) {
+    errors.push('Pledge amount too small. Please choose at least a rupee!')
+  }
+  try {
+    amount = Number(amount)
+  } catch (err) {
+    errors.push('Invalid amount. Please choose a positive number!')
+  }
+
+	let name = req.body.name
+	if (name.length <=0) {
+		errors.push('What is your name? You can be anonymous to the world but at least we should know...')
+	}
+
+	let anonymous = req.body.anonymous == 'on' ? true : false
+
+	let email = req.body.email
+	if (email.length < 5) {
+		errors.push('Please enter a valid email address')
+	}
+
+	let phone = req.body.phone
+	let newsletter = req.body.newsletter == 'yes' ? true : false
+	let messages = req.body.messages
+
+	if (!!errors.length) {
+		res.end(`Errors: ${'' + errors}`)
+		return
+	}
+
+	// save the info
+	let pledge = new Pledge()
+	pledge.set('was_robot', robo)
+	pledge.set('amount', amount)
+	pledge.set('name', name)
+	pledge.set('anonymous', anonymous)
+	pledge.set('email', email)
+	pledge.set('phone', phone)
+	pledge.set('get_newsletter', newsletter)
+	pledge.set('other_message', messages)
+
+	if (DEBUG) console.debug (`Saving pledge: ${JSON.stringify(pledge)}`)
+
+	try {
+		await pledge.save()
+	} catch (err) {
+		res.end("Sorry, something went wrong while saving your pledge and we don't know what 🙁. Please try again...")
+		return
+	}
+
+	res.end('Thanks!')
+})
+
+router.use(express.static('dist'))
+
 // start the listener!
 app.listen(port, () => {
   console.log(`Server is up at port ${port}`)

src/index.htm

@@ -172,7 +172,7 @@
     <!-- Here, the floating donation box ceases to float -->
 
     <div class="w-full mt-12">
-      <div class="max-w-4xl mx-auto p-10">
+      <form action="/pledge" method="post" class="max-w-4xl mx-auto p-10">
         <h1 class="text-center text-2xl font-sans">Donation options</h1>
 
         <ul class="mt-10 mb-5 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
@@ -232,9 +232,15 @@
           </div>
 
           <div class="my-8">
-            <label for="input-contact" class="block text-xl">Email or Phone:</label>
-            <input name="contact" id="input-contact" placeholder="editors@snipettemag.com" class="block font-sans text-2xl mb-2 w-full bg-gray-100 p-2 rounded-md" required/>
-            <label for="input-contact" class="block">We will use this to contact you when it's time to collect the payment</label>
+            <label for="input-email" class="block text-xl">Email:</label>
+            <input name="email" type="email" id="input-email" placeholder="editors@snipettemag.com" class="block font-sans text-2xl mb-2 w-full bg-gray-100 p-2 rounded-md" required/>
+            <label for="input-contact" class="block">We will use this (and/or phone) to contact you when it's time to collect the payment</label>
+          </div>
+
+          <div class="my-8">
+            <label for="input-phone" class="block text-xl">Phone (with country code):</label>
+            <input name="phone" type="tel" id="input-phone" placeholder="+91 0000000000" pattern="\+[0-9]{2,3} {0,1}-{0,1}[0-9]{10,13}" class="block font-sans text-2xl mb-2 w-full bg-gray-100 p-2 rounded-md"/>
+            <label for="input-contact" class="block">This is optional, but please include one if it's the best way of contacting you—we can't collect funds if we can't reach out!</label>
           </div>
 
           <div class="my-8">
@@ -274,11 +280,9 @@
           </div>
         </div>
 
-        <button class="bg-green-500 my-5 w-full p-5 text-xl uppercase font-sans rounded-md">
-          Save Pledge
-        </button>
+        <input type="submit" name="submit" value="Save Pledge" class="bg-green-500 my-5 w-full p-5 text-xl uppercase font-sans rounded-md"/>
 
-      </div>
+      </form>
     </div>
 
     <div class="bg-orange-200 text-orange-900 w-full">