This is my URLS.py:
from django.conf.urls import url
from django.conf.urls import include
from CMSApp import views
urlpatterns = [
url(r'^$', views.HomePageView.as_view()),
url(r'^users$', views.user_list.as_view()),
url(r'^users/(?P<pk>[0-9]+)$', views.user_detail.as_view()),
url(r'^api-auth/', include('rest_framework.urls',
namespace='rest_framework')),
]
So to login, I use the URL /api-auth/login. When I go to /api-auth/login, I see the DRF login screen. If I type in an incorrect username and password, it says:
Please enter a correct username and password. Note that both fields may be case-sensitive.
and if I type in a correct username and password, it redirects the page to LOGIN_REDIRECT_URL in my settings.py, so this part works.
However, I want to be able to log in without accessing the DRF login page. When the user visits
127.0.0.1/
this view gets called:
class HomePageView(TemplateView):
template_name = "home.html"
def get_context_data(self, **kwargs):
context = super(HomePageView, self).get_context_data(**kwargs)
return context
And this is my home.html:
<h3>Login</h3>
<form ng-submit="ctrl.loginUser()" name="myLoginForm">
<div class="form-group">
<label>Username</label>
<input type="text" name="uname" class="form-control" ng-model="ctrl.user.username" required>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="pwd" class="form-control" ng-model="ctrl.user.password" required>
</div>
<input type="submit" value="Login">
</form>
<script>
angular.module("notesApp", [])
.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}])
.controller("MainCtrl", ["$http", function($http) {
var self = this;
self.users = {};
var fetchUsers = function() {
return $http.get("/CMS/users").then(function(response) { // get list of existing users
self.users = response.data;
}, function(errResponse) {
console.error("Error while fetching users.");
});
};
self.loginUser = function() {
$http.post("/CMS/api-auth/login/", self.user)
.error(function(data, status, headers, config) {
console.log(data);
})
.then(fetchUsers);
console.log("Success Login with ", self.user);
};
}]);
</script>
The issue is, if the user puts in an incorrect username and password, "Success login with self.user" appears on the console.log and there is no error message. On top of that, if the user logs in with a correct username and password, the user does not get redirected to LOIGN_REDIRECT_URL. Any idea why?
