1
00:00:00,830 --> 00:00:05,430
In this video we're going to focus on making sure that our render off button method shows the appropriate

2
00:00:05,430 --> 00:00:09,180
button to allow the user to either sign in or sign out.

3
00:00:09,180 --> 00:00:11,400
Right now we've just have the simple device.

4
00:00:11,430 --> 00:00:14,820
Now the first thing I want to address is the first case of our IF statement.

5
00:00:14,970 --> 00:00:20,640
So if this statement is signed and is equal to no we are returning a div that says I don't know if we

6
00:00:20,640 --> 00:00:21,360
are signed in.

7
00:00:21,390 --> 00:00:23,580
Now this is probably not super appropriate.

8
00:00:23,730 --> 00:00:27,810
Instead I think that we should just return absolutely nothing if we don't know if the user is signed

9
00:00:27,810 --> 00:00:28,150
in.

10
00:00:28,350 --> 00:00:33,240
We could potentially do a spinner or something like that but I think just returning Noal is returning

11
00:00:33,250 --> 00:00:34,630
nothing is totally fine here.

12
00:00:34,830 --> 00:00:38,940
So if we do not know if the user is signed in because we just rendered this component to the screen

13
00:00:39,330 --> 00:00:40,770
I'm going to simply return.

14
00:00:40,800 --> 00:00:41,560
No.

15
00:00:42,000 --> 00:00:46,950
So now if we do a very quick test we can flip back over and you'll notice that we just see nothing right

16
00:00:46,950 --> 00:00:50,320
there until we actually determine our authentication status.

17
00:00:50,400 --> 00:00:52,770
So again that's probably pretty appropriate for right now.

18
00:00:53,610 --> 00:00:56,900
So next we'll handle the case in which the user is signed in.

19
00:00:57,000 --> 00:01:02,700
If the user is signed in we want to show a button that says to the user click me to sign out or something

20
00:01:02,700 --> 00:01:03,830
to that effect.

21
00:01:03,890 --> 00:01:09,320
So rather than the div right here I'm going to instead return a little bit of GSX.

22
00:01:09,510 --> 00:01:19,050
So I'll put in a button with a class name of UI red Google button inside there I'm going to place an

23
00:01:19,080 --> 00:01:25,410
icon with the class name of Google icon that's going to show an icon to the user with a little Google

24
00:01:25,410 --> 00:01:32,470
logo on it and then give it the text sign out like so and then I'll save this if I flip back over

25
00:01:35,600 --> 00:01:36,080
OK.

26
00:01:36,170 --> 00:01:38,030
This right here you'll see that I got an error message.

27
00:01:38,060 --> 00:01:40,400
If you see this error message it's totally fine.

28
00:01:40,400 --> 00:01:43,560
It's just a little issue with the Google API itself.

29
00:01:43,580 --> 00:01:47,680
So if you see that message you can just do a quick refresh and it should go away like so.

30
00:01:48,050 --> 00:01:48,380
OK.

31
00:01:48,410 --> 00:01:51,150
So I now see this nice red button that says Sign out.

32
00:01:51,170 --> 00:01:55,390
Of course if I click it nothing happens but we'll hook up that functionality in just a moment.

33
00:01:55,390 --> 00:01:59,360
Now let's take care of the final state right here the case in which the user is not signed in.

34
00:01:59,660 --> 00:02:04,190
So if the user is not signed in we want to show a button to them that says something like sign in with

35
00:02:04,190 --> 00:02:05,090
Google.

36
00:02:05,090 --> 00:02:12,080
So I'm going to again delete that div and I'll put in a return statement for a button element with a

37
00:02:12,080 --> 00:02:17,780
class name of UI red Google button.

38
00:02:17,980 --> 00:02:25,640
I'm going to again give it a class name of Google icon and then this time I'll give it some text like

39
00:02:25,990 --> 00:02:30,240
sign in with Google.

40
00:02:30,300 --> 00:02:31,730
It's now we flip back over.

41
00:02:31,820 --> 00:02:35,250
We're not going to actually see this button unless we actually sign out or see me.

42
00:02:35,270 --> 00:02:37,190
Yes unless we actually sign out.

43
00:02:37,190 --> 00:02:42,650
So I'll do a quick refresh right here and then I'm going to manually sign out at my console so to do

44
00:02:42,650 --> 00:02:54,060
so I could do a G API dot off to get off instance that sign out like so analyse that by an update.

45
00:02:54,070 --> 00:02:58,900
Now at present the button looks kind of nasty when I am all zoomed in like that but you probably see

46
00:02:58,900 --> 00:03:03,430
something a little bit more like this which is far more appropriate So it's very easy to see sign in

47
00:03:03,430 --> 00:03:05,060
with Google right there.

48
00:03:05,360 --> 00:03:05,580
OK.

49
00:03:05,600 --> 00:03:07,080
So it looks pretty reasonable.

50
00:03:07,160 --> 00:03:10,870
Now lest we need to do is make sure that these buttons actually do something when the user clicks on

51
00:03:10,870 --> 00:03:11,420
them.

52
00:03:11,420 --> 00:03:13,030
So let's take one more quick pause.

53
00:03:13,120 --> 00:03:17,020
When we come back the next section we're going to wire up some Click event handlers to both these buttons

54
00:03:17,020 --> 00:03:20,920
to make sure that we either sign the user in or sign them out whenever they are clicked.