Respond with human-friendly message when verification is successful

when client accepts text/html

.env.sample

@@ -3,6 +3,7 @@ PORT=3005
 
 # name of the app that sends the emails - featured in the message subject or body
 APP_NAME=Sleepy.bike
+APP_URL=https://sleepy.bike
 # provide path to a logo to display on top of emails - keep it small!
 # absolute path, or relative path to the base of the project
 APP_LOGO=./logo.png

src/config/index.ts

@@ -9,6 +9,8 @@ export const baseUrl = process.env.BASE_URL ?? 'http://localhost:3005'
 
 export const appName = process.env.APP_NAME ?? 'Sleepy.bike'
 
+export const appUrl = process.env.APP_URL ?? 'https://sleepy.bike'
+
 // default is sleepy.bike logo
 export const appLogo = process.env.APP_LOGO ?? './logo.png'
 

src/controllers/integration.ts

@@ -110,9 +110,33 @@ export const finishIntegration: Middleware = async ctx => {
       token: jwt,
     }
   } else {
-    ctx.response.body = jwt
-    ctx.set('content-type', 'text/plain')
     ctx.response.status = 200
+
+    const accepts = ctx.accepts(['html', 'json'])
+
+    switch (accepts) {
+      case 'html': {
+        ctx.set('content-type', 'text/html')
+        let body = `Your email was successfully verified.`
+        if (config.appUrl) {
+          body += ` You can go back to <a href="${config.appUrl}">${config.appName}</a> now.`
+        }
+        ctx.response.body = body
+        break
+      }
+      case 'json': {
+        ctx.response.body = JSON.stringify({
+          message: 'Your email was successfully verified.',
+          token: jwt,
+        })
+        ctx.set('content-type', 'application/json')
+        break
+      }
+      default: {
+        ctx.response.body = jwt
+        ctx.set('content-type', 'text/plain')
+      }
+    }
   }
 }
 

src/test/integration-finish.spec.ts

@@ -5,7 +5,7 @@ import { describe } from 'mocha'
 import { SinonSandbox, createSandbox } from 'sinon'
 import * as config from '../config'
 import { fetchRdf } from '../utils'
-import { initIntegration } from './helpers'
+import { initIntegration, takeScreenshot } from './helpers'
 import { setupEmailSettings } from './helpers/setupPod'
 import { authenticatedFetch, person } from './testSetup.spec'
 
@@ -48,7 +48,9 @@ describe('email verification via /verify-email?token=jwt', () => {
 
   it('[correct token] should return proof of verification for the user to save on their pod', async () => {
     // the proof is a JWT token, it keeps email and webId of the person as payload
-    const response = await fetch(verificationLink)
+    const response = await fetch(verificationLink, {
+      headers: { accept: 'text/plain' },
+    })
     expect(response.ok).to.be.true
     const jwt = await response.text()
     const payload = jsonwebtoken.decode(jwt) as jsonwebtoken.JwtPayload
@@ -66,9 +68,11 @@ describe('email verification via /verify-email?token=jwt', () => {
     const quadsBefore = await fetchRdf(settings)
     expect(quadsBefore).to.have.length(0)
 
-    const response = await fetch(verificationLink)
+    const response = await fetch(verificationLink, {
+      headers: { accept: 'application/json' },
+    })
     expect(response.ok).to.be.true
-    const jwt = await response.text()
+    const { token: jwt } = await response.json()
 
     // after, the settings should contain triple <webId> <verification token predicate (config)> "token".
     const quadsAfter = await fetchRdf(settings)
@@ -80,6 +84,19 @@ describe('email verification via /verify-email?token=jwt', () => {
     expect(quadsAfter[0].object.value).to.equal(jwt)
   })
 
+  it('[correct token & client accepts html] should display human-readable informative message', async () => {
+    const response = await fetch(verificationLink, {
+      headers: { accept: 'text/html' },
+    })
+    expect(response.ok).to.be.true
+    const body = await response.text()
+    expect(response.headers.get('content-type')).to.equal('text/html')
+    expect(body).to.include('Your email was successfully verified')
+
+    // generate screenshot
+    await takeScreenshot({ html: body }, 'successHtmlResponse')
+  })
+
   it('[incorrect token] should respond with 400', async () => {
     const response = await fetch(
       verificationLink.slice(0, -32) + '0'.repeat(32),