[No Audio]
What we did so far with our program, is we build
the first page where the user can Login, and we
also built the Sign Up page, where new users can Sign
Up and be a member in our JSON database.
In this lecture we're going
to implement the Login functionality.
Let me show you, how the
finished version of the program works.
I'm not showing you the code, not yet.
Just how the Login will work.
Ignore the nice looking interface for
now, we will do that later.
Now we have to think about the functionality.
So when the user Logs In, they enter the data,
[Author Typing]
they press Login,
and they go to this internal page of the program.
So here then we have a button, which if we hover the
mouse, it will become red and if we click, it will Log
us out, and it will take us back to the Login page.
If the data are wrong,
it will say, Wrong username or password.
So again, when the data are correct,
it will take us to this page.
So in this lecture, let's go
ahead and build this screen.
I made a screenshot of that, so we have it here for reference.
So we need to add one more
screen in the list of screens here.
Let's name this screen, LoginScreenSuccess
and name. Let's be on the same lines login_screen_success in quotes.
And then create, a rule for that screen.
I'm just going to copy and paste it.
[No Audio]
And so what do we have here?
Well, we start with the GridLayout, which has one column.
For now, I'm just going to provide a simple button.
Later on we will implement the functionality
that you just show with that animation,
when you put your mouse over the
button, the button will become red.
So for now let's just use a simple Button,
[Author Typing]
with text, Logout, on_press.
So we're going to have to create a LoginScreenSuccess class
in the Python code, and create
a function there, to Logout the user.
So log_out, yeah, that's how I would like to call
the function in the LoginScreenSuccess class,
that we are going to create.
Let's leave the button like that,
and then we have a Label.
[Author Typing]
How do you feel? that is Label text.
[Author Typing]
So we are asking the user How they feel, so
they can enter a feeling and then we give them
some quotes depending on how they feel, to make them
feel better or to enhance their feeling.
Quotes are a good thing.
Very smart people have thought well about them,
so, let's use them, let's make use of them.
TextInput
[Author Typing]
with hint_text.
So here you can write whatever you like, but
I'd like to give them a hint to let
them know what they can enter here.
So without having to include any big description, here
in the body of the interface of the page,
let's keep the interface clean and we make use
of this area here in the text box.
So Things to try, happy, sad, unloved.
Yeah, that should be okay.
And then we have another button with text
Enlighten me, feel free to use any name.
That's how far my imagination goes.
Now on press, what are we going to
do when the user presses that button?
Well, when the user presses that button, we are
going to display some text, below the button.
So therefore we'll need a Label,
[Author Typing]
and its text for now is just an empty string.
So let's include an onpress attribute
for the button later on.
For now, let me go ahead and,
[No Audio]
write a class LoginScreenSuccess,
which inherits of course from Screen,
[Author Typing]
and it has a method log_out, log_out to log the user out.
And here I would like to,
[Author Typing]
first
[Author Typing]
define a direction for the transition of this screen.
Let's put it right.
So the logout is going back to the previous page.
So it makes sense to have a right direction for the
transition and then of course, manager.current equal to where do
we want to take the user after they Logout?
We want to take the user to the
Login screen again, that makes some sense, right?
So login_screen, alright, so we
have the page, we constructed the
LoginScreenSuccess page, which was this one in here.
So let me close this to have more room for the code.
However, we haven't yet implemented the
functionality of the Login button.
So u1, p1, Login doesn't work.
So let's locate the Login button
[No Audio]
which is in the LoginScreen.
Yes, the LoginScreen, yes.
So that's a button, Button, Login.
So what do we want to do on, an on_press event?
Well, we want to execute a root.login function, which we
need to have in the LoginScreen class, just here.
So it's basically the same idea as the add_user
function, where we gave the add_user function,
we provided it with the username and the password.
So again we do the same thing with def login self,
and, so here we need to give two arguments.
The first one would be root.ids.username.text
and the second would be root.ids.password.text.
So we are talking here, sorry about the typo here.
We are talking about the username, that the user enters in
the text input box and the password that the user enters
in the text input box in the LoginScreen.
So root, refers to the LoginScreen, to the
current rule, where you are writing the code here
and we don't have an id for TextInput.
So let's go ahead and do id username, same for password.
[Author Typing]
And so then we take this username
and password in the login function.
Let's use uname and pword as parameters.
You can use whatever name you would like.
You could also use username and password.
So how do we login a user?
Well, the idea is that we need to open to
read the JSON file, where we have the user's data
and check to see if that username and password are
in that file or more accurately, if that username is
in the file and it has as password, the password
that the user is providing in the graphical user interface.
If that is the case, then we switch the screen using
a manager.current property, we switch the screen to the screen
that I just showed you, that we just built, and that
we haven't seen yet how it looks like.
So let me quickly implement this
with open users.json as file.
So in read mode, when we don't define the r
like that, that implicitly means that we are reading the file.
users = json.load the file.
So that will give us a dictionary.
Users will be the dictionary containing all the data in the
users.json file. And then if uname in users,
so what we are doing here, is let me show you.
[Author Typing]
So we need this JSON library and
[Author Typing]
users will be the dictionary, right?
Lots of data there and if we say for example, if
u7, u7 in users, we are going to get
true, because u7 is actually among the dictionary keys.
So here u7, you can ignore the user there,
they are just a prefix to denote that, these are
Unicode data, but these are the strings inside the quotes.
So u7 is among the dictionary keys.
You can also get a clear list of the keys with that.
So users.keys, you see that u7 is among those data.
[Author Typing]
So that is why we get true and we can make
use of that and say, if uname is in users.
So first we check if the username is in
the database, but we also need to check and
users uname, password equal to pword.
[Author Typing]
So that is our condition actually.
So the first is that, the username has to exist and the
second is that the users, uname, let's say u7,
so users u7 is the equivalent of this.
So that will give us the dictionary,
that the key u7 has.
This is like the value, that the key u7 has.
So it's a dictionary and if we
continue, our accessing chain, we do password.
So we are accessing the value of key password every,
each of these dictionaries have this password, as a key
and the value of that password is the actual password.
So p7 in this case.
So we are checking if the password of that user,
is a password that the user is providing here.
So, password.text goes in here, this has
to be equal not an assignment operator.
So if that is the case then,
self.manager.current equal to the LoginSuccess page,
LoginScreenSuccess, which we created, right?
And we also need to add an else conditional there.
But let me try to see what we have so
far and debug the code if we have some problems.
So u7, p7, Login and here is a screen.
So this is a button Logout.
How do you feel?
The text box we created, Enlighten me.
And, this is the area where the text would be displayed.
For now it doesn't work, because we haven't
attached a function to the Enlighten me button.
Let me now try the Logout button.
So log_out is not defined, as you can see here the error.
So our Logout button
[No Audio]
which is here on_press,
it's pointing to, actually we should write root.log_out.
So it's pointing to the
LoginScreenSuccess, Logout function.
[No Audio]
So that was a problem.
We didn't specify the class
that had this log_out button.
So let me try again.
[Author Typing]
p7 Login, Logout, and we are back
to the Login page. When we do Logout and
if we enter some wrong data, nothing will happen.
So here is what we are going to do.
We are going to add a label just under the
Login button, between these two buttons and the Login button.
So let's go ahead and do that.
We are talking about the Login
screen, that is the Login button.
So let's add the label
with text as empty for now.
So save that,
[No Audio]
close that window, run again.
Now we have a space here.
So that's a label, and in that label
now, when the data are correct, we are
going to the login_screen_success page, else,
so now we need to get access to the id of the Label.
So let's first put an id to the Label login_wrong.
So here now we need to access that Label.
The way you do that is using self,
so self points to the LoginScreen object.
Then we look for the ids of self, login_wrong id.
So that is the label object.
Now we need to access the text of the label
object, and assign the text, Wrong username or password.
[Author Typing]
So make sure you save the kivy file and run the
code, just some random data which are not in the database,
Login and we get the label there, as we expected.
[No Audio]
u7, p7, Login and we go to the Login page.
[No Audio]
So that is how you access elements from the kivy file.
So when you are in the kivy file, root
will point to the associated class of that rule.
So LoginScreen, LoginScreen class, these
names have to be the same.
And when you are in the Python file, self
is pointing to that class, LoginScreen class.
And since LoginScreen here and LoginScreen there
communicate to each other, they get and receive data.
That means the self object knows about the ids
and all the widgets, that the LoginScreen contains.
So therefore you look for the login_wrong id, to give you this label.
This object of the login screen.
And then you access text, so self here, root there.
And that's it. Let's go in the next lecture now and
make some more cool things about the interface, thanks.