Coding

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