create separate registration page

src/constants.ts

@@ -1,13 +1,16 @@
 const VIEWS = {
-  REGISTER: 'register'
+  REGISTER: 'register',
+  REGISTERED: 'registered'
 }
 
 const URLS = {
   DEV: {
-    REGISTER: '/dev-register'
+    REGISTER: '/dev-register',
+    HANDLE_REGISTER: '/handle-dev-register'
   },
   REGISTER: (id: string) => `/register/${id}`,
-  HANDLE_REGISTER: (pre: string) => `${pre}/new-participant`
+  HANDLE_REGISTER: (pre: string) => `${pre}/new-participant`,
+  REGISTERED: '/registered'
 }
 
 const EVENTS = {

src/index.ts

@@ -6,7 +6,11 @@ import http from 'http'
 import path from 'path'
 import socketIo from 'socket.io'
 
-import { addTestDevPage, addSocketListeners } from './participant_register'
+import {
+  addRegisteredPage,
+  addTestDevPage,
+  addSocketListeners
+} from './participant_register'
 
 type CloseFn = () => void
 export default function start(): Promise<CloseFn> {
@@ -16,10 +20,12 @@ export default function start(): Promise<CloseFn> {
   app.engine('handlebars', exphbs())
   app.set('view engine', 'handlebars')
   app.set('views', path.join(__dirname, '..', 'views'))
+  app.use(express.static('public'))
   // participant registration
   if (process.env.NODE_ENV === 'development') {
     addTestDevPage(app)
   }
+  addRegisteredPage(app)
   addSocketListeners(io, app)
   return new Promise((resolve, reject) => {
     server

src/participant_register.ts

@@ -32,7 +32,7 @@ const addTestDevPage = (app: express.Application) => {
   /* dev endpoint */
   app.get(URLS.DEV.REGISTER, (req, res) => {
     const registerTemplate: RegisterTemplate = {
-      formHandler: '//',
+      formHandler: URLS.DEV.HANDLE_REGISTER,
       showParticipantBlock: true,
       showTime: true,
       remainingTime: '600',
@@ -45,6 +45,28 @@ const addTestDevPage = (app: express.Application) => {
     }
     res.render(VIEWS.REGISTER, registerTemplate)
   })
+
+  // endpoint for handling form submits
+  app.post(
+    URLS.DEV.HANDLE_REGISTER,
+    express.urlencoded({ extended: true }),
+    (req, res) => {
+      res.redirect(`${URLS.REGISTERED}?type=${req.body.type}`)
+    }
+  )
+}
+
+// The page that shows people confirmation that they've registered successfully
+const addRegisteredPage = (app: express.Application) => {
+  app.get(URLS.REGISTERED, (req, res) => {
+    const type = new URLSearchParams(req.query).get('type')
+    const registeredTemplate = {
+      typeAsString: type,
+      layout: false
+    }
+    registeredTemplate[type] = true
+    res.render(VIEWS.REGISTERED, registeredTemplate)
+  })
 }
 
 // validate a proposed ContactableConfig
@@ -83,7 +105,6 @@ const createNewRegister = (
     registrationClosed: false
   }
 
-  console.log('standing up new registration page at ' + id)
   // new route for serving the registration form page
   app.get(id, (req, res) => {
     const formHandler = URLS.HANDLE_REGISTER(id)
@@ -134,7 +155,6 @@ const openRegister = (
     // can only fire once
     const complete = () => {
       if (!register.registrationClosed) {
-        console.log('closing registration for ' + register.id)
         register.registrationClosed = true
         clearTimeout(timeoutId)
         resolve(register.results)
@@ -168,7 +188,7 @@ const openRegister = (
         if (register.results.length === register.maxParticipants) {
           complete()
         }
-        res.redirect(`${register.id}?success`)
+        res.redirect(`${URLS.REGISTERED}?type=${input.type}`)
       }
     )
   })
@@ -218,4 +238,4 @@ const addSocketListeners = (io: SocketIO.Server, app: express.Application) => {
     })
   })
 }
-export { addSocketListeners, addTestDevPage }
+export { addRegisteredPage, addSocketListeners, addTestDevPage }

views/partials/contactable_form.handlebars

@@ -13,14 +13,14 @@
 	<div>
 		<label for="type">Contact Type</label>
 		<select class="type" name="type">
-			<option value="phone">Phone</option>
+			<option value="sms">SMS</option>
 			<option value="mattermost">Mattermost</option>
 			<option value="telegram" selected="selected">Telegram</option>
 		</select>
 	</div>
-	<div class="contactable-type phone">
-		<label for="phone-number">Number</label>
-		<input type="text" class="phone-number" name="phone-number" placeholder="+12223334444">
+	<div class="contactable-type sms">
+		<label for="sms-number">Number</label>
+		<input type="text" class="sms-number" name="sms-number" placeholder="+12223334444">
 	</div>
 	<div class="contactable-type mattermost">
 		<label for="mattermost-username">Username</label>
@@ -35,11 +35,6 @@
 			placeholder="https://chat.server.org" value="https://">
 	</div>
 	<div class="contactable-type telegram show">
-    <p>
-      In order to participate, you will need to first send a message to the bot called 
-      <a href="https://t.me/rapid-sensemaking-bot" target="_blank">rapid-sensemaking-bot</a>.
-      You won't be able to receive messages until you do.
-    </p>
 		<label for="telegram-username">Username</label>
 		<input type="text" class="telegram-username" name="telegram-username" autofocus>
 	</div>
@@ -100,15 +95,15 @@
 			n.onchange = updateIdForTelegram
 		})
 
-		function updateIdForPhone(event) {
+		function updateIdForSMS(event) {
 			const node = event.target
 			const contactableFormWrapper = node.parentNode.parentNode
-			const value = contactableFormWrapper.querySelector('.phone-number').value
+			const value = contactableFormWrapper.querySelector('.sms-number').value
 			contactableFormWrapper.querySelector('.id').value = value
 		}
-		document.querySelectorAll('.phone-number').forEach(n => {
-			n.onkeyup = updateIdForPhone
-			n.onchange = updateIdForPhone
+		document.querySelectorAll('.sms-number').forEach(n => {
+			n.onkeyup = updateIdForSMS
+			n.onchange = updateIdForSMS
 		})
 	}
 </script>

views/partials/telegram_note.handlebars

@@ -0,0 +1,11 @@
+<p>
+  As a telegram user, <i>if you have not already done so in the past</i>, in
+  order to participate you will need to first send a message to the telegram bot
+  called
+  <b
+    ><a href="https://t.me/RapidSensemakingBot" target="_blank"
+      >rapid-sensemaking-bot</a
+    ></b
+  >. You won't be able to receive messages until you do. You will only have to
+  do this for this registration, and not future ones.
+</p>