Giter Site home page Giter Site logo

ccali / a2jviewer Goto Github PK

View Code? Open in Web Editor NEW
5.0 18.0 8.0 28.01 MB

This is the repo for the A2J Viewer

Home Page: https://www.a2jauthor.org

License: Other

PHP 0.24% HTML 36.93% JavaScript 45.11% Less 13.99% CSS 2.93% Mustache 0.78%
a2j legal legaltech justice access-to-justice

a2jviewer's Introduction

A2JViewer

This repo hosts the distributable production version of the A2J Viewer. This software is updated frequently and the repo should be monitored as the updates include security and feature improvements. You can subscribe to updates through an atom reader by using this url: https://github.com/CCALI/a2jviewer/releases.atom.

Project note: sister repos

This repo is part of the A2J Author Project which consists of four repos...

1.) A2JViewer - https://github.com/CCALI/a2jviewer

2.) A2J Author - https://github.com/CCALI/a2jauthor

3.) A2J Document Automation Tool - https://github.com/CCALI/a2jdat

4.) A2J Dependencies - https://github.com/CCALI/a2jdeps

What is in this repo: ccali/a2jviewer

Within it you'll find a .zip file containing the minified JavaScript source for the viewer,a basic guide/interview, and a README.md file explaining the contents of the .zip file in greater detail.

NOTE: By downloading this application, you are agreeing to the terms included in the user license LICENSE.md.

Hosting

Current supported environments are:

  • Webserver platform of either IIS 8.5+, Apache 2.4+, or Nginx 1.12+
  • PHP is the recommended platform for processing interview data locally but is not required to run the viewer. All current samlple processing code and the demo widget is written in PHP. PHP Versions 7.4+ is currently supported.

While other server environments may work, they have not been tested. Should you get another hosting environment working, please do a Pull Request at the hosted A2J Viewer repo to let us know any steps taken so that we may share with others.

Installing from zip

Download the latest viewer from the releases page https://github.com/CCALI/a2jviewer/releases. Unzip the viewer package into your webroot or preferred directory on your web server. The Apache user, for example www-data or apache, should own the folder where you place the viewer. Settings for configuring the viewer are found in the viewer.html file. The default settings work with the Demo Widget (see below), but should be updated to match your guides directory on your server. For example, you will most likely want to store A2J Guided Interview® files in a directory that is populated internally or with your own file upload interface.

##Installing from source

Install build tools

1.) Install nvm The viewer is an app developed in CanJS and requires nodejs to build. Though, you are free to install the node version that the viewer targets and manage it manually, the recommended method is to use a node version manager which will allow the simultaneous installation of multiple versions of node and mitigates several administration issues.

Obtain nvm for windows here: https://github.com/coreybutler/nvm-windows

For *nix go here: https://github.com/creationix/nvm

2.) Install node through nvm after installation of nvm, type the following commands in the terminal to install the required node version

nvm install 12.20.1
nvm use 12.20.1

check that the install was successful by typing

node -v

which should produce the version number of node we installed, 12.20.1

3.) clone this repo (https://github.com/CCALI/a2jviewer/releases)

Build from source

npm run deploy

OR the equivalent

npm install
npm run build
mv index.html index.dev.html
mv index.production.html index.html

Note that index.dev.html allows for viewing live changes for developers and index.production.html is the minified, production ready entry point

package as zip

run the command below in a terminal

npm run build:viewer-zip

This will build a zip in the parent folder of the cloned repo with the naming patern a2j-viewer_{MAJVER}.{MINVER}.{PATCH}_{YYYY}-{MM}-{DD}.zip

Upgrading

1.) backup your old viewer and Guided Interviews

2.) unzip or build new viewer

3.) copy your Guided Interviews into the new viewer folder

Hosting Considerations

Links to A2J Guided Interviews® are not protected by default, and can be viewed by anyone who has an active link to that interview. Answers are output in a human readable text format and are recommended to be stored with strong encryption outside of the webtree with a robust access control mechanism. Please make sure to take proper steps to protect data and restrict access as needed.

Viewer Customization

The file viewer.html contains several endpoints to allow data to be be exported and imported into the viewer. A description can be found here: https://www.a2jauthor.org/content/setting-a2j-author%C2%AE-40-your-own-server-processing-xml-output-alternative-use and is listed below:

