import gradio as gr
from datetime import datetime

logs = []


def login(name):

    if not name:
        name = "Unknown"

    now = datetime.now().strftime("%H:%M:%S")

    message = f"[{now}] {name} has logged in."

    print(message)

    logs.append(message)

    return "\n".join(logs)


def refresh():
    if logs:
        return "\n".join(logs)
    return "=== Waiting for users... ==="


css = """
body{
    background:#e8ecf2;
}

.gradio-container{
    background:#e8ecf2 !important;
}

button{
    border-radius:15px !important;
}

textarea{
    background:#111111 !important;
    color:#00ff66 !important;
    font-family:Consolas, monospace !important;
    font-size:15px !important;
}
"""

with gr.Blocks() as demo:

    gr.Markdown("# 🖥️ User Login Monitor")

    with gr.Row():

        username = gr.Textbox(
            label="User",
            placeholder="Jason"
        )

        login_btn = gr.Button("Login")

    terminal = gr.Textbox(
        label="Terminal",
        value="=== SERVER STARTED ===",
        lines=18,
        interactive=False
    )

    refresh_btn = gr.Button("Refresh Logs")

    login_btn.click(
        fn=login,
        inputs=username,
        outputs=terminal,
        api_name="login"
    )

    refresh_btn.click(
        fn=refresh,
        outputs=terminal
    )

demo.launch(css=css)