diff options
| -rw-r--r-- | app/assets/javascripts/views/sessions/new.js.coffee | 7 | ||||
| -rw-r--r-- | app/views/sessions/new.html.erb | 8 |
2 files changed, 12 insertions, 3 deletions
diff --git a/app/assets/javascripts/views/sessions/new.js.coffee b/app/assets/javascripts/views/sessions/new.js.coffee new file mode 100644 index 0000000..b7b040a --- /dev/null +++ b/app/assets/javascripts/views/sessions/new.js.coffee @@ -0,0 +1,7 @@ +Vue.component "login", + data: () -> + username: '' + password: '' + computed: + canSubmit: -> + @username.length > 0 && @password.length > 0 diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb index 205fd5f..fcde76f 100644 --- a/app/views/sessions/new.html.erb +++ b/app/views/sessions/new.html.erb @@ -1,24 +1,26 @@ <div class="container" data-autovue="login-view"> <div class="columns"> <div class="column is-6 is-offset-3"> + <login inline-template> <%= form_for @user, url: sessions_path do |f| %> <p class="control has-icon"> - <%= f.text_field :username, placeholder: t('.username'), class: 'input is-large', required: 'required' %> + <%= f.text_field :username, placeholder: t('.username'), class: 'input is-large', required: 'required', "v-model.trim": "username" %> <span class="icon is-small"> <i class="fa fa-envelope"></i> </span> </p> <p class="control has-icon"> - <%= f.password_field :password, placeholder: t('.password'), class: 'input is-large', required: 'required' %> + <%= f.password_field :password, placeholder: t('.password'), class: 'input is-large', required: 'required', "v-model.trim": "password" %> <span class="icon is-small"> <i class="fa fa-lock"></i> </span> </p> <p class="control"> - <%= f.submit t('.login_button'), class: "button is-success is-large is-fullwidth" %> + <%= f.submit t('.login_button'), class: "button is-success is-large is-fullwidth", ":disabled": "!canSubmit" %> <%= link_to t('.register_link'), new_registration_path, class: "button is-link is-pulled-right" %> </p> <% end %> + </login> </div> </div> </div> |