1
00:00:03,450 --> 00:00:08,270
What we did so far with our program is we built the first page where the user can log in.

2
00:00:08,600 --> 00:00:14,270
And we also built the sign-up page where new users can sign-up and be a member

3
00:00:14,480 --> 00:00:20,600
in our Jason database. In this lecture, we're going to implement the login functionality.

4
00:00:20,990 --> 00:00:25,610
Let me show you how the finished version of the program works.

5
00:00:26,060 --> 00:00:28,580
I'm not showing you the code, not yet.

6
00:00:28,850 --> 00:00:31,010
Just how the logging will work.

7
00:00:31,760 --> 00:00:33,890
Ignore the nice looking interface for now.

8
00:00:33,950 --> 00:00:35,120
We will do that later.

9
00:00:35,300 --> 00:00:37,640
Now we have to think about the functionality.

10
00:00:38,090 --> 00:00:44,720
So when the user logs in, they enter the data, they press login.

11
00:00:46,300 --> 00:00:49,480
And they go to this internal page of the program.

12
00:00:49,810 --> 00:00:55,120
So here then we have a button, which if we hover the mouse, it will become red

13
00:00:55,180 --> 00:00:56,230
and if we click

14
00:00:57,820 --> 00:01:02,050
it will log us out and it will take us back to the log in page.

15
00:01:03,230 --> 00:01:04,860
If the data are wrong.

16
00:01:06,380 --> 00:01:08,980
It will say you were wrong username or password.

17
00:01:10,190 --> 00:01:12,230
So, again, when the data are correct.

18
00:01:13,830 --> 00:01:15,040
It will take us to this page.

19
00:01:15,270 --> 00:01:19,080
So in this lecture so let's go ahead and build this screen.

20
00:01:19,500 --> 00:01:21,030
I made a screenshot of that.

21
00:01:21,270 --> 00:01:22,890
So we have it here for reference.

22
00:01:25,100 --> 00:01:29,360
So we need to add one more screen in the list of screens here.

23
00:01:29,660 --> 00:01:37,670
Let's name the screen log-in screen success and name.

24
00:01:38,870 --> 00:01:40,310
Let's be on the same lines.

25
00:01:40,610 --> 00:01:46,520
"Login_screen_success" in quote.

26
00:01:47,910 --> 00:01:51,310
And that create a rule for that screen.

27
00:01:52,180 --> 00:01:53,710
I'm just going to copy and paste it.

28
00:01:57,400 --> 00:01:59,120
And so what do we have here?

29
00:01:59,630 --> 00:02:06,800
Well, we start with the GridLayout, which has one column.  For now

30
00:02:06,890 --> 00:02:10,070
I'm just going to provide a simple button.

31
00:02:10,790 --> 00:02:16,190
Later on, we will implement the functionality that you just saw with that animation where you put

32
00:02:16,190 --> 00:02:19,060
your mouse over the button, the button will become red.

33
00:02:19,910 --> 00:02:22,690
So for now, let's just use a simple button.

34
00:02:25,810 --> 00:02:31,080
With text: "Logout". On_press.

35
00:02:31,840 --> 00:02:38,350
So we're going to have to create a login screen success class in the Python codes and create a function

36
00:02:38,350 --> 00:02:41,710
that will log out the user.

37
00:02:42,100 --> 00:02:43,450
So log_out.

38
00:02:44,210 --> 00:02:44,400
Yeah.

39
00:02:44,860 --> 00:02:50,380
That's how I would like to call the function in the log in screen success class that we are going to

40
00:02:50,380 --> 00:02:50,830
create.

41
00:02:51,190 --> 00:02:52,690
Let's leave the button like that.

42
00:02:53,200 --> 00:02:55,150
And then we have a label.

43
00:02:57,360 --> 00:03:00,800
How do you feel? That is label text?

44
00:03:08,240 --> 00:03:12,620
So we are asking the user how they feel so they can enter a feeling.

45
00:03:12,650 --> 00:03:19,530
And then we give them some quotes depending on how they feel to make them feel better or to enhance

46
00:03:19,620 --> 00:03:22,160
their feelings quotes are a good thing.

