Web Programming examples

Google Maps,AngularJS

Archives

Ruby on Rails

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);
Ruby on Rails

Ruby on Rails Tutorial updating users with AngularJS

(1)Rails controller

$ vi app/controllers/users_controller.rb

  def update
    @user = User.find(params[:id])
    if @user.update_attributes(user_params)
      render json: @user, status: :created, location: @user
    else
      render json: @user.errors, status: :unprocessable_entity
    end
  end

(2)AngularJS route

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

myModule = angular.module('myModule', ['ui.bootstrap','ngRoute','ngResource']);

myModule.config(function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
........
    .when("/users/:id/edit", {
     templateUrl: "<%= asset_path('users/new.html.erb') %> "
     })

(3)AngularJS controller

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

myModule.controller("UsersNewCtrl", function($scope, userResource, $location, flashService, $routeParams) {
  if ($routeParams.id) {
    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 = "Welcome to the Sample App!";
    $scope.title = "Sing up";
    $scope.btn_name = "Create my account";
    $scope.user = new userResource();
  }
  $scope.submit = function() {
.......
    if ($routeParams.id) {
      userResource.update($scope.user, success, failure);
    } else {
      userResource.create($scope.user, success, failure);
    }
  };

ref.
Rails controller 

  def show
    user = User.find(params[:id])
    gravatar_id = Digest::MD5::hexdigest(user.email.downcase)
    @user_info = {
      user: user,
      gravatar_url: "https://secure.gravatar.com/avatar/#{gravatar_id}"
    }
    render json: @user_info
  end

(4)AngularJS template view

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

<h1 class="text-center">{{title}}</h1>
.....
<button ng-click="submit()" class="btn btn-primary"
         ng-disabled="userNewForm.$invalid" >
  {{btn_name}}
</button>
......
<span ng-show="user.id">
  <img alt="{{user.name}}" src="{{gravatar_url}}" />
  <a href="http://gravatar.com/emails">change</a>
</span>

(5)add link to navigation menu

$ vi app/views/layouts/_header.html.erb

<li><%= link_to "Settings", "/users/{{chkSignin().user.id}}/edit" %></li>
Ruby on Rails

Ruby on Rails Tutorial log out with AngularJS

1)Rails route

$ rake routes

match '/app/sessions', to: 'sessions#destroy', via: 'delete'

2)AngularJS "sessionResource" service

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

myModule.factory("sessionResource", function($resource) {
  return $resource("/app/sessions", {},
    {
      'create':  { method: 'POST' },
      'destroy': { method: 'DELETE' },
      'current_user': { method: 'GET', isArray: false }
    }
  );
});

3)Rails controller

$ vi app/controllers/sessions_controller.rb

  def destroy
    cookies.delete(:remember_token)
    head :no_content
  end

4)add link to navigation menu

$ vi app/views/layouts/_header.html.erb

<li><a href="" ng-click="signout()">Sign out</a></li>

5)AngularJS controller

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

function CollapseDemoCtrl($scope, flashService, sessionResource, $location) {
  $scope.signout = function() {
    sessionResource.destroy({}, function(response) {
      flashService.setUser(null);
      $location.path("/");
    });
  };
}
Ruby on Rails

Ruby on Rails Tutorial changing the navigation links based on login status with AngularJS

(1)AngularJS service

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

myModule.factory("flashService", function ($rootScope) {
  var currentUser = { user: {id: 0} };
  return {
    getUser: function () {
      return currentUser;
    },
    setUser: function (user) {
      currentUser = user;
    }
  };
});

(2)AngularJS controller

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

