This settings panel is backed by the "settings" dashboard object see Dashboard.init call at the top of index.html - and, consequently, by the "settings" fieldset in mongoose_dashboard.c.

Fields are bound to the dashboard object via the data-bind attribute, e.g. data-bind="setttings.name"

When you save changed fields, the changes are saved to the device.

The "NAME" field has data-autosave="1", so it is autosaved when user types text.

The other fields are not auto-saved, so when they are changed, dashboard.js automatically applies CSS class "edited" to them to indicate they were changed but not saved.

The cancel and save buttons are attached to the settings object via the data-cancel and data-save attributes. Those buttons get automatically enabled or disabled based on editing status.

The two default files are fake - you can delete them

However the manager works - you can upload new files. They are uploaded to /tmp/ directory on the device. This requires stdio (fopen/fread/...) implemeneted.

The easiest way to implement it is to use a filesystem like LittleFS on your internal or external flash and retarget the standard library to use it.

See this example on how LittleFS can be implemented on Nucleo-H563ZI internal flash partition.