47
00:03:22,610 --> 00:03:25,010
Very smart people have thought well about them.

48
00:03:25,040 --> 00:03:26,420
So let's use them.

49
00:03:26,450 --> 00:03:27,470
Let's make use of them.

50
00:03:28,160 --> 00:03:28,970
Text input.

51
00:03:31,750 --> 00:03:33,190
With hint_text.

52
00:03:35,290 --> 00:03:37,390
So here you can write whatever you like.

53
00:03:37,470 --> 00:03:42,820
But I'd like to give them a hint to let them know what they can enter here.

54
00:03:43,400 --> 00:03:51,460
So without having to include any big description here in the body or the of the interface of the page,

55
00:03:51,820 --> 00:03:53,410
let's keep the interface clean.

56
00:03:53,440 --> 00:03:57,890
And we make use of this area here in the textbook.

57
00:03:59,080 --> 00:04:00,880
So: "Things to try:

58
00:04:02,500 --> 00:04:07,070
happy, sad, unloved...".

59
00:04:08,490 --> 00:04:09,970
Yeah, that should be OK.

60
00:04:10,600 --> 00:04:14,020
And then we have another button with text:

61
00:04:15,790 --> 00:04:16,780
"Enlighten me".

62
00:04:17,110 --> 00:04:18,400
Feel free to use any name.

63
00:04:18,910 --> 00:04:23,230
That's how far my imagination goes, and now on_press.

64
00:04:23,560 --> 00:04:27,520
What are we gonna do when the user presses that button?

65
00:04:27,720 --> 00:04:32,690
Well, when the user presses the button, we're going to display some text

66
00:04:33,800 --> 00:04:34,940
below the button.

67
00:04:35,870 --> 00:04:38,510
So therefore, we'll need a label.

68
00:04:41,230 --> 00:04:43,930
And its text for now is just an empty string.

69
00:04:44,320 --> 00:04:48,550
So let's include an on_press attribute for the button later on.

70
00:04:49,010 --> 00:04:51,430
For now, let me go ahead and

71
00:04:53,910 --> 00:04:54,190
write

72
00:04:54,780 --> 00:04:57,030
a class.

73
00:04:58,520 --> 00:05:00,400
LoginScreenSuccess.

74
00:05:02,340 --> 00:05:04,350
Which inherits, of course, from screen.

75
00:05:07,560 --> 00:05:09,060
And it has a method

76
00:05:09,540 --> 00:05:12,540
log_out

77
00:05:14,710 --> 00:05:17,530
to lock the user out and here, I would like to

78
00:05:20,500 --> 00:05:21,340
first

79
00:05:24,730 --> 00:05:28,820
define a direction for the transition of this screen.

80
00:05:29,230 --> 00:05:30,250
Let's put it right.

81
00:05:31,030 --> 00:05:33,490
So the log out is going back to the previous page.

82
00:05:33,520 --> 00:05:37,090
So it makes sense to have a right direction for the transition.

83
00:05:37,600 --> 00:05:44,500
And then, of course, manager.current equal to where do we want to take the user

84
00:05:44,580 --> 00:05:45,630
after they log out?

85
00:05:45,970 --> 00:05:49,580
We want to take the user to the log in screen again.

86
00:05:49,690 --> 00:05:50,750
That makes some sense.

87
00:05:50,770 --> 00:05:51,100
Right.

88
00:05:52,460 --> 00:05:54,350
So "login_screen".

89
00:05:55,630 --> 00:05:55,940
All right.

90
00:05:55,960 --> 00:05:57,190
So we have the page.

91
00:05:57,190 --> 00:06:04,240
We constructed the login screen success page, which was this one in here.

92
00:06:05,170 --> 00:06:07,870
So let me close this to have more room for the code.

93
00:06:08,860 --> 00:06:10,930
However, we haven't yet

94
00:06:11,960 --> 00:06:14,980
implemented the functionality of the login button.

95
00:06:15,620 --> 00:06:18,950
So you u1 p1 login doesn't work.

96
00:06:19,340 --> 00:06:22,400
So let's locate the login button.

97
00:06:25,090 --> 00:06:30,640
Which is in the login screen, yes, the LoginScreen screen.