myModule.controller("SessionsNewCtrl", function($scope, sessionResource, $location, flashService) {
  $scope.submit = function() {
    function success(response) {
      var user_info = response;
      flashService.setUser(user_info);
      $location.path("/users/" + response.user.id);
    }
    function failure(response) {
........
    }
    sessionResource.create($scope.session, success, failure);
  };

ref.
Rails "sessions" controller

  def create
    user = User.find_by(email: session_params[:email].downcase)
    if user && user.authenticate(session_params[:password])
      remember_token = User.new_remember_token
      cookies.permanent[:remember_token] = remember_token
      user.update_attribute(:remember_token, User.encrypt(remember_token))
      @user_info = {
        user: user
      }
      render json: @user_info, status: :accepted, location: user
    else
      msg = {"password" => ["Invalid email/password combination"]}
      render json: msg, status: :unprocessable_entity
    end
  end

(3)navigation menu

1)AngularJS template view 

$ vi app/views/layouts/_header.html.erb

<div ng-controller="CollapseDemoCtrl" class="navbar navbar-default navbar-fixed-top" role="navigation">
.........
  <div class="navbar-collapse" collapse="isCollapsed">
    <ul class="nav navbar-nav">
.........
      <li ng-hide="chkSignin().user.id > 0"><%= link_to "Sign in", "/signin" %></li>
      <li ng-show="chkSignin().user.id > 0"><%= link_to "Users", "/users" %></li>
      <li ng-show="chkSignin().user.id > 0" class="dropdown" dropdown>
        <a class="dropdown-toggle" dropdown-toggle>Account<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><%= link_to "Profile", "/users/{{chkSignin().user.id}}/" %></li>
          <li><%= link_to "Settings", "/users/{{chkSignin().user.id}}/edit" %></li>
          <li role="separator" class="divider"></li>
          <li><%= link_to "Sign out", "/signout" %></li>
        </ul>
      </li>

2)AngularJS controller

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

function CollapseDemoCtrl($scope, flashService) {
  $scope.chkSignin = function() {
    return flashService.getUser();
  };
}

(4)countermeasure of the browser reload

1)AngularJS run method

myModule.run(function (sessionResource,flashService) {
  sessionResource.current_user({}, function(response) {
    if (response.user && response.user.id) {
      var user_info = response;
    } else {
      var user_info = { user: {id: 0} };
    }
    flashService.setUser(user_info);
  });
});

myModule.factory("sessionResource", function($resource) {
  return $resource("/app/sessions", {},
    {
      'create':  { method: 'POST' },
      'destroy': { method: 'DELETE' },
      'current_user': { method: 'GET', isArray: false }
    }
  );
});

myModule.factory("flashService", function ($rootScope) {
  var currentUser = { user: {id: 0} };
  return {
    getUser: function () {
      return currentUser;
    },
    setUser: function (user) {
      currentUser = user;
    }
  };
});

2)Rails route

$ vi config/routes.rb

  match '/app/sessions', to: 'sessions#current_user', via: 'get'

3)Rails "sessions" controller

$ vi app/controllers/sessions_controller.rb

  def current_user
    remember_token = User.encrypt(cookies[:remember_token])
    current_user ||= User.find_by(remember_token: remember_token)
    @user_info = {
      user: current_user
    }
    render json: @user_info, status: :accepted
  end
Ruby on Rails

Ruby on Rails Tutorial user log in, session with AngularJS

(1)remembering users'sessions

1)add a column to User model

1.generate a migration

$ rails generate migration add_remember_token_to_users

2.add "remember_token" column

$ vi db/migrate/…_add_remember_token_to_users.rb

class AddRememberTokenToUsers < ActiveRecord::Migration
  def change
    add_column :users, :remember_token, :string
    add_index  :users, :remember_token
  end
end

3.migration

$ bundle exec rake db:migrate

2)Adding a method for generating tokens

$ vi app/models/user.rb

class User < ActiveRecord::Base
.......
  before_create :create_remember_token
.......
  def User.new_remember_token
    SecureRandom.urlsafe_base64
  end

  def User.encrypt(token)
    Digest::SHA1.hexdigest(token.to_s)
  end

  private
    def create_remember_token
      self.remember_token = User.encrypt(User.new_remember_token)
    end
end

3)Rails "sessions" controller

$ vi app/controllers/sessions_controller.rb

  def create
    user = User.find_by(email: session_params[:email].downcase)
    if user && user.authenticate(session_params[:password])
      remember_token = User.new_remember_token
      cookies.permanent[:remember_token] = remember_token
      user.update_attribute(:remember_token, User.encrypt(remember_token))
      @user_info = {
        user: user
      }
      render json: @user_info, status: :accepted, location: user
    else
      msg = {"password" => ["Invalid email/password combination"]}
      render json: msg, status: :unprocessable_entity
    end
  end

private
  def session_params
    params.permit(:email,:password)
  end

4)AngularJS controller

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

myModule.controller("SessionsNewCtrl", function($scope, sessionResource, $location) {
  $scope.submit = function() {
    function success(response) {
      $location.path("/users/" + response.user.id);
    }
    function failure(response) {
........
    }
    sessionResource.create($scope.session, success, failure);
  };
});
Ruby on Rails

Ruby on Rails Tutorial AngularJS form, validating form server-side

(1)Rails validation

