cronjob de manejo de invitados listo

frontend/src/components/UserForm.vue

@@ -10,6 +10,12 @@
         <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;">Etiquetas (separadas por coma)</div>
+        <input v-model="etiquetasText" placeholder="invitado, vip" 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>
@@ -28,7 +34,7 @@
 </template>
 
 <script setup>
-import { reactive, watch, computed } from 'vue';
+import { reactive, watch, computed, ref } from 'vue';
 
 const props = defineProps({
   modelValue: { type: Object, default: () => ({ username:'', password:'', vlan:'', disabled:false }) },
@@ -38,13 +44,16 @@ const emit = defineEmits(['update:modelValue', 'submit', 'cancel']);
 
 const state = reactive({ username:'', password:'', vlan:'', disabled:false });
 const isEdit = computed(() => props.mode === 'edit');
+const etiquetasText = ref('');
 
 watch(() => props.modelValue, (v) => {
   Object.assign(state, v || {});
+  const tags = Array.isArray(v?.etiquetas) ? v.etiquetas : [];
+  etiquetasText.value = tags.join(', ');
 }, { immediate: true, deep: true });
 
 function submit() {
-  emit('submit', { ...state });
+  const tags = etiquetasText.value.split(',').map(s => s.trim()).filter(Boolean).slice(0, 100);
+  emit('submit', { ...state, etiquetas: tags });
 }
 </script>
-