Creating a Login Form with PyQt6

In this tutorial, we’ll walk through the process of creating a simple login form using PyQt6, a set of Python bindings for Qt, a powerful GUI toolkit. We’ll create a window with a title, username and password fields, and buttons for registration and login. Additionally, we’ll implement a basic login functionality to check if the provided credentials are valid.

Prerequisites:

Make sure you have PyQt6 installed. If not, you can install it using:

pip install PyQt6

Step 1: Import required Libraries and widgets

import sys
from PyQt6.QtCore import Qt
from PyQt6.QtWidgets import QWidget, QPushButton, QApplication, QGridLayout, QLabel, QLineEdit

Step 2: Set up the Basic UI

Create a class named Window that inherits from QWidget. Set up the basic UI elements like labels, input fields, and buttons.

class Window(QWidget):
    def __init__(self):
        super().__init__()
        layout = QGridLayout()
        layout.setContentsMargins(20, 20, 20, 20)
        layout.setSpacing(10)
        self.setWindowTitle("CodersLegacy")
        self.setLayout(layout)

        # Title Label
        title = QLabel("Login Form with PyQt6")
        title.setProperty("class", "heading")
        layout.addWidget(title, 0, 0, 1, 3, Qt.AlignmentFlag.AlignCenter)

        # Username Label and Input
        user = QLabel("Username:")
        user.setProperty("class", "normal")
        layout.addWidget(user, 1, 0)
        self.input1 = QLineEdit()
        layout.addWidget(self.input1, 1, 1, 1, 2)

        # Password Label and Input
        pwd = QLabel("Password")
        pwd.setProperty("class", "normal")
        layout.addWidget(pwd, 2, 0)
        self.input2 = QLineEdit()
        self.input2.setEchoMode(QLineEdit.EchoMode.Password)
        layout.addWidget(self.input2, 2, 1, 1, 2)

        # Register and Login Buttons
        button1 = QPushButton("Register")
        layout.addWidget(button1, 4, 1)

        button2 = QPushButton("Login")
        button2.clicked.connect(self.login)
        layout.addWidget(button2, 4, 2)

Step 3: Add functionality

Add the following method to the window class to enable login validation. Currently the validation check is hardcoded, but ideally you can connect this to a database like SQLite3.

    def login(self):
        if self.input1.text() == "CodersLegacy" and self.input2.text() == "12345678":
            print("Username and password are correct")
        else:
            print("Invalid")

Step 4: Styling with CSS (Optional)

You can enhance the visual appearance of the login form by adding custom styles using CSS. Create a file named style.qss with the following content:

/* style.qss */


QWidget {
    background-color: #333333;
    color: #ffffff;
    border: none;
}

QPushButton {
    background-color: #4d4d4d;
    border: 1px solid #4d4d4d;
    border-radius: 4px;
    color: #ffffff;
    padding: 5px;
}

QPushButton:hover {
    background-color: #5a5a5a;
    border: 1px solid #5a5a5a;
}

QCheckBox {
    color: #ffffff;
}

QLineEdit {
    background-color: #4d4d4d;
    border: 1px solid #4d4d4d;
    color: #ffffff;
    padding: 5px;
}

In the Window class, load the style sheet by adding the following lines in the constructor (init method):

self.setStyleSheet(open("style.qss", "r").read())

Step 5: Run the Application

Create an instance of the QApplication class, instantiate the Window class, show the window, and start the application loop.

app = QApplication(sys.argv)
window = Window()
window.show()
sys.exit(app.exec())

Video Link

For those looking for an in-depth and more hands of experience on how the following code was developed (plus some other interesting tidbits) check out the video version of this tutorial.

This marks the end of the “Create a Login Form with PyQt6” Tutorial. Any suggestions or contributions for CodersLegacy are more than welcome. Questions regarding the tutorial content can be asked in the comments section below.

Share on Facebook