Coding · ·

Mock email sending

The software development methodologies task (aka "Bob's B&B") will include "sending an email".

Your code won't actually be sending an email, but you will be using an HTML form to pretend you are.

Here's the skeleton of the form you'll need:

<form method="post" action="https://emailer.compsci.me/email">
  <label>From: <input type="text" name="from"></label>
  <label>Message: <textarea name="body"></textarea></label>
  <input type="hidden" name="redirect" value="http://www.mathsuniverse.com/lmc">
  <button>Send</button>
</form>

I've set up a server at https://emailer.compsci.me to do something when you send POST requests to /email. I haven't set it up to actually send an email, but it will temporarily keep track of what you send to it.

Remember from the HTML forms guide that the server will receive key-value pairs, so for <input type="text" name="from"> the key will be 'from' and the value will be what the user enters in that field.

Sometimes we want to send data that the user doesn't edit themselves, and we do that with <input type="hidden">. Here we have one with name="redirect" and then a value hardcoded. My server is set up so if you provide a field with name redirect, after it has 'sent the email' it will redirect to that URL. If we didn't do this, when someone clicks the form they'd be taken to the URL in the action attribute of the form, but you probably want to take them to a 'Booking complete' page or similar instead.

Obviously... change the redirect URL from the example given above to your own 'booking complete' page.

Your form may have more fields (and look better!), depending on what kind of data you think you need to send.

You can see the sample code above running at https://emailer.compsci.me - you can try it out along with checking if the 'emails' have been sent, below.

Checking your 'emails' have been sent

Again, we're not actually sending emails, but instead storing the data you 'email' temporarily on the server.

To check that your 'email' has been sent, visit https://emailer.compsci.me/email and you should see it there at the bottom (when you access the URL this way, you're doing a GET rather than a POST request).

What does the server actually do?

You don't need to know this for this task, but here's the relevant code on the server:

import app from './index.html'

let emails = ['Emails rececieved will appear on this page']

let server = Bun.serve({
  routes: {
    '/': app,
    '/email': {
      GET: () => Response.json({ emails }),
      POST: async (req) => {
        if (emails.length > 20) emails.shift()
        let formData = await req.formData()
        let email = {}
        for (let pair of formData.entries()) email[pair[0]] = pair[1]
        emails.push(email)
        return Response.redirect(email.redirect || req.headers.get('origin'), 303)
      }
    }
  }
})

console.log(`Listening on ${server.url}`)

... notice how GET: () => Response.json({ emails }) just sends back the emails variable as JSON, while the POST route for /email inspects the req.formData() it receives and pushes the key-value pairs from there to the emails variable. Then, it redirects back to the page you provided with <input type="hidden" name="redirect" value="...">, or if you didn't send that, req.headers.get('origin') redirects the user to the page they just came from.

How can I actually send emails?

That's beyond the scope of this task, but you can see this guide I made for how to send real emails.