Fixes#2460
Signed-off-by: Joseph Nuthalapati <njoseph@riseup.net>
[sunil: Update the style to provide spacing after tags lines]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
sunil:
- Add explicit dependency on libjs-jquery in janus even though another
dependency brings it in.
- Fix looking for elements before DOMContentLoaded is fired. Since most of the
scripts are added at the end of the page, it might work now, but doing this
properly after DOMContentLoaded allows us to relocate the scripts to the header
of the page and add 'defer' attribute on them.
- Fix issue with IPv6 method getting selected as 'dchp' in networks.js.
- Don't focus on the first element in the form after the page loads. This is bad
for accessibility.
- Fix issue with setting the readonly/required states of IPv4/IPv6 fields on
page load.
- Password fields can now be changed to text fields and vice versa without a
problem. Simplify.
- Fix incorrect repetition of code setting 'show' class in onInvalidEvent().
- Prefer exception getting raised instead of functionality silently failing when
expected elements are not found.
- Use 'const' instead of 'var' wherever possible.
- Prefer .closest() to get to ancestors instead of .parentNode;
- Don't CSS transitions when showing an element, 'transition' CSS property does
not work on 'display' property. Instead they have to implemented on 'height',
'opacity', etc.
- Minor styling changes. Consistent casing. Use arrow styled functions.
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>
- It was never intended that breadcrumbs be shown in these pages.
Tests:
- When running first wizard, the busy page, the welcome page, user account
create page, and the next steps page are all shown without breadcrumbs. Same for
login page.
- Other pages which had breadcrumbs earlier continue to show them, that is, app
pages, system pages, help pages, and pages under those.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Don't show them on section pages: home, apps, system and help pages.
- Tweak the appearance so that home icon is bigger, spacing between crumbs is
larger and to use '>' as separator.
- Change the name of the help menu item to show the value in breadcrumbs.
- Change the URLs for anchors in the help page so that they don't appear as part
of the breadcrumbs.
Tests:
- Section pages: home, apps, system and help pages don't have breadcrumbs.
- Visit various pages. Breadcrumbs are shown and all the links in the
breadcrumbs work as expected.
- Mobile view looks good.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- We were using hacky logic of assuming that if a page using the URL
/plinth/sys/..., then it belongs to 'system' section based on the URL match.
This won't work when the URL does not follow this pattern for any reason.
- Instead use the breadcrumbs mechanism which uses menu items and URL names to
determine the section a page belongs to.
Tests:
- Visit page, apps page, system page, help pages, an app page in apps sections,
an app page in system section, backups -> create backup page and notice that the
correct section is highlighted.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- During the placement computation for the drop down menu, the height of the
dropdown-menu is very high and that leads to it getting placed at the top of the
page instead of the below the search element.
- To avoid the problem, cap the height of the dropdown. Somehow, the original
calculation for the height using CSS calc() does not seem to working as
expected.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Custom CSS variables were declared with Bootstrap 4 since it did not use CSS
variables itself. In Boostrap 5, CSS variables are available. Use them to
eliminate custom color definitions. This means that when Bootstrap colors are
changed, custom colored elements will not look different.
- Use color utilities from Bootstratp instead of .processing, .warning, and
.normal.
- Collect more repeated colors into variables. This will make themeing easier.
- Using Bootstrap variables also makes implement dark mode easier.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- .nav-link classes are meant to be used in navbars and tab navigations. Don't
use them incorrectly in .card to avoid potential breakages and readability.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- This navigation item in the main header is only when Javascript is blocked.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Notifications dropdown is shown briefly before page load. After the page load,
it disappears. This is quite annoying and happens due to the following reason.
- We add .no-js class to <html> tag and later remove using Javascript.
- We load most of our Javascirpt using 'defer' attribute leading display of
layout of content before Javascript is loaded.
- We also wait for DOMContentLoaded event to fire before removing the .no-js
class on <html> element.
- Solve the problem by adding special class to notifications dropdown to ensure
that it is not shown even when Javascript is not available.
- There might be a better fix to the problem.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- In Bootstrap 5, dropdown button and dropdown menu not being siblings does not
work like it did in Bootstrap 4.
- Use collapse component instead of dropdown. Collapse component does not have
the same limitations. Apply some of the styling from dropdown-menu to restore
previous appearance.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Workaround Debian bug #1087969. popper.js 2.x is needed for Bootstrap 5,
however, the current version on in Debian is 1.x. Implement a Popper 2.x method
that Bootstrap 5 is expecting and translate the call into Popper 1.x.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Drop menu_link and menu_link_active classes and use the bootstrap's default
classes.
- Override values for bootstrap variables instead of overriding the styles
themselves.
Tests:
- Test that navbar shows same colors as before in mobile view and desktop view.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Tags have important text that is too small and could cause problems with users
with limited vision. Make them regular buttons. Make the buttons shorter and
rounder to resemble previous styling.
- Drop underlining of text in the process.
- In code, don't call them 'badges' anymore.
Tests:
- Run functional tests for tags.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- <div> is not allowed inside a <p> tag. Browsers will close and reopen <p> if
one tries to place a <div> inside a <p>. Avoid this.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Ensure that .sr-only is replaced with newer classes.
- Ensure that icons are present for all alerts.
- Use flex-box for display of icons on the left center of the alert.
- .close has been renamed to .btn-close.
- × is no longer required for close buttons.
Tests:
- Visually verify all the changes by triggering them with code changes.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- When apps are available only on 'internal' zone, a warning message is shown on
the app's page. This is a routine warning that requires no action from the user.
It is quite annoying to see it on a page like Samba where it is even implied.
Hence reduce the severity of the alert to 'info' from 'warning'.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Keep the badge-{severity} classes as they are meant for convenience of mapping
severity to style.
- Match bootstrap colors to maintain consistency and contrast.
Tests:
- Visually confirm that all the changes effective.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Don't include the file if it does not exist to avoid a 404 error every time a
page it loaded.
- Load the file from a know path under the already known custom static path.
Tests:
- When the user.css file is created, it added to the web page. It is prioritized
over the main.css with CSS cascading rules.
- When the user.css file does not exist on the filesystem, it is not added to
the web page.
- When custom static directory (/var/www/plint) does not exist on the
filesystem, a debug log message is printed that this directory is not served.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Since the about page is now public, adding a link to it in the navbar allows the
users to easily discover it and find out about FreedomBox.
Tests:
- In mobile view, the hamburger menu show the icon and text. Link works.
- In desktop mode, only the icon is visible. Link works.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Make a separate image for 'FreedomBox Powered'.
- Link to the now publicly available about page.
Tests:
- Clicking on the new 'Powered' image leads to about page which is available to
logged in and logged out users.
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>
- 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>
- 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>
- We are using submenu.url to check for specific URLs and then highlight a menu
item. This is somewhat incorrect due to string search and not generic enough. We
have another mechanism 'active_menu_urls' to perform this. Improve and use this
instead.
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>
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>
- Earlier the main logo image was not responsive. In a mobile layout, it would
overflow the page. Fix this by using correct CSS classes.
- Also move the message to bottom of the log (to be later replaced by the a
spinner).
Tests:
- Remove /var/lib/plinth/plinth.sqlite3 and start service. It will perform
first setup operations. During this time, visit web interface in mobile layout
and notice that logo is taking 100% of the width but not overflowing.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
Tests:
- Start first boot by removing /var/lib/plinth/plinth.sqlite3 and starting
service. Switch to responsive design mode and select a phone layout. Notice that
an inactive toggler appears during bootup/welcome/account first boot steps.
- With the patch, the toggler button does not appear during those steps. After
the account step, the toggler appears and is functional with help menu.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- All forms are rendered using django-bootstrap-form excep the
app enable/disable form. Render this one too using django-boostrap-form so that
the default.html is not used for rendering. Using default.html is deprecated in
Django 4.0 and in 5.0 will default to using div.html.
Tests:
- No change in HTML output, appearance or functionality for the enable/disable
button.
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>
- During database error such as 'database is locked', show a special message
asking users to try again instead of submitting a bug report.
[sunil: Minor formatting, rename the template file name]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
[jvalleroy: Fix missing import]
Signed-off-by: James Valleroy <jvalleroy@mailbox.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.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>
Tests:
- Install bepasty app. Notice the extra menu option in the advanced menu.
Clicking it installs the app and run setup. Progress is shown during the re-run
of setup. When operation is completed 'App updated' notification is shown.
- Test Zoph app setup page.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- The feature has undergone multiple rounds of improvements and testing.
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>
Closes: #2316.
Tests:
- Go to to power app. There is no menu.
- Go to firewall app. There is a menu item but no backup and restore items present.
- Go to bepasty app. There are backup and restore menu items in menu. Clicking
backup items takes us to create backup page with only Bepasty app selected.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
[jvalleroy: Fix CSS classes for new menu items]
Signed-off-by: James Valleroy <jvalleroy@mailbox.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Closes: #2293.
When running in develop mode, the title already contains 'Page not found'.
Commit 0881dae66583304494e052dfaddb9e3a784d2994 already ensured that functional
tests see this page title and treat it as 404 page. This change ensures that 404
is detected even when not running in develop mode.
Tests:
- Run freedombox as 'sudo --user=plinth ./run' without the --develop option.
Install and disable JSXC. Visit the page /plinth/apps/jsxc/jsxc/. Notice that
the page title is 'Page not found - FreedomBox'.
- Functional tests for JSXC work even when service is running without --develop
option.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Closes: #2309.
- This prevents processing of AppView when the app is being uninstalled. For at
least two apps, this has failed because the AppView assumes that app and its
dependencies are installed.
- Use a dedicated template as well is simplify app template.
Tests:
- Installing and uninstalling an app works.
- Refreshing the app page during uninstall does not lead to an error for samba
and email apps.
- Unit tests pass.
- Functional tests for samba and email work.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- 'application-name' is not meant for regular web pages, just web apps.
FreedomBox qualifies as a web app. Browsers may use this over title.
- 'description' should rather talk about FreedomBox rather than just what role
the web interface plays in the FreedomBox project.
Tests:
- Verify formatting in output HTML.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- There is a special page which is served when race condition occurs between the
setup middleware and setup view soon after an installation. In this case, a
special page is shown with 'App installed' as message but this is still the
setup view. Detect this case and wait for page to refresh.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
