1 00:00:00,240 --> 00:00:03,420 Let's make our UI as smooth as butter. 2 00:00:04,140 --> 00:00:09,330 What I mean by that is you don't want the users pressing login or register or forgot password twice 3 00:00:09,450 --> 00:00:11,980 because that's going to be a very big pain. 4 00:00:12,000 --> 00:00:19,710 So what we're going to do is drop in an activity indicator view and we're going to sort of wedge this 5 00:00:20,820 --> 00:00:22,340 maybe where are we going to put it? 6 00:00:22,770 --> 00:00:29,430 Let's put it actually above the login button and then control click it down to vertical spacing and 7 00:00:29,430 --> 00:00:32,220 then control, kick it down to center horizontally. 8 00:00:33,880 --> 00:00:37,120 OK, so that should just about do it. 9 00:00:37,360 --> 00:00:38,800 It's going to be roughly somewhere they're. 10 00:00:40,630 --> 00:00:44,740 And if we tap it, we are going to have Hydes when stopped. 11 00:00:46,510 --> 00:00:53,480 And currently, it's not animating, so if I play this when the authentication screen appears, that 12 00:00:53,500 --> 00:00:57,940 shouldn't actually appear yet until we explicitly started. 13 00:01:02,420 --> 00:01:07,790 OK, so the way we're going to explicitly start it is go into our auth view controller. 14 00:01:09,700 --> 00:01:12,670 And we get to have a function disable UI. 15 00:01:18,030 --> 00:01:24,410 And we're also going to have actually, before we create their function, will just fill in this one 16 00:01:24,750 --> 00:01:28,160 so we don't have a reference to the buttons. 17 00:01:28,170 --> 00:01:29,190 We do have the output. 18 00:01:29,220 --> 00:01:35,430 So what we're going to do is first go back to the main storyboard and get a reference to all the things 19 00:01:35,430 --> 00:01:36,250 that we need. 20 00:01:36,690 --> 00:01:38,460 So let's go top right click. 21 00:01:39,490 --> 00:01:46,440 Let's go to our orfeu controller and let's scroll around and find our storyboard. 22 00:01:46,470 --> 00:01:46,990 There we go. 23 00:01:49,320 --> 00:01:51,960 So I need a reference to the activity indicator. 24 00:01:58,360 --> 00:02:02,890 I'll just call activity end and the reference to the button. 25 00:02:04,270 --> 00:02:11,200 Now, this is a reference, an outlet, not an action, so be careful of that. 26 00:02:13,050 --> 00:02:14,550 Same with the register button. 27 00:02:19,050 --> 00:02:24,330 And then, of course, the same with the forgot password button, because we don't want them clicking 28 00:02:24,330 --> 00:02:25,020 that either. 29 00:02:30,420 --> 00:02:35,790 OK, so now we have references to everything we can go ahead and close all of that and go back to our 30 00:02:35,790 --> 00:02:36,930 overview controller. 31 00:02:39,260 --> 00:02:42,770 Not the UI one, we go to the off one, thank you very much. 32 00:02:45,290 --> 00:02:51,470 OK, so to disable the UI, we are going to disable the login button. 33 00:02:54,020 --> 00:02:56,280 Is enabled equal, whatever. 34 00:02:56,630 --> 00:03:03,210 So the way I'm going to actually do this is enabled is going to be sent over as a boolean. 35 00:03:04,550 --> 00:03:05,630 So what we're going to do. 36 00:03:07,200 --> 00:03:09,180 He's actually renamed this Activate UI. 37 00:03:11,580 --> 00:03:18,620 So I can just set that boolean, right, I can have register button, dot enabled, oops. 38 00:03:22,440 --> 00:03:27,720 Is enabled, is equal to enabled for got. 39 00:03:32,580 --> 00:03:35,440 What did we call the forget button forgot password button? 40 00:03:35,460 --> 00:03:42,250 There it is, DOT is enabled is exactly the same, right? 41 00:03:42,270 --> 00:03:43,710 So that's the three lines that we need. 42 00:03:43,710 --> 00:03:46,830 There is actually a way to shorten these three lines to one, I believe. 43 00:03:47,100 --> 00:03:48,300 But we're not going to do that. 44 00:03:48,390 --> 00:03:54,090 Keep it nice and obvious, even though it creates more lines of code, obviously, I believe is much 45 00:03:54,090 --> 00:03:58,820 better then we need the activity indicator DOT. 46 00:03:59,490 --> 00:04:02,070 And what is the thing is animating. 47 00:04:02,070 --> 00:04:03,120 Stop animating. 48 00:04:04,530 --> 00:04:10,500 Start animating now, this is going to need to be if enabled. 49 00:04:12,880 --> 00:04:18,760 OK, if if it's enabled, then we're actually going to stop animating. 50 00:04:23,110 --> 00:04:30,560 Else activity indicator don't start animating, and that should also take care of the disappearing as 51 00:04:30,560 --> 00:04:30,870 well. 52 00:04:32,090 --> 00:04:33,430 So let's hit play on that. 53 00:04:33,740 --> 00:04:36,330 Now, this might actually happen quite quickly. 54 00:04:36,740 --> 00:04:41,540 So what I'm going to do is turn the Wi-Fi off. 55 00:04:46,870 --> 00:04:54,490 And then it should take quite a while, so I've got my user that's already registered when I log in, 56 00:04:56,350 --> 00:04:59,980 which can network error, so I will put that wi fi back on. 57 00:05:00,910 --> 00:05:02,750 It's get my Hesselbach and guest. 58 00:05:03,610 --> 00:05:05,260 Can you guess what city I am in? 59 00:05:06,410 --> 00:05:10,410 Hustle back in is a hotel in the city, OK, so I'm going to click login. 60 00:05:10,530 --> 00:05:11,540 This is going to happen quickly. 61 00:05:11,570 --> 00:05:12,350 Watch carefully. 62 00:05:15,330 --> 00:05:19,030 That happened much quicker than I was expecting, you know. 63 00:05:19,080 --> 00:05:26,610 I think we need to set this activity indicator to white or we won't be able to see it. 64 00:05:27,240 --> 00:05:28,380 So now let's hit play. 65 00:05:30,560 --> 00:05:33,280 And again, we'll have to watch this very carefully and quickly. 66 00:05:36,760 --> 00:05:39,970 So that oh, wait, you know what? 67 00:05:40,360 --> 00:05:44,410 Of course, nothing worked because we haven't activated the UI, have we? 68 00:05:46,120 --> 00:05:55,180 If Log-in is tapped and we get through the first hurdle, we're going to activate the UI as false. 69 00:05:57,520 --> 00:06:06,250 OK, and then if the authentication works or doesn't work, we're going to activate the UI anyway because 70 00:06:06,250 --> 00:06:07,690 we've gone through the process. 71 00:06:08,260 --> 00:06:12,520 So again, with registered tapped and of course, we need a cell phone that. 72 00:06:15,080 --> 00:06:18,140 And down here, we're going to have activate UI as false. 73 00:06:19,960 --> 00:06:30,130 And then self-drive activate UI as true, and we're going to have the same for Forgot Tapped, but we're 74 00:06:30,130 --> 00:06:31,150 not doing that just yet. 75 00:06:31,160 --> 00:06:34,870 So let's play let's see what we get out of this. 76 00:06:36,610 --> 00:06:41,110 All right, when I said watch carefully, maybe I meant watch carefully my code, because it wasn't 77 00:06:41,110 --> 00:06:41,980 that good at that point. 78 00:06:43,600 --> 00:06:50,220 So paste that in oops trophy and whatever else, I'm going to do the wrong password here. 79 00:06:50,380 --> 00:06:50,960 Here we go. 80 00:06:52,030 --> 00:06:52,550 There we go. 81 00:06:52,570 --> 00:06:53,590 So it tried to log in. 82 00:06:53,800 --> 00:06:55,480 It deactivated the buttons. 83 00:06:55,670 --> 00:06:57,250 Now the buttons didn't dim. 84 00:06:57,460 --> 00:07:00,190 It just stopped the user from pressing them up to you. 85 00:07:00,190 --> 00:07:03,970 If you want to add the dimming effect to them, you can do that fairly easily. 86 00:07:03,970 --> 00:07:06,240 But I'm not going to bother with that right now. 87 00:07:06,910 --> 00:07:08,770 So what happens if we get everything right? 88 00:07:09,920 --> 00:07:10,690 Let's log in. 89 00:07:11,870 --> 00:07:12,410 And we're in. 90 00:07:12,820 --> 00:07:19,130 OK, so that's just a nice way to butter up the UA, make it a bit more user friendly and to stop them 91 00:07:19,130 --> 00:07:24,020 from tapping those buttons twice, because I believe you and me, that is what users do. 92 00:07:24,020 --> 00:07:26,120 They press things all the time.