Implement login functionality in ChatInput and chat store. Update input handling to support username and password prompts, enhance message sending logic, and ensure proper command handling during login. Adjust broadcast logic to manage login states and provide appropriate feedback to users.

client/src/components/ChatInput.vue

@@ -2,7 +2,7 @@
   <div class="chat-input-container">
     <input
       v-model="message"
-      type="text"
+      :type="inputType"
       :placeholder="inputPlaceholder"
       @keyup.enter="sendMessage"
     />
@@ -47,11 +47,22 @@ const chatStore = useChatStore();
 const message = ref('');
 const showSmileys = ref(false);
 const hasConversation = computed(() => !!chatStore.currentConversation);
-const inputPlaceholder = computed(() =>
-  hasConversation.value
+const isAwaitingUsername = computed(() => chatStore.awaitingLoginUsername);
+const isAwaitingPassword = computed(() => chatStore.awaitingLoginPassword);
+
+const inputPlaceholder = computed(() => {
+  if (isAwaitingUsername.value) {
+    return 'Admin-Username eingeben';
+  }
+  if (isAwaitingPassword.value) {
+    return 'Admin-Passwort eingeben';
+  }
+  return hasConversation.value
     ? 'Nachricht senden oder /Befehl eingeben'
-    : 'Nur /Befehle eingeben (z.B. /login, /stat help)'
-);
+    : 'Nur /Befehle eingeben (z.B. /login, /stat help)';
+});
+
+const inputType = computed(() => (isAwaitingPassword.value ? 'password' : 'text'));
 
 // Smiley-Definitionen (wie im Original)
 const smileys = {
@@ -81,7 +92,10 @@ function sendMessage() {
   const trimmed = message.value.trim();
   if (!trimmed) return;
   const isCommand = trimmed.startsWith('/');
-  if (!isCommand && !hasConversation.value) {
+  const canSendPlain =
+    hasConversation.value || isAwaitingUsername.value || isAwaitingPassword.value;
+
+  if (!isCommand && !canSendPlain) {
     chatStore.errorMessage = 'Ohne aktive Konversation sind nur /Befehle erlaubt.';
     setTimeout(() => {
       if (chatStore.errorMessage === 'Ohne aktive Konversation sind nur /Befehle erlaubt.') {
@@ -90,8 +104,9 @@ function sendMessage() {
     }, 4000);
     return;
   }
-  
-  chatStore.sendMessage(chatStore.currentConversation, trimmed);
+
+  const suppressLocal = isCommand || isAwaitingUsername.value || isAwaitingPassword.value;
+  chatStore.sendMessage(chatStore.currentConversation, trimmed, { suppressLocal });
   message.value = '';
 }
 

client/src/stores/chat.js

@@ -22,6 +22,8 @@ export const useChatStore = defineStore('chat', () => {
   const unreadChatsCount = ref(0);
   const errorMessage = ref(null);
   const remainingSecondsToTimeout = ref(1800);
+  const awaitingLoginUsername = ref(false);
+  const awaitingLoginPassword = ref(false);
   const searchData = ref({
     nameIncludes: '',
     minAge: null,
@@ -293,7 +295,20 @@ export const useChatStore = defineStore('chat', () => {
         break;
       case 'commandResult': {
         const lines = Array.isArray(data.lines) ? data.lines : [];
-        // Command output is global and must not pollute per-conversation history.
+        const kind = data.kind || 'info';
+
+        if (kind === 'loginPromptUsername') {
+          awaitingLoginUsername.value = true;
+          awaitingLoginPassword.value = false;
+        } else if (kind === 'loginPromptPassword') {
+          awaitingLoginUsername.value = false;
+          awaitingLoginPassword.value = true;
+        } else if (kind === 'loginSuccess' || kind === 'loginError' || kind === 'loginAbort' || kind === 'loginLogout') {
+          awaitingLoginUsername.value = false;
+          awaitingLoginPassword.value = false;
+        }
+
+        // Command-Ausgaben immer global anzeigen, nicht im Chatverlauf.
         errorMessage.value = lines.join(' | ');
         setTimeout(() => {
           errorMessage.value = null;
@@ -360,7 +375,7 @@ export const useChatStore = defineStore('chat', () => {
     });
   }
 
-  function sendMessage(toUserName, message) {
+  function sendMessage(toUserName, message, options = {}) {
     if (!socket.value || !socket.value.connected) {
       console.error('Socket.IO nicht verbunden');
       return;
@@ -375,8 +390,10 @@ export const useChatStore = defineStore('chat', () => {
       messageId
     });
     
-    // Lokal hinzufügen (außer bei Commands, die serverseitig beantwortet werden)
-    if (!isCommand) {
+    const suppressLocal = !!options.suppressLocal || isCommand || awaitingLoginUsername.value || awaitingLoginPassword.value;
+
+    // Lokal hinzufügen (außer bei Commands oder sensiblen Eingaben wie Login)
+    if (!isCommand && !suppressLocal) {
       messages.value.push({
         from: userName.value,
         message: trimmed,
@@ -673,6 +690,8 @@ export const useChatStore = defineStore('chat', () => {
         remainingSecondsToTimeout,
         errorMessage,
         searchData,
+        awaitingLoginUsername,
+        awaitingLoginPassword,
     // Computed
     currentConversationWith,
     // Actions