UX: Feasible to have a webpage option make content agile to PHI/non-PHI content

[HenrikBengtsson]

More and more users are getting PHI accounts. Most pages on the website are targeted for non-PHI users, e.g. examples and inline code instructions.

Can we provide an option to the viewer of the website;

• Adjust content for Wynton PHI account

at the top of each page, or in settings menu in the navigation bar? It should then use cookies so it's sticky. When checked, content such as ssh alice@log1.wynton.ucsf.edu should become ssh alice@plog1.wynton.ucsf.edu and so on. We could also have paragraphs and alert banners that are only visible to PHI viewers.

[HenrikBengtsson]

Webpages that would benefit from having PHI-specific/agile information:

• https://wynton.ucsf.edu/hpc/get-started/access-cluster.html

• https://wynton.ucsf.edu/hpc/get-started/development-prototyping.html

• https://wynton.ucsf.edu/hpc/get-started/duo-signup.html

• https://wynton.ucsf.edu/hpc/transfers/globus.html

• https://wynton.ucsf.edu/hpc/transfers/ucsf-box.html

• https://wynton.ucsf.edu/hpc/howto/storage-size.html

• https://wynton.ucsf.edu/hpc/howto/gui-x11fwd.html

• https://wynton.ucsf.edu/hpc/support/faq.html

• https://wynton.ucsf.edu/hpc/about/specs.html

• https://wynton.ucsf.edu/hpc/about/pricing-storage.html (lacks info how to migrate existing lab storage quota to PHI) moved to DOCS: How to migrate existing lab storage quota to PHI #103

• https://wynton.ucsf.edu/hpc/about/join.html

• https://wynton.ucsf.edu/hpc/about/citation.html (add example paragraph that can be used for IRB approvals)) moved to Example paragraph on PHI compliance #104

[HenrikBengtsson]

More thoughts:

• Constraint: Note that our website is static, i.e. content cannot be changed by via GET/POST requests. To keep it simple, we should keep it this way, if possible
• UX: use an HTML switch/toggle widget Non-PHI <-> PHI to control what is displayed
• Storage: Use the HTML Web Storage API to store the setting(s) across sessions locally in the user's web browser, e.g. in JavaScript localStorage.phi = true (set) and localStorage.phi (get).
• Content update: If localStorage.phi == true, then (a) enable PHI-specific CSS, and (b) enable PHI-specific DIVs, and disable non-PHI-specific DIVs. For remaining content, (c) walk the HTML DOM tree and use search-replace to update content from non-PHI to PHI. For example, replace all occurrences dev1 with pdev1. This can be done via a searchReplaceEverything() JavaScript function.

[HenrikBengtsson]

I've added a Non-PHI/PHI toggle to the navbar. It uses Javascript to search-replace on plain text to adjust the content to PHI.

[HenrikBengtsson]

Closing. Implemented most of the things here. Created new issues #103 and #104 for the remaining things