Portal: use new config system and api

components/svelte-portal/public/build/bundle.css

@@ -1 +1 @@
-main.svelte-wdqzrw.svelte-wdqzrw{border:4px dashed #000;margin:10px auto;padding:10px;max-width:800px}.svelte-wdqzrw.svelte-wdqzrw{-moz-user-select:none;-o-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}tabs.svelte-wdqzrw.svelte-wdqzrw{border-bottom:4px dashed #000;width:100%;display:block}tab.svelte-wdqzrw.svelte-wdqzrw{margin-right:10px;padding:5px 10px;margin-bottom:5px;display:inline-block}tab.svelte-wdqzrw.svelte-wdqzrw:hover,tab.selected.svelte-wdqzrw.svelte-wdqzrw:hover{background:rgb(255, 255, 255);color:#000000}tab.selected.svelte-wdqzrw.svelte-wdqzrw{background-color:black;color:white}tabs-content.svelte-wdqzrw.svelte-wdqzrw{display:block;margin-top:10px}error.svelte-wdqzrw.svelte-wdqzrw{padding:5px 10px;background-color:rgb(255, 0, 0);color:black}@font-face{font-family:"DOS";src:url("../assets/ega8.otf") format("opentype");font-weight:normal;font-style:normal;-webkit-font-kerning:none;font-kerning:none;font-synthesis:none;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;font-variant-numeric:tabular-nums}body{padding:0;margin:0;background-color:#ffa21c;color:#000;font-size:28px;font-family:"DOS", monospace;line-height:1;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.grid.svelte-wdqzrw.svelte-wdqzrw{display:inline-grid;grid-template-columns:auto auto}.grid.svelte-wdqzrw>div.svelte-wdqzrw{margin-top:10px}.value-name.svelte-wdqzrw.svelte-wdqzrw{text-align:right}task-list.svelte-wdqzrw.svelte-wdqzrw{display:inline-grid;grid-template-columns:auto auto auto auto auto;width:100%}.button-css.svelte-yar6m3{background-color:black;color:white;font-size:28px;font-family:"DOS", monospace;line-height:1;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);border:0;padding:5px 10px;display:inline-block;max-width:100%}.button-css.svelte-yar6m3:hover{background:rgb(255, 255, 255);color:#000000}popup-wrapper.svelte-1ufadaz{background-color:rgba(0, 0, 0, 0.863);width:100%;height:100%;display:table;table-layout:fixed;z-index:999;overflow:auto;position:fixed;top:0;left:0;right:0;bottom:0}popup-body.svelte-1ufadaz{margin:auto;display:table-cell;text-align:center;vertical-align:middle;width:100%}popup-content.svelte-1ufadaz{background-color:#ffa21c;display:inline-block;outline:none;position:relative;text-align:initial;max-width:100vw}popup-border.svelte-1ufadaz{display:block;border:4px dashed #000;margin:10px;padding:10px}popup-close.svelte-1ufadaz{background-color:#000;display:inline-block;color:#ffa21c;position:absolute;width:24px;right:0px;top:0px;text-align:center}popup-close.svelte-1ufadaz:hover{background-color:#fff;color:#000}.input-text-css.svelte-4h7oz2{display:inline-block;color:#000;font-size:28px;font-family:"DOS", monospace;line-height:1;box-sizing:border-box;margin:0;border:0;border-bottom:4px solid #000;padding:0 5px 0 5px;box-shadow:none;border-radius:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:#ffa21c;height:32px}.input-text-css.svelte-4h7oz2:focus-visible,.input-text-css.svelte-4h7oz2:hover{outline:0;background-color:white}@keyframes svelte-1471rey-spinner-animation{0%{content:"|"}25%{content:"/"}50%{content:"-"}75%{content:"\\"}100%{content:"|"}}spinner.svelte-1471rey::after{display:inline-block;animation:svelte-1471rey-spinner-animation 0.6s linear infinite alternate;content:"|"}select.svelte-1rf61qb.svelte-1rf61qb{display:inline-block;color:#000;font-size:28px;font-family:"DOS", monospace;line-height:1;box-sizing:border-box;margin:0;border:0;border-bottom:4px solid #000;padding:0 5px 0 5px;box-shadow:none;border-radius:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:#ffa21c}select.svelte-1rf61qb.svelte-1rf61qb::-ms-expand{display:none}select.svelte-1rf61qb.svelte-1rf61qb:hover{background:rgb(255, 255, 255);color:#000000}select.svelte-1rf61qb.svelte-1rf61qb:focus{box-shadow:none;outline:none;background:rgb(255, 255, 255);color:#000000}select.svelte-1rf61qb option.svelte-1rf61qb{font-weight:normal}.button.svelte-1rqr1h4{box-sizing:border-box;display:inline-block;font-size:28px;font-family:"DOS", monospace;line-height:1;border:0;padding:0 5px 0 5px;box-shadow:none;border-radius:0;display:inline-block;max-width:100%}.black.svelte-1rqr1h4{color:white;background-color:black;border-bottom:4px solid #000}.black.svelte-1rqr1h4:hover{background:#fff;color:#000}.normal.svelte-1rqr1h4{color:#000;background-color:#ffa21c;border-bottom:4px solid #ffa21c}.normal.svelte-1rqr1h4:hover{background:#000;color:#fff}
+main.svelte-wdqzrw.svelte-wdqzrw{border:4px dashed #000;margin:10px auto;padding:10px;max-width:800px}.svelte-wdqzrw.svelte-wdqzrw{-moz-user-select:none;-o-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}tabs.svelte-wdqzrw.svelte-wdqzrw{border-bottom:4px dashed #000;width:100%;display:block}tab.svelte-wdqzrw.svelte-wdqzrw{margin-right:10px;padding:5px 10px;margin-bottom:5px;display:inline-block}tab.svelte-wdqzrw.svelte-wdqzrw:hover,tab.selected.svelte-wdqzrw.svelte-wdqzrw:hover{background:rgb(255, 255, 255);color:#000000}tab.selected.svelte-wdqzrw.svelte-wdqzrw{background-color:black;color:white}tabs-content.svelte-wdqzrw.svelte-wdqzrw{display:block;margin-top:10px}error.svelte-wdqzrw.svelte-wdqzrw{padding:5px 10px;background-color:rgb(255, 0, 0);color:black}@font-face{font-family:"DOS";src:url("../assets/ega8.otf") format("opentype");font-weight:normal;font-style:normal;-webkit-font-kerning:none;font-kerning:none;font-synthesis:none;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;font-variant-numeric:tabular-nums}body{padding:0;margin:0;background-color:#ffa21c;color:#000;font-size:28px;font-family:"DOS", monospace;line-height:1;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.grid.svelte-wdqzrw.svelte-wdqzrw{display:inline-grid;grid-template-columns:auto auto}.grid.svelte-wdqzrw>div.svelte-wdqzrw{margin-top:10px}.value-name.svelte-wdqzrw.svelte-wdqzrw{text-align:right}task-list.svelte-wdqzrw.svelte-wdqzrw{display:inline-grid;grid-template-columns:auto auto auto auto auto;width:100%}popup-wrapper.svelte-1ufadaz{background-color:rgba(0, 0, 0, 0.863);width:100%;height:100%;display:table;table-layout:fixed;z-index:999;overflow:auto;position:fixed;top:0;left:0;right:0;bottom:0}popup-body.svelte-1ufadaz{margin:auto;display:table-cell;text-align:center;vertical-align:middle;width:100%}popup-content.svelte-1ufadaz{background-color:#ffa21c;display:inline-block;outline:none;position:relative;text-align:initial;max-width:100vw}popup-border.svelte-1ufadaz{display:block;border:4px dashed #000;margin:10px;padding:10px}popup-close.svelte-1ufadaz{background-color:#000;display:inline-block;color:#ffa21c;position:absolute;width:24px;right:0px;top:0px;text-align:center}popup-close.svelte-1ufadaz:hover{background-color:#fff;color:#000}.button-css.svelte-yar6m3{background-color:black;color:white;font-size:28px;font-family:"DOS", monospace;line-height:1;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);border:0;padding:5px 10px;display:inline-block;max-width:100%}.button-css.svelte-yar6m3:hover{background:rgb(255, 255, 255);color:#000000}.input-text-css.svelte-4h7oz2{display:inline-block;color:#000;font-size:28px;font-family:"DOS", monospace;line-height:1;box-sizing:border-box;margin:0;border:0;border-bottom:4px solid #000;padding:0 5px 0 5px;box-shadow:none;border-radius:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:#ffa21c;height:32px}.input-text-css.svelte-4h7oz2:focus-visible,.input-text-css.svelte-4h7oz2:hover{outline:0;background-color:white}@keyframes svelte-1471rey-spinner-animation{0%{content:"|"}25%{content:"/"}50%{content:"-"}75%{content:"\\"}100%{content:"|"}}spinner.svelte-1471rey::after{display:inline-block;animation:svelte-1471rey-spinner-animation 0.6s linear infinite alternate;content:"|"}.button.svelte-1rqr1h4{box-sizing:border-box;display:inline-block;font-size:28px;font-family:"DOS", monospace;line-height:1;border:0;padding:0 5px 0 5px;box-shadow:none;border-radius:0;display:inline-block;max-width:100%}.black.svelte-1rqr1h4{color:white;background-color:black;border-bottom:4px solid #000}.black.svelte-1rqr1h4:hover{background:#fff;color:#000}.normal.svelte-1rqr1h4{color:#000;background-color:#ffa21c;border-bottom:4px solid #ffa21c}.normal.svelte-1rqr1h4:hover{background:#000;color:#fff}select.svelte-1rf61qb.svelte-1rf61qb{display:inline-block;color:#000;font-size:28px;font-family:"DOS", monospace;line-height:1;box-sizing:border-box;margin:0;border:0;border-bottom:4px solid #000;padding:0 5px 0 5px;box-shadow:none;border-radius:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:#ffa21c}select.svelte-1rf61qb.svelte-1rf61qb::-ms-expand{display:none}select.svelte-1rf61qb.svelte-1rf61qb:hover{background:rgb(255, 255, 255);color:#000000}select.svelte-1rf61qb.svelte-1rf61qb:focus{box-shadow:none;outline:none;background:rgb(255, 255, 255);color:#000000}select.svelte-1rf61qb option.svelte-1rf61qb{font-weight:normal}

components/svelte-portal/src/App.svelte

@@ -36,8 +36,10 @@
   let popup_message_text;
 
   let mode_select;
-  let ssid_input;
+  let ap_ssid_input;
-  let password_input;
+  let ap_pass_input;
+  let sta_ssid_input;
+  let sta_pass_input;
 
   let current_tab = "WiFi";
   if (localStorage.getItem("current_tab") != null) {
@@ -49,11 +51,17 @@
     popup_message.show();
 
     await api_post(server + "/api/v1/wifi/set_credenitals", {
-      mode: mode_select.get_value(),
+      wifi_mode: mode_select.get_value(),
-      ssid: ssid_input.get_value(),
+      ap_ssid: ap_ssid_input.get_value(),
-      pass: password_input.get_value(),
+      ap_pass: ap_pass_input.get_value(),
-    }).then(() => {
+      sta_ssid: sta_ssid_input.get_value(),
+      sta_pass: sta_pass_input.get_value(),
+    }).then((json) => {
+      if (json.error) {
+        popup_message_text = json.error;
+      } else {
         popup_message_text = "Saved!";
+      }
     });
   }
 
@@ -127,30 +135,48 @@
             <div><Spinner /></div>
             <div class="value-name">Pass:</div>
             <div><Spinner /></div>
+            <div class="value-name">SSID:</div>
+            <div><Spinner /></div>
+            <div class="value-name">Pass:</div>
+            <div><Spinner /></div>
           {:then json}
             <div class="value-name">Mode:</div>
             <div>
               <Select
                 bind:this={mode_select}
                 items={[
-                  { text: "STA", value: "STA" },
+                  { text: "STA (connect to WiFi)", value: "STA" },
-                  { text: "AP", value: "AP" },
+                  { text: "AP (make own WiFi AP)", value: "AP" },
                 ]}
-                value={json.mode}
+                value={json.wifi_mode}
               />
             </div>
 
+            <div class="value-name">STA</div>
+            <div>(connect to WiFi)</div>
             <div class="value-name">SSID:</div>
             <div>
-              <Input value={json.ssid} bind:this={ssid_input} /><ButtonInline
+              <Input
-                value="+"
+                value={json.sta_ssid}
-                on:click={popup_select_net.show}
+                bind:this={sta_ssid_input}
-              />
+              /><ButtonInline value="+" on:click={popup_select_net.show} />
             </div>
 
             <div class="value-name">Pass:</div>
             <div>
-              <Input value={json.pass} bind:this={password_input} />
+              <Input value={json.sta_pass} bind:this={sta_pass_input} />
+            </div>
+
+            <div class="value-name">AP</div>
+            <div>(make own WiFi AP)</div>
+            <div class="value-name">SSID:</div>
+            <div>
+              <Input value={json.ap_ssid} bind:this={ap_ssid_input} />
+            </div>
+
+            <div class="value-name">Pass:</div>
+            <div>
+              <Input value={json.ap_pass} bind:this={ap_pass_input} />
             </div>
           {:catch error}
             <error>{error.message}</error>
@@ -233,7 +259,7 @@
             value="[{net.ssid} {net.channel}ch {net.rssi}dBm {net.auth}]"
             on:click={() => {
               popup_select_net.close();
-              ssid_input.set_value(net.ssid);
+              sta_ssid_input.set_value(net.ssid);
             }}
           />
         </div>