98
00:06:30,850 --> 00:06:31,120
Yes.

99
00:06:31,720 --> 00:06:33,840
So that's the button, button login.

100
00:06:34,510 --> 00:06:39,850
So what do we want to do on an on_press event?

101
00:06:40,970 --> 00:06:49,100
Well, we want to execute a root.login function, which we need to have in the logging

102
00:06:49,100 --> 00:06:51,800
screen class just here.

103
00:06:52,850 --> 00:07:00,560
So it's basically the same idea as the add_user, a function where we gave the ads user function, we provided

104
00:07:00,560 --> 00:07:02,990
it with the user name and the password.

105
00:07:04,070 --> 00:07:13,220
So again, we do the same thing with define log in self and.

106
00:07:14,840 --> 00:07:17,240
So here we need to give two arguments.

107
00:07:17,660 --> 00:07:22,610
The first one would be root.ids.username.text.

108
00:07:23,570 --> 00:07:29,050
And the second would be root.ids.password.text.

109
00:07:29,630 --> 00:07:30,560
So we are talking here.

110
00:07:30,800 --> 00:07:36,890
Sorry about the typo here! We are talking about the user name that the user enters in a text input

111
00:07:36,890 --> 00:07:43,250
box and the password that the user enters in the text input box in the login screen.

112
00:07:43,520 --> 00:07:51,130
So root refers to the login screen, to the current rule where you are writing the code, here.

113
00:07:51,620 --> 00:07:54,410
And we don't have an I.D. for text input.

114
00:07:54,410 --> 00:08:00,000
So let's go ahead and do id username

115
00:08:01,070 --> 00:08:02,340
for password.

116
00:08:07,130 --> 00:08:12,300
And so then we take these username and password in the login function.

117
00:08:12,810 --> 00:08:17,310
Let's use your uname and pword as parameters.

118
00:08:17,490 --> 00:08:19,230
You can use whatever name you like.

119
00:08:19,800 --> 00:08:21,630
You could also use username and password.

120
00:08:21,900 --> 00:08:24,120
So how do we login a user?

121
00:08:24,450 --> 00:08:32,310
Well, the idea is that we need to open to read the Json file where we have the users data and

122
00:08:32,370 --> 00:08:38,910
check to see if that username and password are in that file or more accurately

123
00:08:39,120 --> 00:08:44,880
if that user name is in the file and it has as password, the password of the user is providing

124
00:08:45,030 --> 00:08:46,500
in the graphical user interface.

125
00:08:48,150 --> 00:08:55,190
If that is the case, then we switch the screen using a manager.current property.

126
00:08:55,590 --> 00:09:02,970
We switch the screen to the screen that I just showed you that we just built and that we haven't seen

127
00:09:02,970 --> 00:09:04,320
yet how it looks like.

128
00:09:05,250 --> 00:09:12,030
So let me quickly implement this with open("users.Json") as file.

129
00:09:12,030 --> 00:09:16,710
So in read mode when we don't define the "r" like that

130
00:09:18,120 --> 00:09:27,860
that implicitly means that we are reading the file. Users equal to Json.load the file.

131
00:09:28,200 --> 00:09:30,450
So that will give us a dictionary.

132
00:09:31,020 --> 00:09:36,440
Users will be the dictionary containing all the data in the users.json file.

133
00:09:36,750 --> 00:09:40,560
And then if uname in users:.

134
00:09:41,550 --> 00:09:45,660
So what we are doing here is let me show you.

135
00:09:48,390 --> 00:09:54,680
So in this Jason library and users will be the dictionary.

136
00:09:56,530 --> 00:09:56,830
Right.

137
00:09:57,640 --> 00:09:58,470
Lots of data there.

138
00:09:59,050 --> 00:10:08,860
And if we say for example, if "u7" in users, we are going to get true because

139
00:10:08,860 --> 00:10:13,120
u7 is actually among the dictionary keys.

140
00:10:13,360 --> 00:10:17,120
So here u7, you can ignore the Us there.

141
00:10:17,370 --> 00:10:18,590
They are just a prefix

