From 552b2a8561440c904885c1123f2cf010d67a58f9 Mon Sep 17 00:00:00 2001
From: Romain Mallard <romaimallard@gmail.com>
Date: Thu, 5 Mar 2026 09:45:27 +0100
Subject: [PATCH] FIX exit on focus from some inputs

---
 src/components/context/HotelContext.jsx   |  4 +-
 src/components/login.jsx                  | 54 ++++++++++++-----------
 src/components/widget/chatWidget.css      | 11 ++++-
 src/components/widget/chatWidget.jsx      | 26 +++++++++--
 src/components/widget/inventoryWidget.jsx |  5 +++
 src/components/widget/roomWidget.jsx      |  5 +++
 6 files changed, 73 insertions(+), 32 deletions(-)

diff --git a/src/components/context/HotelContext.jsx b/src/components/context/HotelContext.jsx
index d942737..b6c63b9 100644
--- a/src/components/context/HotelContext.jsx
+++ b/src/components/context/HotelContext.jsx
@@ -399,8 +399,8 @@ async function addHotelUser(user_id,hotel_ids) {
     //if (!accessTokenSingle || !clientId) return;
 
     const ws = new WebSocket(
-      //`ws://localhost:7080/auth/ws/${accessTokenSingle}`
-      `wss://79.137.75.155/hotel-demo/api/auth/ws/${accessTokenSingle}`
+      `ws://localhost:7080/auth/ws/${accessTokenSingle}`
+      //`wss://79.137.75.155/hotel-demo/api/auth/ws/${accessTokenSingle}`
     );
 
     wsRef.current = ws;
diff --git a/src/components/login.jsx b/src/components/login.jsx
index 0e58e7a..4c4d53f 100644
--- a/src/components/login.jsx
+++ b/src/components/login.jsx
@@ -118,32 +118,36 @@ export default function Login({ onLogin }) {
 
   return (
     <>
-    <div className="loginWrapper">
-      <div className="loginBlock">
-        <form onSubmit={handleSubmit}>
-          <input
-            type="text"
-            placeholder="Username"
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-          />
-          <input
-            type="password"
-            placeholder="Password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-          />
-          <button type="submit">Login</button>
-          {error && <p style={{ color: "red" }}>{error}</p>}
-        </form>
-       
-    
-     <div>
-          <button onClick={LoginTest1} >login test 1</button>
-          <button onClick={LoginTest2} >login test 2</button>
+      <div className="loginWrapper">
+          <div className="loginBlock">
+            <form onSubmit={handleSubmit}>
+              <input
+                type="text"
+                placeholder="Username"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+              />
+              <input
+                type="password"
+                placeholder="Password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+              <button type="submit">Login</button>
+              {error && <p style={{ color: "red" }}>{error}</p>}
+            </form>
+        
+      
+            <div>
+              <button onClick={LoginTest1} >login test 1</button>
+              <button onClick={LoginTest2} >login test 2</button>
+            </div>
+            <div>
+              <p>Connectez-vous en utilisant
+              "test1"/"test2" comme username et password</p>
+            </div>
           </div>
-        </div>
-        </div>
+      </div>
     </>
 
 
diff --git a/src/components/widget/chatWidget.css b/src/components/widget/chatWidget.css
index 95c3920..4211cae 100644
--- a/src/components/widget/chatWidget.css
+++ b/src/components/widget/chatWidget.css
@@ -1,3 +1,4 @@
+
 .chatWidget {
   margin :5px;
   display: flex;
@@ -12,7 +13,7 @@
   display: flex;
   flex-direction: row;
   gap: 0.5rem;
-  padding: 0.75rem;
+  padding: 8px;
   overflow-y: auto;
   height: 20%;
 }
@@ -61,6 +62,7 @@ width: 70%;
 
 /* Messages */
 .msg {
+  margin: 5px;
   max-width: 70%;
   padding: 0.5rem 0.75rem;
   border-radius: 10px;
@@ -79,11 +81,18 @@ width: 70%;
 }
 
 .createConvBox {
+  margin: 5px;
   display: flex;
   justify-content: space-around;
 }
 
 .createConvBox > * {
+margin: 5px;
 
 
+}
+
+.convUtils button {
+  margin: 3px;
+
 }
\ No newline at end of file
diff --git a/src/components/widget/chatWidget.jsx b/src/components/widget/chatWidget.jsx
index 60a654c..7577da1 100644
--- a/src/components/widget/chatWidget.jsx
+++ b/src/components/widget/chatWidget.jsx
@@ -28,7 +28,15 @@ export default function ChatWidget({convlist}) {
 
     console.log("client id in chat widget");
 
-return (
+    function hideCreateConv(){
+        setShowCreateConv(false);
+    };
+
+    function hideAddUser(){
+        showAddUsers(false)
+    };
+
+    return (
         <div className="chatWidget">
             <div className="convlist">
                 {convlist.map(conv => (
@@ -45,7 +53,7 @@ return (
                         disabled={!activeConvId}
                         onClick={() => setShowAddUsers(v => !v)}
                     >
-                        Add users
+                        Update users
                     </button>
                     <button
                         hidden={showCreateConv}
@@ -64,12 +72,14 @@ return (
                     fetchConvUsers={fetchConvUsers}
                     onValidate={addUserToConv}
                     onClose={() => setShowAddUsers(false)}
+                    
                 />
             )}                
 
             {showCreateConv && (
                 <CreateConvMenu
                 onSend={createConversation}
+                exit={hideCreateConv}
                 />
             )}
 
@@ -205,7 +215,7 @@ function AddUsersMenu({ convId, usersById, fetchConvUsers, onValidate, onClose }
 
     return (
         <div className="addUsersMenu">
-            <h3>Add users</h3>
+            <h3>update users</h3>
 
             <ul>
                 {Object.entries(usersById).map(([id, name]) => (
@@ -228,24 +238,32 @@ function AddUsersMenu({ convId, usersById, fetchConvUsers, onValidate, onClose }
     );
 }
 
-function CreateConvMenu({onSend}) {
+function CreateConvMenu({onSend, exit}) {
 
     const [nameText, setNameText] = useState("");
+    
+
     const handleSend = () =>{
         if (!nameText.trim()) return;
 
         onSend(nameText);
 
         setNameText("");
+        setTimeout(() => {
+            window.location.reload();
+        }, 1000);
+        
     };
 
     return (
         <div className="createConvBox">
             <input
                 value= {nameText}
+                autoFocus
                 onChange= {element => setNameText(element.target.value)}
                 onKeyDown={e => e.key === "Enter" && handleSend() }
                 placeholder="Ma Conversation"
+                onBlur={exit}
             />
             <button onClick= {handleSend}>Send</button>
         </div>
diff --git a/src/components/widget/inventoryWidget.jsx b/src/components/widget/inventoryWidget.jsx
index 354909a..c209fb6 100644
--- a/src/components/widget/inventoryWidget.jsx
+++ b/src/components/widget/inventoryWidget.jsx
@@ -49,6 +49,10 @@ function ItemCard({id, name, amount}) {
         setEditing(false);
     }
 
+    function closeInput(){
+        setEdtiting(false);    
+    }
+
     return (
         <div className="itemcard">
             <h3>{name}</h3>
@@ -65,6 +69,7 @@ function ItemCard({id, name, amount}) {
                     autoFocus
                     onChange={e => setItemAmount(e.target.value)}
                     onKeyDown={e => e.key == "Enter" && submit(id, itemAmount)}    
+                    onBlur={closeInput}
                     />
                 </div>
             )}
diff --git a/src/components/widget/roomWidget.jsx b/src/components/widget/roomWidget.jsx
index 326e197..75585b5 100644
--- a/src/components/widget/roomWidget.jsx
+++ b/src/components/widget/roomWidget.jsx
@@ -34,6 +34,10 @@ function RoomCard({ number, status ,id}) {
     setEdtiting(false);
   }
 
+  function closeInput(){
+    setEdtiting(false);    
+  }
+
   return (
       <div className="card">
         <h3>Room {number}</h3>
@@ -51,6 +55,7 @@ function RoomCard({ number, status ,id}) {
             autoFocus
             onChange={e => SetValue(e.target.value)}
             onKeyDown={e => e.key === "Enter" && submit()}
+            onBlur={closeInput}
             />
           </div>
         )}