Implement frontend authentication system with login/registration

- Add comprehensive authentication module with mock service
- Create login and registration components with form validation
- Implement protected routing with yew-router
- Add responsive UI styling with gradient design
- Enable JWT token persistence via localStorage
- Support demo credentials (demo/password) and flexible auth for development

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/login.rs

@@ -0,0 +1,152 @@
+use yew::prelude::*;
+use web_sys::HtmlInputElement;
+use gloo_storage::{LocalStorage, Storage};
+
+#[derive(Properties, PartialEq)]
+pub struct LoginProps {
+    pub on_login: Callback<String>, // Callback with JWT token
+}
+
+#[function_component]
+pub fn Login(props: &LoginProps) -> Html {
+    let username = use_state(String::new);
+    let password = use_state(String::new);
+    let error_message = use_state(|| Option::<String>::None);
+    let is_loading = use_state(|| false);
+
+    let username_ref = use_node_ref();
+    let password_ref = use_node_ref();
+
+    let on_username_change = {
+        let username = username.clone();
+        Callback::from(move |e: Event| {
+            let target = e.target_unchecked_into::<HtmlInputElement>();
+            username.set(target.value());
+        })
+    };
+
+    let on_password_change = {
+        let password = password.clone();
+        Callback::from(move |e: Event| {
+            let target = e.target_unchecked_into::<HtmlInputElement>();
+            password.set(target.value());
+        })
+    };
+
+    let on_submit = {
+        let username = username.clone();
+        let password = password.clone();
+        let error_message = error_message.clone();
+        let is_loading = is_loading.clone();
+        let on_login = props.on_login.clone();
+
+        Callback::from(move |e: SubmitEvent| {
+            e.prevent_default();
+            
+            let username = (*username).clone();
+            let password = (*password).clone();
+            let error_message = error_message.clone();
+            let is_loading = is_loading.clone();
+            let on_login = on_login.clone();
+
+            // Basic client-side validation
+            if username.trim().is_empty() || password.is_empty() {
+                error_message.set(Some("Please fill in all fields".to_string()));
+                return;
+            }
+
+            is_loading.set(true);
+            error_message.set(None);
+
+            wasm_bindgen_futures::spawn_local(async move {
+                match perform_login(username, password).await {
+                    Ok(token) => {
+                        // Store token in local storage
+                        if let Err(_) = LocalStorage::set("auth_token", &token) {
+                            error_message.set(Some("Failed to store authentication token".to_string()));
+                            is_loading.set(false);
+                            return;
+                        }
+                        
+                        is_loading.set(false);
+                        on_login.emit(token);
+                    }
+                    Err(err) => {
+                        error_message.set(Some(err));
+                        is_loading.set(false);
+                    }
+                }
+            });
+        })
+    };
+
+    html! {
+        <div class="login-container">
+            <div class="login-form">
+                <h2>{"Sign In"}</h2>
+                <form onsubmit={on_submit}>
+                    <div class="form-group">
+                        <label for="username">{"Username"}</label>
+                        <input
+                            ref={username_ref}
+                            type="text"
+                            id="username"
+                            placeholder="Enter your username"
+                            value={(*username).clone()}
+                            onchange={on_username_change}
+                            disabled={*is_loading}
+                        />
+                    </div>
+
+                    <div class="form-group">
+                        <label for="password">{"Password"}</label>
+                        <input
+                            ref={password_ref}
+                            type="password"
+                            id="password"
+                            placeholder="Enter your password"
+                            value={(*password).clone()}
+                            onchange={on_password_change}
+                            disabled={*is_loading}
+                        />
+                    </div>
+
+                    {
+                        if let Some(error) = (*error_message).clone() {
+                            html! { <div class="error-message">{error}</div> }
+                        } else {
+                            html! {}
+                        }
+                    }
+
+                    <button type="submit" disabled={*is_loading} class="login-button">
+                        {
+                            if *is_loading {
+                                "Signing in..."
+                            } else {
+                                "Sign In"
+                            }
+                        }
+                    </button>
+                </form>
+
+                <div class="auth-links">
+                    <p>{"Don't have an account? "}<a href="/register">{"Sign up here"}</a></p>
+                </div>
+            </div>
+        </div>
+    }
+}
+
+/// Perform login using the auth service
+async fn perform_login(username: String, password: String) -> Result<String, String> {
+    use crate::auth::{AuthService, LoginRequest};
+    
+    let auth_service = AuthService::new();
+    let request = LoginRequest { username, password };
+    
+    match auth_service.login(request).await {
+        Ok(response) => Ok(response.token),
+        Err(err) => Err(err),
+    }
+}