templateURL - [mandatory] the location for the A2J Author® interview file (this is the file with the .a2j extension or the Guide.xml or Guide.json)

fileDataURL - [mandatory] this must point to the location of assets such as audio, video, xml, and templates. Due to a known bug, this endpoint cannot be a web URL and must be a system path relative to the directory housing the page you are launching the viewer from. In most setups this is the /a2j-viewer/viewer/ directory.

getDataURL - [optional] the location of where you have previously stored the user's partially completed interview answer data. This is optional and only needed if you are setting up your website to remember the data that a user has entered so far. For example this is useful in cases such as where you let people register at your website and collect information that you can use in all interviews on your website and information that might be common to all interviews (like name, address, etc.). At present, this DOES NOT mean that the user can save the interview at a particular point and then come back to that same point. When they return to the interview later, they must start from the beginning - with the only advantage being that the data they had previously entered is already filled in.

setDataURL - [optional] location of where you want to send the data from the interview when the user SENDs or SUBMITs the completed interview. This must be some website-based program that can "catch" the XML data stream that contains the user's answers to your interview in HotDocs .anx format and in an equivalent json format through an http POST. The xml/anx format can be accessed through the AnswerKey field of the body while the json format can be accessed through the AnswerKeyJSON field.

exitURL - [optional] location of where the user's browser is directed if they exit an interview without getting to the end. This is typically because they don't qualify to use the service. This is the DEFAULT URL. Inside the interview, the author can actually point the EXIT button to any URL they want and it will override this value. This URL is used only if the author has not specified a URL inside the interview for any EXIT buttons.

The default viewer.html points the save data endpoint, setDataURL to a demo page called Answers.php that outputs the xml produced by the viewer through a post body key called "AnswerKey". It does not save files to the disk- that code must be written since it is unpredictable how self-hosters would like to process their data. PHP is commonly used, but if you prefer another language, anything that can process http post requests will work.

You can also use a query parameter to force the endpoints to any custom value. For instance,you can point setDataURL to point to your custom save-answers code using relative paths like www.example.org/a2j-viewer/viewer/viewer.html?templateURL=../Guides/someguide&setDataURL=mysaveanswers.php

Demo Widget

There is a basic interview uploader and launcher at the default path of yourwebroot/path/a2j-viewer/viewer. This is for demonstration and testing purposes and should be secured as necessary. This allows you to quickly upload and test individual A2J Guided Interviews®, as well as see sample query string parameters used to load and launch those interviews. Click the upload button to select a A2J Guided Interview® saved in .zip format. This generates a unique name and link to launch the interview in a new tab. Interviews can also be deleted from this list, which removes them from the local guides folder.

If A2J Guided Interviews® don't successfully upload or delete, make sure the folder permissions allow read and write capability to the guides folder, and execute permissions on any php code.

To find out more about A2J Viewer and A2J Author® please see our website, www.a2jauthor.org

Ever growing backend documentation including tutorials and examples can be found at https://www.a2jauthor.org/content/a2j-selfhosting-and-backend

For questions, contact Tobias Nteireho at [email protected]

a2jviewer's People

Contributors

akagomez avatar anubhavdhingra avatar janebitovi avatar jessicafrank avatar johnmayer avatar mcclouda avatar sgoshorn avatar tobiasnteireho avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

a2jviewer's Issues

Update index.production.html on viewer build

The cache busting gets updated on index.production.html for the viewer, but not on /demo/a2j-viewer/viewer when a new version is built and compressed to a .zip for distribution.

Need to make sure the build process updates the cache busting value on all .html pages that could start the app:

  • /demo/a2j-viewer/viewer.html
  • /index.production.html

Logo misshapen

Added logo for authoring organization to viewer and it's misshapen.
image

One ISSUE can't download from A2J author

  1. Not Found error when i try to download a zip file form http://www.a2jauthor.org/app/js/author/A2J_Author.php
  2. after unzipping the files - the first page is an upload button, upload doesn't work. I upload it manually to the "guides folder" and it shows as an item in the list. I clicked on it and a black page shows, no error just blank page.
    I was reading the code and looks like you guys make references files not found - on the viewer.html. there might be more errors but i just can't pass the first initial setup. If you have any solution or recent packages please reply ASAP.
    config="../package.json!npm" (not in the zip)