142
00:10:19,340 --> 00:10:21,100
to know that these are Unicode data.

143
00:10:21,310 --> 00:10:22,970
But these are the strings inside the quotes.

144
00:10:23,260 --> 00:10:27,010
So u7 is among the dictionary keys.

145
00:10:27,970 --> 00:10:32,200
You can also get a clear list of keys with that.

146
00:10:33,190 --> 00:10:34,570
So users.keys.

147
00:10:34,810 --> 00:10:37,660
You see that u7 is among those data.

148
00:10:39,940 --> 00:10:41,330
So that is why we get true.

149
00:10:41,530 --> 00:10:45,780
And we can make use of that and say if username is in users.

150
00:10:46,030 --> 00:10:49,660
So first we check if the user name is in the database.

151
00:10:50,080 --> 00:10:51,820
But we also need to check.

152
00:10:52,420 --> 00:10:57,370
And users [uname], ['password']

153
00:10:59,740 --> 00:11:00,520
equal to pword.

154
00:11:00,590 --> 00:11:01,250
Words.

155
00:11:03,960 --> 00:11:06,270
So that is our condition, actually.

156
00:11:08,280 --> 00:11:11,040
So the first is that the user name has to exist.

157
00:11:11,340 --> 00:11:17,910
And the second is that, you know, those the users uname, let's say u7.

158
00:11:19,730 --> 00:11:22,950
So users u7 is the equivalent of this.

159
00:11:24,270 --> 00:11:29,730
So that will give us the dictionary that the key u7 has.

160
00:11:30,660 --> 00:11:33,630
This is like the value that the key u7 has.

161
00:11:35,380 --> 00:11:36,320
So it's a dictionary.

162
00:11:36,840 --> 00:11:46,930
And if we continue our accessing chain, we do password, so we are accessing the value of key password

163
00:11:47,290 --> 00:11:49,970
each of these dictionaries have this password

164
00:11:51,450 --> 00:11:57,450
as a key and the value of that password is the actual password, so P7 in this case.

165
00:11:59,370 --> 00:12:05,670
So we are checking is the password of that user is the password that the user is providing here.

166
00:12:07,480 --> 00:12:14,180
So password.text goes in here. This has to be equal.

167
00:12:14,200 --> 00:12:15,790
Not an assignment operator.

168
00:12:16,720 --> 00:12:27,290
So if that is the case, then self.manager.current equal to the login success page,

169
00:12:27,730 --> 00:12:31,420
login_screen_success, which we created.

170
00:12:33,840 --> 00:12:34,370
Right.

171
00:12:34,960 --> 00:12:37,930
And we also need to add an else conditional there.

172
00:12:37,960 --> 00:12:42,760
But let me try to see what we have so far and debug the code

173
00:12:42,790 --> 00:12:43,840
if we have some problems.

174
00:12:46,100 --> 00:12:49,250
So u7 p7, login.

175
00:12:49,850 --> 00:12:51,140
And here is the screen.

176
00:12:51,800 --> 00:12:53,440
So this is the button logout.

177
00:12:53,810 --> 00:12:54,590
How do you feel?

178
00:12:55,070 --> 00:12:56,230
The textbooks we created.

179
00:12:56,330 --> 00:12:57,170
Enlighten me.

180
00:12:57,200 --> 00:13:00,050
And this is the area

181
00:13:00,180 --> 00:13:01,610
where the text would be displayed.

182
00:13:03,410 --> 00:13:08,580
For now, it doesn't work because we haven't attached a function to the "Enlighten" me button.

183
00:13:09,350 --> 00:13:09,730
Let me know.

184
00:13:09,770 --> 00:13:11,120
Try the logout button.

185
00:13:13,540 --> 00:13:17,560
So log out is not defined, as you can see here, the error.

186
00:13:18,770 --> 00:13:20,390
So our logout button.

187
00:13:23,740 --> 00:13:25,510
Which is here on_press.

188
00:13:26,470 --> 00:13:30,210
It's pointing to, actually you should write root

189
00:13:30,340 --> 00:13:30,950
That's the logout.

190
00:13:31,240 --> 00:13:36,060
So it's pointing to the login green success log out function.

