Make Devices work

mozilla · Oct 24, 2019 · 22959e4 · 22959e4
1 parent ea19c8b
commit 22959e4
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 20 deletions.
diff --git a/field_config.json b/field_config.json
@@ -1,7 +1,13 @@
 {
-  "devices": {
-    "id": 200,
-    "content": "**Device:** ",
+  "multiple-devicesOS": {
+    "id": 1000,
+    "content": "**Device OS:** ",
+    "required": true,
+    "pattern": ".+"
+  },
+  "multiple-devicesVersion": {
+    "id": 1000,
+    "content": "**Device Version:** ",
     "required": true,
     "pattern": ".+"
   },

diff --git a/lib/formHandling.js b/lib/formHandling.js
@@ -34,10 +34,6 @@ function parseForm(req) {
           field = `@${field}`;
         }
 
-        if (name == 'otherbrowser') {
-          field = field === 'yes' ? '☒' : '☐';
-        }
-
         formFields[name] = field;
       })
       .on('file', (name, file) => {
@@ -68,34 +64,44 @@ function parseForm(req) {
   });
 }
 
-function validateFields(fields) {
+function validateFields(formFields) {
   return Object.keys(fieldDefinition).every((fieldKey) => {
-    const definition = fieldDefinition[fieldKey];
+    if (fieldKey.startsWith('multiple')) {
+      return true;
+    }
+
+    let definition = fieldDefinition[fieldKey];
 
     if (!definition) {
       console.error('NO_DEFINITION_FOUND_FOR', fieldKey);
       return false;
     }
 
-    if (definition.required && !fields[fieldKey]) {
+    if (definition.required && !formFields[fieldKey]) {
       return false;
     }
 
     const regex = new RegExp(definition.pattern, 'i');
-    if (!regex.test(fields[fieldKey])) {
+    if (!regex.test(formFields[fieldKey])) {
       return false;
     }
 
     return true;
   });
 }
 
-function prepareFieldsToArray(fields) {
-  return Object.keys(fields).map((fieldKey) => {
+function prepareFieldsToArray(formFields) {
+  return Object.keys(formFields).map((fieldKey) => {
+    let configurationFieldKey = fieldKey;
+    if (fieldKey.startsWith('multiple-')) {
+      const fieldNameMatch = fieldKey.match(/^(multiple-.*)-\d+/);
+      configurationFieldKey = fieldNameMatch.length > 1 && fieldNameMatch[1];
+    }
+
     return {
       name: fieldKey,
-      text: fields[fieldKey],
-      config: fieldDefinition[fieldKey],
+      text: formFields[fieldKey],
+      config: fieldDefinition[configurationFieldKey],
     };
   });
 }

diff --git a/lib/githubBackend.js b/lib/githubBackend.js
@@ -56,6 +56,8 @@ function prepareIssueText(fields) {
 
     if (fieldIssueLabelConfig && fieldIssueLabelConfig.heading) {
       text += `${fieldIssueLabelConfig.content}\n${fieldIssueText}\n\n`;
+    } else if (field.name.startsWith('multiple-devicesOS-0')) {
+      text += `## Devices\n\n${fieldIssueLabelConfig.content}${fieldIssueText}\n`;
     } else if (fieldIssueLabelConfig && fieldIssueLabelConfig.image) {
       text += `${fieldIssueLabelConfig.content}\n![Problem Screenshot](${BASE_URL}/screenshots/${fieldIssueText})\n\n`;
     } else {

diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
@@ -77,6 +77,14 @@ form textarea {
   min-width: 75%;
 }
 
+#devices {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
 .input-group {
   display: flex;
   flex-direction: column;
@@ -192,6 +200,10 @@ footer ul li {
   text-align: center;
 }
 
+.big-padding-top {
+  padding-top: 30px;
+}
+
 .big-padding {
   padding-top: 30px;
   padding-bottom: 50px;

diff --git a/views/index.pug b/views/index.pug
@@ -21,10 +21,29 @@ block content
 
       form(action="/create", method="POST", enctype="multipart/form-data")
         label Fields marked with <span>*</span> are required.
-        div(class="input-group")
-          label(for="devices") Devices... TBD
-            span &nbsp;*
-          input(id="devices", type="text", name="devices", required)
+        h2 What kind of devices do you have connected to Firefox Sync? Please list all of the connected devices.
+        div(id="devices")
+          div(class="input-group")
+            label(for="multiple-devicesOS-0") Device 1 - Operating System
+              span &nbsp;*
+            select(id="multiple-devicesOS-0", name="multiple-devicesOS-0", required)
+              option(value="", selected, disabled) Please select your Operating System
+              option(value="Desktop - Windows") Desktop - Windows
+              option(value="Desktop - macOS") Desktop - macOS
+              option(value="Desktop - Linux") Desktop - Linux
+              option(value="Phone - Android") Phone - Android
+              option(value="Phone - iOS") Phone - iOS
+              option(value="Phone - Other") Phone - Other
+              option(value="Tablet - Android") Tablet - Android
+              option(value="Tablet - iOS") Tablet - iOS
+              option(value="Tablet - Other") Tablet - Other
+          div(class="input-group")
+            label(for="multiple-devicesVersion-0") Device 1 - Firefox Version
+              span &nbsp;*
+            input(id="multiple-devicesVersion-0", type="text", name="multiple-devicesVersion-0", required)
+        button(id="add-device") Add device
+
+        h2.big-padding-top Issue Description
         div(class="input-group")
           label(for="type") Issue Type
             span &nbsp;*
@@ -34,7 +53,6 @@ block content
             option(value="Localization Issue - Text not appearing correctly in your language") Localization Issue - Text not appearing correctly in your language
             option(value="Functional (doesn’t behave as expected)") Functional (doesn’t behave as expected)
             option(value="Other") Other
-        h2 Issue Description
         div(class="input-group")
           label(for="reproduce") <strong>Steps to reproduce&nbsp;<span>*</span></strong> - Write down everything you did immediately before you arrived at the bug as clearly as possible
           textarea(name="reproduce", required, placeholder="1) Did ...\n2) Clicked on ...\n3) etc..")