$ vi app/models/user.rb

class User < ActiveRecord::Base
  validates :password, length: { minimum: 6 }
  validates :name,  presence: true, length: { maximum: 20 }
  VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i
  validates :email, presence: true, format: { with: VALID_EMAIL_REGEX },
                    uniqueness: { case_sensitive: false }
end

(2)AngularJS controller

1)underscore.js include

$ vi app/assets/javascripts/application.js

//= require underscore-min

2)AngularJS controller "UsersNewCtrl"

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

myModule.controller("UsersNewCtrl", function($scope, userResource, $location, flashService) {
.....
  $scope.submit = function() {
.......
    function failure(response) {
      _.each(response.data, function(errors, key) {
        _.each(errors, function(e) {
          $scope.userNewForm[key].$dirty = true;
          $scope.userNewForm[key].$setValidity(e, false);
        });
      });
    }
    userResource.create($scope.user, success, failure);
  };
  $scope.errorMessage = function(name) {
    var s = $scope.userNewForm[name].$error;
    result = [];
    _.each(s, function(key, value) {
      result.push(name + " " + value);
    });
    return result.join(", ");
  };
});

(3)AngularJS template view

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

<div ng-controller="UsersNewCtrl" class="row">
<style>
  form.ng-invalid.ng-dirty { background-color: lightpink; }
  form.ng-valid.ng-dirty { background-color: lightgreen; }
  form { padding: 10px;}
</style>
  <div class="col-md-6 col-md-offset-3">
    <h1 class="text-center">Sign up</h1>
    <form name="userNewForm" novalidate>
      <div class="well">
        <div class="form-group" ng-class="{'has-error': userNewForm.name.$invalid && userNewForm.name.$dirty}">
          <label>Name</label>
          <input name="name" class="form-control"
            ng-model="user.name"
            required
            ng-maxlength="20" />
          <span class="text-danger" ng-show="userNewForm.name.$dirty && userNewForm.name.$error.required">
            Name can't be blank
          </span>
          <span class="text-danger" ng-show="userNewForm.name.$dirty && userNewForm.name.$error.maxlength">
            Name is too long (maximum is 20 characters)
          </span>
          <span class="text-danger" ng-show="userNewForm.name.$dirty && userNewForm.name.$invalid">
            {{errorMessage('name')}}
          </span>
        </div>
        <div class="form-group" ng-class="{'has-error': userNewForm.email.$invalid && userNewForm.email.$dirty}">
          <label>Email</label>
          <input type="email" name="email" class="form-control"
            ng-model="user.email"
            required />
          <span class="text-danger" ng-show="userNewForm.email.$dirty && userNewForm.email.$error.required">
            Email can't be blank
          </span>
          <span class="text-danger" ng-show="userNewForm.email.$dirty && userNewForm.email.$error.email">
            Email is invalid
          </span>
          <span class="text-danger" ng-show="userNewForm.email.$dirty && userNewForm.email.$invalid">
            {{errorMessage('email')}}
          </span>
        </div>
        <div class="form-group" ng-class="{'has-error': userNewForm.password.$invalid && userNewForm.password.$dirty}">
          <label>Password</label>
          <input type="password" name="password" class="form-control"
            ng-model="user.password"
            required
            ng-minlength="6" />
          <span class="text-danger" ng-show="userNewForm.password.$dirty && userNewForm.password.$error.required">
            Password can't be blank
          </span>
          <span class="text-danger" ng-show="userNewForm.password.$dirty && userNewForm.password.$error.maxlength">
            Password is too short (minimum is 6 characters)
          </span>
          <span class="text-danger" ng-show="userNewForm.password.$dirty && userNewForm.password.$invalid">
            {{errorMessage('password')}}
          </span>
        </div>
        <div class="form-group" ng-class="{'has-error': userNewForm.password_confirmation.$invalid && userNewForm.password_confirmation.$dirty}">
          <label>Password_confirmation</label>
            <input type="password" name="password_confirmation"
              class="form-control"
              ng-model="user.password_confirmation"
              required
              ng-minlength="6" />
          <span class="text-danger" ng-show="userNewForm.password_confirmation.$dirty && userNewForm.password_confirmation.$error.required">
            Password_confirmation can't be blank
          </span>
          <span class="text-danger" ng-show="userNewForm.password_confirmation.$dirty && userNewForm.password_confirmation.$error.maxlength">
            Password_confirmation is too short (minimum is 6 characters)
          </span>
          <span class="text-danger" ng-show="userNewForm.password_confirmation.$dirty && userNewForm.password_confirmation.$invalid">
            {{errorMessage('password_confirmation')}}
          </span>
        </div>
        <button ng-click="submit()" class="btn btn-primary"
                 ng-disabled="userNewForm.$invalid" >
          Create my account
        </button>
        <button ng-click="resetError(userNewForm)" class="btn btn-primary">
          Reset Error
        </button>
      </div>
    </form>
  </div>
