Login

Login

Above UI we are going to create by Tkinter for login for existing user and "Register" button for new user in our Quiz system desktop application. For that first we create a window and configure its title, size and color. Here we are creating a window at Top Level so we can add this window at the top of any other window.

    
    root = self.winfo_toplevel()
    root.title("Login")
    root.configure(bg="#585858")
    root.resizable(width=0, height=0)
    win_width = 1280
       
    win_height = int(1280 * 56.25 / 100)
    root.geometry(str(win_width) + "x" + str(win_height))

    root.attributes('-alpha', 0.0)
    Util.center(root)
    root.attributes('-alpha', 1.0)


    width = 420
    height = 550
    

After creation of window, we will add a canvas background.

    
    bg_canvas = RoundBackgroundFrame(root, width, height, padding, corner_radius, color, "#585858")
    bg_canvas.place(width=width, height=height, x=win_width / 2 - width / 2, y=win_height / 2 - height / 2)

    class RoundBackgroundFrame(tk.Canvas):

        def __init__(self, parent, width, height, padding, cornerradius, color, bg):
            tk.Canvas.__init__(self, parent, borderwidth=0, relief="flat", highlightthickness=0, bg=bg)
            self.width = width
            self.height = height
            self.padding = padding
            self.cornerradius = cornerradius
            self.color = color

            original = Image.open("images/corner.png")
            resized = original.resize((int(40), int(40)), Image.ANTIALIAS)
            self.image_r_t = ImageTk.PhotoImage(resized)

            original = original.rotate(90, expand=0)
            resized = original.resize((int(40), int(40)), Image.ANTIALIAS)
            self.image_l_t = ImageTk.PhotoImage(resized)

            original = original.rotate(90, expand=0)
            resized = original.resize((int(40), int(40)), Image.ANTIALIAS)
            self.image_l_b = ImageTk.PhotoImage(resized)

            original = original.rotate(90, expand=0)
            resized = original.resize((int(40), int(40)), Image.ANTIALIAS)
            self.image_r_b = ImageTk.PhotoImage(resized)

            self.shape(width, height, padding, cornerradius, color)
            (x0, y0, x1, y1) = self.bbox("all")
            width = (x1 - x0)
            height = (y1 - y0)
            self.configure(width=width, height=height)

        def shape(self, width, height, padding, cornerradius, color):
            self.create_polygon((padding, height - cornerradius - padding, padding, cornerradius + padding,
                                padding + cornerradius, padding, width - padding - cornerradius, padding,
                                width - padding, cornerradius + padding, width - padding,
                                height - cornerradius - padding, width - padding - cornerradius, height - padding,
                                padding + cornerradius, height - padding), fill=color, outline=color)

            self.create_image(width - self.image_r_t.width(), 0, image=self.image_r_t, anchor=NW)
            self.create_image(0, 0, image=self.image_l_t, anchor=NW)
            self.create_image(0, height - self.image_l_b.width(), image=self.image_l_b, anchor=NW)
            self.create_image(width - self.image_r_b.width(), height - self.image_r_b.width(), image=self.image_r_b,anchor=NW)

    

Once your window is created with custom background, we will create a frame with some reduced dimensions.

    
    width = width * 92 / 100
    height = height * 92 / 100
    base_frame = Frame(width=width, height=height, bg=color)
    bg_canvas.create_window(width * 4 / 100, height * 4 / 100, anchor=NW, window=base_frame)


        
    

So we are done with all frame and background UI. Now we will create Loging UI.

    
    label_login = Label(base_frame, text="Sign in", font=font.Font(family="Lucida Grande", size=25, weight='bold'),bg=color)
    label_login.place(width=width - 20, x=10, y=height * 0.07)

    self.ce_username = CustomEntry(base_frame, 300, 55, 10, 2, color, "User Email id", "images/ic_user_black.png")
    self.ce_username.place(x=width / 2 - 150, y=height * 0.30)

    self.ce_pwd = CustomEntryPWD(base_frame, 300, 50, 10, 2, color, "Password", "images/ic_lock_black.png")
    self.ce_pwd.place(x=width / 2 - 150, y=height * 0.50)

    button_login = RoundedButton(base_frame, 250, 130 / 2.9, color, "images/button3.png", "LOGIN",font=("Lucida Grande", 14),
                                     command=lambda: self.login_click(root))
    button_login.place(x=width / 2 - 250 / 2, y=height * 0.70)

    button_register = RoundedButton(base_frame, 250, 130 / 2.9, color, "images/button3.png", "REGISTER",font=("Lucida Grande", 14),
                                        command=lambda: navigate_to_register(root))
    button_register.place(x=width / 2 - 250 / 2, y=height * 0.85)
    
Here is our class CustomEntry:

    
class CustomEntry(tk.Canvas):

    def __init__(self, parent, width, height, cornerradius, padding, color, text, icon_path):
        tk.Canvas.__init__(self, parent, borderwidth=0, relief="flat", highlightthickness=0, bg=color)

        self.width = width
        self.height = height
        self.cornerradius = cornerradius
        self.padding = padding
        self.color = color

        original = Image.open(icon_path)
        resized = original.resize((int(height * 35 / 100), int(height * 35 / 100)), Image.ANTIALIAS)
        self.image = ImageTk.PhotoImage(resized)  # Keep a reference, prevent GC
    

        self.create_text(6, 7, anchor=W, font=font.Font(family="Lucida Grande", size=12, weight='bold'),text=text, fill="#000000")
        self.create_image(10, height / 2 - self.image.width() / 2, image=self.image, anchor=NW)
        self.create_line(5, height - 8, width - 5, height - 8, fill="#808080")

        frame = Frame(parent,width=width * 86 / 100, height=height * 50 / 100, bg=color)
    
        self.entry = Entry(frame, bg=color, bd=0, highlightthickness=0,font=font.Font(family="Lucida Grande", size=13, weight='normal'))

        self.entry.place(relwidth=1, relheight=1, x=0, y=0)

        self.create_window(width - width * 86 / 100 - 5, height / 2 - (height * 50 / 100) / 2, anchor=NW, window=frame)
        self.update()

        (x0, y0, x1, y1) = self.bbox("all")
        width = (x1 - x0)
        height = (y1 - y0)
        self.configure(width=width, height=height)
        
