Enable 'Select Network' settings panel

src/components/views/action-select-network/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "/vendor/@lit/[email protected]/lit-all.min.js";
+import { LitElement, html, css, nothing } from "/vendor/@lit/[email protected]/lit-all.min.js";
 import { getNetworks } from "/api/network/get-networks.js";
 import { putNetwork } from "/api/network/set-network.js";
 import { postSetupBootstrap } from "/api/system/post-bootstrap.js";
@@ -41,6 +41,7 @@ class SelectNetwork extends LitElement {
   static get properties() {
     return {
       showSuccessAlert: { type: Boolean },
+      showRecoveryOptions: { type: Boolean },
       reflectorToken: { type: String },
       _server_fault: { type: Boolean },
       _invalid_creds: { type: Boolean },
@@ -58,6 +59,7 @@ class SelectNetwork extends LitElement {
     this._setNetworkFields = {};
     this._setNetworkValues = {};
     this._networks = [];
+    this.showRecoveryOptions = true;
 
     // Set initial fields
     this.updateSetNetworkFields();
@@ -78,12 +80,7 @@ class SelectNetwork extends LitElement {
   }
 
   updateSetNetworkFields() {
-    this._setNetworkFields = {
-      sections: [
-        {
-          name: "select-network",
-          submitLabel: "Much Connect",
-          fields: [
+    const fields = [
             {
               name: "network",
               label: "Select Network",
@@ -142,14 +139,26 @@ class SelectNetwork extends LitElement {
                 return false;
               },
             },
-            {
-              name: "ssh-key",
-              label: "SSH Key (Optional)",
-              type: "text",
-              required: false,
-              placeholder: "Pasting an SSH key here will also enable SSH",
-            },
           ],
+    ];
+
+    // Only add SSH key field if showRecoveryOptions is true
+    if (this.showRecoveryOptions) {
+      fields.push({
+        name: "ssh-key",
+        label: "SSH Key (Optional)",
+        type: "text",
+        required: false,
+        placeholder: "Pasting an SSH key here will also enable SSH"
+      });
+    }
+
+    this._setNetworkFields = {
+      sections: [
+        {
+          name: "select-network",
+          submitLabel: "Much Connect",
+          fields: fields,
         },
       ],
     };
@@ -384,17 +393,18 @@ class SelectNetwork extends LitElement {
             </dynamic-form>
             `: nothing }
 
-          <div style="margin: 2em 8px">
-            <sl-alert variant="warning" open>
-              <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
-              After you hit connect it may take up to 10 minutes while your
-              Dogebox is configured!
-            </sl-alert>
-          </div>
+            ${this.showRecoveryOptions ? html`
+              <div style="margin: 2em 8px">
+                <sl-alert variant="warning" open>
+                  <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
+                  After you hit connect it may take up to 10 minutes while your Dogebox is configured!
+                </sl-alert>
+              </div>
+            ` : nothing}
         </div>
       </div>
     `;
   }
 }
 
-customElements.define("x-action-select-network", SelectNetwork);
+customElements.define("x-action-select-network", SelectNetwork);

src/pages/page-settings/index.js

@@ -10,6 +10,7 @@ import "/components/views/action-check-updates/index.js";
 import "/components/views/action-remote-access/index.js";
 import "/components/views/x-log-viewer/index.js";
 import "/components/views/x-activity-log.js";
+import "/components/views/action-select-network/index.js";
 import { notYet } from "/components/common/not-yet-implemented.js";
 import { store } from "/state/store.js";
 import { StoreSubscriber } from "/state/subscribe.js";
@@ -91,6 +92,13 @@ class SettingsPage extends LitElement {
     this.showImportLogsModal = false;
   }
 
+  handleSelectNetwork(e) {
+    e.preventDefault();
+    store.updateState({ dialogContext: { name: 'select-network' }});
+    const router = getRouter();
+    router.go('/settings/select-network', { replace: true });
+  }
+
   handleDialogClose() {
     store.updateState({ dialogContext: { name: null }});
     const router = getRouter();
@@ -163,7 +171,7 @@ class SettingsPage extends LitElement {
   render() {
     const { updateAvailable } = store.getContext('sys')
     const dialog = store.getContext('dialog')
-    const hasSettingsDialog = ["updates", "versions", "remote-access", "import-blockchain"].includes(dialog.name);
+    const hasSettingsDialog = ["updates", "versions", "remote-access", "import-blockchain", "select-network"].includes(dialog.name);
 
     // Debug logging
     console.log('Settings page render:', {
@@ -186,8 +194,8 @@ class SettingsPage extends LitElement {
             <action-row prefix="arrow-repeat" ?dot=${updateAvailable} label="Updates" href="/settings/updates" @click=${notYet}>
               Check for updates
             </action-row>
-            <action-row prefix="wifi" label="Wifi" @click=${notYet}>
-              Add or remove Wifi networks
+            <action-row prefix="wifi" label="Select Network" href="/settings/select-network" @click=${this.handleSelectNetwork}>
+              Select a network to connect to
             </action-row>
             <action-row prefix="key" label="Remote Access" href="/settings/remote-access" @click=${notYet}>
               Manage SSH settings and keys
@@ -227,6 +235,7 @@ class SettingsPage extends LitElement {
         ${choose(dialog.name, [
           ["updates", () => html`<x-action-check-updates></x-action-check-updates>`],
           ["remote-access", () => html`<x-action-remote-access></x-action-remote-access>`],
+          ["select-network", () => html`<x-action-select-network .showRecoveryOptions=${false}></x-action-select-network>`],
           ["versions", () => renderVersionsDialog(store, this.handleDialogClose)],
           ["import-blockchain", () => this.renderImportBlockchainDialog()],
         ])}
@@ -304,4 +313,4 @@ function renderVersionsDialog(store, closeFn) {
       <sl-button variant="text" @click=${closeFn}>Dismiss</sl-button>
     </div>
   `
-}
+}