Overview of Form

On the form create page, 'creator', you will see some options that are self-explanatory. The page and question inputs have been laid out as a table. As more questions get added, a space will appear between each question area, which we call a 'block' (IE; 'question block'). The left-most the table describes the input. The input is in the middle of the table. The right-most side of the page has additional options that may affect a 'row' or a 'cell' of a page.

Form Title

Form Title option, as one might expect, sets the title of the form.

Show Response View Page

When set to no the form filler will redirected on the 'thank you' page upon submitting a form. When set to yes, the form filler will be redirected to the 'view' page where they can also see other responses.

Question

Question option sets the question for that block.

Delete Question

This button, located on the far right, deletes the entire question block, useful if you have too many questions.

Response Required?

This input is either; 'yes' (response is required) or 'no' (response is not required).

By default this is set to 'no'.

If the form filler submits a form without all the required responses, the system will not accept the form and ask the form filler to correct this. (Or it will when I program that in. For now, it just does nothing with the response.)

Upload Image?

Upload Image is an optional input, that must be under 5Mb and accepts only the following file types: png, jpeg, jpg, gif, webp.

If an image has been supplied, then the input will be replaced with the image that was selected. The image will appear small but is in fact the image you have uploaded. You can click on the image which will open, depending on your browser settings, in a new tab or a new window.

Note that excessively large images will not appear well on the form itself. On the form, the form filler can click on the image to see the image 'as-is' as it will open in a new tab or window.

When an image is uploaded, a new button called 'Delete Image' will appear.

In some cases, one will see a 'comment' in the 3rd column which suggests an error. See Network Error for a description of the types of errors one could see.

Delete Image?

This button resets the upload image input back to a regular 'file upload' input, however, on disk the image is not actually deleted.

A system automated function (yet to be created) will automatically remove images that are not used in a form.

Type of question?

This input is a drop-down with the following options:

• Short Answer
• Paragraph
• Checkboxs
• Radio Button
• File Upload

Short Answer is a small text input for the form filler. Despite the name 'Short Answer', the form filler can put an arbitrarily length of content in the input.

Paragraph is a bigger text input for the form filler. It is big which should encourage more text from the form filler.

Checkboxs is a checkbox input for the form filler. Use the button 'Add option?' to create some parameters for the checkbox. The form filler can pick any number of these options.

Radio Button is a radio button input for form filler. Use the button 'Add option?' to create some parameters for the radio. The form filler can only pick one of these options.

