- Same color as in Bootstrap 4 but removed in Bootstrap 5.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- This allows for system page to show 4 items in a row instead of 3.
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>
Overall, this is something we can try out.
- This looks better in some cases
- Default large list of disabled apps
- Home page with very few icons
- Help index page /plinth/help
- Mobile views
- This looks somewhat worse in some cases
- Last row of a large list of apps, esp. when the number apps left is even and
the number of apps in the previous row is not (similarly with odd number of
apps).
- Mismatch between enabled/disabled app section.
Thanks to @Ged296123 and @fefekrzr for suggesting the change.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- On a page without tags, tags.js still loads and initializes. When a tag input
search bar does not exist on the page, this leads to a harmless exception
getting printed on the browser console.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Drop the box shadow around a card item. Applies to home, apps, system, and
help pages.
- Replace the box shadow on hover with gray background. This gives the card a
much flatter look.
- Drop the top and bottom padding for app title as this is no longer necessary
as the white space around the icon/text is not overwhelming.
- Add top padding for app titles to make them level with icon tops.
- Drop the margin around the cards as it is not needed anymore. This completely
removes non-clickable area between the cards (which is unnecessary).
- Increase the padding to compensate for the reduction in the total gap
between the cards.
- In system page, increase in top margin for the section title is needed to
compensate for the loss of bottom margin for cards.
- In system page, increase in the total width of the card is necessary to make
the total row size the size of the container.
Tests:
- In apps and system pages, gap between the section title and cards in the
previous row is sufficient.
- In system page, 4 cards fit exactly in each row given the screen is large
enough.
- In apps page, app titles margins appear pleasant.
- In system page, the app titles align with icon tops.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- When the box shadows are dropped, the cards overlay on those backgrounds is
not pleasant.
Tests:
- MediaWiki functional tests pass.
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: #2464.
- This page will act as replacement for the footer links in the home page.
- Remove link to FreedomBox Foundation and add link to Weblate project. We
already have a donate link to the foundation website.
Tests:
- About page is shown as expected. Old 'Learn more' button is no more. So is the
last paragraph.
- Styling is as expected. All the section have equal width.
- All links work.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- The container border is, strictly speaking, no longer required as the background and
content container don't have different styles.
- This makes the mobile and desktop interfaces a lot more similar.
- Don't change any margins and padding for the content container.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- 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>
