SIGNUP IN ANGULAR APP | Laravel + Angular 2 / Vue.js 2

00:00:01 welcome back to this series in the last
00:00:04 produce we added authentication on our
00:00:06 server so that we can make sure that we
00:00:08 issued hogan's to authenticated users
00:00:11 and that we can then check tokens pass
00:00:13 by those users to the back end to make
00:00:15 sure or to decide whether access to some
00:00:18 resources should be granted or not time
00:00:21 to now work on the front end beginning
00:00:22 with angular 2 to implement it sign up
00:00:25 sign in and so on process and also to
00:00:27 send the quotes there as d tokens there
00:00:29 to the back and to get some quotes or
00:00:31 create quotes now I will start with sign
00:00:34 up and sign in and then we will work our
00:00:36 way forward to storing the token and so
00:00:38 on so let's start in the project your
00:00:42 open in web store my ID by generating
00:00:45 two new components so with ng generate
00:00:48 component I do this with the CLI the
00:00:51 first one will be these sign up
00:00:52 component and yeah I just use different
00:00:55 words Justice Eli let's find here though
00:00:57 then use do the same for sign in so that
00:01:01 we get two new components here sign in
00:01:03 and sign up page and I want to include
00:01:05 those pages in the routing so here I'll
00:01:08 quickly add new routes to my routing
00:01:10 file so I will have a sign up route and
00:01:15 I will have a sign in route like this
00:01:18 and I want to load these sign up
00:01:20 component here of course in this case
00:01:22 and you sign in component in the sign in
00:01:25 pause case here make sure to add those
00:01:28 imports to the route file and also make
00:01:30 sure to add those new components to your
00:01:32 app module it's done automatically by
00:01:34 the CLI but if you're not using the CLI
00:01:36 or the SEMO didn't do it make sure to
00:01:38 add those components three declarations
00:01:41 array as well as the imports up here
00:01:43 manually with that we got to EQ pages
00:01:47 and place your components now in the app
00:01:50 component here in my header which is not
00:01:53 super pretty I will add them and to make
00:01:55 it easier to differentiate all those
00:01:57 items I'll add little pipes in between
00:01:59 and then simply duplicate this twice to
00:02:02 also have a route leading cue my signup
00:02:06 route and then one to the sign-in page
00:02:09 and of course renamed is here to sign up
00:02:12 and rename it here to sign
00:02:14 then all the Knights are styling
00:02:16 something you can do I want to focus on
00:02:17 on the cooler here which is how does it
00:02:19 work so let's work on the signup page
00:02:22 done we should have a way of reaching it
00:02:25 let's quickly check if this is the case
00:02:27 if we let this reload and click on
00:02:30 signup looks good so let's go to the
00:02:32 signup component HTML file and in there
00:02:35 I want to create a new form remove the
00:02:39 action because we will let angular
00:02:41 handle this form submission and then
00:02:43 there let's start with a form group this
00:02:46 is a bootstrap class to give it some
00:02:47 nice your styling where I want to have a
00:02:50 label for my email address let's say so
00:02:53 for the mail address and below that I'll
00:02:56 have the input which is a type email
00:02:59 which will receive the email and I'll
00:03:01 use the template with an approach so
00:03:03 I'll assign a name of email here and
00:03:05 ngmodel important when using ng model to
00:03:08 use the template driven approach make
00:03:10 sure that in your app module you import
00:03:12 the for this module otherwise you will
00:03:14 get an error and all those forms
00:03:16 functionalities for template driven
00:03:18 approach will not be unlocked so with
00:03:21 that let's go back I added this input
00:03:24 with ng model on it you get access to
00:03:26 this later when we submit the form and I
00:03:30 also want to add the form control
00:03:32 bootstrap class to this input now we'll
00:03:34 quickly copy this twice and actually I
00:03:38 will replace the topmost one too may not
00:03:40 make it type and not for the email this
00:03:42 will be for Danai let's say the user
00:03:44 name so user name this will be then you
00:03:47 have type not tell text ID will be user
00:03:51 name and name will be username then we
00:03:54 have the email I just created and then
00:03:57 below that I want to have the password
00:04:02 so let's name it password here let's
00:04:05 name this one user name here at the top
00:04:07 to have all these inputs in place and we
00:04:10 could add a column fernfield and because
00:04:12 if you super deep into validation here I