Here is our class CustomEntryPWD:

    
class CustomEntryPWD(tk.Canvas):

    def __init__(self, parent, width, height, cornerradius, padding, color, text, icon_path):
        tk.Canvas.__init__(self, parent, borderwidth=0, relief="flat", highlightthickness=0, bg=color)

        self.width = width
        self.height = height
        self.cornerradius = cornerradius
        self.padding = padding
        self.color = color

        original = Image.open(icon_path)
        resized = original.resize((int(height * 35 / 100), int(height * 35 / 100)), Image.ANTIALIAS)
        self.image = ImageTk.PhotoImage(resized)  # Keep a reference, prevent GC
        # self.color_text = "white"

        self.create_text(6, 7, anchor=W, font=font.Font(family="Lucida Grande", size=12, weight='bold'),
                            text=text, fill="#000000")
        self.create_image(10, height / 2 - self.image.width() / 2, image=self.image, anchor=NW)
        self.create_line(5, height - 8, width - 5, height - 8, fill="#808080")

        frame = Frame(width=width * 86 / 100, height=height * 50 / 100, bg=color)
        # frame.place(x=0, y=0, width=100, height=50)
        self.entry = Entry(frame, bg=color, bd=0, highlightthickness=0,
                            font=font.Font(family="Lucida Grande", size=13, weight='normal'), show="*")

        self.entry.place(relwidth=1, relheight=1, x=0, y=0)

        self.create_window(width - width * 86 / 100 - 5, height / 2 - (height * 50 / 100) / 2, anchor=NW, window=frame)
        self.update()

        (x0, y0, x1, y1) = self.bbox("all")
        width = (x1 - x0)
        height = (y1 - y0)
        self.configure(width=width, height=height)

        

Now UI complete, here's logic for login user who exist in quiz_db.db database.

    
    def login_click(self, root):
        db = Util.connect_db()
        cursor = db.cursor()

        user_email_id = self.ce_username.entry.get()
        user_pass = self.ce_pwd.entry.get()

        cursor.execute('SELECT user_password, user_name FROM user_data WHERE user_email_id IS ?', (user_email_id,))
        sql_output = cursor.fetchall()
       
        user_list = [item[0] for item in sql_output]

        key = "ADMIN_ID"
        cursor.execute('SELECT value FROM system_setting WHERE key IS ?', (key,))
        rows = cursor.fetchone()

        admin_id = rows[0]

        key = "ADMIN_PWD"
        cursor.execute('SELECT value FROM system_setting WHERE key IS ?', (key,))
        rows = cursor.fetchone()
        admin_pwd = rows[0]

        if len(user_list) > 0:
            if user_pass == user_list[0]:
                AppConstant.USER_ID = user_email_id
                AppConstant.USER_NAME = [item[1] for item in sql_output][0]

                key_is_login = "IS_LOGIN"
                cursor.execute("UPDATE system_setting SET value = ? WHERE key = ?",
                               (TRUE, key_is_login,))

                key_id = "LOGIN_ID"
                cursor.execute("UPDATE system_setting SET value = ? WHERE key = ?",
                               (user_email_id, key_id,))

                key_pwd = "LOGIN_PWD"
                cursor.execute("UPDATE system_setting SET value = ? WHERE key = ?",
                               (user_pass, key_pwd,))

                db.commit()

                self.ce_username.entry.delete(0, 'end')
                self.ce_pwd.entry.delete(0, 'end')

                navigate_to_dashboard(root)

        elif admin_id == user_email_id and admin_pwd == user_pass:
            root.destroy()

        else:
            messagebox.showerror(title="Error", message="Incorrect Id or Password")
    

Here's logic for check Loged or Not , Also show Loged user Name.

    
    def check_login(root):
        db = Util.connect_db()
        cursor = db.cursor()

        key_id = "IS_LOGIN"
        cursor.execute('SELECT value FROM system_setting WHERE key IS ?', (key_id,))
        rows = cursor.fetchone()
        is_login = rows[0]

        if is_login == "1":
            key_id = "LOGIN_ID"
            cursor.execute('SELECT value FROM system_setting WHERE key IS ?', (key_id,))
            rows = cursor.fetchone()
            user_id = rows[0]
            AppConstant.USER_ID = user_id

            cursor.execute('SELECT user_name FROM user_data WHERE user_id IS ?', (user_id,))
            rows = cursor.fetchone()
            staff_name = rows[0]

            AppConstant.USER_NAME = staff_name

        navigate_to_dashboard(root)
        
        

When we want go back to DashBoard and "Register" Button for new user.

    

    #Go to Dashboard
    def navigate_to_dashboard(root):
        root.withdraw()
        MainWindow(root)

    
    #Go to Registration page
    def navigate_to_register(root):
    root.withdraw()
    AddUser(root)

        

Programmer Mirta is for learning and training. Projects might be simple to improve learning. Projects are constantly reviewed to avoid errors, but we cannot assure full correctness of all content. While using Programmer Mitra, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 2021 by Programmer Mitra. All Rights Reserved.