【Python】PySimpleGUIでパスワードを表示・非表示するボタンを実装してみる

# ログイン画面のレイアウト 3行目を以下のように変更
# -----------------------------------------------------
# before そのまま表示している
[sg.Text("パスワード：", size=(10, 1)), sg.Input("", size=(25, 1), key="-password-")],

# after 入力された部分を非表示化する
[sg.Text("パスワード：", size=(10, 1)), sg.Input("", size=(25, 1), password_char="*", key="-password-")],

# before
layout = [
    [sg.Text("ログイン画面")],
    ...
    [sg.Text("パスワード：", size=(10, 1)), sg.Input("", size=(25, 1), key="-password-")],
    [sg.Button("ログイン", size=(10, 1), enable_events=True, key="-login-")]
]

# after
layout = [
    [sg.Text("ログイン画面")],
    ...
    [sg.Text("パスワード：", size=(10, 1)), sg.Input("", size=(25, 1), password_char="*", key="-password-")],
    # 以下の1行を新たに追加
    [sg.Checkbox("パスワードを表示します", enable_events=True, key="-toggle_password-")], 
    [sg.Button("ログイン", size=(10, 1), enable_events=True, key="-login-")]
]

elif event == "-login-":
    ...

elif event == "-toggle_password-":
    # チェックボタンがONだったらパスワードを表示する
    if values["-toggle_password-"]:
        window["-password-"].update(password_char="")

    # チェックボタンがOFFだったらパスワードを非表示にする
    else:
        window["-password-"].update(password_char="*")

elif event == "-login-":
    ...

elif event == "-toggle_password-":
    # チェックボタンがONだったらパスワードを表示する
    if values["-toggle_password-"]:
        window["-password-"].TKEntry.config(show="")
    # チェックボタンがOFFだったらパスワードを非表示にする
    else:
        window["-password-"].TKEntry.config(show="*")

# -*- coding: utf-8 -*-
import PySimpleGUI as sg # PySimpleGUIをインポート
from typing import Optional  # 型推定に用いる


def check_data(name: str, password: str) -> bool:
    """
    ログイン名とパスワードが、指定された値と合致しているか判定する関数

    Args:
        name (str): 入力された名前
        password (str): 入力されたパスワード

    Returns:
        bool: 判定結果
    """
    # 正しいと判定するデータ
    correct_data = ("TERU", "TERU_PASSWORD")

    if (name, password) == correct_data:
        return True
    return False


def display_main() -> Optional[bool]:
    """
    メイン画面を表示する関数

    Returns:
        Optional[bool]: ログアウト判定 True or None
                        Noneならログイン画面も終了させる。
    """
    # メイン画面のレイアウト
    main_layout = [
        [sg.Text("メイン画面")],
        [sg.Text("ようこそ メイン画面へ")],
        [sg.Button("ログアウト", size=(10, 1), enable_events=True, key="-logout-")]
    ]
    # windowを宣言
    main_window = sg.Window("メイン画面", main_layout, size=(400, 400))

    # 返り値
    ret = None

    while True:
        # イベントとGUI要素の値を取得する
        event, values = main_window.read()
        if event == sg.WIN_CLOSED or event == 'Exit':
            break

        # ログインボタンが押された時の処理
        elif event == "-logout-":
            # データが一致したら、メイン画面を表示する処理
            logout_ret = sg.PopupOKCancel("ログアウトしますか？", title="ログアウト確認", keep_on_top=True)

            # もしもOKなら 、Trueを返し、メイン画面を終了する。
            if logout_ret == "OK":
                ret = True
                break
            else:
                continue

    # メイン画面を終了する
    main_window.close()

    # 最後に返り値を渡す
    return ret

# テーマカラーを設定
sg.theme("SandyBeach")

# ログイン画面のレイアウト
layout = [
    [sg.Text("ログイン画面")],
    [sg.Text("名前：", size=(10, 1)), sg.Input("", size=(25, 1), key="-name-")],
    [sg.Text("パスワード：", size=(10, 1)), sg.Input("", size=(25, 1), password_char="*", key="-password-")],
    [sg.Checkbox("パスワードを表示します", enable_events=True, key="-toggle_password-")],
    [sg.Button("ログイン", size=(10, 1), enable_events=True, key="-login-")]
]
# windowを宣言
window = sg.Window("ログイン画面", layout, size=(400, 400))


while True:
    # イベントとGUI要素の値を取得する
    event, values = window.read()
    # ×ボタンが押された時はループを抜け出す。
    if event == sg.WIN_CLOSED or event == 'Exit':
        break

    # ログインボタンが押された場合の処理
    elif event == "-login-":
        # データが一致したら、メイン画面を表示する処理
        if check_data(name=values["-name-"], password=values["-password-"]):
            window.Hide() # ログイン画面を隠す
            # メイン画面を表示する
            main_return = display_main()
            # もしNoneが返ってきたらログイン画面も終了させる
            if main_return is None:
                break
            window.UnHide() # ログイン画面を再表示する

    # チェックボタンが押された時の処理
    elif event == "-toggle_password-":
        # チェックボタンがONだったらパスワードを表示する
        if values["-toggle_password-"]:
            window["-password-"].TKEntry.config(show="")  # ver 4.35.0以前            
            # window["-password-"].update(password_char="") # ver 4.35.0以降

        # チェックボタンがOFFだったらパスワードを非表示にする
        else:
            window["-password-"].TKEntry.config(show="*")  # ver 4.35.0以前            
            # window["-password-"].update(password_char="*") # ver 4.35.0以降

# windowを終了させる
window.close()