00:04:15 want to that I want to focus on the one
00:04:17 soakin thing and so on so all I will do
00:04:20 is I will add a button here and this
00:04:22 button will be of type submit and will
00:04:24 allow me to sign up therefore since you
00:04:28 the temperature will approach in my form
00:04:30 on my full element I will use or listen
00:04:32 to ng submit which is fired when we
00:04:34 click the submit button here and I will
00:04:36 call on sign up in this case whoops
00:04:40 sign up like this and of course I need
00:04:43 to pass a reference to this form so I
00:04:45 get this with this trickier assigning
00:04:48 energy form to a local reference named F
00:04:51 this name is up to you of course and
00:04:52 then passing this local reference to the
00:04:54 on signup method this will pass the
00:04:58 JavaScript object angle shoe creates for
00:05:00 us this JavaScript representation of the
00:05:03 form it will be stored in this local
00:05:05 variable and they'll then be whoops and
00:05:06 will then be passed to on sign up if
00:05:09 this is all brand-new to you definitely
00:05:11 check out some tutorials on the template
00:05:13 you'll approach angular users with this
00:05:16 let's go to the signup component here
00:05:18 and implement the on signup method we
00:05:21 know that we get the form there so this
00:05:24 will be of type ng form not ng4 ng form
00:05:27 don't need to import ng4 so ng form make
00:05:31 sure to add the import from add angular
00:05:33 forms and in there now all I want to do
00:05:38 is I want you submit the form I want to
00:05:41 send it to the server queue create an
00:05:43 user to do so I will create a new
00:05:46 service i'll created here in the root
00:05:49 folder and I'll name it off service so
00:05:53 let's give it a class that will export
00:05:55 the class with the name of off service
00:05:57 and in there
00:05:58 I'll add the add injectable decorator
00:06:01 because I will inject something make
00:06:04 sure to add the import I will inject
00:06:06 something and that something is the bulk
00:06:08 in HTTP service because of course I need
00:06:10 to send an HTTP request to the backend
00:06:12 so make sure to import HTTP here cube
00:06:16 and with the dejected I'll create a
00:06:19 sign-up method here queue here I expect
00:06:23 to get the username which will be a
00:06:26 string I expect to get the email which
00:06:28 is a string and I expect to get the
00:06:30 password which is a string now with that
00:06:33 data received here I can reach out to my
00:06:37 back-end will send a post requester to
00:06:41 create a new
00:06:41 user and our URL our route is basically
00:06:46 the same as for the closed service so
00:06:48 this one you slash API at the end make
00:06:50 sure to enter this here but thereafter
00:06:53 it's slash user to create a new user
00:06:56 data see URL we set up on our back end
00:06:59 and you relics file in the API dot PHP
00:07:01 file in the routes folder of course I
00:07:03 need to pass a body to and the body I do
00:07:07 need to pass here is my is my middle my
00:07:12 data here so we could have a look at the
00:07:15 back end if we go to the user controller
00:07:19 we see that for signup we expect to have
00:07:21 name email and password fields we will
00:07:24 also validate in here so we should maybe
00:07:26 also add some front-end validation but
00:07:29 first things first
00:07:30 let's pass the name here which is our
00:07:32 username let's pass the email which is
00:07:34 our email and let's pass the password
00:07:36 which is our password to make this
00:07:38 easier to read I'll bring it into a new
00:07:40 line lastly I will add something else I
00:07:44 will add some headers so here I'll set
00:07:48 the headers on this third argument I can
00:07:51 pass the post method this object very
00:07:53 compares some additional configuration I
00:07:54 wanted to have some additional
00:07:56 configuration I want to pass some extra
00:07:58 headers so here I will set some new
00:08:00 headers which also receives the
00:08:03 JavaScript object as an argument to the
00:08:05 constructor make sure to import headers
00:08:07 from angular HTTP and in these headers
00:08:11 here I will basically set these same
00:08:14 headers we set here on postman remember
00:08:16 on headers oops not on on on the
00:08:19 response here on the request we set X
00:08:22 requested with so copy this X request
00:08:27 with and the value was XML HTTP request
00:08:31 this is required to make the validation
00:08:33 work application JSON as content types
00:08:37 should be set automatically we'll see if
00:08:39 it works and what's that the post

