fix: polish form validation and feedback across views

- Server.vue: Add loading/disabled state to WiFi connect button,
  success toast on WiFi connection
- Credentials.vue: Disable verify button when input empty, add
  disabled styles

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-11 10:49:26 +00:00
parent 1ca83f97ec
commit 112b15b4ea
3 changed files with 10 additions and 4 deletions

View File

@@ -385,8 +385,8 @@
/>
<p v-if="wifiError" class="text-sm text-red-400 mb-3">{{ wifiError }}</p>
<div class="flex gap-2">
<button @click="wifiConnecting = false; wifiPassword = ''; wifiError = ''" class="flex-1 px-3 py-2 glass-button rounded-lg text-sm">Cancel</button>
<button @click="connectToWifi" class="flex-1 px-3 py-2 glass-button rounded-lg text-sm font-medium" :disabled="!wifiPassword">Connect</button>
<button @click="wifiConnecting = false; wifiPassword = ''; wifiError = ''" :disabled="wifiSubmitting" class="flex-1 px-3 py-2 glass-button rounded-lg text-sm">Cancel</button>
<button @click="connectToWifi" class="flex-1 px-3 py-2 glass-button rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed" :disabled="!wifiPassword || wifiSubmitting">{{ wifiSubmitting ? 'Connecting...' : 'Connect' }}</button>
</div>
</div>
</div>
@@ -583,6 +583,7 @@ const showWifiModal = ref(false)
const wifiScanning = ref(false)
const wifiNetworks = ref<WifiNetwork[]>([])
const wifiConnecting = ref(false)
const wifiSubmitting = ref(false)
const wifiSelectedSsid = ref('')
const wifiPassword = ref('')
const wifiError = ref('')
@@ -676,15 +677,20 @@ function selectWifi(ssid: string) {
async function connectToWifi() {
if (!wifiPassword.value || !wifiSelectedSsid.value) return
wifiError.value = ''
wifiSubmitting.value = true
try {
await rpcClient.call({ method: 'network.configure-wifi', params: { ssid: wifiSelectedSsid.value, password: wifiPassword.value } })
showWifiModal.value = false
wifiConnecting.value = false
wifiPassword.value = ''
logsToast.value = 'WiFi connected successfully'
setTimeout(() => { logsToast.value = '' }, 4000)
loadInterfaces()
} catch (e) {
wifiError.value = e instanceof Error ? e.message : 'WiFi connection failed. Check password and try again.'
if (import.meta.env.DEV) console.warn('WiFi connection failed', e)
} finally {
wifiSubmitting.value = false
}
}