How to create a login window using PySide2 and python?

Dheeraj Jha
May 21, 2020
3 min read

This is my second blog in Python and PySide2 series. In my last blog - UI in python using QT and PySide2, I showed how to create a basic window using Qt designer and PySide2. If you missed that I will suggest going through it.

In this blog, we will not use Qt designer for UI class creation instead we will write the whole code by own.

What to expect from this blog?

How to create a window?
How to add widgets in the window?
Signal basic
Layout Management

User Interface:

Let’s start with basic code.

We are creating a LoginUI class. In this class we will create our widgets, this is our main class.

For details about this code, please go through my previous blog which explains this in detail.

To login in an application, the user needs to provide a UserName and Password.

Let’s create a widget for each.

As the name says, QLable widget is used for adding some text or image for showing any message on the window. Maybe any information about the widget or some label.

QLineEdit widget offers a feature to take one-line plain text input from the user with a useful collection of editing functions, including undo and redo, cut and paste, and drag and drop.

We can add some placeholder text to QLineEdit widget using setPlaceholderText(). This can be used to tell the user what is expected to enter.

Now it’s time to add a login button to an application.

setDisabled() function will set login button disabled by default. We will enable this button when user will pass username and password.

Let’s run it once.

There is no widget in this window. Why?

We created widgets but not attached these widgets to any Layout.

What is Layout?

From Qt Documentation

“The Qt layout system provides a simple and powerful way of automatically arranging child widgets within a widget to ensure that they make good use of the available space.”

Qt provides several layout classes which are used to position different widgets in the available window size. These layouts automatically position and resize the widgets to adjust them in the window.

Here is the list of different layout classes available in Qt. I will discuss this Layout management in detail in my future blog.

In this blog, we will use QFormLayout.

First-line will create a QFormLayout object. In this layout, will add all the widgets we created using addWidget() function.

Now we will create an object of QWidget class and set layout object to this widget. In the next line will set this widget as a central widget in the window.

Add some title and set the size of the window.

How the UI looks like.

Our login button is disabled right now. So, when it will enable? It will enable when user will input username and password. How? Let’s do that.

Backend:

Now its time to add some handlers.

We will add a handler to login button later in the blog.

First, attach a handler to line edit widget. Add a handler with textChanged signal. Whenever the user will enter some text or there will be any change in text, the handler will get called.

Whenever text of any line edit widget will change, the respective handler will execute. The button will enable only when some text is entered in each line edit widget.

PasswordEntered() function will hide the entered password with “*”.

Now logic to enable login button is ready. Now let’s add a handler to the login button.