1
00:00:01,030 --> 00:00:05,080
We can now read into email and password that a user enters into this form when they submit it.

2
00:00:05,390 --> 00:00:09,400
So now we need to take that email and password and reach out to our all service and attempt to sign

3
00:00:09,400 --> 00:00:10,890
up for a new account.

4
00:00:10,900 --> 00:00:12,460
So how are we going to do that.

5
00:00:12,460 --> 00:00:15,490
Well remember we've already discussed this at great length.

6
00:00:15,490 --> 00:00:20,890
When we were initially putting together our off service the all service has a POST request handler watching

7
00:00:20,890 --> 00:00:24,140
for incoming requests on API users sign up.

8
00:00:24,250 --> 00:00:29,200
So all we have to do from our ReACT application running inside the browser is make a POST request to

9
00:00:29,470 --> 00:00:30,660
API users sign up.

10
00:00:30,700 --> 00:00:33,160
That's gonna go off shore of service.

11
00:00:33,160 --> 00:00:37,300
Now the reason I'm kind of making a big deal around this is remember we actually have multiple layers

12
00:00:37,300 --> 00:00:40,260
of things between the browser and the author service.

13
00:00:40,330 --> 00:00:45,400
We've got the ingress engine ex service which is going to handle some initial routing whenever ingress

14
00:00:45,400 --> 00:00:51,190
engine ex routes request it goes off to a cluster IP service running inside of our cluster and from

15
00:00:51,190 --> 00:00:56,800
the cluster IP service then the thing finally gets sent off to the pod that is running our off container

16
00:00:58,040 --> 00:01:02,090
and then inside that container is the express application that's going to route the request to a request

17
00:01:02,090 --> 00:01:05,850
handler where we actually create our user.

18
00:01:05,870 --> 00:01:10,880
So even though this diagram looks really simple remember there are many things running between our actual

19
00:01:10,940 --> 00:01:14,330
off container Andy browser.

20
00:01:14,360 --> 00:01:19,810
So all that mind again all we really do here is make an ajax request to our order service specifically

21
00:01:19,820 --> 00:01:22,460
of that route right there to make the request itself.

22
00:01:22,460 --> 00:01:24,820
We're going to use the Axis library.

23
00:01:25,190 --> 00:01:26,790
We need to install access.

24
00:01:26,880 --> 00:01:32,300
So I going to flip back over to my terminal and again inside my client directory I will run an npm install

25
00:01:32,420 --> 00:01:39,210
axioms now just like bootstrap whenever we install something or make a change that package not just

26
00:01:39,210 --> 00:01:44,040
on file scaffold needs to rebuild the image and then deploy it into our cluster.

27
00:01:44,040 --> 00:01:50,090
So after running this command you're going to want to go back over to the window running scaffold and

28
00:01:50,090 --> 00:01:52,750
make sure that you wait for the installation to be completed.

29
00:01:52,760 --> 00:01:56,700
So you're gonna see something like this right here all that gibberish.

30
00:01:56,780 --> 00:02:04,960
So there's my npm install the image was rebuilt and then eventually updated inside the cluster and I

31
00:02:04,960 --> 00:02:08,930
could see right there is where the pod got restarted with a new version of that image.

32
00:02:09,010 --> 00:02:14,260
The image that has axial is installed to make sure you wait for that installation process to be completed

33
00:02:15,990 --> 00:02:20,280
once it's done we can then go into our Ed and start to write out some code inside of here to make use

34
00:02:20,280 --> 00:02:21,570
of axes.

35
00:02:21,700 --> 00:02:25,620
So at the very top we will first import access from axioms

36
00:02:28,480 --> 00:02:36,150
all then find the on submit I'm going to delete the console log and replace it with a weight axles that

37
00:02:36,150 --> 00:02:48,260
post to API users sign up and I'll pass along the email and password as the second argument let's then

38
00:02:48,260 --> 00:02:50,180
take the response coming back from this

39
00:02:53,760 --> 00:03:01,130
and right now I'll do a console log of response that data just you know whenever axles gets a response

40
00:03:01,130 --> 00:03:06,560
from some requests the actual response data is available on response dot data is going to make sure

41
00:03:06,560 --> 00:03:11,600
that we get back something that looks like a user something that describes we just signed in as well

42
00:03:11,600 --> 00:03:17,840
then save this I'm going to flip back over to my browser and again if you did not wait for everything

43
00:03:17,840 --> 00:03:22,850
to be restarted then you're going to get an error when you run this code or more relevant when we even

44
00:03:22,850 --> 00:03:28,070
try to refresh our code because I tried to use the awake keyword right here without marking the enclosing

45
00:03:28,070 --> 00:03:29,790
function as async.

46
00:03:29,810 --> 00:03:32,630
That's better.

47
00:03:32,680 --> 00:03:33,830
Now the error went away.

48
00:03:33,860 --> 00:03:38,090
So again if you tried to submit this form now and you get an error about Acciona being undefined or

49
00:03:38,090 --> 00:03:42,380
something like that you need to make sure that you wait for axioms to be installed.

50
00:03:42,470 --> 00:03:45,350
Well then go ahead and enter in an email address right here.

51
00:03:45,370 --> 00:03:53,990
So do you test 20 at test dot com and a password or then hit sign up and there's the response right

52
00:03:53,990 --> 00:03:54,950
there.

53
00:03:54,990 --> 00:03:59,290
So I've gotten email and the I.D. of the user that I just signed up as.

54
00:03:59,480 --> 00:04:06,110
And in theory I now have a cookie tied as well that identifies me to the back end server.

55
00:04:06,110 --> 00:04:14,100
If I go over to network and find X H.R. right here I can then click on sign up take a look at the headers

56
00:04:14,100 --> 00:04:19,800
tab and if I find it response headers I should see inside of here a set cookie.

57
00:04:19,800 --> 00:04:21,120
There it is right there.

58
00:04:21,120 --> 00:04:24,690
So remember the set cookie header is what sets a cookie.

59
00:04:24,690 --> 00:04:28,500
My browser is going to intercept this header and automatically manage that data.

60
00:04:28,500 --> 00:04:33,700
Now any time I make a followup request to the back end server this cookie it will be automatically included

61
00:04:33,700 --> 00:04:34,430
with the request.

62
00:04:34,430 --> 00:04:37,770
And remember is a mechanism that identifies us.

63
00:04:37,860 --> 00:04:39,750
Well I'd say this is a good success.

64
00:04:40,050 --> 00:04:45,020
However do remember that we put in some actual validation for this thing as well.

65
00:04:45,060 --> 00:04:47,960
We said that email must look like an email right now.

66
00:04:47,970 --> 00:04:53,790
If I change the email input to an invalid e-mail and then tried to submit I definitely get an error

67
00:04:54,830 --> 00:04:56,600
so there's the air request right there.

68
00:04:56,690 --> 00:05:02,510
If I take a look at the response there is our standard error formatting but we are not actually showing

69
00:05:02,510 --> 00:05:06,920
this information anywhere on the screen so this definitely looks good but we still got a little bit

70
00:05:06,920 --> 00:05:07,940
of work to do.

71
00:05:07,940 --> 00:05:12,170
Let's take a quick pause and then add in some of this actual validation handling in the next video.