app.py

import gradio as gr
import os

# Function that controls the visibility of the panels
def check_words(user_text, input_text):
    # If the entered text is "user" and "casa", show Panel 2 and hide Panel 1
    if user_text == os.getenv("USERNAME") and input_text == os.getenv("PASSWORD"):
        return gr.update(visible=True), gr.update(visible=False), gr.update(value=""), gr.update(value="")  # Show Panel 2, hide Panel 1
    else:
        return gr.update(visible=False), gr.update(visible=True), user_text, input_text  # Keep Panel 2 hidden, show Panel 1

# Function to hide Panel 2
def hide_panel():
    return gr.update(visible=False)  # Hide Panel 2

# Function to show Panel 1
def show_panel_1():
    return gr.update(visible=True)  # Show Panel 1

# Wrapper function to hide Panel 2 and show Panel 1 when btn_2 is clicked
def hide_and_show_panel():
    return hide_panel(), show_panel_1()

# Create the Gradio interface
with gr.Blocks() as demo:

    # Create the first panel (visible from the start)
    with gr.Column(visible=True) as panel_1:
        user_text = gr.Textbox(label="User name:")
        input_text = gr.Textbox(label="Password:", type="password")
    
        # First button, visible from the start
        btn_1 = gr.Button("Login")

    # Create the second panel that is initially hidden
    with gr.Column(visible=False) as panel_2:
        # This panel will be shown if the condition is met
        gr.Textbox(value="Login ok", label="Status Login:")
        # Add a second button inside Panel 2 to hide the panel and show Panel 1 again
        btn_2 = gr.Button("Logout", visible=True)
        btn_2.click(hide_and_show_panel, outputs=[panel_2, panel_1])  # Hide Panel 2 and show Panel 1

    # Configure the buttons and the panel visibility
    btn_1.click(check_words, inputs=[user_text, input_text], outputs=[panel_2, panel_1, user_text, input_text])  # Hide Panel 1 and show Panel 2

# Launch the Gradio interface
demo.launch()