Create a Modern login UI using CustomTkinter module in Python

In this article, we will see how we can create a simple modern login UI using the customtkinter module in Python.

customtkinter is a module that is purely built upon the Tkinter module, which helps the developers to create modern UI which was not possible with the traditional Tkinter module. It supports various new, modern, and fully customizable widgets to put in our UI. Tkinter and customtkinter can both be used together to build UI.

Required Modules:

In this article, we need a customtkinter and Tkinter module to build the login page. We can install these modules by executing the below commands in the terminal.

pip install customtkinter
pip install tk

Creating a simple blank UI

To create a simple page firstly we will import customtkinter module and then make the appearance of that page dark by using the set_appearance_mode() function and setting the blue theme using the set_default_color_theme() function. After that, we initialize the app and sets its size and title.

Python3

# Importing required module
import customtkinter as ctk

# Selecting GUI theme - dark,
# light , system (for system default)
ctk.set_appearance_mode("dark")

# Selecting color theme-blue, green, dark-blue
ctk.set_default_color_theme("blue")

app = ctk.CTk()
app.geometry("400x400")
app.title("Modern Login UI using Customtkinter")

app.mainloop()

Output: On the title bar the given title is visible i.e Modern Login UI using Customtkinter. As dark mode has been used that’s why it is showing like this. The theme is not yet reflected here because there is nothing added till now. It will be reflected later when we will add widgets.

Creating the login function:

Here we are going to write the login function. After providing the correct username and password it will display either a welcome message or an error message. In this, we have not used any database so we are just using a pre-defined username and password.

Python3

# defining the login function
def login():
    # pre-defined username
    username = "Geeks"
    # pre-defined password
    password = "12345"
    new_window = ctk.CTkToplevel(app)

    new_window.title("New Window")

    new_window.geometry("350x150")


"""If user provides the above username and password
   then a success window will be shown
   and a new window will open with a simple message"""
    if user_entry.get() == username and user_pass.get() == password:
        tkmb.showinfo(title="Login Successful",
          message="You have logged in Successfully")
        ctk.CTkLabel(new_window,
                     text="GeeksforGeeks is best \
                     for learning ANYTHING !!").pack()

"""If the user provides the correct username but
   the password is wrong then an warning window
   will be shown"""
    elif user_entry.get() == username and user_pass.get() != password:
        tkmb.showwarning(title='Wrong password',
             message='Please check your password')

"""If the user provides the wrong username but
   the password is correct then an warning window
   will be shown"""
    elif user_entry.get() != username and user_pass.get() == password:
        tkmb.showwarning(title='Wrong username',
             message='Please check your username')

"""If the user provides wrong username and password
   both then an error window will be shown"""
    else:
        tkmb.showerror(title="Login Failed",
           message="Invalid Username and password")

Here firstly we are creating a pre-defined username and password which can be used to log in only. In the new_window variable, we are creating another window by using the CTkToplevel() method which is similar to the Toplevel() method of Traditional Tkinter. As a parameter, we are passing the app variable in which we have initialized the CustomTkinter. The title and the height-width of the new window have also been defined., next using the get() method we are checking if the user is passing the correct username and password, the variables user_entry and user_pass will be used later in our code when we will create those widgets. For different types of errors, different warnings or error messages will be shown. Here we will also use the messagebox method of the traditional Tkinter module to show the warning, error, and success messages.

Creating and adding the widgets:

Firstly we are creating the label of the main page (it is optional to give). Then creating the frame which will create the frame of our UI. Then create the label which will be shown at the top of the widgets we will add. Then we are creating the Entry section in which the user will put the username and password, in the password section we are passing the show parameter with “*” because when we enter the password only “***” will be shown. Then selecting the padding. Then the Login Button and passing the login function we created earlier, lastly a checkbox for remember me, a user may or may not provide this. Lastly, we are running the app using the mainloop() method.

Python3

# Set the label
label = ctk.CTkLabel(app,text="This is the main UI page")

label.pack(pady=20)

# Create a frame
frame = ctk.CTkFrame(master=app)
frame.pack(pady=20,padx=40,
           fill='both',expand=True)

# Set the label inside the frame
label = ctk.CTkLabel(master=frame,
                     text='Modern Login System UI')
label.pack(pady=12,padx=10)

# Create the text box for taking
# username input from user
user_entry= ctk.CTkEntry(master=frame,
                         placeholder_text="Username")
user_entry.pack(pady=12,padx=10)

# Create a text box for taking
# password input from user
user_pass= ctk.CTkEntry(master=frame,
                        placeholder_text="Password",
                        show="*")
user_pass.pack(pady=12,padx=10)

# Create a login button to login
button = ctk.CTkButton(master=frame,
                       text='Login',command=login)
button.pack(pady=12,padx=10)

# Create a remember me checkbox
checkbox = ctk.CTkCheckBox(master=frame,
                           text='Remember Me')
checkbox.pack(pady=12,padx=10)

app.mainloop()

Output:

Complete Code:

Python3

import customtkinter as ctk
import tkinter.messagebox as tkmb


# Selecting GUI theme - dark, light , system (for system default)
ctk.set_appearance_mode("dark")

# Selecting color theme - blue, green, dark-blue
ctk.set_default_color_theme("blue")

app = ctk.CTk()
app.geometry("400x400")
app.title("Modern Login UI using Customtkinter")


def login():

    username = "Geeks"
    password = "12345"
    new_window = ctk.CTkToplevel(app)

    new_window.title("New Window")

    new_window.geometry("350x150")

    if user_entry.get() == username and user_pass.get() == password:
        tkmb.showinfo(title="Login Successful",message="You have logged in Successfully")
        ctk.CTkLabel(new_window,text="GeeksforGeeks is best for learning ANYTHING !!").pack()
    elif user_entry.get() == username and user_pass.get() != password:
        tkmb.showwarning(title='Wrong password',message='Please check your password')
    elif user_entry.get() != username and user_pass.get() == password:
        tkmb.showwarning(title='Wrong username',message='Please check your username')
    else:
        tkmb.showerror(title="Login Failed",message="Invalid Username and password")



label = ctk.CTkLabel(app,text="This is the main UI page")

label.pack(pady=20)


frame = ctk.CTkFrame(master=app)
frame.pack(pady=20,padx=40,fill='both',expand=True)

label = ctk.CTkLabel(master=frame,text='Modern Login System UI')
label.pack(pady=12,padx=10)


user_entry= ctk.CTkEntry(master=frame,placeholder_text="Username")
user_entry.pack(pady=12,padx=10)

user_pass= ctk.CTkEntry(master=frame,placeholder_text="Password",show="*")
user_pass.pack(pady=12,padx=10)


button = ctk.CTkButton(master=frame,text='Login',command=login)
button.pack(pady=12,padx=10)

checkbox = ctk.CTkCheckBox(master=frame,text='Remember Me')
checkbox.pack(pady=12,padx=10)


app.mainloop()

Output: