Creating the Front End of the Plugin

[Monviech]

Creating the plugin structure to display properly in the OPNsense /ui/:

• Controllers
• Views
  • "general.volt" view and api calls
    • Apply button working
    • Actions being triggered by Apply button
    • Only uses the ApiMutableModelControllerBase without modifications, so CSRF Tokens work natively
  • "reverse_proxy.volt" view and api calls
    • Load Data into Boot Grid
    • Command Buttons
      • Edit
      • Clone
      • Delete
    • Enabled checkbox working - Skipped - Turned Read only for now.
    • Actions being triggered by Apply button
  • "reverse_proxy_form.volt" view and api calls
    • Save button saving new entry (add)
    • Save button saving existing entry (set)
    • Load form prepopulated based on UUID
    • Show input validation messages next to the form fields
    • Only input validate changed data to prevent lockout from saving action.
• Models
• Forms
• Menu
• API Calls for writing and retreiving data to the config.xml
  • Understanding how CSRF Tokens work, since they seem to be needed when using POST with set, del etc... Actions.
  • The Tokens are automatically added to each ajax request by the base form. So making a POST Action to the API with ajax
    will automatically pass the token and the request is authorized.
    Example delete Action:

// Function to delete an entry
function deleteEntry(uuid) {
    console.log('Deleting entry', uuid);
    if (confirm('Are you sure you want to delete this entry?')) {
        $.ajax({
            url: '/api/caddy/ReverseProxy/del/' + uuid, // Include UUID in the URL
            method: 'POST',
            contentType: 'application/json',
            success: function(data) {
                console.log('Delete response:', data);
                // Handle the response
            },
            error: function(xhr, status, error) {
                console.error('Error deleting entry:', error);
                // Handle the error
            }
        });
    }
}

Screenshots of current GUI:

[mietzen]

This looks promising 👍 Will you add a option to install packages and modules? E.g.: ./caddy add-package github.com/caddy-dns/cloudflare

Edit: You may fetch all available packages via: curl -s https://caddyserver.com/api/packages | jq '.result.[].path' -r

[Monviech]

Current Front End developements and API calls are slowly getting refined:

Form now shows all UUID reverse proxy entires in a list.

When pressing the edit button next to the list entry, the reverse_proxy_form opens up prepopulated:

When pressing the "+Add" button, the form opens empty.

The General Settings can be saved an retrieved properly too.

The API Controllers have been implemnted and can set and get data:

/api/caddy/ReverseProxy/get

{"reverse":{"87936553-df1f-447e-8284-929daa40a6c1":{"Enabled":"1","FromDomain":"example.com","FromPort":"80","ToDomain":"localhost","ToPort":"8080","Description":"Example reverse proxy entry"},"14219e01-8545-41cb-8ae4-b0232f47a9e2":{"Enabled":"1","FromDomain":"example.com","FromPort":"80","ToDomain":"localhost","ToPort":"8080","Description":"Example reverse proxy entry"},"28c61a2b-832f-4111-82d4-53d5937561f9":{"Enabled":"1","FromDomain":"example.com","FromPort":"80","ToDomain":"localhost","ToPort":"8080","Description":"Example reverse proxy entry"}}}

/api/caddy/ReverseProxy/get/87936553-df1f-447e-8284-929daa40a6c1

{"reverse":{"87936553-df1f-447e-8284-929daa40a6c1":{"Enabled":"1","FromDomain":"example.com","FromPort":"80","ToDomain":"localhost","ToPort":"8080","Description":"Example reverse proxy entry"}}}

/api/caddy/General/get

{"general":{"enabled":"1"}}

Next step is getting the Save action to work in the reverse_proxy_form view, the apply to work in the reverse_proxy view, and the clone and delete to work in the list as well.

[Monviech]

First Frontend Version finished.

[Monviech]

@mietzen
Since you already have experience with additional plugins for caddy, what kind of mechanism should this use? If they're just packages that need to sit in a certain plugin folder (e.g. usr/local/etc/caddy/plugins), and it's just a few of them that are needed, they could be included in the +MANIFEST file. Then Caddy pkg could be build including them and they'd be ready to use when its installed. Of course, only in the command line, building the GUI around them takes considerable effort as I have just learned from getting a first version with basic functionality ready. But since the basics are set, the GUI can be expanded over time.

[mietzen]