</div>
Ruby on Rails

Ruby on Rails Tutorial AngularJS form validation, error messages

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

<div ng-controller="UsersNewCtrl" class="row">
<style>
  form.ng-invalid.ng-dirty { background-color: lightpink; }
  form.ng-valid.ng-dirty { background-color: lightgreen; }
  form { padding: 10px;}
</style>
  <div class="col-md-6 col-md-offset-3">
    <h1 class="text-center">Sign up</h1>
    <form name="userNewForm" novalidate>
      <div class="well">
        <div class="form-group" ng-class="{'has-error': userNewForm.name.$invalid && userNewForm.name.$dirty}">
          <label>Name</label>
          <input name="name" class="form-control"
            ng-model="user.name"
            required
            ng-maxlength="20" />
          <span class="text-danger" ng-show="userNewForm.name.$dirty && userNewForm.name.$error.required">
            Name can't be blank
          </span>
          <span class="text-danger" ng-show="userNewForm.name.$dirty && userNewForm.name.$error.maxlength">
            Name is too long (maximum is 20 characters)
          </span>
        </div>
        <div class="form-group" ng-class="{'has-error': userNewForm.email.$invalid && userNewForm.email.$dirty}">
          <label>Email</label>
          <input type="email" name="email" class="form-control"
            ng-model="user.email"
            required />
          <span class="text-danger" ng-show="userNewForm.email.$dirty && userNewForm.email.$error.required">
            Email can't be blank
          </span>
          <span class="text-danger" ng-show="userNewForm.email.$dirty && userNewForm.email.$error.email">
            Email is invalid
          </span>
        </div>
        <div class="form-group" ng-class="{'has-error': userNewForm.password.$invalid && userNewForm.password.$dirty}">
          <label>Password</label>
          <input type="password" name="password" class="form-control"
            ng-model="user.password"
            required
            ng-minlength="6" />
          <span class="text-danger" ng-show="userNewForm.password.$dirty && userNewForm.password.$error.required">
            Password can't be blank
          </span>
          <span class="text-danger" ng-show="userNewForm.password.$dirty && userNewForm.password.$error.maxlength">
            Password is too short (minimum is 6 characters)
          </span>
        </div>
..............
        <button ng-click="submit()" class="btn btn-primary"
                ng-disabled="userNewForm.$invalid" >
          Create my account
        </button>
      </div>
    </form>
  </div>
</div>

 

Ruby on Rails

Ruby on Rails Tutorial flash message to user signup with AngularJS

1)flash message with AngularJS

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

myModule.factory("flashService", function ($rootScope) {
  var queue = [];
  var currentMessage = "";

  $rootScope.$on("$routeChangeSuccess", function() {
    currentMessage = queue.shift() || "";
  });

  return {
    push: function (msg) {
      queue.push(msg);
    },
    get: function () {
      return currentMessage;
    }
  };
});

*routeChangeSuccess
ref.https://docs.angularjs.org/api/ngRoute/service/$route

2)AngularJS controller "UsersNewCtrl"

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

myModule.controller("UsersNewCtrl", function($scope, userResource, $location, flashService) {
  var msg = "Welcome to the Sample App!";
  $scope.user = new userResource();
  $scope.submit = function() {
    function success(response) {
      flashService.push(msg);
      $location.path("/users/" + response.id);
    }
    function failure(response) {
      console.log("failure", response)
    }
    userResource.create($scope.user, success, failure);
  };
});

3)AngularJS show view

1.show view

$ vi app/assets/templates/users/show.html.erb

<div ng-controller="UsersShowCtrl">
  <div class="row">
    <div class="bg-success" ng-show="getMessage()">
      <p>{{getMessage()}}</p>
    </div>
........

2.AngularJS controller "UsersShowCtrl"

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

myModule.controller("UsersShowCtrl", function($scope, $routeParams, userResource, flashService) {
  $scope.user = userResource.show({ id: $routeParams.id });
  $scope.getMessage = function() {
    return flashService.get();
  };
});