add registration component.

2 files changed, 28 insertions, 9 deletions

diff --git a/app/assets/javascripts/views/registrations/new.js.coffee b/app/assets/javascripts/views/registrations/new.js.coffee
new file mode 100644
index 0000000..533e8d1
--- /dev/null
+++ b/app/assets/javascripts/views/registrations/new.js.coffee
@@ -0,0 +1,17 @@
+Vue.component "registration",
+  data: () ->
+    terms_and_conditions: ''
+    email: ''
+    password: ''
+    username: ''
+  computed:
+    validation: ->
+      username: @username.length > 0
+      email: @email.length > 0
+      password: @password.length > 0
+      terms_and_conditions: @terms_and_conditions
+
+    isValid: ->
+      validation = @validation
+      Object.keys(validation).every (key) =>
+        validation[key]
diff --git a/app/views/registrations/new.html.erb b/app/views/registrations/new.html.erb
index dcff1ef..6a78f05 100644
--- a/app/views/registrations/new.html.erb
+++ b/app/views/registrations/new.html.erb
@@ -1,35 +1,37 @@
-<div class="container">
+<div class="container" data-autovue="registration-view">
   <div class="columns">
     <div class="column is-6 is-offset-3">
+      <registration inline-template>
       <%= form_for @user, url: registrations_path do |f| %>
-        <p class="control has-icon">
-          <%= f.text_field :username, placeholder: t('.username'), class: 'input is-large', required: 'required' %>
+        <p class="control has-icon has-icon-right">
+          <%= f.text_field :username, placeholder: t('.username'), class: 'input is-large', required: 'required', "v-model.trim": "username", "v-bind:class": "{ 'is-danger': !validation.username, 'is-success': validation.username }" %>
           <span class="icon is-small">
             <i class="fa fa-envelope"></i>
           </span>
         </p>
-        <p class="control has-icon">
-          <%= f.email_field :email, placeholder: t('.email'), class: 'input is-large', required: 'required' %>
+        <p class="control has-icon has-icon-right">
+          <%= f.email_field :email, placeholder: t('.email'), class: 'input is-large', required: 'required', "v-model.trim": "email", "v-bind:class": "{ 'is-danger': !validation.email, 'is-success': validation.email }"  %>
           <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' %>
+        <p class="control has-icon has-icon-right">
+          <%= f.password_field :password, placeholder: t('.password'), class: 'input is-large', required: 'required', "v-model": "password", "v-bind:class": "{ 'is-danger': !validation.password, 'is-success': validation.password }"  %>
           <span class="icon is-small">
             <i class="fa fa-lock"></i>
           </span>
         </p>
         <%= f.label :terms_and_conditions do %>
-          <%= f.check_box :terms_and_conditions, required: 'required' %>
+          <%= f.check_box :terms_and_conditions, required: 'required', "v-model": "terms_and_conditions", "v-bind:class": "{ 'is-danger': !validation.terms_and_conditions, 'is-success': validation.terms_and_conditions }" %>
           <%= t('.terms_and_conditions') %>
         <% end %>
         <p class="control">
-          <%= f.submit t('.register_button'), class: "button is-success is-large is-fullwidth"  %>
+          <%= f.submit t('.register_button'), class: "button is-success is-large is-fullwidth", ":disabled": "!isValid"  %>
           <button id="terms-modal" type="button" class="button is-link is-pulled-left"><%= t('.terms_and_conditions_link') %></button>
           <%= link_to t('.login_link'), new_session_path, class: "button is-link is-pulled-right" %>
         </p>
       <% end %>
+      </registration>
     </div>
   </div>