1
00:00:01,130 --> 00:00:10,400
Let's see how we can display error messages to the user in case we have one for good user experience.

2
00:00:10,700 --> 00:00:16,190
Let's register a user without providing the details and let's have a look.

3
00:00:16,610 --> 00:00:24,890
You can see we have an error, but what came back is in the form of JSON data and this is not all that

4
00:00:24,890 --> 00:00:29,330
readable to any user who is not familiar with programming.

5
00:00:29,420 --> 00:00:33,590
So how can we send beautiful messages to the user?

6
00:00:33,620 --> 00:00:41,540
You can see we have a value for all fields are required and these messages are coming from our server

7
00:00:41,540 --> 00:00:43,280
or the back end.

8
00:00:43,310 --> 00:00:48,920
Well, let's have a look how we can display those error messages.

9
00:00:49,100 --> 00:00:51,860
We have two ways of achieving this.

10
00:00:51,890 --> 00:01:00,680
We can use a third party package called Flash or we can implement it by ourself, and that is what we

11
00:01:00,680 --> 00:01:02,120
are going to use.

12
00:01:02,180 --> 00:01:03,710
Let's look at the step.

13
00:01:03,740 --> 00:01:12,230
Step number one is let's locate the template or page where we want to display the error message.

14
00:01:12,590 --> 00:01:19,970
And this is a template that we want to display the error in case we have one upon registration.

15
00:01:20,090 --> 00:01:28,220
So let's get back to the template for the form views, uses and register the first step.

16
00:01:28,670 --> 00:01:35,510
The next step is that how can we take the message coming from the server and display it to the templates?

17
00:01:35,540 --> 00:01:42,890
Well, for each template or for any template engine, we have two ways of communicating.

18
00:01:43,570 --> 00:01:52,180
First step is we can send data from the form to the server and we can also take data from the server

19
00:01:52,180 --> 00:01:55,120
into the template that is a vice versa.

20
00:01:55,480 --> 00:02:02,140
We are done with sending data from the form to the server, so to be able to display error messages,

21
00:02:02,140 --> 00:02:07,510
we are going to take data from the server and display it to the templates.

22
00:02:07,510 --> 00:02:10,810
And lucky for us, you guys make it pretty simple.

23
00:02:10,840 --> 00:02:14,080
Let's get back to the controller of users.

24
00:02:14,080 --> 00:02:17,590
So controllers, users, and here we go.

25
00:02:17,620 --> 00:02:24,430
We are locating the controller where we want display the error and that is the register.

26
00:02:25,120 --> 00:02:29,000
Looking inside our code, where are we experience error?

27
00:02:29,020 --> 00:02:37,510
The first one is if the fields are empty, the second one is if the email exists.

28
00:02:37,510 --> 00:02:42,310
And these are the two places where we are exploring an error.

29
00:02:42,460 --> 00:02:46,030
So let's start with the field required.

30
00:02:46,030 --> 00:02:54,340
So instead of returning JSON data, we are going to render the same template and that is the user registration

31
00:02:54,340 --> 00:02:54,910
form.

32
00:02:54,910 --> 00:03:03,580
So let's remove this one and we are going to bring response dot render.

33
00:03:07,950 --> 00:03:14,730
And for this we are going to pass in the templates that we want to render, and that is uses for a slash

34
00:03:14,730 --> 00:03:15,540
register.

35
00:03:16,840 --> 00:03:22,780
And for random method, we can pass in additional arguments as an object.

36
00:03:22,960 --> 00:03:28,890
So whatever we pass in into this will be available inside the template.

37
00:03:28,900 --> 00:03:32,800
So here what we want to send is called error.

38
00:03:34,240 --> 00:03:38,890
With a value as all fields are required.

39
00:03:42,980 --> 00:03:45,430
Now when a piece got rendered.

40
00:03:45,440 --> 00:03:46,580
Let's have a look.

41
00:03:46,790 --> 00:03:48,920
Now, let me refresh the page.

42
00:03:49,810 --> 00:03:53,370
And you can see everything remains the same.

43
00:03:53,380 --> 00:03:58,530
But I can display this message into the page.

44
00:03:58,540 --> 00:04:03,320
So how can we have access to this value inside the templates?

45
00:04:03,340 --> 00:04:08,020
So let's get back to the register template or the register form.

46
00:04:10,270 --> 00:04:18,850
Now inside the template, we have access to this variable that codes the all files are required.

47
00:04:18,940 --> 00:04:22,120
So where are we going to display the error?

48
00:04:22,180 --> 00:04:26,560
And this is a HTML template that I want to display.

49
00:04:27,100 --> 00:04:33,640
But for the meantime, let's comment this one and let's make use of the variable.

