SIGNING UP WITH VUE.JS | Laravel + Angular 2 / Vue.js 2

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

You may also like