Creating the Sign Up menu
The logic is the same as that for the Login function but we must make a couple of changes, as shown in the following code:
Figure 13.9: The “SignUp” section code
Here’s a breakdown of what we did:
- On lines 66 and 67, we have two text_input widgets to collect the username and the password, but this time, we are putting them in the main section of the web app and not in the sidebar.
- After that, on line 68, we add a button with a label of Sign Up. When this button is pushed, we execute the create_table function (we must ensure that the userstable table exists; otherwise, we will get a runtime error).
- On line 71, we execute the add_data function. We’ve already explained this function (see Figure 13.5), so we know that by passing the username and password that have been inputted by the text_input widgets to it, we create a new record in the database. This new record will contain the new username and password.
- Finally, on line 73, we print a beautiful success message to confirm the creation of the account.
Let’s see the web application in action.
Running the app
In the menu, select Sign Up and insert a new username, such as user1, and a password, such as 12345 (please remember that during real usage, you should use a stronger password):
Figure 13.10: Using Sign Up to create a new account
Then, click on the Sign Up button; you’ll get a You have successfully created an Account message.
With that, we have inserted our first account into our database. This means we can try to log in.
Select Login from the menu, type the username (user1) and password (12345), and enter the web application. We’ll get a Logged in as: user1 message and the list of tasks (I repeat, these are just placeholders):
Figure 13.11: Using “Login” to enter the web application
When we try to log in with an incorrect username or password, we get the following output:
Figure 13.12: Logging in with the wrong username/password
We typed user100, but this username is not present in the database, so it is not possible to log in. We cannot enter the web application and for this reason, we cannot see the list of tasks.
The web application is working very well. Next, we’ll add a nice graphical user interface to our app.
