- 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