00:08:41 request is done is configured I can
00:08:45 return this observable it's not sent yet
00:08:47 as always this is just the observable we
00:08:49 create here but we can now send it so
00:08:53 back in the sign up component
00:08:55 well first of all I will quickly add
00:08:57 some basic validation here
00:08:59 so as you required validator for each
00:09:02 input and maybe disable the button with
00:09:07 the disabled property binding if the
00:09:11 form is not valid so this basic check
00:09:14 here but more important in the
00:09:17 typescript code in on sign up I want to
00:09:19 reach out to my music reads off service
00:09:22 so we need to inject us here the off
00:09:25 service like this make sure to import it
00:09:29 from your off service file also make
00:09:32 sure to provide it I will do this in the
00:09:34 app module here under providers you
00:09:37 should add off service too and also add
00:09:39 the import in this file – just like you
00:09:41 always do it with services and that only
00:09:44 types could file with the officer is
00:09:46 injected here in on signup I will reach
00:09:48 out to it call the sign-up method get my
00:09:51 forum value user name of the field name
00:09:55 my forum value email and my forum value
00:09:59 password to send all these data to the
00:10:02 signup method and then we can subscribe
00:10:04 to the observable we get returned here
00:10:06 so here in the SUBSCRIBE method I simply
00:10:11 want to listen to you any response I get
00:10:14 and I will lock this response to the
00:10:17 console and I will do the exact same
00:10:20 with any error
00:10:22 I might get just like this so to finally
00:10:25 make it work in the off service since we
00:10:28 haven't gotten the import DD map
00:10:31 operator therefore we didn't import rxjs
00:10:36 rx like we normally do we would get an
00:10:38 error like this so what we have to do to
00:10:41 avoid getting an error is we have to
00:10:43 import observable from rxjs there like
00:10:48 this we also right now need to import
00:10:52 response here this might look strange
00:10:54 because we are not using this type
00:10:56 anywhere in this file might be solved in
00:10:58 the later version of angular right now I
00:11:00 do need to add this import so if I save
00:11:03 this now we see our signup page here
00:11:06 loads correctly and now
00:11:09 let's give this but the nicer style
00:11:10 wheel will have that much time so let's
00:11:13 quickly assign button button primary it
00:11:16 shouldn't look super nice but at least a
00:11:18 little bit nicer
00:11:18 so let's now try this here crisp test2
00:11:23 should be valid email address which
00:11:25 hasn't been taken yet and then my lips
00:11:30 say this type here so my password let's
00:11:33 open up the console to to see any
00:11:35 potential errors and hit sign up and we
00:11:38 get this error why do we get this it has
00:11:42 something to do with our course set that
00:11:44 we implemented earlier in this series if
00:11:46 we go back to layer low and there we
00:11:50 have a look at our course milla we're in
00:11:53 the middle where folder we set some
00:11:55 allowed headers here and the header we
00:11:58 just added the X request with header is
00:12:01 not listed so let's simply add it here X
00:12:04 requested with and we didn't get this
00:12:08 error when using postman because postman
00:12:10 doesn't have two scores issue but we do
00:12:13 have the issue when using our JavaScript
00:12:15 application angular so I now add it as
00:12:17 header to the back end to the back and
00:12:19 to level to our course middleware
00:12:21 created early and serious and with that
00:12:24 adjust it let's simply try again now
00:12:28 that looks much better
00:12:29 successfully created user as you can see
00:12:31 let's look it up in the database in the
00:12:33 users table this is the new user I
00:12:36 created a second ago so this looks
00:12:39 pretty good
00:12:40 and what did we hooked up our front end
00:12:42 to be able to create new users now you
00:12:45 can improve this you can improve this
00:12:47 form the validation you can reset the
00:12:49 form that's not really the focus of the
00:12:51 series though I will continue in the
00:12:53 next video with authenticating users so
00:12:56 signing them in working on this sign and
00:12:58 page therefore see you there

You may also like