WCAG follow up list

This is a list of custom interfaces or 3rd party libraries that need WCAG review/enhancements:

  • calendar picker widget
  • calculator widget
  • custom audio player (video player uses native html 5 player and seems ok)
  • viewer modal including learnmore and expanded textarea for textlong field type
  • lightbox2 image viewer/full screen widget

@JessicaFrank I will update this list if I find anything else, but these were based on current requirements to support IE11 (mostly jquery plugins/widgets above).

End of interview hangs if Debug Panel is open

When in Preview mode, if the Debug Panel is open when a button is clicked that is linked to any of the below Destinations, the page darkens and the "Author Note" dialog box shows up like normal, but the page is then frozen (the X on the dialog box is disabled, nor does clicking the page or pressing the Esc key take you back to the interview).

  • [Success - Process Form]
  • [Exit - User does not qualify]
  • [Exit - Save Incomplete Form]
  • [Assemble - Generate PDF document]
  • [Assemble - Generate PDF and Process Form]

image

Tested in staging v 6.0 2020-07-29 on Chrome 84.0.4147.105

Note that this does not appear to be an issue in production v 6.0 2020-05-11.

viewer breaks with uncaught typeError in interview

Attached guide throws uncaught typeError on any selection, yes or no, for question 15-Q11-PetitionSec6 (M) on Step 8. No logic in interview. Viewer crashes irrevocably.
PROTECTION FROM ABUSE ORDER PETITION GUIDED INTERVIEW (1).zip

Uncaught TypeError: r is undefined
    saveButtonValue https://www.a2jauthor.org/a2jauthor/dist/bundles/a2jauthor/app.js:3
    navigate https://www.a2jauthor.org/a2jauthor/dist/bundles/a2jauthor/app.js:3
    c https://www.a2jauthor.org/a2jauthor/dist/bundles/a2jauthor/app.js:3
    value https://www.a2jauthor.org/a2jauthor/dist/bundles/a2jauthor/app.js:3
    i https://www.a2jauthor.org/a2jauthor/dist/bundles/a2jauthor/app.js:3
    flush https://www.a2jauthor.org/a2jauthor/dist/bundles/a2jauthor/app.js:3
    onComplete https://www.a2jauthor.org/a2jauthor/dist/bundles/a2jauthor/app.js:3
    flush https://www.a2jauthor.org/a2jauthor/dist/bundles/a2jauthor/app.js:3
    onComplete https://www.a2jauthor.org/a2jauthor/dist/bundles/a2jauthor/app.js:3
    flush https://www.a2jauthor.org/a2jauthor/dist/bundles/a2jauthor/app.js:3
    onComplete https://www.a2jauthor.org/a2jauthor/dist/bundles/a2jauthor/app.js:3
    flush https://www.a2jauthor.org/a2jauthor/dist/bundles/a2jauthor/app.js:3
    onComplete https://www.a2jauthor.org/a2jauthor/dist/bundles/a2jauthor/app.js:3
    flush https://www.a2jauthor.org/a2jauthor/dist/bundles/a2jauthor/app.js:3
    stop https://www.a2jauthor.org/a2jauthor/dist/bundles/a2jauthor/app.js:3
    N https://www.a2jauthor.org/a2jauthor/dist/bundles/a2jauthor/app.js:3
    f https://www.a2jauthor.org/a2jauthor/dist/bundles/a2jauthor/app.js:3
steal-sans-promises.production.js:3:719830

Unnecessary Scroll bars

as per Brett's email:

I noticed this week that scroll bars are showing up on the edge of almost every page in A2J interviews on Chrome (v 86.0.4240.75) and Edge (v 86.0.622.43) browsers. This happens both on LHI and within a2jauthor.org.

The LHI viewer is running version 6.0-2020-05-11 and author is A2J 7.0-2020-08-31, neither of which has been updated recently, so this appears to be a shift on how those two browsers are treating html elements.

It looks like the scroll bar is showing up for the div.bubble-content -perhaps something with the calc() function used to create the max-height?