50
00:04:33,640 --> 00:04:40,780
And to be able to use dynamic value or JavaScript inside edges, we are going to make use of this syntax

51
00:04:41,470 --> 00:04:44,620
equal to the variable name called error.

52
00:04:44,770 --> 00:04:53,110
Now, when I save it, I'm expecting this one to be displayed inside the templates, but let's have

53
00:04:53,110 --> 00:04:53,680
a look.

54
00:04:53,680 --> 00:05:01,120
When I refresh it, you can see that we got an error and that is reference error.

55
00:05:01,570 --> 00:05:07,000
Remember that we have two places where we are rendering the form.

56
00:05:07,180 --> 00:05:12,070
The first one is getting the form if we get back to the root.

57
00:05:13,070 --> 00:05:15,080
Users and users root.

58
00:05:15,290 --> 00:05:19,940
You can see we have this root that renders the form.

59
00:05:19,970 --> 00:05:21,620
That is the first step.

60
00:05:21,890 --> 00:05:29,410
The second step is that when we hit register, it's also going to render the form again.

61
00:05:29,420 --> 00:05:36,600
So by the time the form got rendered, there is no value for error on the template.

62
00:05:36,620 --> 00:05:38,780
That is why we got this.

63
00:05:38,960 --> 00:05:44,280
So to avoid that or to trick the edges inside the root.

64
00:05:44,300 --> 00:05:48,130
We are going to provide the exact variable.

65
00:05:48,140 --> 00:05:53,420
So here I'm going to pass in object and provide the error.

66
00:05:53,660 --> 00:05:59,750
At this point we're going to be empty, meaning as soon as the form got rendered there is no error.

67
00:05:59,750 --> 00:06:04,040
So with this one, if I save it and now if I refresh the page.

68
00:06:05,090 --> 00:06:07,970
You can see everything remains the same.

69
00:06:08,060 --> 00:06:16,610
But when I click register, you can see all files are required, meaning I go back to the error from

70
00:06:16,610 --> 00:06:25,250
the back end and to add some CSS to it, we are going to use this HTML with the icon.

71
00:06:25,250 --> 00:06:33,680
So I'm going to uncomment this one and mix some if statements before rendering this or better so I can

72
00:06:33,680 --> 00:06:36,050
place this one inside here.

73
00:06:36,080 --> 00:06:36,890
Save it.

74
00:06:36,890 --> 00:06:38,600
And now let's have a look.

75
00:06:39,910 --> 00:06:48,130
And when I click register, you can see all fields are required, but without any error, we still see

76
00:06:48,130 --> 00:06:49,150
this icon.

77
00:06:49,180 --> 00:06:56,870
That is why I said that you won't miss some condition before rendering this to make use of the condition.

78
00:06:56,890 --> 00:07:03,680
We are going to make use of edges and inside I'm going to write if statement and if we have error on

79
00:07:03,680 --> 00:07:11,440
the template, then we are going to display this a HTML with our dynamic value.

80
00:07:11,440 --> 00:07:19,780
And let's close the edge template as that and here also as that, save it.

81
00:07:19,780 --> 00:07:21,790
And now let's refresh it.

82
00:07:22,560 --> 00:07:26,110
And you can see it works fine when I click register.

83
00:07:26,130 --> 00:07:28,560
All fields are required.

84
00:07:28,650 --> 00:07:34,700
And if I register a user with email being exist, let's have a look.

85
00:07:34,710 --> 00:07:35,610
Let me register.

86
00:07:35,650 --> 00:07:39,060
Ben I don't know whether this email exists or not.

87
00:07:39,210 --> 00:07:42,780
Then at gmail.com, Password.

88
00:07:42,780 --> 00:07:45,150
One, two, three, four, five register.

89
00:07:46,160 --> 00:07:54,110
And we have the message as user already exists, meaning that we are not returning the error to the

90
00:07:54,110 --> 00:07:54,890
client.

91
00:07:54,920 --> 00:08:02,990
Now we have handle this error case here so we can copy the same code and scroll down this way we are

92
00:08:02,990 --> 00:08:05,870
returning in case the email exists.

93
00:08:05,870 --> 00:08:14,000
So I'm going to replace with this one and change as email is sticking or exist.

94
00:08:15,780 --> 00:08:17,250
Emile is taking.

95
00:08:18,250 --> 00:08:20,260
All right, let's refresh it.

96
00:08:22,690 --> 00:08:25,410
And you can see e mail is taken.

97
00:08:25,420 --> 00:08:29,500
So that's how we can display error messages.

98
00:08:29,530 --> 00:08:33,640
The next video, let's work with the log in functionality.