1

Im trying to take input data posted from a form I have in my Django/Angular application. The problem though is that, when I fill out the form, and submit it, the form is failing saying all my fields are required. I'm not sure if this is a Django issue, human error, or because of Angular. The reason I think it may be Angular is because my csrf_token is rendering to the page as well. thoroughly confused.

view

def login(request):
    # """ -Log in the user if credentials are valid """
    if request.method == "POST":
        form = LoginForm(request.POST)

    if form.is_valid():
        cleaned_data = form.clean()

        account = Account.objects.get(email=cleaned_data['email'], password=cleaned_data['password'])

        if cleaned_data['token']:

            token = cleaned_data['token']
            invite = OrgInvite.objects.get(token=token)
            org = Org.objects.get(id=invite.org_id)
            if not invite:
                raise Exception("Invitation token is invalid.")
            if invite.used == True:
                raise Exception("Invitation token has already been used.")

            org_member = OrgMember.objects.get(account_id=account.id)
            if org_member:
                raise Exception("Account is already in team.")
            else:
                org.add_members(account.id, False, invite.is_admin)
                invite.used = False

                # add_to_welcome(org_id=org.id, account_id=account.id, inviter_id=invite.token)

        else:
            pass

    context = {
        'message': form.errors,
        'next': '/app/'
    }

    return composeJsonResponse(200, "", context)

form

class LoginForm(forms.Form):
    email = forms.EmailField(max_length=100)
    password = forms.CharField(max_length=20)
    token = forms.CharField(max_length=20)

def __init__(self, *args, **kwargs):
    self.cached_user = None
    self.request = kwargs
    kwargs.setdefault('label_suffix', '')
    super(LoginForm, self).__init__(*args, **kwargs)

def clean(self):
    cleaned_data = self.cleaned_data

    if len(self._errors) > 0:
        return cleaned_data
    else:
        email = cleaned_data.get('email')
        password = cleaned_data.get('password')

        if email is None or password is None:
            messages.error(self.request, 'Please enter an email and password.')
            return forms.ValidationError("Error")
        else:
            self.cached_user = authenticate(username=email, password=password)

            if self.cached_user is None:
                self._errors["password"] = self.error_class(["Password incorrect. Passwords are case sensitive."])
            elif not self.cached_user.is_active:
                messages.error(self.request,
                               'This account is inactive. Please check your inbox for our confirmation email, and '
                               'click the link within to activate your account.')
                raise forms.ValidationError("Error")

    if not cleaned_data.get('remember_me'):
        self.request.session.set_expiry(0)

    return cleaned_data

def get_user(self):
    return self.cached_user

enter image description here

login.html

<div class="account-login" id="login-view">
  <div class="card card-half">
    <h2 class="text-center">Welcome back!</h2>
    <h4 class="text-center">Sign in to your account.</h4>

    <div class="alert alert-danger" ng-if="vm.errorMessage">
      {{ vm.errorMessage }}
    </div>

    <form class="form-horizontal" name="form" ng-submit="vm.login(vm.auth)">
      {% csrf_token %}
      <div class="form-group">
        <label for="email" class="col-sm-3 control-label">Email</label>

        <div class="col-sm-9 col-md-7">
          <input type="email" id="email"
              class="form-control"
              placeholder="name@example.com"
              ng-model="vm.auth.email"
              required
              hl-focus>
        </div>
      </div>

      <div class="form-group">
        <label for="password" class="col-sm-3 control-label">Password</label>

        <div class="col-sm-9 col-md-7">
          <input type="password" id="password" name="password"
              class="form-control"
              placeholder="******"
              ng-model="vm.auth.password"
              required minlength="6">

          <div class="has-warning" ng-if="form.password.$dirty">
            <div class="help-block" ng-messages="form.password.$error">
              <div ng-message="minlength">Please enter at least six characters.
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-3"></div>
        <div class="col-sm-9 col-md-7">
          <button type="submit" class="btn btn-block btn-secondary"
              ng-disabled="!form.$valid || vm.submitBusy">
            Sign in
            <span ng-if="vm.submitBusy"><i class="fa fa-circle-o-notch fa-spin"></i></span>
          </button>
        </div>
      </div>

    </form>

  </div>
</div>

<div class="col-sm-6 col-sm-offset-3">
  <p>Forgot your password? Reset it
      <a ui-sref="auth.reset">here</a>.</p>
  <p>Trying to create a team?
      <a ui-sref="auth.join.personal">Sign up</a> to get started.</p>
</div>

