-
- What is DG3
- The different components
- Requirements for running DG3
- Installation of DG3
- Additional installation steps
- Select which web server to use
- Hello World application
- Intro to CMS
- Setting up DG3 as a CMS
- Editing pages
- More about pages and urls
- Structuring a page using the grid
- Adding menu to pages
- Add images to the application
- More formating
- Sending email from contact us
- Adding menu to template
- Deploy the web site
- Storing the pages in database
- Create record
- Auto fill field
- Field validation
- Enable save button validator
- Add new button to template
- View document
- List documents
- Fix selection in menus in template
- CRUD Create Read Update Delete
- Intro to blogs
- Add user authentication
- Bootstrap authentication
- Let user change their passords
- Add reset password
- Login dialog box
- Extending the CMS to a blog
- Extend table for blogging
- Edit blog entry
- View blog entry
- User registration
- User password validation
- User field validation
- User auto login
- User extra registration fields
Bootstrap authentication
The default look at the authentication forms are absolutely not good looking. In this document we will give you the code needed to make the forms look good by using bootstrap forms.
Login form
The default form presented for a user when logging into a DG3 application can be found in the folder authentication and have the name login. Open this form and enter html mode. Add this code.
[% if form.errors %] <p>Your username and password didn't match. Please try again.</p> [% endif %] <form class="form-horizontal" role="form" method="post" action=".">[% csrf_token %] <div class="form-group"> <label for="id_username" class="col-sm-2 control-label">Username:</label> <div class="col-sm-10"> <input id="id_username" type="text" name="username" class="form-control" maxlength="254"> </div> </div> <div class="form-group"> <label for="id_password" class="col-sm-2 control-label">Password:</label> <div class="col-sm-10"> <input id="id_password" type="password" name="password" class="form-control"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <input class="btn btn-success" type="submit" value="login" /> <input type="hidden" name="next" value="[{ next }]" /> </div> </div> </form><br>
What we have done is to remove the Django form code that comes out of the box and added the same code using bootstrap forms. What we need to take care of to get the code to work is to keep the csrf_token on the page and all extra hidden forms used by the login process.