The first thing we can do with our FriendList class is provide some sort of login system. Since each user has a unique username and real name, we can use these credentials to identify the user who runs the application. Normally, a system would also require a password, but we can skip that for this implementation.

In order to display the login screen to the user, we will need to take away the default behavior of showing the friends list straight away and instead display some widgets for the user to enter their details.

Open your friendist.py file again and begin by extracting parts of the __init__ method to a new one. Your new __init__ will look like this:

class FriendsList(tk.Tk):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)

        self.title('Tk Chat')
        self.geometry('700x500')

        self.menu = tk.Menu(self, bg="lightgrey", fg="black", tearoff=0)

        self.friends_menu = tk.Menu(self.menu, fg="black", 
                                    bg="lightgrey", tearoff=0)
        self.friends_menu.add_command(label="Add Friend", 
                                       command=self.add_friend)

        self.menu.add_cascade(label="Friends", menu=self.friends_menu)

        self.show_login_screen()

The code which has been removed from here will go into a method called show_friends, as follows:

    def show_friends(self):
        self.configure(menu=self.menu)
        self.login_frame.pack_forget()

        self.canvas = tk.Canvas(self, bg="white")
        self.canvas_frame = tk.Frame(self.canvas)

        self.scrollbar = ttk.Scrollbar(self, orient="vertical",
                                       command=self.canvas.yview)
        self.canvas.configure(yscrollcommand=self.scrollbar.set)

        self.scrollbar.pack(side=tk.LEFT, fill=tk.Y)
        self.canvas.pack(side=tk.LEFT, expand=1, fill=tk.BOTH)

        self.friends_area = self.canvas.create_window((0, 0), 
                     window=self.canvas_frame, anchor="nw")

        self.bind_events()
        self.load_friends()

Looking over our new __init__, you will see that, once the normal variables are set and the menu is created, we go off to a method called show_login_screen. This will put a Frame in the window, which contains Entry widgets for the user to enter their username and real name, and buttons to either log in or create a new account:

def show_login_screen(self):
    self.login_frame = ttk.Frame(self)
    username_label = ttk.Label(self.login_frame, text="Username")
    self.username_entry = ttk.Entry(self.login_frame)

    real_name_label = ttk.Label(self.login_frame, text="Real Name")
    self.real_name_entry = ttk.Entry(self.login_frame)

We begin by making a Frame to hold all of our widgets. Since the layout will represent a grid, we will be using the grid geometry manager in this frame, meaning there will be no need to add additional Frame widgets inside of it.

As we want the user to be able to enter their username and real name, we will need two Entry widgets for them to type in, as well as two Label widgets to indicate what information goes into each.

The Entry widgets will need to be attributes, so that we can get their values in other methods, but the rest will not need to be referenced, so they can be regular variables:

login_button = ttk.Button(self.login_frame, text="Login", command=self.login)
create_account_button = ttk.Button(self.login_frame, text="Create Account", command=self.create_account)

We also have two Button widgets, which will let the user have the ability to either log in with the provided credentials or use them to create a new account:

username_label.grid(row=0, column=0, sticky='e')
self.username_entry.grid(row=0, column=1)

real_name_label.grid(row=1, column=0, sticky='e')
self.real_name_entry.grid(row=1, column=1)

login_button.grid(row=2, column=0, sticky='e')
create_account_button.grid(row=2, column=1)

With all of our widgets defined, we can begin adding them to our Frame. We use grid to create a 2 x 3 grid inside the Frame:

for i in range(3):
    tk.Grid.rowconfigure(self.login_frame, i, weight=1)
    tk.Grid.columnconfigure(self.login_frame, i, weight=1)

self.login_frame.pack(fill=tk.BOTH, expand=1)

We again loop over each cell and set them to an equal weight, allowing our layout to persist as the user resizes their window.

Finally, we use pack to add our login_frame to the window, telling it to fill both directions and expand to the full size.

Before we can see this in action, we will need to define the two methods called by the new buttons. We can just use placeholder methods for now:

def login(self):
    pass

def create_account(self):
    pass

You should now be able to run your friendslist.py file and see your new login screen, as follows:

To actually complete the methods that these buttons will call, we are going to need to connect our FriendsList class up to our web service. In order to keep the logic nicely contained, we will be creating a new class to handle all of this.