app.py

import gradio as gr
from keylock_component import KeylockDecoderComponent, AppServerLogic

# --- App Definition ---
shared_server_logic = AppServerLogic()

with gr.Blocks(theme=gr.themes.Soft(primary_hue="sky")) as demo:
    gr.Markdown("# 🔑 KeyLock Application Login")

    with gr.Row():
        with gr.Column(scale=2):
            gr.Markdown("### 1. Login with Credentials")
            gr.Markdown("Enter your credentials manually, or use a KeyLock image to auto-fill them.")
            username_input = gr.Textbox(label="Username", interactive=True)
            password_input = gr.Textbox(label="Password", type="password", interactive=True)
            login_button = gr.Button("Login", variant="primary")
            login_status = gr.Markdown()
        
        with gr.Column(scale=3):
            gr.Markdown("### 2. Use a KeyLock Image to Auto-Fill")
            keylock_decoder = KeylockDecoderComponent(
                server_logic=shared_server_logic
            )

    # --- App-level Event Handlers ---
    
    def handle_login(username, password):
        """The final verification step after fields are filled."""
        user_data = shared_server_logic.mock_user_db.get(username)
        if user_data and user_data["password"] == password:
            gr.Info(f"Login Successful! Welcome, {username}.")
            return f"<p style='color:green;font-weight:bold'>✅ Login successful for {username}.</p>"
        else:
            gr.Error("Login Failed: Invalid username or password.")
            return f"<p style='color:red;font-weight:bold'>❌ Login failed.</p>"
            
    def autofill_from_key(decoder_result):
        """
        This listens to the component and updates the login form.
        """
        if decoder_result and decoder_result.get("status") == "Success":
            payload = decoder_result.get("payload", {})
            user = payload.get("USER", "")
            user_data = shared_server_logic.mock_user_db.get(user)
            password = user_data.get("password", "") if user_data else ""
            return user, password
        return gr.update(), gr.update()

    # --- Wire the event handlers to the UI components ---
    keylock_decoder.change(
        fn=autofill_from_key,
        inputs=[keylock_decoder],
        outputs=[username_input, password_input]
    )
    
    login_button.click(
        fn=handle_login,
        inputs=[username_input, password_input],
        outputs=[login_status]
    )

if __name__ == "__main__":
    demo.launch()