|
10 | 10 | translations = update; |
11 | 11 | }); |
12 | 12 |
|
| 13 | + let form; |
| 14 | + let ssid = ''; |
| 15 | + let psk = ''; |
13 | 16 | let manual = false; |
14 | 17 | let networks = {}; |
15 | 18 | networksStore.subscribe(update => { |
16 | 19 | networks = update; |
| 20 | + manual = update?.c == 0; |
| 21 | + ssid = update?.n[0]?.s ?? ''; |
17 | 22 | }); |
18 | 23 |
|
19 | 24 | export let sysinfo = {} |
20 | 25 |
|
21 | 26 | let staticIp = false; |
22 | 27 | let connectionMode = 1; |
23 | 28 | let loadingOrSaving = false; |
| 29 | + let wifiTestInProgress = false; |
| 30 | + let wifiTestOk = false; |
| 31 | + let wifiTestError = 0; |
24 | 32 |
|
25 | 33 | function updateSysinfo(url) { |
26 | 34 | sysinfoStore.update(s => { |
|
29 | 37 | }); |
30 | 38 | } |
31 | 39 |
|
32 | | - async function handleSubmit(e) { |
| 40 | + async function handleSubmit() { |
33 | 41 | loadingOrSaving = true; |
34 | | - const formData = new FormData(e.target); |
| 42 | + const formData = new FormData(form); |
35 | 43 | const data = new URLSearchParams(); |
36 | 44 | for (let field of formData) { |
37 | 45 | const [key, value] = field; |
|
59 | 67 | return s; |
60 | 68 | }); |
61 | 69 | } |
| 70 | +
|
| 71 | + async function wifiTest() { |
| 72 | + let response; |
| 73 | + if(wifiTestInProgress) { |
| 74 | + response = await fetch('wifitest.json'); |
| 75 | + } else { |
| 76 | + wifiTestInProgress = true; |
| 77 | + wifiTestOk = false; |
| 78 | + const data = new URLSearchParams(); |
| 79 | + data.append('ssid', ssid); |
| 80 | + data.append('psk', psk); |
| 81 | + response = await fetch('wifitest.json', { |
| 82 | + method: 'POST', |
| 83 | + body: data |
| 84 | + }); |
| 85 | + } |
| 86 | + const res = await response.json(); |
| 87 | + if(res?.time == 0) { |
| 88 | + wifiTestInProgress = false; |
| 89 | + wifiTestOk = res.status == 3; |
| 90 | + wifiTestError = res.status; |
| 91 | + if(wifiTestOk) { |
| 92 | + sysinfoStore.update(s => { |
| 93 | + s.net.ip = res.ip; |
| 94 | + return s; |
| 95 | + }); |
| 96 | + setTimeout(handleSubmit, 1000); |
| 97 | + } |
| 98 | + } else if(wifiTestInProgress) { |
| 99 | + if(res.time > 30000) { |
| 100 | + wifiTestError = 4; |
| 101 | + wifiTestInProgress = false; |
| 102 | + } else { |
| 103 | + setTimeout(wifiTest, 2000); |
| 104 | + } |
| 105 | + } |
| 106 | + } |
| 107 | +
|
| 108 | + async function resetWifiTest() { |
| 109 | + wifiTestInProgress = false; |
| 110 | + wifiTestOk = false; |
| 111 | + wifiTestError = 0; |
| 112 | + } |
| 113 | +
|
| 114 | + async function toggleShowPass() { |
| 115 | + const input = form.querySelector('input[name="sp"]'); |
| 116 | + if(input.type === 'password') { |
| 117 | + input.type = 'text'; |
| 118 | + this.textContent = '🙈'; |
| 119 | + } else { |
| 120 | + input.type = 'password'; |
| 121 | + this.textContent = '👁️'; |
| 122 | + } |
| 123 | + } |
62 | 124 | </script> |
63 | 125 |
|
64 | 126 |
|
65 | 127 | <div class="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2"> |
66 | 128 | <div class="cnt"> |
67 | | - <form on:submit|preventDefault={handleSubmit}> |
| 129 | + <form bind:this={form} on:submit|preventDefault={handleSubmit}> |
68 | 130 | <input type="hidden" name="s" value="true"/> |
69 | 131 | <strong class="text-sm">{translations.setup?.title ?? "Setup"}</strong> |
70 | 132 | <div class="my-3"> |
71 | 133 | {translations.conf?.connection?.title ?? "Connection"}<br/> |
72 | | - <select name="sc" class="in-s" bind:value={connectionMode}> |
| 134 | + <select name="sc" class="in-s" bind:value={connectionMode} on:input={resetWifiTest}> |
73 | 135 | <option value={1}>{translations.conf?.connection?.wifi ?? "Connect to WiFi"}</option> |
74 | 136 | <option value={2}>{translations.conf?.connection?.ap ?? "Standalone access point"}</option> |
75 | 137 | {#if sysinfo.if && sysinfo.if.eth} |
|
83 | 145 | <label class="float-right mr-3"><input type="checkbox" value="true" bind:checked={manual} class="rounded mb-1"/> manual</label> |
84 | 146 | <br/> |
85 | 147 | {#if manual} |
86 | | - <input name="ss" type="text" pattern={asciiPatternExt} class="in-s" required={connectionMode == 1 || connectionMode == 2}/> |
| 148 | + <input name="ss" bind:value={ssid} on:input={resetWifiTest} type="text" pattern={asciiPatternExt} class="in-s" required={connectionMode == 1 || connectionMode == 2}/> |
87 | 149 | {:else} |
88 | | - <select name="ss" class="in-s" required={connectionMode == 1 || connectionMode == 2}> |
| 150 | + <select name="ss" bind:value={ssid} on:change={resetWifiTest} class="in-s" required={connectionMode == 1 || connectionMode == 2}> |
89 | 151 | {#if networks?.c == -1} |
90 | 152 | <option value="" selected disabled>Scanning...</option> |
91 | 153 | {/if} |
|
99 | 161 | </div> |
100 | 162 | <div class="my-3"> |
101 | 163 | {translations.conf?.connection?.psk ?? "Password"}<br/> |
102 | | - <input name="sp" type="password" pattern={asciiPatternExt} class="in-s" autocomplete="off" required={connectionMode == 2}/> |
| 164 | + <div class="flex"> |
| 165 | + <input name="sp" bind:value={psk} on:input={resetWifiTest} type="password" pattern={asciiPatternExt} class="in-f w-full" autocomplete="off" required={connectionMode == 2}/> |
| 166 | + <span on:click={toggleShowPass} class="in-post link">👁️</span> |
| 167 | + </div> |
103 | 168 | </div> |
104 | 169 | {/if} |
105 | 170 | <div> |
|
131 | 196 | </div> |
132 | 197 | {/if} |
133 | 198 | <div class="my-3"> |
134 | | - <button type="submit" class="btn-pri">{translations.btn?.save ?? "Save"}</button> |
| 199 | + {#if connectionMode != 1} |
| 200 | + <button type="submit" class="btn-pri">{translations.btn?.save ?? "Save"}</button> |
| 201 | + {:else if wifiTestOk} |
| 202 | + <div class="bd-green">{translations.setup?.testok ?? "Connection successful (" + sysinfo.net.ip + ")"}</div> |
| 203 | + <button type="submit" class="btn-pri">{translations.btn?.save ?? "Save"}</button> |
| 204 | + {:else if wifiTestInProgress} |
| 205 | + <div class="bd-yellow">{translations.setup?.testconn ?? "Testing connection"}</div> |
| 206 | + {:else} |
| 207 | + {#if wifiTestError} |
| 208 | + <div class="bd-red">{ (translations.setup?.testfail ?? "Connection failed") + ': ' + (translations.errors?.wifi?.[wifiTestError] ?? wifiTestError) }</div> |
| 209 | + <button type="submit" class="btn-pri">{translations.btn?.forcesave ?? "Force save"}</button> |
| 210 | + {:else} |
| 211 | + <button type="button" class="btn-pri" on:click={wifiTest}>{translations.btn?.save ?? "Save"}</button> |
| 212 | + {/if} |
| 213 | + {/if} |
135 | 214 | </div> |
136 | 215 | </form> |
137 | 216 | </div> |
|
0 commit comments