- Add a toggle menu for selecting the color scheme. JS code largely taken from
Bootstrap documentation and slightly customized.
- Use local storage to store the setting for dark/light/auto. Default to auto
which means browser level preference is picked up (which could be system level
preference).
Tests:
- Appearance of the toggle menu is consistent. Check box is shown on the
currently selected value.
- Deleting the local storage value reverts the preference to browser set value.
- Menu is collapsed at smaller screen sizes. Appearance and functionality as
expected.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Fixes: #2528
Tests:
- In Responsive Design Mode in Firefox, expand the screen width to be beyond
1400px. The left side of popup for the user menu will be aligned with the left
side of the menu item itself. When the width of the page is less than 1400px,
the right side of the popup will be right aligned with the right side of the
menu item.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Latest version of libjs-bootstrap5 depends on
node-popper2. However, version in Debian bookworm still continue to have
incorrect dependency. So, add explicit dependency on node-popper2 until we stop
supporting Bookworm.
Tests:
- In stable and testing VMs, install node-popper2 and notices that the following
work as expected:
- User menu dropdown in desktop and mobile layouts.
- Help menu dropdown in desktop and mobile layouts.
- Notification dropdown.
- App extra actions dropdown.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- They should only be present in the <head>. Since all files are loaded with
'defer' attribute, it is no longer needed to place the JS files at the bottom of
the page.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.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>
- 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>
- 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>
- 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>
- 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>
- 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>
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>
- 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>
- 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>
- '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>
When refresh_page_sec is set to zero (immediate refresh), the template does not
treat that as needing refresh at all. Fix this by distinguishing zero from None.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.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>
This change prevents the plinth user to become a superuser without
knowing an admin password.
Users module and action script:
- User credentials are now required for the subcommands: create-user,
set-user-password, add-user-to-group (if the group is admin),
remove-user-from-group (if the group is admin), set-user-status,
remove-user (if the removed user is the last admin user.
Note: the web UI doesn't allow to delete last admin user).
- subcommand remove-users requires authentication if the user is last
admin user. Password must be provided through standard input.
- subcommand remove-group: do not allow to remove group 'admin'
- User credentials must be provided using the argument
--auth-user and a passsword must be provided through standard input.
- If there are no users in the admin group, no admin password is
required and if the --auth-user argument is required, it can be an
empty string.
Users web UI:
- An admin needs to enter current password to create and edit a user
and to change user's password.
- Show more detailed error text on exceptions when submitting forms.
- Show page title on the edit and create user pages.
Users unit and functional tests:
- Added a configuration parameters to the pytest configuration file
to set current admin user/password.
- Added a configuration parameter 'ssh_port' to the functional tests.
You can overwrite this with the FREEDOMBOX_SSH_PORT environment
variable. Modified HACKING.md accordingly.
- Added an unit test:
- test changing the password as a non-admin user.
- test invalid admin password input.
- test that removing the admin group fails.
- Capture stdout and stderr in the unit tests when calling an action
script to be able to see more info on exceptions.
- Added functional tests for setting ssh keys and changing passwords
for admin and non-admin users.
- Added a functional test for setting a user as active/inactive.
Changes during review [sunil]:
- Move uncommon functional step definitions to users module from global. This is
keep the common functional step definitions to minimal level and promote when
needed.
- Minor styling changes, flake8 fixes.
- Don't require pampy module when running non-admin tests. This allows tests to
be run from outside the container on the host machine without python3-pam
installed.
- Call the confirm password field 'Authorization Password'. This avoid confusion
with a very common field 'Confirm Password' which essentially means retype
your password to ensure you didn't get it wrong. Add label explaining why the
field exists.
- Don't hard-code /tmp path in test_actions.py. Use tmp_path_factory fixture
provided by pytest.
- Remove unused _get_password_hash() from actions/users.
- Undo splitting ldapgid output before parsing. It does not seem correct and
could introduce problems when field values contain spaces.
Tests performed:
- No failed unit tests (run with and without sudo).
- All 'users' functional tests pass.
- Creating an admin user during the first boot wizard succeeds.
- Creating a user using the web UI with an empty or wrong admin
password fails and with the correct admin password succeeds.
- Editing a user using the web UI with an empty or wrong admin
password fails and with the correct admin password succeeds.
- Changing user's password using the web UI with an empty or wrong
admin password fails and with the correct admin password succeeds.
- Above mentioned user action script commands can't be run without
correct credentials.
- Adding the daemon user to the freedombox-share group succeeds when
installing certain apps (deluge, mldonkey, syncthing, transmission).
Signed-off-by: Veiko Aasa <veiko17@disroot.org>
[sunil: Move uncommon functional step definitions to users module from global]
[sunil: Minor styling changes, flake8 fixes]
[sunil: Don't require pampy module when running non-admin tests]
[sunil: Call the confirm password field 'Authorization Password']
[sunil: Don't hard-code /tmp path in test_actions.py]
[sunil: Remove unused _get_password_hash() from actions/users]
[sunil: Undo splitting ldapgid output before parsing]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
- Implement ability to refresh page at the framework level so that every page
does not need to handle it.
- Refresh after number of seconds specified in context of the view.
Tests performed:
- Trigger the following functions and ensure that page reload after 3 seconds
during the running operation while it does refresh before and after the
operation.
- Diagnostics tests from the module.
- Gitweb repository cloning.
- Monkeysphere publish key to server.
- OpenVPN setup.
- Tor configuration update.
- Manual software update.
- App installation.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
Tests performed:
- Submit a form and notice that button has a spinner soon after click.
- Select a from like Gitweb repository creation form and submit it. After submit
go back to previous form using back button. Notice that button has been restored
to proper state.
- Without filling valid information the form, press submit. Notice that the
button does not change to a spinner.
- Check installing an app, snapshots management, network forms, wireguard forms,
etc.
- Test on Firefox and Chromium.
- Test with LibreJS that the script is accepted as valid free software license.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
See #1841 for discussion on why Turbolinks needs to be removed.
Closes: #1841.
Closes: #1804.
Tests performed:
- There are no more references to 'turbolinks' in source code other than .po(t)
files and the manual.
- When loading a page, turbolinks.js is no longer loaded.
- The following links don't have data-turbolinks attribute and work well when
clicked.a
- Gitweb repository links
- Download manual links (en, es)
- Ikiwiki wiki links
- Sharing app web share links
- TT-RSS mobile app link
- 'Launch web client' button
- 'Launch' button in web section of clients table
- Active and regular front page shortcut
- Roundcube does not have a link to /roundcube in description.
- turblinks not present in /static/jslicense.html . LibreJs accepts all scripts.
Reported-by: Veiko Aasa <veiko17@disroot.org>
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Tested-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Eliminate issue with collapsed navbar's drop-down menu text color when the
width is exactly 768px or less than 320px.
- Remove redundant footer's position: relative rule.
Tests performed:
- Change the browser width to 768px, the navbar is not collapsed and drop down
menu text color is black on white background.
- Change the browser width to 767px, the navbar is collapsed and drop down menu
text color is white on blue background.
- Change the browser width to less than 320px, the navbar is collapsed and drop
down menu text color is white on blue background.
- Footer on the main page and remaining pages is unchanged at <320px, =767px and
>= 768px.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
This seems to be a regression from earlier behavior.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Joseph Nuthalapati <njoseph@riseup.net>
- Refactor the help menu into a django template include.
- Show help menu if user is logged in, instead of after completing firstboot.
Closes: #1517
Signed-off-by: Joseph Nuthalapati <njoseph@riseup.net>
[sunil@medhas.org Rename help-menu.inc to help-menu.inc]
[sunil@medhas.org Use user.is_authenticated instead of another variable]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
The link is hidden but not removed. librejs will still parse it. Ideally we
would want to do this from <link data-jslicense='1' href=''> but that seems to
cause problems for librejs.
Librejs users can still find out about the license of Javscript script file
using Librejs menu.
We already have a link to FreedomBox source code in the home page.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Joseph Nuthalapati <njoseph@thoughtworks.com>
- Keep unimportant items hidden on small screens.
- Remove dividers that cause confusion.
- Avoid a scrollbar inside the menu when user menu is expanded. Bootstrap
intended to show exactly 8 menu items.
Fixes#1431.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Joseph Nuthalapati <njoseph@thoughtworks.com>
- This works properly in mobile sizes by underlining only the logo.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Joseph Nuthalapati <njoseph@thoughtworks.com>
Currently, when a message is shown at the top or in users and groups page, The
top margin is too short. Increase it to 25px from 5px. Also:
- Don't use the .thumbnail class for containers as this does not match the
semantics. Create and use class .contain-container.
- Also create class .card-container for all container containing cards. Unused
for now.
- Indentation fixes.
- Remove duplicated rule.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Joseph Nuthalapati <njoseph@thoughtworks.com>
- There should not be a space in front of the text. This is a styling issue.
- Remove the CSS rule causing issues with spacing.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
This puts pages on white cards.
This lets the footer float underneath content instead of bottom of the page.
This should fix issues with MR !1335
Reviewed-by: Joseph Nuthalapati <njoseph@thoughtworks.com>
Using the "no-preview" directive disables caching on application visits but
shows cached pages on restoration visits.
Signed-off-by: Joseph Nuthalapati <njoseph@thoughtworks.com>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Turbolinks cannot replace the styles in the head of the HTML document. Moved
them to the body by making the class of the body an overridable Django template
block.
Signed-off-by: Joseph Nuthalapati <njoseph@thoughtworks.com>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Load scripts in the head with `defer` instead of at the end of the body
- Disable turbolinks for application shortcuts and manual download
Signed-off-by: Joseph Nuthalapati <njoseph@thoughtworks.com>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Needed as the submenu on the left is gone. There is too much space available
for the main content.
Signed-off-by: Manish Tripathy <manisht@thougtworks.com>
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
- Use properly base class overrides
- Implement feature to go back to the page user was on before language
selection.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