Caddy is a single static binary, you compile it with all the plugins you need.
You basically have three ways:

• Compile it yourself with xcaddy
• Use the experimental add-package command, which is using the download page in the background.
• Use the download page, this will compile and serve you the binary on the fly. E.g.:

# This downloads caddy with the cloudflare DNS Plugin for FreeBSD, arch: AMD64
curl -SsL --output caddy 'https://caddyserver.com/api/download?os=freebsd&arch=amd64&p=github.com%2Fcaddy-dns%2Fcloudflare'

You can also add multiple plugins e.g.:

https://caddyserver.com/api/download?os=freebsd&arch=amd64&p=github.com%2Fcaddy-dns%2Fcloudflare&p=github.com%2Fmholt%2Fcaddy-dynamicdns&p=github.com%2Fmietzen%2Fcaddy-dynamicdns-cmd-source

But beware:

⚠️ Due to multiple outstanding bugs in the go command, we are aware that some downloads may hang or fail. In the meantime, you can download Caddy from the latest release on GitHub, or use xcaddy for custom builds. (Remember, this download page comes with no guarantees or SLAs.) Sorry for the inconvenience.

I think the best way would be to use the download page or the add-package command, since we don't need any other dependencies / build tools, if the download is timed out we give a warning / error message and try again, but this also happens rarely.

This might also be a good way to keep caddy up to date. Meaning we only serve a front end for caddy, but not the caddy binary. It would be similar to the speed-test plugin in mimugmails repo: https://github.com/mimugmail/opn-repo/tree/main/net-mgmt/speedtest-community
But with a list you can select plugins from.

[Monviech]

@mietzen
So far I have built it with xcaddy and then packaged it, since I need to include a few files into the package to make it work with my API actions and to make the license files show properly in the GUI. Please look at the MANIFEST and the rc.d service.
https://github.com/Monviech/os-caddy-plugin/blob/main/src/bin/%2BMANIFEST
https://github.com/Monviech/os-caddy-plugin/blob/main/src/etc/rc.d/caddy

I don't know yet how I could include those files into the plugin.

[mietzen]

@mietzen So far I have built it with xcaddy and then packaged it, since I need to include a few files into the package to make it work with my API actions and to make the license files show properly in the GUI. Please look at the MANIFEST and the rc.d service. https://github.com/Monviech/os-caddy-plugin/blob/main/src/bin/%2BMANIFEST https://github.com/Monviech/os-caddy-plugin/blob/main/src/etc/rc.d/caddy

I don't know yet how I could include those files into the plugin.

You could just don't deliver caddy and delete:

    "/usr/local/bin/caddy": {
      "checksum": "f9eaa71690fe6ac1ce708ea1cfb6ce2a6df3d5d7ba5aa895efb9e700ffdf045a",
      "username": "root",
      "groupname": "wheel",
      "perm": "0555"
    },

I don't know yet how I could include those files into the plugin.

You mean in the OPNsense Plugin?

You can just throw it into the .pkg, it's just a tar ball, see mimugmails pkg for example:

$ wget https://opn-repo.routerperformance.net/repo/FreeBSD:13:amd64/caddy-2.7.5.pkg
$ tar -xf caddy-2.7.5.pkg
$ tree usr
usr
`-- local
    |-- bin
    |   `-- caddy
    `-- etc
        |-- caddy
        |   `-- Caddyfile.sample
        `-- rc.d
            `-- caddy

6 directories, 3 files
$ cat usr/local/etc/rc.d/caddy
#!/bin/sh

# PROVIDE: caddy
# REQUIRE: LOGIN DAEMON NETWORKING
# KEYWORD: shutdown
...

[Monviech]

@mietzen

I'm already doing this. My caddy-2.7.5.pkg has almost the same structure, rc.d service file included.
I have also built the os-caddy.pkg plugin that includes all plugin files. "/usr/local/opnsense/..."

I don't know how to offer caddy binary without offering it through a custom repository. You can't just add the normal FreeBSD repository since OPNsense has their own ports repository. If the versions of pakets don't match things can break.

I'm just really new at this. Could we maybe talk over an instant messenger? You could write me an email to the Maintainer address in my +Manifest file with details if you want. Thanks :)

[Monviech]

Current Frontend is finished. All other things will be discussed in seperate issues (Expansions of the GUI etc...)