block empty input and disable forms when offline

client/src/components/auth.rs

@@ -1,14 +1,16 @@
 use crate::components::websocket::WebSocketContext;
 use html::Input;
 use leptos::*;
+use leptos_use::core::ConnectionReadyState;
 use lib::*;
 use serde_json::to_string;
 
 #[component]
 pub fn Auth() -> impl IntoView {
     let websocket = expect_context::<WebSocketContext>();
-    let user_context = expect_context::<ReadSignal<Option<UserUpdate>>>();
     let (username, set_username) = create_signal("".to_string());
+    let user_context = expect_context::<ReadSignal<Option<UserUpdate>>>();
+    let connected = move || websocket.ready_state.get() == ConnectionReadyState::Open;
 
     create_effect(move |_| {
         user_context.with(|new_user| {
@@ -20,17 +22,28 @@ pub fn Auth() -> impl IntoView {
 
     let username_input_ref = create_node_ref::<Input>();
     let send_login = move |_| {
-        websocket.send(
-            &to_string(&UserLogIn {
-                username: username_input_ref.get().unwrap().value(),
-            })
-            .unwrap(),
-        );
-        set_username.set(username_input_ref.get().unwrap().value());
-        username_input_ref.get().unwrap().set_value("");
-        logging::log!("sent");
+        if let Some(input) = username_input_ref.get() {
+            if input.value() != String::from("") {
+                logging::log!("send");
+                websocket.send(
+                    &to_string(&UserLogIn {
+                        username: input.value(),
+                    })
+                    .unwrap(),
+                );
+                set_username.set(input.value());
+                input.set_value("");
+            }
+        }
     };
 
+    // Clear user name on disconnect
+    create_effect(move |_| {
+        if !connected() {
+            set_username(String::from(""));
+        }
+    });
+
     view! {
         <div class="p-1">
             <h2 class="text-2xl">Sign in:</h2>
@@ -40,13 +53,14 @@ pub fn Auth() -> impl IntoView {
                     class="w-96 font-mono rounded-sm bg-slate-900 text-slate-200"
                     placeholder=move || username.get()
                     node_ref=username_input_ref
+                    disabled=move || !connected()
                 />
-                handle empty
                 <br/>
                 <input
                     class="py-2 px-4 pl-4 font-bold text-white rounded border-b-4 bg-slate-600 border-slate-800 hover:bg-slate-700 hover:border-slate-500"
                     type="submit"
                     value="Send"
+                    disabled=move || !connected()
                 />
             </form>
         </div>

client/src/components/browser.rs

@@ -23,17 +23,21 @@ pub fn Browser() -> impl IntoView {
 
     // Game stuff
     let new_game = move |_| {
-        (websocket.send)(
-            &to_string(&NewGameRequest {
-                name: new_game_name_ref.get().unwrap().value(),
-                packs: selected_packs()
-                    .into_iter()
-                    .map(|n| n.clone()) // hax
-                    .collect::<Vec<_>>(),
-            })
-            .unwrap(),
-        );
-        new_game_name_ref.get().unwrap().set_value("");
+        if let Some(input) = new_game_name_ref.get() {
+            if input.value() != String::from("") {
+                (websocket.send)(
+                    &to_string(&NewGameRequest {
+                        name: input.value(),
+                        packs: selected_packs()
+                            .into_iter()
+                            .map(|n| n.clone()) // hax
+                            .collect::<Vec<_>>(),
+                    })
+                    .unwrap(),
+                );
+                input.set_value("");
+            }
+        }
     };
 
     create_effect(move |_| {
@@ -72,7 +76,6 @@ pub fn Browser() -> impl IntoView {
                     disabled=move || !connected()
                     node_ref=new_game_name_ref
                 />
-                handle empty
                 <h2 class="text-2xl">Packs</h2>
                 <div class="p-2">
                     <button type="button" class="bg-slate-600">

client/src/components/chat.rs

@@ -10,6 +10,7 @@ pub fn Chat() -> impl IntoView {
     let websocket = expect_context::<WebSocketContext>();
     let chat_context = expect_context::<ReadSignal<Option<ChatMessage>>>();
     let chat_update_context = expect_context::<ReadSignal<Option<ChatUpdate>>>();
+    let connected = move || websocket.ready_state.get() == ConnectionReadyState::Open;
 
     // Chat stuff
     let (chat_history, set_chat_history) = create_signal::<Vec<String>>(vec![]);
@@ -73,14 +74,17 @@ pub fn Chat() -> impl IntoView {
 
     // Handle sending messages
     let send_message = move |_| {
-        websocket.send(
-            &to_string(&ChatMessage {
-                text: chat_input_ref.get().unwrap().value(),
-            })
-            .unwrap(),
-        );
-        chat_input_ref.get().unwrap().set_value("");
-        logging::log!("Send Message");
+        if let Some(input) = chat_input_ref.get() {
+            if input.value() != String::from("") {
+                websocket.send(
+                    &to_string(&ChatMessage {
+                        text: input.value(),
+                    })
+                    .unwrap(),
+                );
+                input.set_value("");
+            }
+        }
     };
 
     // Keep chat scrolled to the bottom
@@ -123,8 +127,8 @@ pub fn Chat() -> impl IntoView {
                         class="py-2 px-4 pl-4 font-bold text-white rounded border-b-4 bg-slate-600 border-slate-800 hover:bg-slate-700 hover:border-slate-500"
                         type="submit"
                         value="Send"
+                        disabled=move || !connected()
                     />
-                    handle empty
                 </form>
             </span>
             <br/>

client/src/components/debug.rs

@@ -43,7 +43,7 @@ pub fn Debug() -> impl IntoView {
             <p class="p-1">"Users Online: " {online_users}</p>
             <p class="p-1">"Active Games: " {active_games}</p>
             <div class="p-1">
-                <button on:click=open_connection disabled=connected>
+                <button on:click=open_connection disabled=move || connected()>
                     "Connect"
                 </button>
                 <button on:click=close_connection disabled=move || !connected()>