scrollbars

Macro in Learn More isn't live bound

Macro in Learn More Response isn't live bound. It isn't updating to the new value when used in a repeat loop where SUM([Asset value NU]) is used to set [Total asset value NU] in before logic of the page with the macro.

Same macro updates properly in question text on same page as Learn More.

Update AGE macro test

The AGE macro test just failed because the test had a birthday and the expected result went from 20 to 21. Need to change that macro/test code to allow it to be overridden with a source year/date.

Back to prior as destination requires "required" answers to be filled before returning to prior question

If author sets back to prior as a destination for a button and has a field that is required, the destination won't fire until the end user completes the required fields.

The end user can use the Back button in the nav bar to go back to prior question without answering any required fields.

This leaves an inconsistent behavior for end users. They would expect both of those options (Back in Nav and a back to prior button) to act the same way. This is problematic also for situations where an end user mistakenly hits a page with a required field and wants to return, but is blocked by the required field.

I assume it's blocked by the test on required fields before buttons fire, but is it possible to have an exception test for this button destination?

Sample values aren't being checked for by date fields

Sample values are available for date fields, but they aren't being checked for in the viewer.

It should check for previous saved values, if not then check for sample values, then if not those, default to today's date for the date picker.

textlong modal not clearing modalContent on closing

had an edge case where hitting back to a previous page after launching a textlong modal preventing that current page's modal from loading its content. Should reset modalContent to default empty values on any close event.

WCAG improvements from user feedback

Becky’s initial testing feedback:

Layout is very confusing.
Sometimes it says “Label 0 button.”
No edit field to enter information for avatar skin tone and hair color options.
On some forms, there will be a checkbox. For instance, the screen reader might say: Skin tone light skin "checkbox not checked." If that is what I choose as skin tone, I would press spacebar to check the box. Hair color Red/brown "checkbox not checked." That is my hair color, so I would hit spacebar to check it.
Didn’t understand why there was a next button and a continue button

Notes from call with Becky 8-12-2020
She uses Jaws screen reader for Windows version 2020: https://www.freedomscientific.com/products/software/jaws/
screen readers need to know “next” is disabled in nav bar and that the whole nav bar is a supplemental tool, not how navigation through GI happens (instead that Continue button is way to move on)
Survey Monkey and Amazon are good website examples of speech friendly websites
https://www.amazon.com/gp/help/customer/display.html?nodeId=201829330
https://www.afb.org/aw/18/5/15212 (see section on screen reader friendly option for amazon.com)
Legal Server is a good too
avatars need hidden checkbox for hair/skin tone and maybe avatar selectors that explain what user is picking
“graphics labeler” for images
She’s happy to do another test for us

Good example for us to use for “Accessibility” page on a2jauthor.org: https://help.surveymonkey.com/articles/en_US/kb/Accessibility-at-SurveyMonkey

mike’s thoughts and future Qs:
button navigation should auto focus main content so readers automatically read the next question text. also make a logical up/down keyboard nav experience - a shift tab up gets you to the nav bar, and a normal keyboard tab gets you to the first input field/button
navbar navigation should not focus the question text, but maybe starts reading it the content of that text in an aria attribute. For example, i’m on Enter Your Address page, and i keyboard nav back to ‘name’ - it should start reading - please enter your name …

Mobile gestures

Recently removed a broken swipe event package that was listening for swipe left and swipe right events to allow mobile navigation. It was creating errors in the console, and relies on jquery which we are trying to minimize usage, eventually removing as a dependency. This issue is for tracking future discussions on how mobile gestures could be used, as well as if they would help/harm accessibility as per this issue: https://github.com/CCALI/CAJA/issues/1933

Possible current replacement package is HammerJS, but it also disables some gestures (like scroll and pinch zomm) by default, so is not ideal.

Update readme.md and license file

The new A2J Viewer standalone repo does not use a pre-built a2jviewer.zip, and is instead cloned and built from source. Need to update the readme and license file to reflect this change.

Cleanup make-viewer script

The make script needs to ignore a few extra files and also make sure to include the README.md, Privacy Policy, A2J Analytics Explanation, and LICENSE.md files.

