Creating the Login menu
First, we need a couple of text inputs, one for the username and one for the password, after which we can put them in the sidebar. So, let’s add two new lines, as shown on lines 46 and 47 in the following figure:
Figure 13.6: Text input for username and password
Upon specifying type=’password’ on line 47, the password we type will be hidden; by clicking on the eye icon, we can see the password clearly in the browser, as shown in the following figure:
Figure 13.7: The password is hidden
At this point, the logic behind the login should be quite clear: we insert a username and a password and look for them in the database to understand whether a specific user is allowed to log into our app or not.
As usual, let’s have a look at the code that performs this function:
Figure 13.8: The “Login” section’s code
Here’s a breakdown of what the code in Figure 13.8 does:
- On line 49, we added a checkbox; when it is selected, a new subheading is printed in the main section of the web app.
- After that, on line 51, the create_table function, which we described previously, is executed. In this way, a new table named userstable will be created in the database, but only if it doesn’t exist already.
- On line 53, the login_user function is executed, with the username and password that were inputted using the two text_inputs widgets on lines 46 and 47 as arguments.
- If the result of the data fetching is positive, we print the Logged in… message with success and show a selectbox with a couple of tasks (just some placeholders); otherwise, we print a warning stating the Incorrect Username/Password message.
If you try to log in now, you’ll get the Incorrect Username/Password message since no data is present in the database.
To populate the database, we must implement the SignUp function. Let’s see how.