Angular

(function () {
    'use strict';

Login.$inject = ["$log", "$anchorScroll", "$stateParams", "AccountRepo", "CommonService", "CommonEvents"];
angular
    .module('app.guest')
    .controller('Login', Login);

    /** @ngInject */
    function Login($log, $anchorScroll, $stateParams,
                  AccountRepo, CommonService, CommonEvents) {
        var vm = this;

        var next = null;
        var defaultAuth = {
            email: '',
            password: ''
        };

        vm.errorMessage = null;
        vm.submitBusy = false;
        vm.auth = angular.copy(defaultAuth);
        vm.login = login;

        init();

        function init() {
            CommonService.broadcast(CommonEvents.viewReady);
            next = $stateParams.next;
        }

        function login(model) {
            vm.submitBusy = true;
            vm.errorMessage = null;
            AccountRepo.login(model).then(
                function (data) {
                    // CommonService.hardRedirect(next || '/app');
                    console.log(data)
                },
                function (data) {
                    vm.submitBusy = false;
                    vm.errorMessage = data;
                    $anchorScroll('login-view');
                });
        }
    }

})();

(function () {
    'use strict';

AccountRepo.$inject = ["$q", "$log", "AbstractRepo"];
angular
    .module('app.repo')
    .factory('AccountRepo', AccountRepo);

function AccountRepo($q, $log, AbstractRepo) {

        return {
            accept: accept,
            invite: invite,
            join: join,
            login: login,
            save: save
        };

        /**
         * Create a new account with a new team.
         * @param model:
         * @returns {*}
         */
        function join(model) {
            return AbstractRepo.post('accounts/signup', model, false)
                .then(genericSuccess, genericError);
        }

        /**
         * Authenticate an account.
         * @param model:
         * @returns {*}
         */
        function login(model) {
            return AbstractRepo.post('accounts/login/', model, false)
                .then(genericSuccess, genericError);
        }

angular
        .module('app.repo')
        .factory('AbstractRepo', AbstractRepo);

/** ngInject */
function AbstractRepo($log, $http, $q, Config) {

    return {
        get: get,
        post: post,
        put: put,
        genericSuccess: genericSuccess,
        genericError: genericError
    };

    function get(uri, data, isApi) {
        return httpRequest('GET', uri, data, isApi);
    }

    function post(uri, data, isApi) {
        return httpRequest('POST', uri, data, isApi);
    }

    function put(uri, data, isApi) {
        return httpRequest('PUT', uri, data, isApi);
    }

    function httpRequest(method, uri, data, isApi) {
        isApi = angular.isDefined(isApi) ? isApi : true;

        var deferred = $q.defer();
        var promise = $http({
            method: method,
            url: (isApi ? Config.api_path : '/') + uri,
            data: data || {},
            timeout: deferred.promise
        }).catch(function (response) {
            $log.error(response);
            return $q.reject(response);
        }).finally(function () {
            promise.abort = angular.noop;
            deferred = null;
            promise = null;
        });
        // Abort the underlying request.
        promise.abort = function () {
            deferred.resolve();
        };
        return promise;
    }

    function genericSuccess(response) {
        return response.data;
    }

    function genericError(response) {
        var reason = "Oops, something went wrong. That's our bad.";
        if (response.status < 500 && response.data.message) {
            reason = response.data.message;
        }
        return $q.reject(reason);
    }

}

Traceback after putting request.body into LoginForm. The error occurs when my view hits the form.is_valid() method.

ERROR 2016-04-19 10:57:38,949 base.py handle_uncaught_exception 284 Internal Server Error: /accounts/login/
Traceback (most recent call last):
  File "/usr/local/lib/python2.7/site-packages/django/core/handlers/base.py", line 149, in get_response
    response = self.process_exception_by_middleware(e, request)
  File "/usr/local/lib/python2.7/site-packages/django/core/handlers/base.py", line 147, in get_response
    response = wrapped_callback(request, *callback_args, **callback_kwargs)
  File "/Users/timothybaney/Django_Projects/human_link/backend/account/views.py", line 70, in login
    if form.is_valid():
  File "/usr/local/lib/python2.7/site-packages/django/forms/forms.py", line 161, in is_valid
    return self.is_bound and not self.errors
  File "/usr/local/lib/python2.7/site-packages/django/forms/forms.py", line 153, in errors
    self.full_clean()
  File "/usr/local/lib/python2.7/site-packages/django/forms/forms.py", line 362, in full_clean
    self._clean_fields()
  File "/usr/local/lib/python2.7/site-packages/django/forms/forms.py", line 374, in _clean_fields
    value = field.widget.value_from_datadict(self.data, self.files, self.add_prefix(name))
  File "/usr/local/lib/python2.7/site-packages/django/forms/widgets.py", line 231, in value_from_datadict
    return data.get(name)
AttributeError: 'str' object has no attribute 'get'
TJB
  • 3,706
  • 9
  • 51
  • 102
  • Is your angularjs hitting this line? function (data) { // CommonService.hardRedirect(next || '/app'); console.log(data) }, which is the value of data? – lapinkoira Apr 19 '16 at 15:42
  • Yes, I commented out "CommonService.hardRedirect(next || '/app')" to try and figure out where the issue was, but when its not commented out, it will do the hardRedirect. – TJB Apr 19 '16 at 15:46
  • {'message': 'ok', 'next': '/app/' } – TJB Apr 19 '16 at 16:02
  • Well I think I resolved one issue, but hit another. The request's POST had nothing in it because Angular uses AJAX calls. To try and remedy this, I put request.body into the LoginForm's parameter, but now I am getting another error. I appended the traceback at the very end. – TJB Apr 19 '16 at 16:07
  • Can you print your form variable before the form.is_valid()? – lapinkoira Apr 19 '16 at 16:14
  • form: . – TJB Apr 19 '16 at 16:20
  • that's weird, what does type(form) says? – lapinkoira Apr 19 '16 at 16:22
  • might be unrelated but you should use ```cleaned_data = super(MyForm, self).clean()``` not ```cleaned_data = self.cleaned_data``` – lukeaus Apr 19 '16 at 22:20
  • Also in your clean method you should call the super class clean method with cleaned_data = super(LoginForm, self).clean() – lapinkoira Apr 20 '16 at 07:48

1 Answers1

0

I appreciate the help everyone ! I finally figured out what the issue was. I feel weird answering my own questions, but just in case other people have this same issue I will include links to other stack overflow articles that helped me figure it out. Basically since Angular uses AJAX calls, I couldn't use request.POST. I had to use request.body. Since an AJAX post data is just json, I had to also convert request.body into a Query Dictionary to be used in my login form.

# Converts AJAX JSON into query dictionary for the view to process.
def requestPost(request):
    querystring = urllib.urlencode(ast.literal_eval(request.body))
    postdata = QueryDict(query_string=querystring)

    return postdata

def login(request):
    if request.is_ajax():
        if request.method == "POST":
            form = LoginForm(requestPost(request))

            if form.is_valid():
                cleaned_data = form.cleaned_data

                if len(form.errors) > 0:
                    return cleaned_data
                else:
                    email = cleaned_data.get('email')
                    password = cleaned_data.get('password')

                    if email is None or password is None:
                        messages.error(form.request, 'Please enter an email and password.')
                        return form.ValidationError("Error")
                    else:
                        form.cached_user = authenticate(username=email, password=password)

                        if not form.cached_user:
                            x = True
                        else:
                            x = False

                        if form.cached_user is None:
                            form.errors["password"] = form.error_class(["Password incorrect. Passwords are case sensitive."])
                        elif not form.cached_user.is_active:
                            messages.error(form.request,
                                           'This account is inactive. Please check your inbox for our confirmation email, and '
                                           'click the link within to activate your account.')
                            raise form.ValidationError("Error")

                return cleaned_data

                account = Account.objects.get(email=cleaned_data['email'], password=cleaned_data['password'])

                if cleaned_data['token']:

                    token = cleaned_data['token']
                    invite = OrgInvite.objects.get(token=token)
                    org = Org.objects.get(id=invite.org_id)
                    if not invite:
                        raise Exception("Invitation token is invalid.")
                    if invite.used == True:
                        raise Exception("Invitation token has already been used.")

                    org_member = OrgMember.objects.get(account_id=account.id)
                    if org_member:
                        raise Exception("Account is already in team.")
                    else:
                        org.add_members(account.id, False, invite.is_admin)
                        invite.used = False

                        # add_to_welcome(org_id=org.id, account_id=account.id, inviter_id=invite.token)

                else:
                    pass

            context = {
                'message': form.errors,
                'next': '/app/'
            }

            return composeJsonResponse(200, "", context)

related Stack Overflow questions.

Where's my JSON data in my incoming Django request?

Django: Can I create a QueryDict from a dictionary?

Community
  • 1
  • 1
TJB
  • 3,706
  • 9
  • 51
  • 102