edit:
there are some deps/images that are expected to be in the node_modules folder, but other deps are ignored.

move styles back to local directory

copied from a2jauthor:
The styles dependency is causing too many issues across the separate repos/apps. Moving them back to local files in a2jauthor, a2jviewer, and a2jdeps, as well as any and all shared images. This will allow for easier trouble shooting in the short term, and also the ability to trim them down in each local repo/app to what that particular app needs. Will copy this issue to CCALI/a2jdeps and CCALI/A2JViewer

Checkboxes not setting unchecked to `false`

TF Vars associated with checkbox field types should be set to false if unchecked when the user navigates to the next page. Unvisited pages should leave those TF Vars as undefined so that authors can check agains hasanswered macro.

Edges of fields cut off in IE

The left edge of text and dropdown fields are slightly cut off in IE, as seen below. Seen on IE v11.1198.18362.0, A2J 6.0-2020-05-11.

image

groupValidationMap & lastIndexMap warnings

building the groupValidationMap and lastIndexMap in fields.js is throwing a warning for setting the properties. Need a better way to derive those maps, but make sure they are recreated on each page change whether they are new pages, or revisited from the nav bar navigation.

Trim out author styles

Remove the most obvious unused styles to start clean up between author/viewer .less files and their imports.

Fill not working after answer clear

In the debug panel on the preview section, hitting the Fill button works the first time.
But after clicking the Clear button on the answers panel and using Fill button again the input boxes do not display the value.
The answers are set in the background, but the viewer doesn't update.

Textlong field adds spaces

If you expand a textlong field without typing anything, it adds empty spaces and a newline. If you type anything before expanding it works as expected. See attached gif for bug

blank textlong

CSS: Larger field sizes and elements

In staging v 6.0 2020-07-29, many of the fields and other elements are 'taller' than in production v 6.0 2020-05-11. This could result in a diminished user experience for users on smaller displays or mobile devices.

image

Also occurs in Firefox v 78, and I assume would be the case on a mobile viewer.

Feedback form images

It seem like there is an issue with the feedback form php files not being able to apply a style to render the logo, or possibly just has an old path to that logo. See this error in the console
Refused to apply style from 'https://www.a2jauthor.org/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Screen Shot 2021-02-16 at 11 28 04 AM

Screen Shot 2021-02-16 at 11 31 07 AM

Viewer styles refactor

The Viewer styles have complicated imports and seemingly circular dependencies that can often make it very difficult to figure out problems when a local style is being overwritten by a nested import. Need to break the styles down and move as much as possible local to the component that cares about that style, and make any top level or global styles easy to reason about and import as needed. For example, importing a single @variable requirement on even a simple .less file will often bring in extra styling as the first import starts grabbing it's dependencies that then grab their own dependencies inception style.

Moment warning in console

moment throwing this warning when validation a text date, aka 08/21/1988.

moment.js:285 Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.

need to pass 2nd arg for format option to moment so it knows how to parse that date.

Delete this

I was able to make it work. Loops inside loops have issues.

Default avatar does not engage unless manually selected

Upon entering a 'select your avatar' page, some defaults are selected (or at least appear to be selected, as denoted by the borders).

However, if you just click on to the next page, no avatar appears. You must go back to the avatar page and click an avatar, skin, or hair button for it to engage.

image

Happens in both staging v 6.0 2020-07-29 and production v 6.0 2020-05-11

Clean up appState with DefineMap

The mix of DefineMap and CanMap causes confusion in the app around using .attr or not, especially with nested state. Also, since the Viewer is a standalone repo now, the top level app state should be called appState or at least viewerAppState instead of rState.

Make new Viewer zip build

Need to update the A2J Viewer .zip build script to work with the new standalone repo with a flatter file structure. This should be a drop in replacement for current standalone self-hosters to be able to download, unzip in the same location, and get the new features.

Calendar widget - previous and next month buttons do not work

The 'previous' and 'next' month buttons of the calendar widget do not change the active month on the calendar. This happens whether or not the field is marked as Required.
Even after a date is entered or selected, the buttons remain inactive.

image

Test in staging v 6.0 2020-07-29 on Chrome 84.0.4147.105 and Firefox 79.0.
Works fine in production v 6.0 2020-05-11

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.