Svelte & Django - User Registration with Svelte + Django!

in this video we're going to show how we can add registration to the spelt and the jangle application that we built so we're going to allow users to sign up to the application using spelt and forms on the front end and that's going to send that data and requests to the back end and this is going to allow the users to log in and we'll build the login and log out functionality in a future video so if you need to build registration with a single page application that uses a jangle backend the concepts in this video are going to be useful so let's dive in and get started now in order to create a registration for this application we're going to start by looking at the jangle back end we have the models.py file open here and what we're going to do is we're going to allow the user to register and we need to write a few different things in jangle in order to be able to do that so we're going to need a serializer class for registration and we're also going to need to build a URL and view combination here in order to allow the user to register from our spelt front end now we're going to use the built-in Django user model in this video and we're going to write a serializer now in the serializers.py file so we already have the film serializer from earlier in this series I'm going to go below here and I'm going to create another class and I'm going to call this user registration serializer and that's going to inherit from the serializer module and rest framework and the class within that is the model serializer and a model serializer is kind of similar to a model form it's a serializer that's tied to a model in our jangle application now we're going to define a meta class within this and again we're going to link the model to D jango's user model and we need to import jango's user model so let's do that now and that's from the contrib do off. models package and to allow a user to register with the application we need a couple of fields that are attached to the user model we're going to need the username field and we also need the user to send a password so in other words the jangle API is going to expect a username and password to be sent in the post request in order to create this registration for a user now I want to add some custom configuration for the password field so we're going to Define that field explicitly here in the serializer class and I'm going to set this to a serializers docar field and we're going to specify some options here we'll give it a max length of 128 and because it's a password let's say the minimum length should be 8 characters and finally I want to pass the right only equals true argument and that makes sense for a password we don't want the password field coming back in any read requests or any get requests this should be a field that we can write to only and the final thing I want to do in this serializer is override the serializer create method and that takes the validated data as a parameter and I'm going to add a comment in this method here to explain what we're doing what we want to do is we want to override the creation process to make sure that the users's password is hashed when we create a new user in the database so that's the comment that's the purpose of overriding the serializer create method and by the way that's optional you don't need to override create if you're happy with the default Logic for that model now what we want to do here is create a user and we're going to use a method from the orm and the user object or the user manager here has a function called create user and that create user function is slightly different from the normal create method that you can get on a model and that's because among other things what it's going to do is take care of hashing the password so we can pass the username in here by looking at the validated data and getting the username key from that and I'm going to copy that line of code and what we're going to get as well as the username is of course the password and we're going to look at the validated data and get the password fied and again this will not store the raw password in the database when it creates the user in that database table it's going to Hash that and store it more securely using the create user method once we've created the user we can actually return that and that's the end of our custom create function once we have the serializer what we're going to do is create a new view in this application and the new view is going to allow us to register a user now this will be a create only endpoint spelt is going to send a post request with the user details which is only the username and password and we're either going to successfully register the user or get back an error and why might you get an error for example the username might already exist in the database now for a post or a create only endpoint we can use another class from Jango rest framework so at the top I'm going to import a class called the create API View and that's from the rest framework. generics module and what we're going to do here is we're going to create a class and I'm going to call this registration API View and that's going to inherit from that create API View and then what we can do is Define some fields in that class that are going to tell jangle R framework how to deal with the request that's coming into this endpoint now the first thing we want to do is set the serializer class as we did above and what we're going to do is import the new registration serializer that we have from the serializer file and I think that was called user registration serializer so let's import that and we're going to set the serializer class to that and we can also set the model for this create API view so again at the top I'm going to bring in jango's user model and then if we go back down to our class we're going to set the model to the user model now we're about to add authentication to this application in a future video so what I also want to do at the top is import something else from rest framework and that's from the permissions module we want to import a permission called allow any and this is going to allow any access to the endpoint and that makes sense for registration if you're registering on a website you need to be able to access the registration page and send requests after we've imported allow any we can set another field in the class and that's the permission classes and that's a list and in this case it contains a single element and that's the allow na permission now once we have the registration API view what we're going to do is go to urls.py and if you remember from the previous videos what we have here is a jangle rest framework default router and we registered the film view set with that router and then we set the URL patterns to the router URLs we're now going to extend the URL patterns here and we can use this syntax here we're going to add another list and that contains a single path in jangle and let's give this a URL of register and at the top we've imported from the views module the film view set we're also going to import that class we've created called registration API View and we can then use that and we call the as view function here in order to use that within the path and that's going to allow us to send post requests from spelt to this register endpoint and the API view here the class that we defined a minute ago here that's going to handle that post post request using this serializer and this model now we can test this out on the Jango RIS framework browsable API so I'm going to go to the browser now and here is the page for this new register endpoint as you can see we're not allowed to send get requests to this page but what we can do as you can see at the bottom is submit a post request and we have an HTML form here that allows us to do that and I've submitted some details here we have John O2 as the username and my secret password as the password and of course in the real application you would want to make this a password field in HTML so that we don't see this text but we're only going to be sending API requests to this endpoint anyway so we don't need to worry about that but if we hit the post here it's going to submit the form and as you can see we get back the user with the username of John do2 so that user now exists in the database it's been added by our view that uses that serializer in order to create the user and that's going to work by using the serializer create method which we've overridden here in order to securely add the user's password so that's the Django side of things we're going to go to the spelt application and we're going to create a page that allows the user to register with the application and we're going to add a form that's kind of similar to what you see here on the browsable API but it's going to be done in spelled so let's go back to vs code and I'm going to close down the back end folder and now we're going to go to the front end folder that contained the spelt application now we're going to create a new page here so in order to do that we have to go to the routes directory and remember this is folder based routing so if we create a folder it corresponds to a route path in the application so what we're going to do under routes is create a new folder and I'm going to call it register and in order to make that a spelt page we can create a file called page. spelt now we're going to start with the JavaScript at the top here so I'm going to paste some code in we have the script tag and we're setting some values here we have a username set to an empty string by default and a password also set to an empty string and we have a JavaScript object which is empty for any errors now if we go down here we can Define the HTML code for this component so let's create a Dev to surround this code and we're going to use some classes from bootstrap here so by default column 12 and on mediumsized screens and above we'll cut that down to column 4 We're then going to add a header to the page and that's going to say register and I'm using an H2 tag here in order to do that and then we're going to Define an HTML form that's going to allow the user to actually submit the form and send the username and password to the server so each form field I want to surround in a div with a class of margin bottom three and we can define an input here for each field in the form so for example we have the first field which is the username field we're going to give this a class of form control from bootstrap and the username field is going to be of type text and let's also give it a placeholder and we'll set that to username now what I want to do is use a directive in spelt here and we're going to bind the value of this input field to one of the fields that we have above in the script tag in the JavaScript Dynamic code and that field is going to be of course the username field so we're binding the value of whatever's in this input to the value here in this script tag and that means when a user types into this input it's going to update the value of this username now once we've done that I'm going to close off the input tag here and I'm actually going to copy this div entirely and I'm going to paste it below and what we want to bind here is the password field so we're going to set this to the password that we have above and let's set the placeholder to password as well and the input is going to have a type of password and that's going to hide the the text that the user is typing in as they type that on the page and once we've got the divs within the form we're going to define a button and let's give that some classes from bootstrap so it's going to be button and button primary and this is very basic styling but it's going to do for this application and we'll give the button a type of submit and let's give it the text of register so let's now go to this page in the application it's going to be at the root of the application and because we're in this register directory it's going to be SL register so let's go back to the browser and I'm going to go back to to the application we're at the/ films route I'm going to change that in the URL above to register and let's see what comes up here we now have the form and one thing you might notice is that the nav bar is gone so if we go back to the film page we had this nav bar at the top but on the register page that is gone and why is that that's because we have a layout. spelt file here in the films directory and this layout. spelt file basically defines the naar and that layout will be inherited by all components that are in this directory and all child directories but the problem is we are now in a separate directory it's a sibling directory called register so the layout that we have here is no longer applied now there's a very simple solution here we can move the layout file that we have to the top level into the routes directory so I'm going to do that now so I've moved layout. spelt out of the film's directory and it's now at the top level in the routes directory so let's go back to our page and I'm going to refresh this page in fact that's already done that automatically and we now have the nav bar appearing at the top and we have some extra Styles appearing here her form is now not right at the left hand side of the page and that's because in the layout. spelt file we have this slot and that's where the actual HTML code from the component is injected into the page and that is a child of a div with the bootstrap class of container which gives it some extra margin to the left and right now one thing I want to do while the component is in this very initial State here is I want to copy it and we're going to do a video on how to do log in and log out with spelt and Jang and we're going to use exactly the same form with a username and password to log in so under the routes directory I'm going to create a new folder which we'll call login and we're going to add a page doel file to that as well and then paste in the code here and I'm going to change a few things for example the header should say login and the button at the bottom rather than saying register should also say login so that's perfect we'll come back to the login form in a future video what we need to do when the user registers we need to actually wire up an onsubmit Handler here so when the user clicks the submit button we want some code to run so what we're going to do in the form element is we're going to set up a submit Handler and when we submit the form we want to prevent the default action and then we're going to set this to a Handler function I'm going to call handle submit and we need to Define this function in our JavaScript above here so let's go to the script tag and we're going to define a handle submit function and that's going to be an arrow function here that's going to handle what happens when the user submits the form now what we need is an endpoint in order to submit this request too and that was API SL register after we have that I'm going to set a variable called request options and that's going to be a JavaScript object and the method for the request is going to be a post request and I'm going to set some headers here and that's very simple I'm going to copy the content type header and we're going to set that to application sljs and the final thing and the most important thing is the body that we're sending in that post request we're going to use javascript's json. stringify function and we're going to Define an object here that we want to convert to Json data and that object is very simple it's going to have a key for the username we going to set that to the value that's in the component above here and similarly we want the password to be sent in this request as well so we're going to set that as another key in the object so that's the request options we now need to send the request itself and we're going to use the fetch function for that and we're going to send the request to the endpoint that we defined on line 7 and we can pass the request options in here as a second parameter now after we send the fetch request we're going to get back a promise and when that promise resolves we'll have the response we can convert that to a JavaScript object by using response. Json and then when we get back the data we can handle this data but first of all what we're going to do is just console.log what we get back from the server and we're going to see what that is in the browser console so let's try this out I'm going to go back to the browser and we're going to actually try and submit this registration form so let's give the user a name of John do version 3 and we'll set a password up here as well now I'm going to click the register function before I do that let's bring up the developer tools here on the right hand side and when we click register you can see we get back the object containing the username and that contains the newly registered username this username is now present in the database in the jangle user table so it's been created on the back end using that view that we created and the serializer for registration and soon we'll send the user to a registration successful page after they successfully submit that form now if we click register again here we get back something different and that's a response code of 400 and the problem that we have here of course is that the user already exists in the database with that username so we can't resubmit the same user here so we're going to need to handle the logic to check whether or not the response contains what we expect or whether there has been any problems so let's go back to our code and rather than just console. logging the data we're going to check the data. status and if that is equal to the 200 101 HTTP Response Code we know that the user has been successfully created and we're going to do this part of the code a bit later on we're going to send the user to a registration successful page but if we don't get a 2011 response we have the else block here and what we're going to do here is we're going to create the Errors By looking at the data and looking at the body of that data now this errors variable refers to what we have here in the component which is a JavaScript object so that's going to populate that with the data. body body attribute and let's finish by console. logging the data itself if there is an error now when we set these errors we want to actually show something on the form for each key that we have in the serializer and that was the username and password key if there are any errors for that field these errors will be returned in an object and the key in the return data will be the name of the field itself so for example if the username already exists we'll get back an object containing the errors and it's going to have a key of username and any errors are going to be present in the value for that key now let's go back to the browser again where we had that error before so if we look at the errors here we had a username and then that contains an array and the single element in that array says that the username already exists and I'm going to show another example here so if be filling a random username but we have a password that's too short if we try and register here we get back a different array but again the key is the name of the field so the key here is password and the value is an array that contains a single error that the field needs to have at least eight characters so we're going to add these messages to the form to give some feedback to the user when they register and they encounter a problem so let's go back to VSS code and we're going to go back to the page. spelt file now the errors are going to be populated by looking at the data. body and because those errors have a key that is exactly the same as the name of these fields we can add some code to actually render out the error just below the field itself so let's go after this input here for the username and we're going to use a spelled conditional here so we're going to use this syntax here it's an if statement we're going to check if the errors are populated and we're going to check if the errors. username field exists and let's close off this if statement below now the logic in here is just going to be defining an HTML field in this case it's going to be a paragraph tag and because it's an error we'll give it a class of text danger to make it that danger color which is red and what we're going to do is we're going to look at the errors. username attribute so errors username we know that is populated because we've checked it above here so the errors object contains a key called username and we know that's an array we saw that in the browser so we're just going to extract the first value from that array by indexing in at element zero and that's going to be the text that appears in the paragraph tag so if we go back to the browser the text that we see here will appear just underneath the field itself in a paragraph tag with the color red so let's go back to VSS code and I'm going to check again for the password field if there's any errors so we're going to create this block of code below the password and we need to change the field that we're checking to password here but that's the only change we need to do and again if there's any errors that are related to the password field they're now going to show up on the form so let's test that out and see if that is working what we're going to do is we're going to try and submit another user with a password that's not long enough so when we do that we're getting back the response but we're not seeing the expected text so let's go back to the page here and I'm going to try and find out what's went wrong here now I think the problem is related to the code that we have above here in the handle submit function when we send the Fitch request what we're doing when we get the response is we're just converting it to adjacent but I'm checking for some properties here but I've not added the code above to add a status and a body to what we're getting back here so when the response. Json call resolves we're checking for status and body here but they don't exist on the object so what we're going to do is change up this line of code we're going to convert the object to Json and then within this block here I'm going to use then and we're going to get some data here after response. Json resolves and what we're going to return is another object here and that's going to have a key called status that's going to be equal to the response. status property and we're going to have a body that we're just going to set to the data itself so let's explain this line we take response. Json which returns a promise when that promise resolves we get back a JavaScript object called data and we're going to take that data and return a new JavaScript object containing two Fields the first field is the status and that's going to be the status code of either 2011 or 400 and so on and that's what we're checking below here we're checking if that status is equal to 2011 and as well as the status we're also going to add the body of the response by setting that equal to the data that we have here and that's what we're doing here when we set the errors to data. body and that's going to give us back the correct object with the correct keys that we get back from the response and that happens whenever there's an error when we submit the form so let's now try this again we're going to go back to the browser and let's submit a user that has a password that doesn't have the correct length and you can see now we are actually getting the error shown below the field and that will apply to the username as well so if we submit a username that we know already exists and we submit a password we're going to get back the error here for the username and both of these can appear at the same time because we're checking the conditions within the spell component for both of these and this one's for the username and the one below here is for the password now we're going to finish the video by creating a registration successful page so if we're able to register a new user in this application we want to actually redirect the user to a new page and show them that the registration has been successful so let's go back to our spelt application and we're going to go back to the routes directory here and under the register directory let's create a new folder for a new route and that the success folder and within the success folder to create a component we need to create that page. spelt file now this is going to be a very simple page it's not even going to contain some Dynamic JavaScript it's just going to contain some HTML so I'm going to paste in this code here we Define a div with some Flex classes and then we have a header tag with the class of text success that says registration successful and we also Define a paragraph tag with a link back to the login page and that login page is what we created earlier in the video when we copied the early stage registration form over to a login component so we're redirecting or we're giving a link to the user that allows them to go back to a login page and that makes sense when we've registered the user might then want to go and log to the application now we'll do log in in the next video but the last thing we need to do in this video is redirect the user to this registration successful page when they have successfully registered so in order to do that we're going to go back to our handle submit function within the register component and it's this to-do section here when the status that we get back is 2011 that means the object has been created on the server and so a user has been stored in the database table in jangle what we now need to do is we need to redirect the user to Our Success page and we're going to use the goto function that we saw earlier in the series and that comes from spelts app navigation module so we're importing goto so let's copy that and go back to this line of code if the the status is 2011 that means we are going to redirect the user to a new page and we can provide the path to that page here it's going to be/ register SL suuccess so let's test this out one more time if we go back to our page what we're going to do is submit a new username and I'm going to say John do version 4 and we can give that guy a password when we register here we're actually getting back that the username already exists so let's try it with another username this time when we register we redirected to a new page saying that the Reg registration has been successful now I'm going to go back to jangle here and I'm going to go to the Jango admin UI and I'm going to log in with my admin user now in the admin we have access to the jangle users table and that lists out all of the users that are stored in the database and we can see our new user from the spelt application joho version 5 he is now in the database so that user has been successfully created and how that's been done is by using a form in our spelt application the user then fills out their details and submits that form and what happens in spelt is that we send a request to our jangle backend at API register and we attach the username and password as Json data and then send the request using the fetch function and then on our jangle back end the request comes into this View and that's the registration API View and we have a serializer here called user registration serializer and that takes that Json data and basically creates a user instance from that data and it does that by in this case using this create function we have overridden the default create function on the serializer in order to serialize the password with the user doobs do create user function so again if we go back to the admin and we look at the user that's been created the password that we see here that has been hashed using jango's hashing tools so that's securely stored in the database and that's all for this video we've shown how to implement registration from a spelt application with ajango back in the next video we're going to tackle log in and logging out using D Jango and spelt and I'm hoping to get that released at some point in the next couple of weeks we're also going to be looking at a new series with HDMX and D jangle so stay tuned for that as well give the video a thumbs up if you've not already done so And subscribe to the channel be greatly appreciated thanks again for watching and we'll see you in the next video

Channel: BugBytes

Views: 1,504

Keywords:

Id: redouj2F6Gw

Length: 25min 25sec (1525 seconds)

Published: Wed Feb 21 2024