File Upload is a file upload input for the form filler. It is not recommended to use this input as it relies on JavaScript being enabled in the browser, selected file under 5Mb in size and only accepts the following file types: png, jpeg, jpg, gif, and webp. If JavaScript is not enabled and form filler clicks on the submit button then every image the form filler picked as well as the normal responses will get uploaded to the server on the same session which is liable to fail or even be outright rejected for having a larger than allowed Request Body size. (Also, uploading without JavaScript enabled doesn't even work anyway at the time of writing.)

Add Option?

Add Option button creates a new row, 'Radio/Checkbox Option', with text input, and a new button 'Delete Option'. The input will appear on the form as a checkbox or radio button value.

Used only with checkboxs and radio question types. For any other question type, it gets ignored.

Delete option

The delete option button deletes the 'row' that it resides on. Useful when one has accidentally created too many options.

Add Question

The Add Question button adds a question block. This button resides at the bottom of the page and is not attached to any question block. The button itself is in the middle column.

Form Title

At the top of the page, one will see a header. This is the form title

Question Body

Each question is wrapped within it's own 'block'. Each part of the question body is documented below.

Question title

Each question block has a question title. It is usually a header with centered text. It is the first distinctive element of a question block.

Question Image

Every question comes optionally with an image. One can click on the image, depending on browser settings, will open the image link in a new tab or window and display it 'as-is'.

Question Response Label

This simply highlights the response type that is expected of the form filler.

Question Input

The question input can come in five varieties:

• Short Answer
• Paragraph
• Checkboxes
• Radio Button
• Image Upload

Short Answer is picked by the form author to indicate a short typed response. Has no limit on the amount of content the form filler supplies.

Paragraph is picked by the form author to indicate that a longer typed response is most likely going to be needed. Has no limit on the amount of content the form filler supplies.

Checkboxes are boxes that can be toggled. A checkbox that is filled means that the label next to the checkbox is one of the reply to the question. Form filler can pick any or all checkboxes as desired.

Radio button is similar to checkbox except only one button can be picked.

Image Upload is selected with the following criteria: under 5Mb, accepted file types: png, jpg, jpeg, gif, and webp. On selection, the image will be uploaded to the server and shown on the page with a smaller size; it is full size on the server. Under the image will be a 'Delete Image' button. This button can be clicked on and the image will be removed from the page and one can supply a different image but note: it is still uploaded to the server for sometime. At the time of writing, Image Upload type question requires JavaScript to be enabled on the page.

Finish Form

This submits your form to the server and if you have correctly responded to each question, will lead you to a 'thank you' page. (Yet to be done; right now it seems like on your browser it times out.)

Minimum Viable Product

The minimum viable product is as follows, in no special order:

• Create form into DB ☑
• Filled form submission into DB ☑
• A way to view form responses, no matter how cumbersome ☑
• When form is created, 'naturally' move to 'link' page (link to share with the world and response view page) ⭕️
• Thank you page for filled form submission so user knows that the server accepted response ☑
• Make 'world' accessible via the WWW ☑

⭕️ = well, I've just put the links on the page instead. Good enough for now, I guess.

Bug Fixes

There is some funky business with uploading images and refreshing the page (I can't remember the specific issue(s)).

Nice to have

• fail2ban like thing for the app.
• 'Sections' so the form can be broken up in several areas but still be one form.
• Automatic removal of duplicate uploads. ⭕️
• Make the web-app look more nice, probably with bootstrap.
• Rate limiting ☑
• Non-blocking signing in.
• More ways to analyze user-responses ⚠️.

⭕️ = prevent uploading of duplicates

⚠️ = probably will have to redesign how the view pages work. I'm thinking, that the backend should get poked which would return json full of data, then 'whatever' deals with it (this part is complete). For the browser side, maybe use some kind of js functionality, like Chart.js (this part updates the responses on the page but no Chart.js yet)

Very Not Minimum Viable Product

• User accounts so people don't need to bookmark 'form/view' links.
• Opt-in telemetry for form filler.

Network Errors and other Error messages

When uploading an image using the image upload input, some errors may occur:

• Network error (probably because the file you tried to upload was too big)
• file is too big
• file type unacceptable
• Too many requests

The 'Network error' message will probably be most common on Firefox based broswers. During testing, I found when an image file was 'too big' even for the server (7Mb) the server will close connections. On Chromium based browsers, it just says 'file is too big' but on Firefox all I get is some 'network error' which doesn't give me much to work with, could mean anything.

The server technically accepts 7(Mb) of data but when POSTing to /uploads, if the request body is bigger than about 5.4Mb the server will send a 'file is too big' error.

When posting to /uploads, it accepts only png, jpeg, jpg, gif, and webp. The server checks for 'magic bytes' when determining the file type.

Too many requests happen when an IP address sends too many requests to specific URIs. Upon receiving these, user should wait a while before trying again.

Other error messages:

• form response has junk information - rejecting
• form has junk information - rejecting
• Unauthorized access
• Too many requests

If a form and a form response has junk information, it will be rejected (probably related to image uploading).

Unauthorized access is used when denying someone permission to access specific parts of the service.

Too many requests happen when an IP address sends too many requests to specific URIs. Upon receiving these, user should wait a while before trying again.

Possible Server Errors:

1. "Use of uninitialized value in subroutine entry at /usr/share/perl5/site_perl/Mojolicious/Controller.pm line 81." (and for line 231)
2. "Can't move file "/tmp/mojo.tmp.1cGxOk727f920Ruq" to "public/uploads/92nzien/987ucvuneie.jpeg": No such file or directory at /usr/local/share/perl/5.32.1/Mojo/Asset/File.pm line 107."

1) The server has no $secret! ./start_mojo.sh.sample shows how to set a secret. Secrets are important for signing cookies. Make it nice and very long.

2) cd into public/. `$ mkdir uploads`, and make sure that the mojolicious can read and write from it.