add CodeMirror and Template options

page-settings.js

@@ -1,11 +1,17 @@
 export class PageSettings extends HTMLElement {
   textEn = {
+    general: 'General',
+    template: 'Template',
+    codeMirror: 'CodeMirror',
     outbound: 'Outbound connections',
     inbound: 'Inbound connections',
     netAccess: 'Direct network access (CSP)',
   }
 
   textEs = {
+    general: 'General',
+    template: 'Template',
+    codeMirror: 'CodeMirror',
     outbound: 'Conexiones salientes',
     inbound: 'Conexiones entrantes',
     netAccess: 'Acceso directo a la red (CSP)',
@@ -15,6 +21,26 @@ export class PageSettings extends HTMLElement {
     super()
     this.attachShadow({mode: 'open'})
     this.language = navigator.language
+
+    const generalHeading = document.createElement('div')
+    generalHeading.classList.add('heading')
+    generalHeading.innerText = this.text.general
+
+    const templateLabel = document.createElement('label')
+    templateLabel.innerText = this.text.template
+    this.templateEl = document.createElement('input')
+    this.templateEl.type = 'checkbox'
+    templateLabel.prepend(this.templateEl)
+
+    const codeMirrorLabel = document.createElement('label')
+    codeMirrorLabel.innerText = this.text.codeMirror
+    this.codeMirrorEl = document.createElement('input')
+    this.codeMirrorEl.type = 'checkbox'
+    codeMirrorLabel.prepend(this.codeMirrorEl)
+
+    const generalDiv = document.createElement('div')
+    generalDiv.append(templateLabel, codeMirrorLabel)
+
     const outboundHeading = document.createElement('div')
     outboundHeading.classList.add('heading')
     outboundHeading.innerText = this.text.outbound
@@ -36,6 +62,8 @@ export class PageSettings extends HTMLElement {
       'm-settings-network-settings'
     )
     this.shadowRoot.append(
+      generalHeading,
+      generalDiv,
       outboundHeading,
       this.outbound,
       inboundHeading,
@@ -79,10 +107,14 @@ export class PageSettings extends HTMLElement {
         outbound: this.outbound.data,
         inbound: this.inbound.data,
       },
+      template: this.templateEl.checked,
+      codeMirror: this.codeMirrorEl.checked,
     }
   }
 
   set data(value) {
+    this.templateEl.checked = !!value.template
+    this.codeMirrorEl.checked = !!value.codeMirror
     this.outbound.data = value.connections?.outbound || {}
     this.inbound.data = value.connections?.inbound || {}
     this.network.data = {