Coding

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