Created custom css style upload

[milospp]

VIVO GitHub issue
Linked Vivo PR

What does this pull request do?

This pull request enables administrators to manage custom CSS styles directly from the Site Admin page. Admins can upload, download, and remove custom CSS styles, as well as reset styles to ensure accessibility and functionality remain intact.

What's new?

1. Added a new page for managing custom CSS styles under Site Admin > Site Information.
2. Features include:
   • Upload custom CSS files to override existing styles.
   • Download current custom CSS.
   • Remove custom CSS to revert to the default styles.
3. Added download links for CSS files used in the current theme.
4. Created a Reset button that remains visible and functional, even when styles are broken due to invalid or problematic CSS.

Screenshoots

Style edit page

Example css

body {
    background: #333;
}

Broken contrast css (RESET button is still visible)

How should this be tested?

Test for every theme

Uploading regular CSS

1. Login as an admin.
2. Navigate to Site Admin > Site Information > Change CSS Styles.
3. Test downloading the default styles.
4. Upload a custom CSS file with the following content

body {
    background: red;
}

5. Clikc upload
   Expected Result: The site background should change to red.

Download Custom CSS

1. After uploading custom CSS, return to the Change CSS Styles page.
2. Click Download Custom CSS.
   Expected Result: The downloaded file should match the uploaded custom CSS.

Removing Custom CSS

After uploading custom CSS, navigate to the Change CSS Styles page.
Click Remove Custom CSS.
Expected Result: The site should revert to the default styles.

Uploading broken CSS

1. Test with CSS that introduces accessibility or visibility issues, such as
   Example:

* {
    background: white !important;
    color: white !important;
    border-color: transparent !important;
}

or

* {
    background: white !important;
    color: white !important;
    border-color: transparent !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

2. Upload the CSS file and observe the Reset button.
   Reset button should still be visible and working
3. Click Reset

Additional Notes:

The custom CSS file is saved using the Vitro FileStorage class and file is stored into vivo-home/uploads.
The file's path is stored in the ApplicationBean under the key customCssPath (vitro-kb-applicationMetadata).

[balmas]

On the whole, this works as documented.

The CSS links on the Style upload page are broken when VIVO is deployed at the root and not /vivo.

Also there is some security risk with this feature as a whole, since it's possible that CSS injection could be used in the uploaded css file (or potentially other malware). I suppose this is mitigated by the fact that only an admin has access to the page, but it still feels worth pointing out.

I wonder if it would be better to allow the user to specify a remote url for css rather than uploading the file locally.

[balmas]

These links don't work if VIVO is deployed at the root instead of at /vivo

[milospp]

Great catch, I'll fix this right away