{"id":1095,"date":"2015-08-03T13:31:24","date_gmt":"2015-08-03T13:31:24","guid":{"rendered":"http:\/\/www.honobono-life.info\/wpeng\/?p=1095"},"modified":"2015-08-03T13:55:57","modified_gmt":"2015-08-03T13:55:57","slug":"user-log-in-validation-error-message-with-angularjs","status":"publish","type":"post","link":"http:\/\/www.honobono-life.info\/wpeng\/user-log-in-validation-error-message-with-angularjs\/","title":{"rendered":"Ruby on Rails Tutorial user log in, validation, error message with AngularJS"},"content":{"rendered":"

(1)Rails controller, route<\/strong><\/p>\r\n\r\n

1)"Sessions" controller<\/strong><\/p>\r\n\r\n

1.generate "Sessions" controller<\/strong><\/p>\r\n\r\n

$ rails generate controller Sessions<\/p>\r\n\r\n

2.create action<\/strong><\/p>\r\n\r\n

$ vi app\/controllers\/sessions_controller.rb<\/p>\r\n\r\n

\r\n  def create\r\n    user = User.find_by(email: session_params[:email].downcase)\r\n    if user && user.authenticate(session_params[:password])\r\n    else\r\n      msg = {"password" => ["Invalid email\/password combination"]}\r\n      render json: msg, status: :unprocessable_entity\r\n    end\r\n  end\r\nprivate\r\n  def session_params\r\n    params.permit(:email,:password)\r\n  end<\/pre>\r\n\r\n
2)Rails route<\/strong><\/p>\r\n\r\n
$ vi config\/routes.rb<\/p>\r\n\r\n
  match '\/app\/sessions', to: 'sessions#create',  via: 'post'
\r\n  match '\/app\/sessions', to: 'sessions#destroy', via: 'delete'<\/p>\r\n\r\n
(2)AngularJS "sessionResource" service<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n
\r\nmyModule.factory("sessionResource", function($resource) {\r\n  return $resource("\/app\/sessions",{},\r\n    {\r\n      'create':  { method: 'POST' },\r\n      'destroy': { method: 'DELETE' }\r\n    }\r\n  );\r\n});<\/pre>\r\n\r\n
(3)AngularJS route<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n
\r\n.when("\/signin", {\r\n templateUrl: "<%= asset_path('sessions\/new.html.erb') %>"\r\n })<\/pre>\r\n\r\n
(4)AngularJS controller<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n
\r\nmyModule.controller("SessionsNewCtrl", function($scope, sessionResource) {\r\n  $scope.session = new sessionResource();\r\n  $scope.submit = function() {\r\n    function success(response) {\r\n      console.log("test");\r\n    }\r\n    function failure(response) {\r\n      _.each(response.data, function(errors, key) {\r\n        _.each(errors, function(e) {\r\n          $scope.sessionNewForm[key].$dirty = true;\r\n          $scope.sessionNewForm[key].$setValidity(e, false);\r\n        });\r\n      });\r\n    }\r\n    sessionResource.create($scope.session, success, failure);\r\n  };\r\n  $scope.errorMessage = function(name) {\r\n    var s = $scope.sessionNewForm[name].$error;\r\n    result = [];\r\n    _.each(s, function(key, value) {\r\n      result.push(value);\r\n    });\r\n    return result.join(", ");\r\n  };\r\n  $scope.errorClass = function(name) {\r\n    var s = $scope.sessionNewForm[name];\r\n    return s.$invalid && s.$dirty ? "has-error" : "";\r\n  };\r\n});<\/pre>\r\n\r\n
(5)AngularJS template view<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/templates\/sessions\/new.html.erb<\/p>\r\n\r\n
\r\n<div ng-controller="SessionsNewCtrl" class="row">\r\n  <div class="col-md-6 col-md-offset-3">\r\n    <h1 class="text-center">Sign in<\/h1>\r\n    <div class="well">\r\n      <form name="sessionNewForm" ng-submit="submit()" novalidate>\r\n        <div class="form-group">\r\n          <label>Email<\/label>\r\n          <input type="email" name="email" class="form-control"\r\n            ng-model="session.email"\r\n            required \/>\r\n        <\/div>\r\n        <div class="form-group" ng-class="errorClass('password')">\r\n          <label>Password<\/label>\r\n          <input type="password" name="password" class="form-control"\r\n            ng-model="session.password" required \/>\r\n          <span class="help-block" ng-show="sessionNewForm.password.$invalid && sessionNewForm.password.$dirty">\r\n            {{errorMessage('password')}}\r\n          <\/span>\r\n        <\/div>\r\n        <button type="submit" class="btn btn-large btn-primary">Sign in<\/button>\r\n      <\/form>\r\n      <p>New user?<a href="\/users\/new">Sign up now!<\/a><\/p>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n<\/pre><\/div>\r\n\r\n
(6)add a link to signin<\/strong><\/p>\r\n\r\n
$ vi app\/views\/layouts\/_header.html.erb<\/p>\r\n\r\n
<li><%= link_to "Sing in", "\/signin" %><\/li><\/p>","protected":false},"excerpt":{"rendered":"
(1)Rails controller, route 1)"Sessions" controller 1.generate "Sessions" controller $ rails generate controller Sessions 2.create action $ vi app\/controllers\/sessions_controller.rb def create user = User.find_by(email: session_params[:email].downcase) if user && user.authenticate(session_params[:password]) else msg = {"password" => ["Invalid email\/password combination"]} render json: msg, status: :unprocessable_entity end end private def session_params params.permit(:email,:password) end 2)Rails route $ vi config\/routes.rb   match […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[137],"tags":[35,151,145,157,155],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1095"}],"collection":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/comments?post=1095"}],"version-history":[{"count":1,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1095\/revisions"}],"predecessor-version":[{"id":1096,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1095\/revisions\/1096"}],"wp:attachment":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/media?parent=1095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/categories?post=1095"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/tags?post=1095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}