mejoras de UI

frontend/src/components/UserCard.js

@@ -5,16 +5,18 @@ const html = htm.bind(h);
 export default defineComponent({
   name: 'UserCard',
   props: { item: { type: Object, required: true }, mode: { type: String, default: 'user' } },
-  emits: ['toggleDisable', 'remove'],
+  emits: ['toggleDisable', 'remove', 'edit'],
   setup(props, { emit }) {
     function toggle() { emit('toggleDisable', props.item); }
     function remove() { emit('remove', props.item); }
+    function edit() { emit('edit', props.item); }
     return () => html`<div class="card">
       <div class="row">
         <b>${props.mode === 'user' ? props.item.username : (props.item.device || props.item.username)}</b>
         <span class="chip">VLAN ${props.item.vlan}</span>
         ${props.item.disabled ? html`<span class="chip" style="color:#b33">deshabilitado</span>` : html`<span class="chip">activo</span>`}
         <span class="spacer"></span>
+        <button class="icon-btn" onClick=${edit}>Editar</button>
         <button class="icon-btn" onClick=${toggle}>${props.item.disabled ? 'Habilitar' : 'Deshabilitar'}</button>
         <button class="icon-btn" onClick=${remove}>Eliminar</button>
       </div>
@@ -22,4 +24,3 @@ export default defineComponent({
     </div>`;
   }
 });
-

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>
+