- 00:00:01 welcome back welcome to another video in
- 00:00:04 this series now in the last videos we
- 00:00:06 set up our back end and we implemented
- 00:00:08 back an authentication so that we're not
- 00:00:10 able to create any quotes if we're not
- 00:00:12 locked in in the very last video so we
- 00:00:14 did this in angular 2 we added some
- 00:00:16 views which allow the user to sign up
- 00:00:18 and sign in and sent this token to the
- 00:00:20 server and now we're going to do the
- 00:00:22 same thing with view chess now for this
- 00:00:24 I opened the application you're in view
- 00:00:26 chess and if we open up the developer
- 00:00:29 tools and the console you see that if we
- 00:00:31 treat try to create a new quote like
- 00:00:33 here and you quote and we send this we
- 00:00:36 get an error and this error occurs
- 00:00:38 because well we're not authenticated
- 00:00:40 we're not sending a token with the
- 00:00:41 request so we need to make sure that we
- 00:00:44 do a sense at your token and for that as
- 00:00:45 mentioned before we need to sign up a
- 00:00:47 user I'll go back into my view chairs
- 00:00:50 project for this and I think it makes
- 00:00:52 sense you create a new component for
- 00:00:53 this because we have components for
- 00:00:55 creating quotes and seeing all the
- 00:00:56 quotes now signing up a user is brand
- 00:00:59 new task and therefore destroys its own
- 00:01:01 component so I'm just going to call this
- 00:01:04 signup dot view and in this file here I
- 00:01:08 of course need a template as an every
- 00:01:10 view component and of course we're going
- 00:01:12 to have a script section where we handle
- 00:01:13 the submission of this form so in the
- 00:01:15 template I'm going to create a form
- 00:01:17 element without an action of course
- 00:01:18 because we don't want to send HTTP
- 00:01:20 requests which would be the default if
- 00:01:22 we leave the action on that but instead
- 00:01:24 we want to handle the form submission
- 00:01:25 through view chess now four days for
- 00:01:28 more for the signup process we need a
- 00:01:30 couple of fields like the user name the
- 00:01:32 email and the password so I'm going to
- 00:01:34 use some bootstrap classes since we
- 00:01:36 install the bootstrap CSS framework in
- 00:01:38 this project here so the first thing
- 00:01:40 which I'm going to add here is a div
- 00:01:42 with a form Group CSS class on it this
- 00:01:44 is normal bootstrap CSS class and then
- 00:01:46 there we're going to have a label for
- 00:01:48 our user name or we say user name for
- 00:01:50 example and below that a input field and
- 00:01:53 this input field will be of type text
- 00:01:55 and it will be or will have a ID of user
- 00:01:58 name a name of user name and we'll have
- 00:02:01 a class of form control just to give it
- 00:02:03 some styling now with this with gooch as
- 00:02:06 we want to bind this user name to a
- 00:02:07 property of our view chairs instance
- 00:02:10 here therefore in the script section and
- 00:02:11 of course exporting my view chairs
- 00:02:13 object in this component
- 00:02:15 and they're all at the data method and
- 00:02:17 there we are always returning this data
- 00:02:19 object on this data object I'll add a
- 00:02:22 user name property which by default is
- 00:02:24 just an empty string and with that added
- 00:02:26 we can add the v-model directive to this
- 00:02:29 input and bind it to our user name data
- 00:02:32 field and I'm just going to format this
- 00:02:35 a bit differently so that it's easier to
- 00:02:36 read now with that in place we're
- 00:02:39 fetching the first field the first data
- 00:02:41 point we need the user name now let's
- 00:02:44 quickly duplicate this to also fetch the
- 00:02:46 email and T password now for the email
- 00:02:49 here I'm of course going to change the
- 00:02:51 ID and name of this to email let's also
- 00:02:54 put email or just mail on the label here
- 00:02:57 and let's change the property to which
- 00:03:00 we bind to email you now clearly we
- 00:03:02 haven't created that yet so let's
- 00:03:04 quickly add in our data field down there
- 00:03:06 email which is empty by default – and
- 00:03:09 then here for the password I'm going to
- 00:03:13 do this a very same change the type cube
- 00:03:15 password here and of course put password
- 00:03:17 on the label and bind to the password
- 00:03:21 data property again we need of course we
- 00:03:24 need to add this down there now another
- 00:03:27 thing I'm going to change is that I'll
- 00:03:29 set the type of my email from text to
- 00:03:31 email here just you get some built-in
- 00:03:33 validation and that's some important
- 00:03:36 step we could add a better validation
- 00:03:39 here with some third-party package
- 00:03:41 because view chess itself doesn't
- 00:03:42 include validation we could add a
- 00:03:44 package like V validate I'm not going to
- 00:03:47 do this year since I really want to
- 00:03:48 focus on the signup process but that
- 00:03:50 would be a great enhancement of this to
- 00:03:52 make sure that if the user enters some
- 00:03:53 wrong data you instantly show an error
- 00:03:55 or something like that
- 00:03:57 now with that we're binding all the
- 00:03:59 inputs we do have our form the missing
- 00:04:02 piece of course is that we need a button
- 00:04:03 to submit this form so I'll make this of
- 00:04:06 type submit and simply say sign up on
- 00:04:09 the button let's give it some bootstrap
- 00:04:11 styling like button button primary and
- 00:04:14 they're important let's add a click
- 00:04:16 listener and honest' click listener I'm
- 00:04:18 going to add a modifier with dot prevent
- 00:04:20 now what this does is it makes sure that
- 00:04:23 once we click this button we're not
- 00:04:25 doing the default of submitting the form
- 00:04:26 it prevents the default that is white
- 00:04:29 called prevent and instead we only
- 00:04:30 execute with the code we specify here so
- 00:04:33 I want to execute you let's say sign up
- 00:04:35 method you can call this whatever you
- 00:04:37 like so let's add this method here in
- 00:04:39 our view object under the methods object
- 00:04:42 I'm going to add sign up as a method and
- 00:04:46 this is going to get executed whenever
- 00:04:48 we can well click this button and try to
- 00:04:49 submit our form now before I continue
- 00:04:51 with this let's quickly hook this sign
- 00:04:53 up component up in our routing so that
- 00:04:55 we can actually see if it looks all
- 00:04:57 right so I'm going to add a new route
- 00:04:59 here in our routes array path could be
- 00:05:01 just well let's say sign up and we load
- 00:05:05 the sign up component which I of course
- 00:05:08 need to import here so at the top below
- 00:05:11 the average components here I'm going to
- 00:05:13 import sign up from top slash components
- 00:05:17 sign up dot view with that we do have
- 00:05:20 this route registered and in our
- 00:05:23 application if I now go at you slash
- 00:05:25 sign up here we see this form and yeah
- 00:05:28 it's a bit broad but you could of course
- 00:05:31 narrow it down but it has all the fields
- 00:05:33 looks alright and if we hit the button
- 00:05:35 right now nothing should happen which is
- 00:05:38 the case so this is looking good we
- 00:05:40 prevent the default now let's send this
- 00:05:42 HTTP request to actually create the user
- 00:05:44 on the backend or well before doing this
- 00:05:47 let me quickly add entry to our menu so
- 00:05:49 that we actually can go to the signup
- 00:05:51 page without having to type it in the
- 00:05:54 address bar so two slash sign up and
- 00:05:57 then simply add sign up here as a text
- 00:06:01 and with that we have a more convenient
- 00:06:02 way of going there yeah there it is
- 00:06:04 let's add a pipe symbol in between just
- 00:06:07 for styling reasons that looks alright
- 00:06:10 now to the HTTP requests we already send
- 00:06:13 HTTP requests for example when we submit
- 00:06:16 a new quote we use X yes for this and of
- 00:06:19 course you could use another package but
- 00:06:20 yeah I of course will stick to access
- 00:06:22 sets we already use it in this project
- 00:06:24 and we see how we can send a post
- 00:06:26 request here with the post method now we
- 00:06:29 also know which route to target I'm in
- 00:06:32 the backend code the label code in this
- 00:06:34 case here and there we created a couple
- 00:06:37 of user lighted routes these two routes
- 00:06:39 here now here I have to slash user
- 00:06:42 route and that is the route which when
- 00:06:44 receiving a post request will try to
- 00:06:47 sign a user up to create a user
- 00:06:49 targeting this signup method in the
- 00:06:51 controller so it's a post request to
- 00:06:54 slash user which will initialize you
- 00:06:56 signup process on the backend
- 00:06:58 therefore I'm simply going to copy this
- 00:07:00 code from the new quote component and
- 00:07:03 added an ease signup method in the
- 00:07:05 signup component with this we're always
- 00:07:08 there of course I need to import
- 00:07:10 Axios so I'm going to copy this import
- 00:07:13 statement here too so that we can use it
- 00:07:15 in this file
- 00:07:16 let me quickly put it in here and of
- 00:07:19 course the route is not correct
- 00:07:20 we shouldn't target API slash quotes we
- 00:07:23 should target API slash user or was it
- 00:07:26 users no just users so that is the route
- 00:07:29 we should target and the con that we
- 00:07:31 send of course is a different one tune
- 00:07:33 if we have a look at our back-end at the
- 00:07:36 controller which will receive this
- 00:07:37 request there's just a user controller
- 00:07:39 and their design up method we see that
- 00:07:42 we require a name an email and a
- 00:07:44 password so we should make sure that
- 00:07:46 these three fields are there when we
- 00:07:49 send a request so the name should of
- 00:07:51 course keep or hold our username the
- 00:07:55 email should store our well email and
- 00:07:59 the password should of course send this
- 00:08:01 password the user entered which we store
- 00:08:04 in this data property here so this looks
- 00:08:07 alright one more thing we need to do
- 00:08:09 though we have some validation in place
- 00:08:11 on the back end here which is very
- 00:08:13 important because we don't want to
- 00:08:15 create a user if any of these data
- 00:08:17 fields is not valid if email is not an
- 00:08:19 email or something like that so in order
- 00:08:22 for this to work correctly and for
- 00:08:24 lateral to identify that we're sending a
- 00:08:26 request via Ajax we need to set a
- 00:08:29 specific header and we do this by
- 00:08:31 passing a third argument to the post
- 00:08:33 method which also is a JavaScript object
- 00:08:35 where we can configure this request
- 00:08:38 now you could pass a lot of
- 00:08:39 configuration to that the configuration
- 00:08:41 we need here is the headers field and as
- 00:08:44 a side note if you want to find out more
- 00:08:45 about the possible configuration you can
- 00:08:47 pass of course the official page on
- 00:08:49 github about X's it's the right place to
- 00:08:51 get started now the headers field here
- 00:08:54 simply takes an option
- 00:08:55 as a value and there we need one
- 00:08:59 specific header and this is X requested
- 00:09:03 with we already sent this header in the
- 00:09:05 angular 2 front that you of course need
- 00:09:07 to do it here to the value of this field
- 00:09:11 of this property is the xml httprequest
- 00:09:15 to simply tell our back-end that this
- 00:09:17 ascends yhx requests now with this in
- 00:09:20 place we should be able to submit this
- 00:09:22 and to sign a user up so let's see if
- 00:09:25 this works as expected by opening up the
- 00:09:28 console
- 00:09:29 let me quickly clear it here and then
- 00:09:31 I'm just going to choose any user name
- 00:09:34 here and enter let's say a test email
- 00:09:36 address some password here
- 00:09:40 let's hit submit and this looks alright
- 00:09:44 we get back an answer where these status
- 00:09:46 text is created let's also have a look
- 00:09:48 at the database and there if we open up
- 00:09:51 the users table we clearly see that an
- 00:09:53 user was created the date looks about
- 00:09:55 right and we see that all the data was
- 00:09:58 stored the data we entered so with that
- 00:10:00 we create the user on the back end now
- 00:10:02 let me quickly show you what happens if
- 00:10:04 we send invalid data like for example
- 00:10:06 omitting the @ sign in the email address
- 00:10:09 if I hit sign up now we correctly get
- 00:10:11 back this error with status code 422 and
- 00:10:15 processable entity now of course you
- 00:10:17 could catch this error we already do
- 00:10:20 catch it actually but of course you
- 00:10:21 could use this error now to show a modal
- 00:10:24 to display it in the view here in our
- 00:10:27 template I'm not going to do this here
- 00:10:29 though because I really just wanted to
- 00:10:30 focus on submitting the data and that
- 00:10:32 works we're able to sign up a user now
- 00:10:34 that we have such a user on the backend
- 00:10:36 we can use this in the next video where
- 00:10:38 we will actually implement a sign-in
- 00:10:40 functionality to not only create users
- 00:10:43 but to use them to issue JWT tokens to
- 00:10:46 the front-end before we then have a look
- 00:10:47 at sending those tokens see you there
- 00:10:49 bye