Invisible protection

[zepich]

Discussed in #53

^{Originally posted by zepich April 26, 2023}
Sometimes, it would fit the design of a website better when the mosparo box is invisible. Technically, it would be possible to hide the mosparo checkbox. The protection in such a scenario would work as the following:

Setup process:

1. The project owner chooses Invisible protection as the design type of the project in the mosparo design settings.
2. Instead of designing the box, the user has to select the colors for the loading screen
3. The user integrates mosparo into the form in the same way as right now

Frontend process:

1. When the form gets loaded, mosparo initializes itself as right now, but without creating a visible checkbox.
2. As soon as the user submits the form, mosparo starts the verification. Since the verification can take a moment, mosparo will show a full-screen overlay with a loading text. The design of this full-screen overlay will be configurable in the design settings and is completely adjustable by custom CSS on the website itself.
3. After the verification is complete, the form will be submitted as normally

Suggested by @quadcom in #25

Changes

• Add the additional design mode in the design settings.
• Add the required options in the design settings.
• Adjust the frontend styles to handle the invisible mode.
• Adjust the frontend JavaScript to handle the invisible mode.
• Adjust the hint in the wizard regarding advanced mode with the invisible mode.

Suggested by

• @quadcom