- Update the mediawiki functional tests which were using this image.
- Slightly increase the darkness of the shadow around the cards to compensate
for the loss of the contrast with the noise background.
Tests:
- Re-run mediawiki functional tests.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Fixes: #2418.
- This resolves a issue that icons being misaligned when the name of the app
flows into multiple lines. The increase in size of the card is not very
bothering as long as icons are not still aligning. If the noise background is
removed (to be proposed later), the increased size of the icon is even less
bothering.
- The other options would have been to reflect the increased size of the tile to
neighboring apps in that row (does not seem possible with CSS) or ellipsize the
title when it overflows.
- Redo all the spacing in spacing inside the card to better match the new
layout. The height of the card reduces slightly due this change, which looks
better and closer to other icons grids in other UIs.
Tests:
- In index, apps, and help:index pages, the title has change location. Spacings
are as expected and appealing. System page is unaffected.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Making most of text that is read in a page bold is useless. Emphasis should
instead be used for some text that should stand out of the rest of the text.
- The need to make the text bold goes away if the text color is not such a
lighter shade of gray. Reset this to the regular text color.
Tests:
- Observe changes in home, apps, system, and help index pages.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Fixes: #2179.
Tests:
- Set language to Magyar (hu). Test that items in the system page are large enough to
accommodate most names/descriptions.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Increase the width of the containers that hold home cards, app cards, system
cards, and help cards. This helps in:
- Showing system page layout better with wider cards for each item.
- Showing more apps in the app page. This does not decrease the readability in
the same way that increasing the size of the paragraph does beyond a certain
point.
- Also increase the width of the navbar to make it appear consistent.
- Other containers such as content container remain at the same width.
Increasing this width would make a reading a paragraph harder.
- Behavior is mobile layouts is unchanged.
Tests:
- Test that apps, system, home and help views show cards in a wider layout.
- Success/error messages shown in apps, system, home and help views are narrow
and are not effected.
- In home and help:index pages (reached when clicking help icon without JS), the
icons are wide but the content is narrow.
- Individual app pages, confirmation pages, and help pages remain at the older
width.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Sort tags in the dropdown using user's locale.
- Fix localized tags being used for filtering. This happens when the application
freshly starts and list_tags() is called using user's non-default locale.
- Avoid using element.textContent in JS. Instead use datasets.
- Add functional test for checking localization issues.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
- Drop changing the history as even without it, back/forward work just fine.
- Drop debouncing as there was a bug that prevented it from working. Since we
have a small number of tags, running the operations immediately seems to work
fine.
- Update incorrect docstring.
- Flatten and isolate the event handlers code further for readability.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
- Use CSS based styling instead of styling based on bootstrap classes.
- Add a placeholder for the input box to easily locate it and convey what it
does.
- Drop dead code for '.tag-input .tag'.
- Drop some repeated data- attributes by using DOM navigation.
- Drop redundant styling.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
- Add tags to Info component of apps. Use only English tags for all operations.
Localized tags are used for presentation to the user only. Add tags to all the
apps. Conventions (English):
1. Tags describing use cases should be in kebab case.
2. Protocols in tag names should be in their canonical format.
3. Tags needn't be 100% technically correct. This can get in the way of
comparing apps using a tag. Words that describe use cases that users can
easily understand should be preferred over being pedantic.
4. Tags should be short, ideally not more than 2 words. Avoid conjunctions
like "and", "or" in tags.
5. Avoid redundant words like "server", or "web-clients". Most apps on
FreedomBox are either servers or web clients.
6. Keep your nouns singular in tags.
- Use query
params to filter the Apps page by tags. When all tags are removed, redirect to /apps.
- Add UI elements to add and remove tag filters in the Apps page. Make the UI
similar to GitLab issue tags. Since there are 40 apps, there will be at least 40
tags. Selecting a tag from a dropdown will be difficult on mobile devices. A
fuzzy search is useful to find tags to add to the filter. Allow user to find the
best match for the search term and highlight it visually. The user can then
press Enter to select the highlighted tag. Make tag search case-insensitive.
Make the dropdown menu scrollable with a fixed size. User input is debounced by
300 ms during search.
- tests: Add missing mock in test_module_loader.py
- Add functional tests
[sunil]
- 'list' can be used instead of 'List' for typing in recent Python versions.
- Reserve tripe-quoted strings for docstrings.
- Undo some changes in module initialization, use module_name for logging
errors.
- isort and yapf changes.
- Encode parameters before adding them to the URL.
Tests:
- Tested the functionality of filtering by tag with one tag and two tags.
Signed-off-by: Joseph Nuthalapati <njoseph@riseup.net>
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
Fix the following:
- In mobile layout, the logout button has incorrect text color and when
hovering, wrong background color.
- In mobile layout, when user menu is expanded, there is no spacing between the
end of the menu and the border for the expanded menu items.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
Only item in the navbar present during first boot in mobile layout is the
toggler. Set its height such that it maintains the height of the entire navbar.
Tests:
- After the account setup screen, switch to mobile layout. Notice that the
navbar is no longer tiny but the usual height.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
Fixes#2456.
- Replace the first setup wait message with a spinner. This is sufficient to let
the user know that they have to wait.
- The message does not convey anything more.
Tests:
- Remove /var/lib/plinth/plinth.sqlite3 and start the service. After the service
starts listening visit the web interface and notice that the first setup screen
shows up. The size and position of the spinner are as expected.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
Fixes: #888.
- Suggest all the steps that a typical user should likely take.
- Custom styling to make the page look good.
- Open the links in new windows as this page can't be reached again.
- Add a button for software updates as this can be done easily and the most
important step.
Tests:
- Trigger first setup by removing plinth.sqlite3. Notice the improved setup
complete page. Text and icons are as expected. Links work and open in a new
window. Clicking on 'Update now' button opens a page to software updates with
manual upgrade triggered.
- Mobile view looks good.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- The library performs a large number of tests to determine if various features
are available in the browser. In Debian most tests seem to be present unlike
other methods of distribution where users select which tests they want and build
a customized library for their app. This leads to increased page load time.
- The only functionality we use from Modernizr library are the .js and .no-js
classes we use in our CSS styling. Modernizr is not needed by Bootstrap library.
We don't use 'Modernizr.' properties in Javascript.
- A bug in the test to determine if an <input> element with type="number" allows
localization or not causes the page to scroll down to the end. This behavior
appeared in version 3.x of modernizr and despite the bug report and the fix, it
is not gone. Dropping modernizr fixes this issue.
Tests:
- The logout link in the header bar is visible only when Javascript is disabled.
- The dropdown icons next to header menus only appear when Javascript is
enabled.
- For each feature detection provided by Modernizr library, search if our
project is using that in CSS styling.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
Closes: #2161.
- Sections are ordered by importance on which administrator must act after
setting up the system.
- Consistent order across all the languages.
- Update the styling for the section hearers.
- For system section, make them compact.
- Make them look like a header text (with underline) rather than a
divider (like in a menu).
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- This prevents CSRF attacks that allow adversarial websites from logging out
users from FreedomBox. Django itself has made this change in 4.x releases.
Tests:
- Logout works with the menu item in drop-down when Javascript is enabled. The
menu item appears similar to other drop-down menu items.
- Logout works with the menu item when JavaScript is disabled on the page. The
menu item appears similar to other menu items.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- This improves modularity. Each app brings its own icons in its directory
instead of a centralized directory.
Tests:
- Install an app and notice that the installation notification has the icon.
- Visit an app's page in Apps and System (cockpit) section and ensure that the
app's icon is being shown.
- Visit the Apps and System section and notice that apps' icons are being shown.
- Visit the home page and notice that shortcuts' icons are being shown.
- Visit the URL /plinth/api/0/shortcuts and notice that the URLs for icons are
accessible and lead to proper icon files.
- Build developer documentation and notice that Tutorial -> View and Reference >
Menu pages show the expected updates.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
[sunil: Update description for simplicity, group info]
[sunil: Indentation fixes]
[sunil: End all URLs with a slash]
[sunil: Update frontpage shortcut to be a simple one]
[sunil: Enable single-sign-on for main interface only]
[sunil: In copyright file, merge with public-domain section]
[sunil: Simplify and vectorify the icon]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
Closes: #2228.
- Django 4.0 changed to using <div> instead of using <ul> and <li> for multiple
choice select fields. Update code for the select-all button to work with the new
HTML structure.
- Add styling to ensure that multiple choice select field appears similar to
previous <ul> and <li> based style.
- This patch assumes that django-bootstrap-form has support for Django 4.0 as
seen in https://github.com/tzangms/django-bootstrap-form/pull/110 .
Tests:
- Radio select seem to have no issues. Checked in networks -> connection type
page.
- Open Backups -> Create backup page and ensure that select all button works
and appears same on testing (Django 3.2) and unstable (Django 4.0).
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Add basic video room based on demo.
- Set port range to use for RTP.
- coturn: Add component for time-limited TURN configuration.
Signed-off-by: James Valleroy <jvalleroy@mailbox.org>
[sunil: Don't error out when coturn is not installed/configured]
[sunil: Prepend data- to custom attribute in HTML]
[sunil: Convert SVG with embedded bitmap to vector graphics]
[sunil: Hide Javascript license information in footer]
[sunil: Minor changes to comments for styling]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
Closes: #2157.
Original author of the app J. Carlos Romero <juancarlos.romero@gmail.com> has
been contacted to see if there is interest in continuing to maintain the app.
There has been no response.
Since the app is not available even in the current stable (Bullseye), few users
are presumably using it on a supported FreedomBox distribution. Any users are
advised to maintain the manually instead of relying on FreedomBox for it.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Use php-fpm instead of using mod-php.
- Create database and setup permissions manually. Tables and initial data are
created during the initial setup process done by WordPress. Database upgrades
are handled by WordPress. Minor versions are upgraded automatically and major
version need user intervention.
- Backup/restore functionality including database.
- Install recommended extensions for performance.
- Setup and run cron jobs to ensure that scheduled publications are
completed (among other things). Service has systemd security features. Timer is
set to run every 10 minutes.
- Functional tests for adding/removing posts and backup/restore.
- Increase file upload size limit to 128MiB.
- A private mode (default) for keeping the setup process secure. Should be
disabled after first setup is completed. This uses a new approach using
file-based flag for different Apache configurations.
TODO:
- Find a nice way to allow WordPress to upload plugins/themes. Currently this
operation files and users are expected to manually scp the files to
/var/lib/wordpress/wp-content/{plugins,themes} directory.
Tests:
- Functional tests.
- Schedule publishing of a post. Notice that post got published.
- Test uploading a file larger than 2MiB.
- Test enabling permalinks. This leads to nicer looking URLs.
- Test adding images to posts/pages.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Fixes: #2049.
This is regression introduced by me in 213cf16f8daa66dbfd3c761a61483c959c753559.
Although this case was tested for regression, the test setup was incorrect.
Tests:
- In networks page to details of a connection, the Delete button is aligned to
the right.
- In snapshots page, the Create Snapshot button is aligned to the left and
Delete Snapshots button is aligned to the right. Clicking on the buttons does
not change their position.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Identify Freedbombox admin who installed the app to be zoph admin.
- Implement backup and restore.
- Photos directory should remain at /var/lib/zoph, for proper operation of
backups.
- There remains an issue that the App is enabled before it is configured but
will not work correctly until configuration.
- OpenStreetMap mapping is enabled. These should be configurable before
installation.
- Add initial forms.py and views.py to Zoph app, however these are currently
unused as urls.py does not invoke the view. When the view is not invoked the
Zoph App installs, with single signon, currently as the first LDAP user, rather
than the plinth user.
- The first user's preferences are not set, and need to be manually set to avoid
other errors.
* Sunil's changes
- Squash commits and re-split them.
- Drop documentation as it will be auto populated from wiki later.
- Remove outdated validation code from manifest.
- Drop some dead code.
- Don't send MySQL password over command line for improved security. Instead
rely on Unix authentication of root user similar to backup/restore process.
- Use JSON for exchanging configuration dump to avoid encoding errors.
- Add username validation to avoid a potential SQL injection.
- Update description for neural tone and brevity. Add information about how user
accounts work in FreedomBox
- Fix functional tests.
- Drop all code related to changing photos path until it is ready.
- Update URL from /zoph to /zoph/ to avoid another redirect.
- Fix disabling the app.
- Use icon that Zoph uses for favicon as logo. Update copyright file.
- Fix spelling unzip.
- Minor refactors. Run yapf and isort.
- Use subprocess.run() instead of os.popen() everywhere for better security with
argument parsing.
- Enable OpenStreetMap by default. User have a choice to disable it before using
the app. Add label to explain privacy concerns.
- Fix dropping database by using --force argument.
- Cleanup enabling the app to not enable the app when updating configuration.
- Use AppView's default template instead of overriding.
- Update functional tests to just check if the app is enabled/disabled as
expected. Checking that Zoph site is available will require reliable handling of
admin user.
Signed-off-by: John Lines <john@paladyn.org>
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
Add running spinner before every app installation step text, this
makes the fact that installation is in progress visually more noticeable.
Tested when installing the mediawiki app, the running spinner is shown
on every installation step.
Signed-off-by: Veiko Aasa <veiko17@disroot.org>
[sunil: Horizontally align the text and spinner by the spinner inline]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
Pull the delete button in the connection show page to the right to prevent
hitting it by accident.
Signed-off-by: Fioddor Superconcentrado <fioddor@gmail.com>
[sunil: Use a new consistent style compatible with bootstrap4]
[sunil: Styled the delete button with danger color]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
- Make the box look different from the rest of the options so that this it does
not look like an option without label.
- Give it the appearance of a button so that it is becomes an operation rather
than option.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Make the code work outside backups module.
- Move code to main.js so that any app can use this functionality.
- Make the code work for multiple such form fields in the same page.
- Use only pure JS, don't use jQuery.
- Add event handlers only after DOM content is loaded to avoid race conditions.
Tests performed:
- Checking the select-all button checks all options.
- De-checking the select-all button de-checks all options.
- De-checking one option when everything is checked, de-checks the select-all
button.
- Checking the last option when everything else is checked, checks the
select-all button.
- When loading a schedule page with all options checked, select-all button is
checked.
- When loading a schedule page with some option unchecked, select-all button is
unchecked.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
When navigating back to a page, enable buttons that were previously
**temporarily** disabled.
Closes#1996
Tested that on the manage snapshots page, when browsing to delete view
and then back, the "Create Snapshot" button is enabled.
Signed-off-by: Veiko Aasa <veiko17@disroot.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
- attr() CSS function can't used practically on anything but the content
property.
- Introduce a hack for setting any arbitrary percentage width on an element
similar to w-25, w-50, w-75 and w-100 bootstrap utilities. This hack should not
be used widely.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Will be disallowed by sandboxing content security policy.
- File will not be read by humans.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
This is a temporary fix until proper bootstrap 4 forms are generated by
django-bootstrap-form.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- The emphasis brought by italics is wasted when all of the items have a same
style. Without it the style is simpler and more pleasent.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- When the base font size is changed, all the measure will scale appropriately.
- Bootstrap 4 has done the same.
- Keep using px for responsive lengths and some border widths that need not
scale.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
Closes: #1818. The new navbar collapse handles items better without a scrollbar.
- Switch dependency to newer bootstrap4 library.
- Bootstrap 4 has 5 grid levels instead of 4. Adjust all classes accordingly to
retain current semantics.
- Update for newer markup for dropdowns.
- Replace use for labels with badges. Labels have been removed. Use
badge-secondary instead of label-default.
- Replace use of btn-xs with btn-sm. Size is roughly the same.
- Accommodate removal of form-horizontal.
- .hidden* and .visible* classes have been removed. Use alternate utilities.
- Replace use of table-condensed with table-sm.
- Update progress bar background styling. .progress-bar-* have been replaced
with bg-*.
- Drop support for IE9 and below. Bootstrap 4 does not support those browsers.
- Use the new simplified markup for navs, navbar and navbar-toggler. Accommodate
removal of .navbar-fixed-top.
- Update the JSXC page too.
- Update all values that are using rem units. The base font size is now 1rem =
16px instead of 1rem = 10px. This the default for bootstrap 4.
- A button inside a dropdown menu is natively supported by bootstrap 4. Remove
custom styling done earlier.
- Drop use of removed class thumbnail.
- Override colors for buttons and warnings to keep the old style.
- Use new markup for close buttons inside alerts.
- Use .collapse.show instead of .collapse.in as per bootstrap 4 styling.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Immediately after submitting a form with a toggle button, toggle and disable
the button and show a spinner on the button.
- Disable all other form button elements on the page when a form is submitted
to allow only one form submission at a time.
Closes#1993
Tests performed:
- Check that when enabling and disabling an app, the toggle button is responsive
- On the Samba app page, check that when enabling a share, the toggle button is
responsive and all other toggle buttons on the page are disabled.
- On the Samba app page, check that clicking the diagnostics button still works
while a share is being enabled or disabled.
- On the SSH confugration app page, check that after clicking the Update setup button,
a spinner is shown and the app enable/disable toggle button is disabled.
- Test on Firefox and Chromium.
Signed-off-by: Veiko Aasa <veiko17@disroot.org>
[sunil: Narrow the scope to only toggle buttons excluding others cases]
[sunil: Minor cosmetic and styling changes]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
This is high visibility to the donation link and almost prompts users to donate
instead of passively providing the information. Given how many free software
struggle to stay alive, this is needed.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Helps: #1938.
Fixed application of available translations in daemon.py and apache,
diagnostics, networks, firewall and users modules.
diagnostics:
- __init__.py: return the app name along its results.
- diagnostics.html: display the app name instead of its id.
- diagnostics_results.html:
- mark for translation,
- apply class to results <td> HTML tag.
main.css: center-align the results.
Locale files excluded. Will be regenerated automatically and translations to be
done via Weblate.
original testing (rebased later):
- Yapf applied.
- Flake8 without errors or warnings for changed files.
- (Unit) tests run without errors.
Signed-off-by: Fioddor Superconcentrado <fioddor@gmail.com>
[sunil: Translate 'None' app name]
[sunil: Don't translate tests strings second time in template]
[sunil: Tweak the center rule]
[sunil: Don't split a translation string]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
Closes: #1939.
- Force a delay before returning the upgrade result to allow upgrade to kick in.
Otherwise when the flow returns, get_context_data() creates the context too
early and finds the upgrade not yet busy, causing the refresh loop to miss it.
The page renders static and the user gets no clue to the upgrade executing in
the background.
Signed-off-by: Fioddor Superconcentrado <fioddor@gmail.com>
[sunil: Retain the styling for the remainder of the page]
[sunil: Re-style the status section as a simple web-page]
[sunil: Drop unused running-status CSS styles]
[sunil: Rename CSS variables, minor changes to color values]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
