coralproject / elkhorn Goto Github PK

Journalists should be able to select (most likely in a drag and drop interaction style) from a list in order to create their form.

Text fields the list should include are as follows:

• Name
• Email
• DOB
• Phone number
• City
• State
• Country
• Select multiple answers (this might manifest as radio buttons and/or a dropdown)
• Select one answer from a list (for use on a question like "What is your income level?"
• Text without a character limit
• Text with a character limit

Some ideas to tidy up this repo:

• Clean unused dependencies in package.json
• Rollup needs a slightly different .babelrc to include the es2015-rollup plugin, maybe we can point to a different .babelrc for rollup on build time.
• Create an NPM task that builds the ask bundle?

We are not currently handling a server request error on submit

Make sure date field build works, or remove the third-party dependency and build a simple date picker from scratch.

Namely:

• short text
• longer text
• location
• numbers
• multiple choice
• email address
• date

A note on multiple choice: if allow multiple is checked, it will render checkboxes, otherwise it would render radio buttons.

A check on the list means that we have figured out:

• General Spec
• Data structure
• Validation
• Keyboard nav
• Config form

We are currently importing a hard-coded font directly from Google Fonts.

Embedding fonts will vastly increase the build size, I would suggest either using Google Fonts (very simple) or uploading fonts to a CDN where they can be imported (added complexity).

Add ARIA roles for testing with screen readers.

Elkhorn should use the region to generate the S3 url instead of relying on a baseUrl config value.

For example, this is the kind of URL that elkhorn generates:

If you try to go to that page (https://s3.amazonaws.com/ask-stg/5811be4bc155900001a0e3c1.html) you get an error.

The correct URL is https://s3-us-west-2.amazonaws.com/ask-stg/5811be4bc155900001a0e3c1.html, according to the docs at http://docs.aws.amazon.com/general/latest/gr/rande.html#s3_region

Currently we are only publishing the .js packet for each form. In order to see the form in an iframe we need to hit an endpoing with simply generates some html around the js. This puts elkhorn in the critical path for form serving meaning that we would need to scale it.

Publish an .html file alongside the .js files containing everything we need for a form. This will allow us to take full advantage of CDN publish static for all form serving.

See: coralproject/cay#374

Add support for basic theming:

• Font
• Background color
• Foreground color

Make sure the Map field works when building with rollup.

Deadline needs to be 3pm ET today. If that means reducing the must haves, so be it. But as it stands... (FYI most of these are cosmetic)

Must Haves

Form Creator

• Saving the form needs to work
• "Untitled Form" in the top bar is currently a button with mouseover. It shouldn't have mouseover.
• Is the "Share your story" text in the correct font? Looks like it changed with the recent update.
• Make the inactive message darker - right now is in a very light, hard to read color
• remove "(Or Field Label)" from the individual question prompt.
• add line space below "Required"
• Change "Custom thank you message (optional)" to "Thank you message" and the text inside to "Thank you for helping us with our journalism. We read all submissions, and will be in touch if we have any more questions."

Preview form view in Form Creator:

• Change the turquoise bar in Share your Story to Coral colors - use the pale Coral color in the
  sidebar
• make SUBMIT larger in the button
• Change the serif font in the headline to the Sans we use elsewhere
• Increase the leading between the headline and the subhead

Manage Gallery

• Edit button should work on Gallery submissions
• Correct spelling mistake: "Embded Code"
• Remove "Phone" from Submission Author Attribution

View Forms

• Change Title "Answers" to "Submissions" in the lists

View a single form

• Remove the Edit Form button from the top bar (it doesn't work and goes to a silly message)
• Put in dummy text into Submission Author info in View Form submissions (or remove the box -having it blank asks more questions than it should)

Nice to Haves

Form creator

• The share button brings up a modal for sharing (we have the design already, just needs to be placed there. Doesn't need to work at this stage.)
• If I make a change to a question text and then hit "X" instead of Save, it saves anyway. No way to abandon your changes unsaved.
• Make Multiple Choice work!
• Make Date work!
• Make PIIs transfer into View Submission mode
• [ ]

Review submissions

• if no response was submitted to a question, don't display it as "No Response" in Review Submissions - just don't show it
• institute the "View All Answers to this Question" mode

Add a "thank you" message after form submission.

Cay will now POST and PUT forms and galleries directly to Pillar. Elkhorn will be limited to the publishing actions.

coralproject/cay#635
coralproject/shelf#187

It should follow the setting

What?

When previewing a multiple choice answer with a long title, it looks weird. See this comment and this answer by emma in this issue

• move the x button so it's always top right
• make the boxes uniform height

How are we going to determine which user is logged in the parent site (partner who installed an Ask)?

Maybe we could send some parameters via query string to the embeddable.

Form submissions are throwing cors errors due to lack of allow origin headers:

There's a cors error when submitting forms.

To reproduce,

1. go here: https://s3.amazonaws.com/nyt-stage/57c8719f95ae170007b5afff.html
2. fill out form
3. Click SUBMIT
4. open web console, see this error:

We need to keep Access-Control-Origin at * or provide another way of letting people host these forms anywhere on the web. This is not allowed "when the credentials flag is true."

set xhr's withCredentials to false as we don't require credentials when posting from a form.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Credentials

We are delivering non-gzipped files. For example the one being consumed by https://coralproject.net/contact.html has a size of 149kb. Applying gzip -9 to that file I get a 34kb file. This results on a percentage increase of 338%

Note here:
http://ec2-54-175-45-178.compute-1.amazonaws.com/forms/5798fdd1c0bbf70007328934/gallery

The the gallery manager shows three names:
Anon..., undecided
Anon...
J. J.

On the gallery preview:
Blank
Samir...
J. J.

Create functionality to publish a gallery to a static file using the same methodology that a form is published.

We need to place the user identity somewhere in the form, assuming we got the commenter ID somehow from the news organization.

We need an autosave approach to persist the form state in case a user accidentaly closes the browser window, loses connection, etc.

localhost is hardcoded here:

https://github.com/coralproject/elkhorn/blob/master/server/public/iframe.html#L14

Making elkhorn unsuitable for staging.

Here we track progress on any related issues for the end user embeddables.

This epic is for discussing the shape of the ask schemas

Readers should be allowed to select whether their submission is just for the journalist vs. ok for the public to see.

Additionally, journalists will need an area in the Ask creator to add this option to the form.

Include only the widgets being used on a form when building with Rollup.

Iframes can be persnickety. We may need to find ways to make the responsive.

Here's one library that does so: http://blog.apps.npr.org/pym.js/

Experiment with iframes and do some user testing to figure out whether or not it is worth incorporating a library like this.

when moved to wrapper settings

should index.js check for the server/widgets directory and create it if it's not there? It seems unnecessary to have to manually create that folder before things work properly.

It seems that the baseURL is not being observed in the uploader as seen

I'd think that the uploader should not have the widgets bucket hardcoded or the baseURL hardcoded and instead use the provided configuration.

Schema:

{
    "id": <UUID>,
    "settings": {
        "saveDestination": <String:URL>,
        "showFieldNumbers": <Boolean>
    },
    "header": {
        "title": <String>,
        "description": <String>
    },
    "footer": {
        "conditions": <String>
    },
    "finishedScreen": {
        "title": <String>,
        "description": <String>
    },
    "steps": [
        {
            "id": <Number>,
            "name": <String>,
            "widgets": [
                {
                    "id": <Number>,
                    "type": <String>,
                    "component": <String>,
                    "title": <String>,
                    "wrapper" : <Object>,

                    "props": <Object>
                }
            ]
        }
    ]
}

Example:

{
    "id": 1,
    "settings": {
        "saveDestination": "http://coralasks.theguardian.com/ask/44",
        "showFieldNumbers": true
    },
    "header": {
        "title": "Share Your Story.",
        "description": "As part of our ​Op-Docs ​series​ Conversation​s​ ​on Race​,​​ we ​want to hear your​​ ​​experiences ​confronting issues of race in your life. We invite you to share your stories, some of which we are featuring on a page of readers’ contributions."
    },
    "footer": {
        "conditions": "By submitting to us, you are promising that the content is original, doesn’t plagiarize from anyone or infringe a copyright or trademark, doesn’t violate anybody’s rights and isn’t libelous or otherwise unlawful or misleading. You are agreeing that we can use your submission in all manner and media of The New York Times and that we shall have the right to authorize third parties to do so. And you agree to the rules of our Member Agreement, found online at our website."
    },
    "finishedScreen": {
        "title": "Thanks.",
        "description": "This is a more verbose thank you message."
    },
    "steps": [
        {
            "id": 1,
            "name": "first_page",
            "widgets": [
                {
                    "id": 100,
                    "type": "field",
                    "component": "MultipleChoice",
                    "title": "Select one or several themes for your story",

                    "wrapper" : {
                        "required": true,
                        "pseudoLabel": true                 
                    },

                    "props": {
                        "multipleChoice": true,
                        "options": [
                            {
                                "title": "Family Life"
                            },
                            {
                                "title": "Friendship/Love"
                            },
                            {
                                "title": "School"
                            },
                            {
                                "title": "Law Enforcement"
                            },
                            {
                                "title": "Work"
                            },
                            {
                                "title": "Other"
                            }
                        ]
                    }
                },
                {
                    "id": 101,
                    "type": "field",
                    "component": "TextArea",
                    "title": "Write your story",
                    "required": true,
                    "props": {
                        "maxLength": 400
                    }
                },
                {
                    "id": 102,
                    "type": "field",
                    "component": "TextField",
                    "title": "Name",
                    "required": true,
                    "props": {
                        "maxLength": 100
                    }
                },
                {
                    "id": 103,
                    "type": "field",
                    "component": "TextField",
                    "title": "Age",
                    "validationMessage": "Please type a valid number.",
                    "props": {
                        "validateAs": "number"
                    }
                },
                {
                    "id": 104,
                    "type": "field",
                    "component": "TextField",
                    "title": "E-mail",
                    "validationMessage": "Please type a valid e-mail address.",
                    "props": {
                        "maxLength": 100,
                        "validateAs": "email"
                    }
                }
            ]
        }
    ]
}

https://demo.coralproject.net/elkhorn_api/create

Failed to load resource: the server responded with a status of 502 ()

Steps to reproduce:

1. Try to save new Ask
2. No error on frontend
3. Console gives above error

schema:

{
  "id": <UUID>
  "ask_id": <UUID>
  “user”: <Object>
  "header": <Object>,
  "footer": <Object>,
  "replies": [
    {
      "widget_id": <Number>,
      "answer": <String>,
      “edited”: <Boolean>,
      "question": {
        "title": <String>,
    options: <Array>
      }
    }
  ]
}

example:

{
    "id": ObjectId(12312321412),
    "ask_id": ObjectId(12312321ddd),    
    “user”: {
    },

    "header": { ... },
    "footer": { ... },

    "replies": [
        {
            "widget_id": 100,

"answer": "Family Life",
            “edited”: “”,

"question": {
                "title": "blah",
                options: ['hi', 'ho', 'lets go']
            }

        }
    ]


}

We are now hardcoding the host, we should use a config.