Web Programming examples

Google Maps,AngularJS

Archives

Ruby on Rails Tutorial micropost access control, error message with AngularJS

(1)micropost access control

$ vi app/controllers/microposts_controller.rb

class MicropostsController < ApplicationController
  before_action :signed_in_user, only: [:create, :destroy]
  before_action :correct_user,   only: :destroy

  private
    def signed_in_user
      remember_token = User.encrypt(cookies[:remember_token])
      current_user ||= User.find_by(remember_token: remember_token)
      if current_user.nil?
        render status: :unauthorized
      end
    end
    def correct_user
      micropost = Micropost.find(params[:id])
      remember_token = User.encrypt(cookies[:remember_token])
      current_user ||= User.find_by(remember_token: remember_token)
      if current_user.id != micropost.user_id
        render status: :unauthorized
      end
    end

(2)validation, error message

1)AngularJS controller

$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("HomeCtrl", function($scope, flashService, micropostsResource, sessionResource) {

  $scope.submit = function() {
    function success(response) {
.........
    }
    function failure(response) {
      _.each(response.data, function(errors, key) {
        _.each(errors, function(e) {
          $scope.micropostForm[key].$dirty = true;
          $scope.micropostForm[key].$setValidity(e, false);
        });
      });
    }
    micropostsResource.create($scope.micropost, success, failure);
  };

  $scope.errorMessage = function(name) {
    var s = $scope.micropostForm[name].$error;
    result = [];
    _.each(s, function(key, value) {
      result.push(name + " " + value);
    });
    return result.join(", ");
  };

2)AngularJS template view

$ vi app/assets/templates/static_pages/home.html.erb

<div ng-controller="HomeCtrl">
.....
  <form name="micropostForm" ng-submit="submit()" novalidate>
    <textarea name="micropost" class="form-control"
              ng-model="micropost.content" rows="3"
              ng-maxlength="140" required>
    </textarea>
    <span class="text-danger" ng-show="micropostForm.content.$dirty && micropostForm.content.$error.maxlength">
      content is too long (maximum is 140 characters) 
    </span>
    <span class="text-danger" ng-show="micropostForm.content.$invalid && micropostForm.content.$dirty">
      {{errorMessage('content')}}
    </span><br />
    <button type="submit" ng-disabled="micropostForm.$invalid"
            class="btn btn-large btn-primary">Post
    </button>
  </form>

Ruby on Rails Tutorial update require the right user

1)Rails controller

$ vi app/controllers/users_controller.rb

class UsersController < ApplicationController
  before_action :correct_user,   only: [:update]

  private
    def correct_user
      user = User.find(params[:id])
      remember_token = User.encrypt(cookies[:remember_token])
      current_user ||= User.find_by(remember_token: remember_token)
      if current_user != user
        render status: :unauthorized
      end
    end

2)AngularJS controller

$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("UsersNewCtrl", function($scope, userResource, $location, flashService, $routeParams, sessionResource, $q) {
......
......
  var deferred = $q.defer();
  deferred.promise.then(function (result) {
    var user_info = result;
    if ($routeParams.id) {
      if (user_info.user.id == $routeParams.id) {
.........

Ruby on Rails Tutorial update require a logged-in user

(1)Rails controller

$ vi app/controllers/users_controller.rb

class UsersController < ApplicationController
  before_action :signed_in_user, only: [:update]

  private
    def signed_in_user
      remember_token = User.encrypt(cookies[:remember_token])
      current_user ||= User.find_by(remember_token: remember_token)
      if current_user.nil?
        render status: :unauthorized
      end
    end

(2)AngularJS controller

$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("UsersNewCtrl", function($scope, userResource, $location, flashService, $routeParams) {
  if ($routeParams.id) {
    if (flashService.getUser().user.id > 0 ) {
      var msg = "Profile updated";
      $scope.title = "Update your profile";
      $scope.btn_name = "Save changes";
      userResource.show({ id: $routeParams.id }, function(user_info) {
        $scope.user = user_info.user;
        $scope.gravatar_url = user_info.gravatar_url;
      })
    } else {
      var msg = "Please sign in.";
      flashService.push(msg);
      $location.path("/signin");
    }
  } else {

.........

(3)flash message

1)AngularJS template view

$ vi app/assets/templates/sessions/new.html.erb

<div ng-controller="SessionsNewCtrl" class="row">
  <div class="col-md-6 col-md-offset-3">
    <div class="bg-warning" ng-show="getMessage()">
      <p>{{getMessage()}}</p>
    </div>
    <h1 class="text-center">Sign in</h1>

2)AngularJS controller

$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("SessionsNewCtrl", function($scope, sessionResource,$location,flashService) {
  $scope.getMessage = function() {
    return flashService.get();
  };
});

(4)countermeasure of the browser reload

myModule.controller("UsersNewCtrl", function($scope, userResource, $location, flashService, $routeParams, sessionResource, $q) {
  var msg = "";
  var qgetUser = function(deferred) {
    if (flashService.getUser()) {
      var quser_info = flashService.getUser();
      deferred.resolve(quser_info);
    } else {
      sessionResource.current_user({}, function(response) {
        if (response.user.id) {
          var quser_info = response;
        } else {
          var quser_info = { user: {id: 0} };
        }
        flashService.setUser(quser_info);
        deferred.resolve(quser_info);
      });
    }
  }
  var deferred = $q.defer();
  deferred.promise.then(function (result) {
    var user_info = result;
    if ($routeParams.id) {
      if (user_info.user.id > 0) {
        msg = "Profile updated";
        $scope.title = "Update your profile";
        $scope.btn_name = "Save changes";
        userResource.show({ id: $routeParams.id }, function(user_info) {
          $scope.user = user_info.user;
          $scope.gravatar_url = user_info.gravatar_url;
        })
      } else {
        msg = "Please sign in.";
        flashService.push(msg);
        $location.path("/signin");
      }
    } else {
      msg = "Welcome to the Sample App!";
      $scope.title = "Sing up";
      $scope.btn_name = "Create my account";
      $scope.user = new userResource();
    }
  },function (reason) {
    console.log("qgetUser-Error");
  })
  qgetUser (deferred);