Feature: Live Form Submission

[Jixabon]

This PR address a few oddities of the UI/UX mentioned in #2101 by introducing form submission with live updates. Its function is described below.

Backend

The backend has a new class LiveForm that contains reusable code to be able to create the stream of information to be used by the front end.

There are a few functions in the LiveFrom class that have important purposes.

• initAjax() - Should be run at the start of the file to set important headers and required settings for a successful stream.
• sendStartMessage() - Sends a message to the frontend to be handled by code that the stream is starting.
• sendCompleteMessage() - Sends a message to the frontend to be handled by code that the stream is complete and the page should refresh.
• sendFailedMessage() - Sends a message to the frontend to be handled by code that something in the submission had a critical error and did not finish what was inteneded.
• sendUpdateMessage() - Sends a message to the frontend with text to show the user as well as an optional update of the percentage the progress bar should show.
• saveStatusMessage() - Saves a status message to show when the page reloads. Ideally should only be run once at the end of each logic flow. This function has an option to show a collapsable history that shows the messages sent.

When converting forms to use live form submisison certain functions may still use the old StatusMessage class to give updates. To get around rewriting everything a helper class LiveFormStatusMessage exists to pass to necessary functions and forward the message as a live update instead of a standard bootstrap alert on page load.

In the page's builder file (often in includes) be sure to run the static function loadStatusMessages() to pull the saved status messages from the session and add them to the page's $status messages.

Frontend

Note: Images shown may not reflect final look

To have a form use live form submission, add the class .live-form to the form element. If bootstrap validation is needed it will run before the live form submission is run. Set the action to a new ajax file to process the submitted form.

Live Update Modal

The modal contains a dynamic progress bar and the most update message. Below it is a collapsable scrollable history of messages sent. The modal is configured so that it cannot be hidden or dismissed.

Modal Options

• data-modal-title - Can be applied to either the form or the submitting button if there are multiple buttons to submit the same form with different outcomes.

Refreshed Page Alert with Details

Once the live form submission stream receives the complete message it will refresh the page. Assuming loadStatusMessages() is called any saved status messages will be shown. If the status message was configured to show the message history it will have a collapsible details button.

Implementing

This isn't something that necessarily needs to be used on all form submissions, but is useful for transparency to the user on what is happening.

Forms converted:

• AdBlock
• DHCP
• Hotspot
• WiFI Client
• OpenVPN
• WireGuard
• Update Check?
• Comment any others that should be converted

Issues

• Stream will be shown when form is submitted before JS is loaded
• Frontend feedback when ajax fails
• Backend handling of php error to send failed message

Bug Fixes

• Add use function statements to give more clear error messages when global functions aren't require_once
  • DhcpcdManager.php
  • DnsmasqManager.php
  • WiFiManager.php
  • HostapdManager.php
  • HotspotService.php
• Add $this for getIfaceMetric() function call in DhcpcdManager.php