CTk Secure Sign-In Simulator

One of the most things I learned about important things i learned about Tkynter (specifically CustomTkinter) was its structure.  It goes like this: 

• .pack()

• .grid()

• .place()

CustomTkinter actually is a CHILD class from Tkinter, so most of the attributes and behaviors works the same between the two classes.

However, when attempting to implement OOP into my app, I ran into a problem with the scoping, where I needed certain variables to be globally accessible, or at least accessible to pages that need it.

class LoginPage(ctk.CTkFrame):

    def __init__(self, master, controller):

        ...

    def login(self):

        ...

        status = authentication(username) if authentication(username) != None else tkmb.showerror(title="Login Failed", message="Invalid Username")

So after consulting ChatGPT to find a solution to this problem, I used the controller attribute of the app page classes to "share" the status (as in ranking, not in condition) and status variables, which were updated and used across the login screen page to the dashboard page.

“controller is a centralized parameter used in a GUI pattern that partially breaks encapsulation, but provides clean enough structure for small to medium GUI apps.”

Debugging

Error #1: AttributeError: '_tkinter.tkapp' object has no attribute 'username'

Line: permissions, personals = authorization(self.controller.username, self.controller.status)

The problem was in the username, where I didn't understand how the  controller object worked.  I thought that the controller object was supposed to be retained throughout all the app classes, but I was wrong.  So in order to solve this bug, I had to be able to answer: "How am I supposed to share variables across different classes?"

class LoginPage(ctk.CTkFrame):

    def __init__(self, master, controller):

        ...

        self.username = ctk.CTkEntry(self, placeholder_text="Username")

        self.username.pack(pady=8)

        self.password = ctk.CTkEntry(self, placeholder_text="Password", show="*")

        self.password.pack(pady=8)

         ...

    def login(self):

   ...

        self.controller.username, username = self.username.get()

The organization looked very complicated, so after debugging for a couple of hours, I finally found out that controller, the entity where I could get shared variables from, acts as a namespace (like from cpp), instead of being a variable itself (which was what I thought).  And actually, any attribute or method of MainApp (the main class from which the GUI app an object of) is accessible via self.controller within page classes (e.g., LoginPage, DashboardPage).

Error #2: TypeError: 'NoneType' object cannot be interpreted as an integer

Line: for i in range(power, 0, -1): ...

The code only reaches this line from after the username and password was inputted, so I first suspected that this error was happening because the app window itself never launched.

Well, actually, the app did launch, so maybe the method (i.e., authorization(username, power)) executed before I could even input the username and password.  So after commenting out that line, the app launched as normal, with login functionality as well!

Note: The "power" variable represents the amount of authority the person has.

What the real problem was, as I would discover later, was how the code for retrieving the username and password was in its __init__ method, which meant that the code will search for the username and password right when the GUI application is launched before the user could even get a chance to type in their username and password.

def __init__(self, master, controller):

...

username = self.controller.shared_data.get("username")

power = self.controller.shared_data.get("power")

permissions, personals = authorization(username, power)

As seen, the method authorization() would try to retrieve the permissions and personal permissions that the user will have access to, depending on their username and power, which shouldn't be NoneType in order to work.  Thus, the program threw a 'NoneType' error, which is what I saw from the beginning.

So in order to solve this problem, I get help from AI and ended up editing the original MainApp class in order to implement a default "refresh" member method for pages that need it (i.e., the DashboardPage).  After this was implemented in the DashboardPage class, the code worked as expected.

def refresh(self):

        # Checking for existence

        username = self.controller.shared_data.get("username")

        power = self.controller.shared_data.get("power")

        if not username or not power:

            self.welcome_label.configure(text="User not logged in")

            self.status_label.configure(text="")

            return

        # Call authorization once

        result = authorization(username, power)

        if result is not None:

            permissions, personals = result

Creating the "Don't Have An Account?" method

Additionally, I thought I would like to create a way to "sign up" for such a new "account" for my simulator, to make a bit more realistic, so I got to work on that also.

Fortunately, I managed to code and debug the whole "CreateAccount" page class (because of all of the other existing page classes): most of the debugging was mainly from just paying more attention to the syntax and structure of the code.

For example, when creating the submit method for the CreateAccount page class, I assumed that using this code would be ok:

def submit(self):

password_map[self.username] = hash_password(self.password)

But it's actually not; this would be the correct code:

def submit(self):

username = self.username.get()

password = self.password.get()

password_map[username] = hash_password(password)

...because of how was unknowingly omitting the .get() method before.

I later realized that in my authentication method, I had hard-coded the username account's names into their status'/authorities'.  Now, I had to make the method more flexible.  By doing so, it kinda defeated the purpose of having that method in the first place, but I'll keep it to show the different cybersecurity functions.

def authentication(uname):

return authorities[uname]

Also, due to me having to access the stored_hashes dictionary again in a page other than the LoginPage (i.e., CreateAccount), I had to make stored_hashes saved in the overall MainApp class.

self.controller.stored_hashes = {name: hash_password(password_map[name]) for name in password_map}

NOW I'm Implementing the YubiKey

Here we go!

Getting Decorative with Asset Widgets