mejoras de UI

frontend/src/components/UserForm.vue

@@ -0,0 +1,50 @@
+<template>
+  <form @submit.prevent="submit" class="column" style="gap:10px;">
+    <div class="row">
+      <label class="toggle" style="flex:1;">
+        <div class="muted" style="font-size:12px;">Usuario</div>
+        <input v-model="state.username" :readonly="isEdit" placeholder="usuario" style="width:100%; background:transparent; border:none; outline:none; color:inherit;"/>
+      </label>
+      <label class="toggle" style="flex:1;">
+        <div class="muted" style="font-size:12px;">Contraseña</div>
+        <input v-model="state.password" placeholder="contraseña" style="width:100%; background:transparent; border:none; outline:none; color:inherit;"/>
+      </label>
+    </div>
+    <div class="row">
+      <label class="toggle" style="flex:1;">
+        <div class="muted" style="font-size:12px;">VLAN</div>
+        <input v-model="state.vlan" placeholder="VLAN" style="width:100%; background:transparent; border:none; outline:none; color:inherit;"/>
+      </label>
+      <label class="row toggle" style="gap:6px;">
+        <input type="checkbox" v-model="state.disabled"/>
+        Deshabilitado
+      </label>
+    </div>
+    <div class="modal-footer">
+      <button type="button" class="icon-btn" @click="$emit('cancel')">Cancelar</button>
+      <button type="submit" class="icon-btn">Guardar</button>
+    </div>
+  </form>
+</template>
+
+<script setup>
+import { reactive, watch, computed } from 'vue';
+
+const props = defineProps({
+  modelValue: { type: Object, default: () => ({ username:'', password:'', vlan:'', disabled:false }) },
+  mode: { type: String, default: 'create' } // 'create' | 'edit' | 'guest'
+});
+const emit = defineEmits(['update:modelValue', 'submit', 'cancel']);
+
+const state = reactive({ username:'', password:'', vlan:'', disabled:false });
+const isEdit = computed(() => props.mode === 'edit');
+
+watch(() => props.modelValue, (v) => {
+  Object.assign(state, v || {});
+}, { immediate: true, deep: true });
+
+function submit() {
+  emit('submit', { ...state });
+}
+</script>
+