1<div class="container" data-autovue="registration-view">
 2  <div class="columns">
 3    <div class="column is-6 is-offset-3">
 4      <registration v-bind:usernames="usernames" inline-template>
 5      <%= form_for @user, url: registrations_path do |f| %>
 6        <p class="control has-icon has-icon-right">
 7          <%= 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 }" %>
 8          <span class="icon is-small">
 9            <i class="fa fa-envelope"></i>
10          </span>
11        </p>
12        <p class="control has-icon has-icon-right">
13          <%= 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 }"  %>
14          <span class="icon is-small">
15            <i class="fa fa-envelope"></i>
16          </span>
17        </p>
18        <p class="control has-icon has-icon-right">
19          <%= 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 }"  %>
20          <span class="icon is-small">
21            <i class="fa fa-lock"></i>
22          </span>
23        </p>
24        <%= f.label :terms_and_conditions do %>
25          <%= f.check_box :terms_and_conditions, required: 'required', "v-model": "terms_and_conditions" %>
26          <%= t('.terms_and_conditions') %>
27        <% end %>
28        <p class="control">
29          <%= f.submit t('.register_button'), class: "button is-success is-large is-fullwidth", ":disabled": "!isValid"  %>
30          <%= button_tag t('.terms_and_conditions_link'), type: :button, class: "button is-link is-pulled-left", data: { modal: ".modal" } %>
31          <%= link_to t('.login_link'), new_session_path, class: "button is-link is-pulled-right" %>
32        </p>
33      <% end %>
34      </registration>
35    </div>
36  </div>
37
38  <div class="modal">
39    <div class="modal-background"></div>
40    <div class="modal-card">
41      <header class="modal-card-head">
42        <p class="modal-card-title"><%= t('.terms_and_conditions_link') %></p>
43        <button class="delete close-modal"></button>
44      </header>
45      <section class="modal-card-body">
46        <div class=content>
47          <%= render 'layouts/terms_content' %>
48        </div>
49      </section>
50      <footer class="modal-card-foot">
51        <a class="button is-success close-modal">Okay</a>
52      </footer>
53    </div>
54  </div>
55</div>