add new rsf-http-register config options

Author: Connoropolous

package-lock.json

@@ -9,6 +9,7 @@
     "react-scripts": "^3.2.0"
   },
   "dependencies": {
+    "@types/react": "^16.9.23",
     "@types/socket.io-client": "^1.4.32",
     "dotenv": "^8.2.0",
     "electron-log": "^3.0.8",
@@ -23,7 +24,7 @@
     "rsf-mattermostable": "1.0.15",
     "rsf-smsable": "1.0.21",
     "rsf-telegramable": "1.0.82",
-    "rsf-types": "0.0.35",
+    "rsf-types": "0.0.36",
     "socket.io-client": "^2.3.0",
     "typescript": "^3.7.2"
   },

package.json

@@ -3,15 +3,20 @@ import './PublicLinkForm.css'
 
 import FormLimitPicker from '../forms/FormLimitPicker'
 import FormTimePicker from '../forms/FormTimePicker'
+import RegisterTypesConfig from '../RegisterTypesConfig'
 
 export default function PublicLinkForm({ publicLink, updatePublicLink }) {
+  const TITLE_KEY = 'title'
   const DESCRIPTION_KEY = 'description'
   const MAX_TIME_KEY = 'maxTime'
   const MAX_PARTICIPANTS_KEY = 'maxParticipants'
+  const TYPES_KEY = 'types'
 
+  const title = publicLink[TITLE_KEY]
   const description = publicLink[DESCRIPTION_KEY]
   const maxTime = publicLink[MAX_TIME_KEY]
   const maxParticipants = publicLink[MAX_PARTICIPANTS_KEY]
+  const types = publicLink[TYPES_KEY]
 
   const participantLimitInput = {
     shortLabel: 'Number of participants',
@@ -26,16 +31,29 @@ export default function PublicLinkForm({ publicLink, updatePublicLink }) {
     <div className='public-link-form'>
       <div className='link-delivery'>You’ll get the link after you submit</div>
       <div className='input-wrapper'>
-        <div className='input-label'>Description in the link</div>
+        <div className='input-label'>Title</div>
         <div className='input-help-label'>
-          Write down a short description of what this rapid sensemaking process
+          Provide a welcoming title that will be presented in big text at the top of the page
+        </div>
+        <textarea
+          value={title}
+          onChange={evt => updatePublicLink(TITLE_KEY, evt.target.value)}
+        />
+      </div>
+      <div className='input-wrapper'>
+        <div className='input-label'>Description</div>
+        <div className='input-help-label'>
+          Write down a short description of what this flow
           is about and what it will involve (optional)
         </div>
         <textarea
           value={description}
           onChange={evt => updatePublicLink(DESCRIPTION_KEY, evt.target.value)}
         />
       </div>
+      <div className='input-wrapper'>
+        <RegisterTypesConfig types={types} onChange={val => updatePublicLink(TYPES_KEY, val)} />
+      </div>
       <div className='input-row'>
         <div className='input-wrapper'>
           <FormLimitPicker

src/components/PublicLinkForm/index.js

@@ -0,0 +1,17 @@
+.register-types {
+  margin-top: 10px;
+}
+
+.register-type {
+  color: #4a4a4a;
+  font-size: 18px;
+}
+
+.register-type input {
+  cursor: pointer;
+}
+
+.register-type label {
+  margin-left: 6px;
+  cursor: pointer;
+}

src/components/RegisterTypesConfig/RegisterTypesConfig.css

@@ -0,0 +1,19 @@
+import React from 'react'
+import './RegisterTypesConfig.css'
+
+export default function RegisterTypesConfig({ types, onChange }) {
+  return <>
+    <div className='input-label'>Apps</div>
+    <div className='input-help-label'>
+      Select which apps participants will be allowed to register with
+    </div>
+    <div className="register-types">
+      {Object.keys(types).map(type => {
+        return <div className="register-type" key={type}>
+          <input type="checkbox" id={type} checked={types[type]} onChange={() => onChange({...types, [type]: !types[type]})}></input>
+          <label htmlFor={type}>{type}</label>
+        </div>
+      })}
+    </div>
+  </>
+}

src/components/RegisterTypesConfig/index.js

@@ -46,9 +46,16 @@ export default function TemplatePreview({
       {/* Step 2 */}
       {method === FROM_PUBLIC_LINK && (
         <>
+          <TemplatePreviewElement label={'Public Link Title'}>
+            {publicLink.title}
+          </TemplatePreviewElement>
           <TemplatePreviewElement label={'Public Link Description'}>
             {publicLink.description}
           </TemplatePreviewElement>
+          <TemplatePreviewElement label={'Apps Enabled'}>
+            {/* filter out ones with FALSE value */}
+            {Object.keys(publicLink.types).filter((type) => publicLink.types[type]).map(type => <div>{type}</div>)}
+          </TemplatePreviewElement>
           <TemplatePreviewElement label={'Public Link Time Limit'}>
             <RenderMaxTime seconds={publicLink.maxTime} />
           </TemplatePreviewElement>

src/components/TemplatePreview/index.js

@@ -17,9 +17,15 @@ function defaultProcessConfig(): ProcessConfig {
       participantList: null,
       publicLink: {
         id: guidGenerator(),
+        title: 'You are invited to join a rapid sensemaking flow',
         description: '',
         maxTime: 5 * 60, // 5 minutes, in seconds
-        maxParticipants: '*' // Unlimited
+        maxParticipants: '*', // Unlimited
+        types: {
+          telegram: true,
+          sms: true,
+          mattermost: true
+        }
       }
     },
     // step 3