191
00:13:39,150 --> 00:13:40,260
So that was the problem.

192
00:13:40,500 --> 00:13:47,280
We didn't specify the class that had this logout button, so let me try again.

193
00:13:53,500 --> 00:13:58,570
P7, log in, log out and we are back to the log in page

194
00:13:59,290 --> 00:14:06,700
when we do log out and if we do if we enter some wrong data, nothing will happen.

195
00:14:07,000 --> 00:14:08,440
So here is what we are going to do.

196
00:14:08,760 --> 00:14:15,220
We are going to add a label just under the logging button between these two buttons and the logging

197
00:14:15,220 --> 00:14:15,550
button.

198
00:14:16,090 --> 00:14:17,620
So let's go ahead and do that.

199
00:14:18,100 --> 00:14:20,030
We are talking about the logging screen.

200
00:14:21,190 --> 00:14:22,300
That is the logging button.

201
00:14:22,960 --> 00:14:29,500
So let's add a label with text as empty for now.

202
00:14:29,920 --> 00:14:30,670
So save that.

203
00:14:33,000 --> 00:14:33,920
Close that window.

204
00:14:34,320 --> 00:14:35,070
Run again.

205
00:14:35,130 --> 00:14:37,770
Now we have a space here, so that's a label.

206
00:14:38,100 --> 00:14:46,480
And in that label now when the data are correct, we are going to the log in screen success page else.

207
00:14:47,490 --> 00:14:50,820
So now we need to get access to the id of the label.

208
00:14:51,000 --> 00:14:55,800
So let's first put an id to the label login wrong.

209
00:14:56,900 --> 00:14:59,370
So here now we need to access

210
00:14:59,630 --> 00:15:00,750
that label.

211
00:15:00,930 --> 00:15:03,090
The way you do that is using self.

212
00:15:03,270 --> 00:15:06,610
So self points to the log in screen object.

213
00:15:07,480 --> 00:15:12,360
Then we look for the ids of self, 

214
00:15:12,950 --> 00:15:14,160
login_wrong ID.

215
00:15:14,460 --> 00:15:17,100
So that is the label object.

216
00:15:17,400 --> 00:15:21,630
Now we need to access the text of the label object and sign the text

217
00:15:21,760 --> 00:15:25,740
"Wrong username or password".

218
00:15:28,300 --> 00:15:36,460
So make sure you save the Kivi file and run the code, just some random data which are not in the database.

219
00:15:36,900 --> 00:15:38,480
Log in and we get

220
00:15:38,510 --> 00:15:39,460
the label there.

221
00:15:41,450 --> 00:15:42,440
As we expected.

222
00:15:45,390 --> 00:15:50,890
And u7 p7 log in and we go to the login page.

223
00:15:53,920 --> 00:15:58,030
So that is how you access elements from the ivy file.

224
00:15:58,780 --> 00:16:05,710
So when you are in the kivy file root will point to the associated class of that rule.

225
00:16:05,710 --> 00:16:07,900
So login screen or login screen class.

226
00:16:08,350 --> 00:16:10,150
These names have to be the same.

227
00:16:11,290 --> 00:16:18,020
And when you are in that python file, self is pointing to that class, log in screen class.

228
00:16:19,550 --> 00:16:24,810
And since log in screen here and log in screen there, communicate to each other, they get and receive

229
00:16:24,820 --> 00:16:25,170
data.

230
00:16:25,400 --> 00:16:33,050
That means the self knows about the IDs and all the widgets that the logging screen

231
00:16:33,050 --> 00:16:33,710
contains.

232
00:16:34,100 --> 00:16:39,410
So, therefore, you look for the login wrong ID to give you this label.

233
00:16:39,440 --> 00:16:41,000
This object of the logging screen.

234
00:16:41,390 --> 00:16:42,560
And then you access text.

235
00:16:43,150 --> 00:16:45,320
So self here, root there.

236
00:16:45,650 --> 00:16:46,130
That's it.

237
00:16:46,620 --> 00:16:51,440
Let's go in the next election now and make some more cool things about the interface.

238
00:16:51,620 --> 00:16:52,010
Thanks.