Django Starter with Allauth and Htmx

[Music] hello I'm Andreas chat your Tech curious web designer in this video we will create a Jango startup project basically a boilerplate code we can use as a foundation for our future projects let me demonstrate it to you quickly so this is our empty homepage where we can display a new project then here we have the login page and the signup page let's create a new user here we have a onping page where we can complete our profile let's upload anothera image ATA name and maybe some information then submit this is our profile page then here we have a drop down menu to my profile which is this page then we have a edit profile page this is basically the onboarding page modified with a different title and a different button then we also have a settings page here we can change the email address we're loading the form with hdmax so let's change the email address to + one and submit a confirmation email was sent but we can also click the verify link here to send the confirmation email manually and that will basically send the same email again let's verify this account now so I click confirm and the email is confirmed so if I refresh the page here we can see the email is now verified and we can also delete the account all right this is what we're going to build this tutorial is a bit Advanced building on the knowledge we've gathered from previous tutorial series I will not explain every little detail and will go through the steps quite rapidly so if you feel stuck or want to learn more about a specific concept you can always refer back to my tutorials for a more in-depth explanation let me outline to you now the steps we cover in this video we start by setting up Jango then we create a static homepage then we create Dynamic profile Pages then we set up all o for user authentication then we create a settings page to change the email address using HDMX and as last we also add a four four page all right now before we jump into the code a quick shout out to my new supporters on patreon a high five to csai Steven and jeno SEO thank you so much for your support I really appreciate it and now let's get started all right here we are in Visual Studio code and I'm inside an empty folder with the name Jango starter so first let's create a virtual environment I'm calling my virtual environment VNV then we activate the virtual environment I'm on a Mac here on Windows you would use a different path next I create a requirements. dxt file to install all the packages we need in this project I'm using here the touch command to create an empty file touch only works on Mac or Linux on Windows you would use something different but you could also install the WSL extension to get the same command on your window machine or just create the file manually that always works here we have now our requirements.txt file I'm adding now all the packages we need for this project first we have Jango below we need to upload images Jango cleanup deletes duplicated images D Jango all or we use for the login and sign up of users and we also add the D Jango HDMX package for HDMX support okay I saved the file and install them then I also upgrade pip all right the packages are installed we can close this file and start our Jango project with the start project command I'm creating the core folder then we do a migration to set up the database and start up the server with python manage.py run server all right let's check if Chango is up and running I go to Local Host column 8000 and we installed Jango successfully awesome okay now let's create a homepage for this we create a new app and I call it aore home then we need to add it to our installed apps in the settings toy file located in the core folder then we create a view this is a very basic view to render the home.html file then we add the path to this page so we go to the urls.py file here we have to import the home view next I'm adding the HTML file for my home H page which is stored in the templates folder let's create this folder now I'm using here the make directory command which should also work on Windows then we have to register this directory in the settings toy file and add the path here to the template section okay and now I'm setting up my template structure so we have a base. HTML file with a component components for every page then we have a layout template which renders different layouts for different pages and then we have the page itself which contains all the data so first I create the base. HTML file and the code for this based. HTML file we can grab for my GitHub repository github.com /j/ Jango DST starter-set this repository has a bunch of HTML files we need and also the static folder with some images we can download all these files by clicking on the code button here and download zip let's grab here the code for the bod HTML file click on the copy button and paste it in here this is a big file so let's slice it into into smaller components first I will move the messages element here into a different file I cut it out then go to the templates folder create a new folder in here with the name includes and I create a file here messages. HTML and paste it in here okay we can close this file and I include it back in here the same for the header I cut it from here create a header. HTML file paste the element in here and include it back in here next we have the content element which displays the actual content of the page here I'm creating now my layout block to store the different layouts I will create now a layout folder inside the templates folder and first I create the plank layout then I add my page components this layout extends from the Bas of HTML file here we have the layout block and then we have the content element which contains the content block and finally we create now the home.html file we need for our view which extends from this layout template so in the templates home.html and here we display the content of the page all right let's start up the server and check it out refresh the page and we see our homepage great oh it's beautiful now let's fix the logo here for this we create first the static folder contrl C to shut down the server then make directory static then we add this directory to our settings file with a static files dur variable and now let's copy all the files we downloaded from the repository to this static folder all right now that all the files move to this project we should see the logo now let's start up the server and check it out refresh the page and our logo is now now loaded awesome so this is all for the homepage now let's move on to create user profile Pages we can close those steps here all right I create a new app for the users and call it aore users let's Minify a few folders here now let's add users to the install apps next we create the user model which can store the user profile data in the database so we go to model stopy for this we need to user class and the static function which we will need to display a default Avatar image so this my model class we have the user which is a one to one field with our Jango user then we have the image property with the image field to upload our Avatar images and store it in the Avatar's folder the image field works with pillow which we installed already then we have a field to display the user's name and an info fi then we add this string representation of this object for the admin interface then I'm adding this name function to display the username if the user don't provide a display name and also an avatar function which displays a default Avatar if the user doesn't provide one all right let's make the migrations now and migrate okay now let's add this model class to the admin.py file so it shows up in the admin interface imported the profile class and register it okay now to create a profile object every time a new user is created we use signals for this we have to create a signal stopi file here we have to import a few modules we need the receiver we need the post save method we need the user object and we need the profile model class and this the code for my signal so it's triggered after a user is saved in a database and if a new user is created it creates a profile object for this user okay in order for the signal to work we also have to register it in the up stopy file and import it inside the ready function let's check this out now by creating a super user so P managed to P create super user I give it a username email address password then start up the server refresh then we go to the admin interface SL admin sign in and and if we go to profiles here we can see that our admin profile was created the signal is working great let's also add now the variables for the Avatar image and username for this we go to the header. HTML file in the templates and includes folder here we have the Avatar here we add the Avatar variable and and here the name variable okay refresh the page and there we go we see the default Avatar and username great now let's create a profile page I'm going to the view stopy file this is my profile view function which sends the profile object to the template here we need to create this profile HTML file let's first create a folder for it here again I use the make directory command to create a template folder and a aore users folder within the users app folder the DB stands for parents and means it creates also all the missing parent folders but unfortunately this option does not work on Windows all right as we can see here here it create this template folder and the aore users folder here I'm adding now my profile. HTML file add here the code from the repository then we create the path we add here the include function to link to the URLs file in the users app folder let's import include then in our users folder we create now here URL stopi file then we import the path and we import all the views and add the path in here okay save this file then I go to my header. HTML file and add the URL in here okay now let's start up the server and check it out refresh the page then go to my profile okay the profile page is added next we create the edit profile page for this we need a form so let's create a form stop file and we import here the model form class the forms class and the profile class so here's my form it is access in the profile table we don't want to change the user field so we exclude that one and the widgets are creating the look and feel of the form okay let's create a view now back to view stop this is the profile edit view function let's import the form then I also import the login required decorator and add it to the function and now let's create the profile edit. HTML file paste the code from the assets okay now let's create the path and also update the header okay let's check it out refresh all right let's fix the layout for this page now I create a new layout so I go to layouts I call this layout box. HTML we add the code again from the Repository this displays the content within a box and here we change extends from the box. HTML file and let's check it out I refresh the page okay looking better now let's add the functionality to save this form in the database so back to view toop y we get here all the data from the front end we check if the form is valid then save the form in database and then redirect the user to the profile page let's import the redirect function now we add the media folder to store the user uploaded files so in the root here I add media then I add this folder to our settings toy file the media root and I also add the media URL okay and now in order for Jango to serve those media files we need to add a path to our URLs toy file here we map the media URL to the media route so let's import static and settings and save this file okay let's check it out refresh the page choose a file we add a display name Bobby add some text and submit and we successfully edited our profile page awesome nice now I will also add Jango cleanup to delete duplicated images we installed this package already let's add this line now to our installed apps in a settings stopy file and let's check it out so here we have the media folder with one image and if I upload a new image this one should get replaced I upload the image again and we can see a new image file was created all right next let's look into the user logout and for this we're using the All o package so here we have the official documentation let's implement the configurations in our settings file first we add the authentication pons then we have to add all or to our apps those three lines and also to our middleware then we also add it to our path so in the core folder urls I add it here on top and then we have to do a migration I add the logout URL to the header. HTML file there we have log out and start up the server to check it out refresh the page then I'm going to log out as we can see all o is work working let's fix the design Now by linking it up with our template for this I'm overwriting the base. HTML file all o provides with my own base of HTML file I create here a all o and a layouts folder in my template folder and here I'm adding my base. HTML file here I'm extending from the box layout add our all o class to the body element of the page and add the content block okay save this file start up the serve again and refresh the page and our template is loaded great okay let's sign out and we also get a success message here now let's add the login link here I go to my header. HTML file you have the login now I'm adding a few configurations to my settings topy file so at the very bottom here I add a login redirect URL so by default all or will redirect the user to a profile page then I'm adding here a email backend this will send me confirmation emails to the console and then I also set the authentication method to email by default this is set to username let's save this file and test the login refresh and go to login here I add my email address and password and I'm successfully signed in now I don't really like those messages when I log in and log out so let's get rid of them those messages are coming from all o and they're stored in a login and log out text file and I'm creating empty files now to overwrite them so I create here an account folder and a messages folder in my templates then I create the locked uncore in the txt file and keep it blank and also locked out. dxt file and keep it blank okay start up the server I refresh the page and log out again and the message is gone great okay let's move over to the sign up feature now so I'm going to my header. HTML file here I'm adding the all off sign up URL but I'm also adding here the next parameter to redirect the user to a onboarding page after signing up okay let's create a URL for the onboarding page now we're using here again the profile edit View but I will add now an onboarding variable to it so here we have the profile edit view so if the request. path is the profile onboarding URL then the onboarding variable is true otherwise is false then I send this variable to the template okay let's import also so reverse then I go to the profile edit template I'm using the variable here to other condition so if this onboarding variable is set to true I want to say complete your profile otherwise we on the edit profile page and we say edit your profile and then I also want to switch between a cancel and a skip button okay like that another thing thing I want is to have only lowercase usernames in the database for this I'm creating a pre-save signal so let's go to our signal stop file and add here a pre-save signal and it converts the username into lowercase okay let's import the pre-save and let's do a test to sign up using a username with capital letters I refresh the page then sign up Andreas with a capital A great the username is lowercase we are on the onboarding page and also a confirmation email was sent let's upload our Avatar image and add a display name okay and submit great this is our profile page now let's add also profile pages of other users so if I type here add username I want to display here the user page so first let's create a path so let's go to our call folder and then URL stopy and I'm constructing here the URL with the add symbol in front of the username and using the profile view let's import it okay now I'm going to the view stopy file and customize my profile view so first here I add the username as an argument then I'm adding here a condition if there is a username fetch me the user with that username if it exists otherwise show a 44 page let's import the get object or 44 function and also the user model all right then we have else here we try to get the profile page I use a try accept block here because if the profile page is requested when logged out we get a server error in that case I want the user to be redirected to the login page accept redirect to the login page all right save this file and refresh the page and as I can see we see here now the user page and if I go to my profile I see the profile page and if we're logged out and go to the profile page we get redirected to the signin page awesome now let's look at the settings page I first create a view this view renders the profile settings. HTML file let's create this file now so in users templates profile settings. HTML paste the code in here then we create a path so your else to be y and add the URL in our header. HTML file okay let's check it out I refresh the page settings and here we have the page and we can see it shows already our email address let's add the edit link and here using HDMX now to load in a form to change the email address so this is the HDMX package documentation which we installed already in our project let's add now the missing configurations so back to the settings to P file then we have to add it to installed apps and also added to the middleware all right now let's create a form which shows the email so let's go to our forms.py file in the users folder so first I declare here that this email field is required and with the meta class we access the user model let's import the user class save this file andent then we create a view so in this function I check if it is indeed a HDMX request and send the response as a partial or snippet to the frent so let's create this email form. HTML partial I go to my main template folder create a new folder partials and in here I create this email form. HTML file paste the code in here save this file also save the views.py file now I'm creating the path so I go to the URL Toopy file and add now the HDMX syntax to the page so I'm going to my profile settings. HTML file here I'm going to the edit link here we have it and here instead of our hre we add here now the HDMX attributes so the target is the email address element here and we swap it with inner HTML I also add here the class cursor pointer to display this element as a link okay save this file and let's do a test I refresh the page I click edit and our partial with the form is loaded to the page awesome now let's save the data to the database back to my view Toopy file I add the post method condition so if the method is post we grab the form data in a form variable and then check if it's valid but before we save it in a database we have to check if this email exists already so here we get the email value from the form then we check the user table if this email already exists excluding the current user and if it exists we send back a warning that this email is already in use and redirect the user back to the settings page let's import the messages now and once this check is done we save the form but we're not quite done yet the email has also to be updated in the all o email address table and for this I create a signal again which updates the email address and sets the verified property to false let's take a look at the admin interface here we have the email address table all or created and it stores here the information if the email is verified or not okay let's go to our Single Stop UI file we are going to include it here in the post save function so we say here else so if the user is updated we update the email in the all o table and set verify to false I also put it in a TRX except block to avoid server errors let's import the email address class then I add here the accept block so if we get a server error it means the object doesn't exist and so we create one okay save this file let's go back to our view y file so once the signal is triggered and the email is updated we're going to send a confirmation email to the user we can do this with this send email confirmation function this a function all o provides let's import it and then we redirect the user to the settings page and then I finally also add our else here in case the form is not valid I display here a warning message saying the form is not valid and redirect the user to the settings page all right save this file and let's check it out so I refresh the page click edit then I change here to two submit great the email is updated and we also got our confirmation email sent let's double check this in the database I refreshed the page it changed now to two that worked now let's check the terminal for the confirmation email there it is with pressing the command button I can click on this link here then I confirm and the email is verified let's check out the settings page and we see the email is verified now let's verify the email manually so I edit the email again now let's make the verify link work so back to view stopi and I add here new function which basically just sends this confirmation email to the user okay let's add the path and add the URL to our settings page here we have the verifi link and I add the URL okay let's check it out I refresh the page if I click the verify link the confirmation email Des sent confirm back to the settings page and the email is verified awesome we are almost done next we have the account delete link for this I create a new view profile delete view let's add a template base the code okay then I add the path and add it to the settings page so here we have the delete link and add the URL okay let's test refresh delete here we have the page let's add the logic now so back to view Toy file so first we create here user variable then we check if the method is a post method then first we log out the user let's import this log out function then we delete the user then we show our success message that the account was deleted and we redirect the user back to the homepage all right let's check it out I refresh the page and delete the account and the account was deleted what a Pity as the very last thing I will also add a 44 page to my project so I go to my main template folder and add here 44. HTML file paste again the code save the file okay that's set up but in order for us to see this four four page now we need to get out of the debac mode so let's go to settings topy and at the top here we set debu to false and for this to work we have to set allowed hosts so I'm setting here my two local hosts and also a while card which in production we have to replace with our public domain all right save this file now let's try to access a user which doesn't exist for example at Dave and we see we have a 4 four page here now so let's switch back the pack to true and we're back in theb mode okay that's it we built now ajango starter boiler plate with user authentication for the full code base go to my GitHub repository at github.com njeno - starter and just a reminder should you use this code in production make sure to generate your own secret key for your own security all right if you have any suggestions how to improve this data code please let me know in the comment section below I will try to keep this project as relevant as possible and always up to dat thank you for watching until next time my friends stay curious and bye-bye for now [Music] [Applause] [Music]

Channel: Andreas Jud

Views: 4,648

Keywords: django, python, Andreas Jud, ajudmeister, fabimo, allauth, webdevelopment, entrepreneur, web app

Id: SQ4A7Q6_md8

Length: 43min 8sec (2588 seconds)

Published: Wed Mar 06 2024