From 0fd80a21af98adac58ec12c9d0718e2e27039980 Mon Sep 17 00:00:00 2001
From: bhavi <bhavi13may@gmail.com>
Date: Thu, 7 Sep 2017 16:35:16 -0500
Subject: [PATCH 1/9] adding bootstrap classes to the form

---
 .../registrations/_personal_details.html.erb  | 61 ++++++++++---------
 app/views/devise/registrations/edit.html.erb  | 28 ++++-----
 2 files changed, 43 insertions(+), 46 deletions(-)

diff --git a/app/views/devise/registrations/_personal_details.html.erb b/app/views/devise/registrations/_personal_details.html.erb
index 5ed5eb3252..a506ae04c1 100644
--- a/app/views/devise/registrations/_personal_details.html.erb
+++ b/app/views/devise/registrations/_personal_details.html.erb
@@ -1,4 +1,4 @@
-<%= form_for(resource, as: resource_name, url: registration_path(resource_name, tab: 'personal-details-tab'), html: {method: :put, class: "roadmap-form white_background"}) do |f| %>
+<%= form_for(resource, as: resource_name, url: registration_path(resource_name, tab: 'personal-details-tab'), html: {method: :put, class: "form-horizontal"}) do |f| %>
 
   <div class="profile_text">
     <p>
@@ -9,46 +9,47 @@
 
   <div>
     <!-- Edit Profile -->
-    <fieldset class="side-by-side">
+    <fieldset>
       <legend><%= _('You can edit any of the details below.') %></legend>
 
       <%= hidden_field_tag :unlink_flag, "false", id: "unlink_flag" %>
       <%= hidden_field_tag :skip_personal_details, "false" %>
 
-      <div class="form-input">
-        <%= f.label(:email, _('Email'), class: 'required') %>
-        <%= f.email_field(:email, class: 'left-indent required input-small',
+      <div class="form-group">
+        <%= f.label(:email, _('Email'), class: 'required col-sm-2 control-label') %>
+        <%= f.email_field(:email, class: 'required form-control',
           title: _('Please enter your current password below when changing your email address.'),
           value: @user.email) %>
-        <span role="" id="email_error" class="error-tooltip-right left-indent"></span>
+        <span role="" id="email_error" class="error-tooltip-right "></span>
       </div>
 
-      <div class="form-input">
-        <%= f.label(:firstname, _('First name'), class: 'required') %>
-        <%= f.text_field(:firstname, class: 'input-small required left-indent', value: @user.firstname) %>
+     <div class="form-group">
+        <%= f.label(:firstname, _('First name'), class: 'required col-sm-2 control-label') %>
+        <%= f.text_field(:firstname, class: 'required  form-control', value: @user.firstname) %>
       </div>
-      <div class="form-input">
-        <%= f.label(:surname, _('Last name'), class: 'required') %>
-        <%= f.text_field(:surname, class: 'input-small required left-indent', value: @user.surname) %>
+
+      <div class="form-group">
+        <%= f.label(:surname, _('Last name'), class: 'required col-sm-2 control-label') %>
+        <%= f.text_field(:surname, class: 'required  form-control', value: @user.surname) %>
       </div>
 
-      <div class="form-input">
-        <%= f.label(:recovery_email, _('Recovery email'), class: 'required') %>
-        <%= f.email_field(:recovery_email, class: 'left-indent required input-small',
+      <div class="form-group">
+        <%= f.label(:recovery_email, _('Recovery email'), class: 'required col-sm-2 control-label') %>
+        <%= f.email_field(:recovery_email, class: ' required form-control',
           title: _('This email will be used to recover your account if you change institutions'),
           value: @user.recovery_email) %>
         <span role="" id="recovery_email_error"
-              class="error-tooltip-right left-indent"></span>
+              class="error-tooltip-right "></span>
       </div>
 
-      <div class="form-input">
-        <%= f.label(:password, _('Password'), class: 'required') %>
-        <%= f.password_field(:password, class: 'left-indent required input-small') %>
+      <div class="form-group">
+        <%= f.label(:password, _('Password'), class: 'required col-sm-2 control-label') %>
+        <%= f.password_field(:password, class: ' required form-control') %>
         <span role="" id="password_error"
-              class="error-tooltip-right left-indent"></span>
+              class="error-tooltip-right "></span>
       </div>
 
-      <div class="form-input accessible-combobox-smaller">
+      <div class="form-group accessible-combobox-smaller">
         <%= f.label(:org_name, _('Organisation')) %>
         <%= render partial: "shared/accessible_combobox",
                    locals: {name: "#{resource_name}[org_name]",
@@ -56,22 +57,22 @@
                             default_selection: @default_org,
                             models: @orgs,
                             attribute: 'name',
-                            classes: 'left-indent input-large'} %>
+                            classes: ' input-large'} %>
       <div id="other-org-link">
         <div style="width: 25%; text-align: right; display: inline-block; margin-right: 10px">&nbsp;</div>
         <a href="#"><%= _("My organisation isn't listed.") %></a>
       </div>
       <% other_organisations = Org.where("parent_id IS ? AND is_other = ?", nil, true).pluck(:id) %>
-      <div id="other-org-name" class="form-input" style="display: <%= @other_organisations.nil? ? 'block' : 'none' %> " data-orgs="<%= other_organisations.join(',') %>">
+      <div id="other-org-name" class="form-control" style="display: <%= @other_organisations.nil? ? 'block' : 'none' %> " data-orgs="<%= other_organisations.join(',') %>">
         <%= f.label _('Organisation name'), for: :other_organisation %>
-        <%= f.text_field :other_organisation, :autocomplete => "off", :class => 'left-indent input-medium has-tooltip', 'data-toggle' => "tooltip", 'data-container' => "body", 'title' => _('Please enter the name of your organisation.') %>
+        <%= f.text_field :other_organisation, :autocomplete => "off", class: ' form-control has-tooltip', 'data-toggle' => "tooltip", 'data-container' => "body", 'title' => _('Please enter the name of your organisation.') %>
       </div>
       </div>
 
       <% if MANY_LANGUAGES %>
-        <div class="form-input">
+        <div class="form-group">
           <% lang_id = current_user.language.nil? ? Language.id_for(FastGettext.default_locale) : current_user.language.id %>
-          <%= f.label(:language_id, _('Language')) %> 
+          <%= f.label(:language_id, _('Language'), class: "col-sm-2 control-label") %> 
           <%= select_tag("user[language_id]",
             options_from_collection_for_select(@languages, "id", "name", lang_id),
             class: 'input-small') %>
@@ -79,7 +80,7 @@
       <% end %>
 
       <% @identifier_schemes.each do |scheme| %>
-          <div class="form-input">
+          <div class="form-group">
             <% if scheme.name == 'shibboleth' %>
                 <label>
                   <span class="aria-only" aria-hidden="false"><%= scheme.description %></span>
@@ -97,8 +98,8 @@
       <% end %>
 
       <% unless @user.api_token.blank? %>
-        <div class="form-input">
-          <%= f.label(:api_token, _('API token')) %>
+        <div class="form-group">
+          <%= f.label(:api_token, _('API token'), "col-sm-2 control-label") %>
           <div class="input-medium"><%= @user.api_token %></div>
           <%= label_tag(:api_information, _('API Information')) %>
           <div><%= link_to( _('How to use the API'), controller: "token_permission_types", action: "index")%></div>
@@ -106,7 +107,7 @@
       <% end %>
 
       <br />
-      <div class='form-input'>
+      <div class='form-group'>
         <div class="button-spacer">&nbsp;</div>
         <%= render partial: 'shared/accessible_submit_button',
                    locals: {id: 'update',
diff --git a/app/views/devise/registrations/edit.html.erb b/app/views/devise/registrations/edit.html.erb
index 219bee50f6..c93f4a1e45 100644
--- a/app/views/devise/registrations/edit.html.erb
+++ b/app/views/devise/registrations/edit.html.erb
@@ -6,35 +6,31 @@
 
 <div class="row">
   <div class="col-md-12">
-    <div class="tabbed-area">
-      <ul class="tabs" role="tablist">
-        <li id="personal-details-tab" class="active" role="tab" aria-controls="personal-details-panel">
-          <a href="#personal-details-panel" aria-selected="true"><%= _('Personal Details') %></a>
+      <ul class="nav nav-tabs" role="tablist">
+        <li role="personal-details" class="active">
+          <a href="#personal-details" role="tab" aria-controls="personal-details" data-toggle="tab"><%= _('Personal Details') %></a>
         </li>
-        <li id="password-details-tab" role="tab" aria-controls="password-details-panel">
-          <a href="#password-details-panel" aria-selected="false"><%= _('Password') %></a>
+        <li role="password-details">
+          <a href="#password-details" role="tab" aria-controls="password-details" data-toggle="tab"><%= _('Password') %></a>
         </li>
-        <li id="notification-preferences-tab" role="tab" aria-controls="notification-preferences-panel">
-          <a href="#notification-preferences-panel" aria-selected="false"><%= _('Notification Preferences') %></a>
+        <li role="notification-preferences">
+          <a href="#notification-preferences" role="tab" aria-controls="notification-preferences" data-toggle="tab"><%= _('Notification Preferences') %></a>
         </li>
       </ul>
     
-      <div class="tab-panels" role="tabpanel">
-        <div id="personal-details-panel" class="tab-panel active" aria-hidden="false"
-             aria-labelledby="personal-details-tab">
+      <div class="tab-content">
+        <div id="personal-details" role="tabpanel" class="tab-pane active px-2">
           <%= render partial: 'devise/registrations/personal_details' %>
         </div>
 
-        <div id="password-details-panel" aria-hidden="true" class="tab-panel" role="tabpanel"
-             aria-labelledby="password-tab">
+        <div id="password-details" role="tabpanel" class="tab-pane">
           <%= render partial: 'devise/registrations/password_details' %>
         </div>
 
-        <div id="notification-preferences-panel" aria-hidden="true" class="tab-panel"
-             role="tabpanel" aria-labelledby="notification-preferences-tab">
+        <div id="notification-preferences" role="tabpanel" class="tab-pane">
           <%= render partial: 'users/notification_preferences' %>
         </div>
       </div>
-    </div>
+
   </div>
 </div>
\ No newline at end of file

From 0dbd1e1a1ad95b9264b474b4920f7f1a91e072c2 Mon Sep 17 00:00:00 2001
From: bhavi <bhavi13may@gmail.com>
Date: Mon, 11 Sep 2017 13:51:07 -0500
Subject: [PATCH 2/9] add bootstrap classes to user details and preferences tab

---
 .../_external_identifier_orcid.html.erb       |  24 +--
 .../_external_identifier_shibboleth.html.erb  |  36 ++--
 .../registrations/_personal_details.html.erb  | 204 +++++++++---------
 3 files changed, 133 insertions(+), 131 deletions(-)

diff --git a/app/views/devise/registrations/_external_identifier_orcid.html.erb b/app/views/devise/registrations/_external_identifier_orcid.html.erb
index 76c66499e8..b5e9acbe3f 100644
--- a/app/views/devise/registrations/_external_identifier_orcid.html.erb
+++ b/app/views/devise/registrations/_external_identifier_orcid.html.erb
@@ -1,15 +1,13 @@
-<div>
-  <% if id.nil? || id.identifier == '' %>
-      <%= link_to 'Create or connect your ORCID iD', Rails.application.routes.url_helpers.send("user_#{scheme.name.downcase}_omniauth_authorize_path"), id:"connect-orcid-button", target: '_blank', title: t("identifier_schemes.schemes.#{scheme.name}.connect_tooltip", default: "") %>
+<% if id.nil? || id.identifier == '' %>
+    <%= link_to 'Create or connect your ORCID iD', Rails.application.routes.url_helpers.send("user_#{scheme.name.downcase}_omniauth_authorize_path"), id:"connect-orcid-button", target: '_blank', title: t("identifier_schemes.schemes.#{scheme.name}.connect_tooltip", default: "") %>
+<% else %>
+  <% if scheme.user_landing_url.nil? %>
+    <%= _("Your account has been linked to #{scheme.description}.") %>
   <% else %>
-    <% if scheme.user_landing_url.nil? %>
-      <%= _("Your account has been linked to #{scheme.description}.") %>
-    <% else %>
-      <%= link_to (image_tag("#{scheme.logo_url}", id: 'orcid-id-logo', alt: scheme.description)) + "#{scheme.user_landing_url}/#{id.identifier}", "#{scheme.user_landing_url}/#{id.identifier}", id: 'orcid-id', target: '_blank', title: t("identifier_schemes.schemes.#{scheme.name}.connect_tooltip", default: "") %>
-    <% end %>
-    <% title = _("Unlink your account from #{scheme.description}. You can link again at any time.") %>
-    <%= link_to '<i class="fa fa-fw fa-times-circle" aria-hidden="true"></i>'.html_safe, 
-                destroy_user_identifier_path(id), method: :delete, title: title, 'aria-label': title,
-                data: {confirm: _("Are you sure you want to unlink #{scheme.description} ID?")} %>
+    <%= link_to (image_tag("#{scheme.logo_url}", id: 'orcid-id-logo', alt: scheme.description)) + "#{scheme.user_landing_url}/#{id.identifier}", "#{scheme.user_landing_url}/#{id.identifier}", id: 'orcid-id', target: '_blank', title: t("identifier_schemes.schemes.#{scheme.name}.connect_tooltip", default: "") %>
   <% end %>
-</div>
\ No newline at end of file
+  <% title = _("Unlink your account from #{scheme.description}. You can link again at any time.") %>
+  <%= link_to '<i class="fa fa-fw fa-times-circle" aria-hidden="true"></i>'.html_safe, 
+              destroy_user_identifier_path(id), method: :delete, title: title, 'aria-label': title,
+              data: {confirm: _("Are you sure you want to unlink #{scheme.description} ID?")} %>
+<% end %>
diff --git a/app/views/devise/registrations/_external_identifier_shibboleth.html.erb b/app/views/devise/registrations/_external_identifier_shibboleth.html.erb
index 65ca8fb6fb..9daa7f1065 100644
--- a/app/views/devise/registrations/_external_identifier_shibboleth.html.erb
+++ b/app/views/devise/registrations/_external_identifier_shibboleth.html.erb
@@ -1,21 +1,19 @@
-<div>
-  <% if id.nil? || id.identifier == '' %>
-      <%= link_to "#{_("Link account with #{scheme.description} ID")}",
-                  Rails.application.routes.url_helpers.send(
-                    "user_#{scheme.name.downcase}_omniauth_authorize_path"
-                  ),
-                  title: t("identifier_schemes.schemes.#{scheme.name}.connect_tooltip", default: "")
-      %>
+<% if id.nil? || id.identifier == '' %>
+    <%= link_to "#{_("Link account with #{scheme.description} ID")}",
+                Rails.application.routes.url_helpers.send(
+                  "user_#{scheme.name.downcase}_omniauth_authorize_path"
+                ),
+                title: t("identifier_schemes.schemes.#{scheme.name}.connect_tooltip", default: "")
+    %>
+<% else %>
+  <% if scheme.user_landing_url.nil? %>
+    <%= _("Your account has been linked to #{scheme.description}.") %>
   <% else %>
-    <% if scheme.user_landing_url.nil? %>
-      <%= _("Your account has been linked to #{scheme.description}.") %>
-    <% else %>
-      <%= link_to "#{_("Your account has been linked to #{scheme.description}.")}", "#{scheme.user_landing_url}/#{id.identifier}", target: '_blank', 
-          title: t("identifier_schemes.schemes.#{scheme.name}.connect_tooltip", default: "") %>
-    <% end %>
-    <% title = _("Unlink your account from #{scheme.description}. You can link again at any time.") %>
-    <%= link_to '<i class="fa fa-fw fa-times-circle" aria-hidden="true"></i>'.html_safe, 
-                destroy_user_identifier_path(id), method: :delete, title: title, 'aria-label': title,
-                data: {confirm: _("Are you sure you want to unlink #{scheme.description} ID?")} %>
+    <%= link_to "#{_("Your account has been linked to #{scheme.description}.")}", "#{scheme.user_landing_url}/#{id.identifier}", target: '_blank', 
+        title: t("identifier_schemes.schemes.#{scheme.name}.connect_tooltip", default: "") %>
   <% end %>
-</div>
\ No newline at end of file
+  <% title = _("Unlink your account from #{scheme.description}. You can link again at any time.") %>
+  <%= link_to '<i class="fa fa-fw fa-times-circle" aria-hidden="true"></i>'.html_safe, 
+              destroy_user_identifier_path(id), method: :delete, title: title, 'aria-label': title,
+              data: {confirm: _("Are you sure you want to unlink #{scheme.description} ID?")} %>
+<% end %>
diff --git a/app/views/devise/registrations/_personal_details.html.erb b/app/views/devise/registrations/_personal_details.html.erb
index a506ae04c1..a39e5f7350 100644
--- a/app/views/devise/registrations/_personal_details.html.erb
+++ b/app/views/devise/registrations/_personal_details.html.erb
@@ -1,122 +1,128 @@
 <%= form_for(resource, as: resource_name, url: registration_path(resource_name, tab: 'personal-details-tab'), html: {method: :put, class: "form-horizontal"}) do |f| %>
+  <p class="form-control-static">
+    <%= _("Please note that your email address is used as your username.
+    If you change this, remember to use your new email address on sign in.") %>
+  </p>
 
-  <div class="profile_text">
-    <p>
-      <%= _("Please note that your email address is used as your username.
-      If you change this, remember to use your new email address on sign in.") %>
-    </p>
-  </div>
-
-  <div>
-    <!-- Edit Profile -->
-    <fieldset>
-      <legend><%= _('You can edit any of the details below.') %></legend>
+  <!-- Edit Profile -->
+  <%= _('You can edit any of the details below.') %>
+  <%= hidden_field_tag :unlink_flag, "false", id: "unlink_flag" %>
+  <%= hidden_field_tag :skip_personal_details, "false" %>
 
-      <%= hidden_field_tag :unlink_flag, "false", id: "unlink_flag" %>
-      <%= hidden_field_tag :skip_personal_details, "false" %>
+  <div class="form-group">
+    <%= f.label(:email, _('Email'), class: "col-sm-2 control-label") %>
+    <div class="col-sm-6">
+      <%= f.email_field(:email, class: "form-control",
+      title: _('Please enter your current password below when changing your email address.'),
+      value: @user.email) %>
+    </div>
+  </div>
 
-      <div class="form-group">
-        <%= f.label(:email, _('Email'), class: 'required col-sm-2 control-label') %>
-        <%= f.email_field(:email, class: 'required form-control',
-          title: _('Please enter your current password below when changing your email address.'),
-          value: @user.email) %>
-        <span role="" id="email_error" class="error-tooltip-right "></span>
-      </div>
+  <div class="form-group">
+    <%= f.label(:firstname, _('First name'), class: "col-sm-2 control-label") %>
+    <div class="col-sm-6">
+      <%= f.text_field(:firstname, class: 'required form-control', value: @user.firstname) %>
+    </div>
+  </div>
 
-     <div class="form-group">
-        <%= f.label(:firstname, _('First name'), class: 'required col-sm-2 control-label') %>
-        <%= f.text_field(:firstname, class: 'required  form-control', value: @user.firstname) %>
-      </div>
+  <div class="form-group">
+    <%= f.label(:surname, _('Last name'), class: "col-sm-2 control-label") %>
+    <div class="col-sm-6">
+      <%= f.text_field(:surname, class: 'required form-control', value: @user.surname) %>
+    </div>
+  </div>
 
-      <div class="form-group">
-        <%= f.label(:surname, _('Last name'), class: 'required col-sm-2 control-label') %>
-        <%= f.text_field(:surname, class: 'required  form-control', value: @user.surname) %>
-      </div>
+  <div class="form-group">
+    <%= f.label(:recovery_email, _('Recovery email'), class: "col-sm-2 control-label") %>
+    <div class="col-sm-6">
+      <%= f.email_field(:recovery_email, class: ' required form-control',
+                        title: _('This email will be used to recover your account if you change institutions'),
+                        value: @user.recovery_email) %>
+      <span role="" id="recovery_email_error"
+          class="error-tooltip-right "></span>
+    </div>
+  </div>
 
-      <div class="form-group">
-        <%= f.label(:recovery_email, _('Recovery email'), class: 'required col-sm-2 control-label') %>
-        <%= f.email_field(:recovery_email, class: ' required form-control',
-          title: _('This email will be used to recover your account if you change institutions'),
-          value: @user.recovery_email) %>
-        <span role="" id="recovery_email_error"
-              class="error-tooltip-right "></span>
-      </div>
+  <div class="form-group">
+    <%= f.label(:password, _('Password'), class: "col-sm-2 control-label") %>
+    <div class="col-sm-6">
+      <%= f.password_field(:password, class: 'required form-control') %>
+      <span role="" id="password_error"
+          class="error-tooltip-right "></span>
+    </div>
+  </div>
 
-      <div class="form-group">
-        <%= f.label(:password, _('Password'), class: 'required col-sm-2 control-label') %>
-        <%= f.password_field(:password, class: ' required form-control') %>
-        <span role="" id="password_error"
-              class="error-tooltip-right "></span>
-      </div>
+  <div class="form-group">
+    <%= f.label(:org_name, _('Organisation'), class: "col-sm-2 control-label") %>
+    <div class="col-sm-6">
+      <%= render partial: "shared/accessible_combobox",
+               locals: {name: "#{resource_name}[org_name]",
+                        id: "#{resource_name}_org_name",
+                        default_selection: @default_org,
+                        models: @orgs,
+                        attribute: 'name',
+                        classes: 'form-control'} %>
 
-      <div class="form-group accessible-combobox-smaller">
-        <%= f.label(:org_name, _('Organisation')) %>
-        <%= render partial: "shared/accessible_combobox",
-                   locals: {name: "#{resource_name}[org_name]",
-                            id: "#{resource_name}_org_name",
-                            default_selection: @default_org,
-                            models: @orgs,
-                            attribute: 'name',
-                            classes: ' input-large'} %>
       <div id="other-org-link">
-        <div style="width: 25%; text-align: right; display: inline-block; margin-right: 10px">&nbsp;</div>
         <a href="#"><%= _("My organisation isn't listed.") %></a>
       </div>
+    </div>
+
+    <div class="form-group">
       <% other_organisations = Org.where("parent_id IS ? AND is_other = ?", nil, true).pluck(:id) %>
-      <div id="other-org-name" class="form-control" style="display: <%= @other_organisations.nil? ? 'block' : 'none' %> " data-orgs="<%= other_organisations.join(',') %>">
-        <%= f.label _('Organisation name'), for: :other_organisation %>
-        <%= f.text_field :other_organisation, :autocomplete => "off", class: ' form-control has-tooltip', 'data-toggle' => "tooltip", 'data-container' => "body", 'title' => _('Please enter the name of your organisation.') %>
-      </div>
+      <div id="other-org-name" style="display: <%= @other_organisations.nil? ? 'block' : 'none' %>" data-orgs="<%= other_organisations.join(',') %>">
+        <%= f.label _('Organisation name'), for: :other_organisation, class: "col-sm-2 control-label" %>
+          <%= f.text_field :other_organisation, :autocomplete => "off", :class => 'form-control has-tooltip', 'data-toggle' => "tooltip", 'data-container' => "body", 'title' => _('Please enter the name of your organisation.') %>
       </div>
+    </div>
+  </div>
 
-      <% if MANY_LANGUAGES %>
-        <div class="form-group">
-          <% lang_id = current_user.language.nil? ? Language.id_for(FastGettext.default_locale) : current_user.language.id %>
-          <%= f.label(:language_id, _('Language'), class: "col-sm-2 control-label") %> 
-          <%= select_tag("user[language_id]",
+  <% if MANY_LANGUAGES %>
+    <div class="form-group">
+      <% lang_id = current_user.language.nil? ? Language.id_for(FastGettext.default_locale) : current_user.language.id %>
+      <%= f.label(:language_id, _('Language'), class: "col-sm-2 control-label") %>
+      <div class="col-sm-6">
+        <%= select_tag("user[language_id]",
             options_from_collection_for_select(@languages, "id", "name", lang_id),
-            class: 'input-small') %>
-        </div>
-      <% end %>
-
-      <% @identifier_schemes.each do |scheme| %>
-          <div class="form-group">
-            <% if scheme.name == 'shibboleth' %>
-                <label>
-                  <span class="aria-only" aria-hidden="false"><%= scheme.description %></span>
-                  <i class="fa fa-user" title="<%= scheme.description %>" aria-hidden="true"></i>
-                </label>
-            <% else %>
-                <%= label_tag(:scheme_name, scheme.name.capitalize ) %>
-            <% end %>
-            <div class="identifier-scheme">
-              <%= render partial: "external_identifier_#{scheme.name}",
-                         locals: { scheme: scheme,
-                                   id: current_user.identifier_for(scheme)} %>
-            </div>
-          </div>
-      <% end %>
+            class: "form-control") %>
+      </div>
+    </div>
+  <% end %>
 
-      <% unless @user.api_token.blank? %>
-        <div class="form-group">
-          <%= f.label(:api_token, _('API token'), "col-sm-2 control-label") %>
-          <div class="input-medium"><%= @user.api_token %></div>
-          <%= label_tag(:api_information, _('API Information')) %>
-          <div><%= link_to( _('How to use the API'), controller: "token_permission_types", action: "index")%></div>
-        </div>
+  <% @identifier_schemes.each do |scheme| %>
+    <div class="form-group">
+      <% if scheme.name == 'shibboleth' %>
+          <label class="col-sm-2 control-label">
+            <span class="aria-only" aria-hidden="false"><%= scheme.description.capitalize %></span>
+            <i class="fa fa-user" title="<%= scheme.description.capitalize %>" aria-hidden="true"></i>
+          </label>
+      <% else %>
+          <%= label_tag(:scheme_name, scheme.name.capitalize, class: "col-sm-2 control-label") %>
       <% end %>
 
-      <br />
-      <div class='form-group'>
-        <div class="button-spacer">&nbsp;</div>
-        <%= render partial: 'shared/accessible_submit_button',
-                   locals: {id: 'update',
-                            val: 'Save',
-                            disabled_initially: true,
-                            classes: 'small-input-button',
-                            tooltip: _('Enter all of the required information above')} %>
+      <div class="col-sm-6">
+        <%= render partial: "external_identifier_#{scheme.name}",
+                   locals: { scheme: scheme,
+                             id: current_user.identifier_for(scheme)} %>
       </div>
+    </div>
+  <% end %>
+
+  <% unless @user.api_token.blank? %>
+    <div class="form-group">
+      <%= f.label(:api_token, _('API token'), class: "col-sm-2 control-label") %>
+      <div class="col-sm-6"><%= @user.api_token %></div>
+      <%= label_tag(:api_information, _('API Information'), class: "col-sm-2 control-label") %>
+      <div><%= link_to( _('How to use the API'), controller: "token_permission_types", action: "index")%></div>
+    </div>
+  <% end %>
 
-    </fieldset>
+  <div class='form-submit col-sm-6'>
+    <%= render partial: 'shared/accessible_submit_button',
+             locals: {id: 'update',
+                      val: 'Save',
+                      disabled_initially: true,
+                      classes: 'btn btn-default',
+                      tooltip: _('Enter all of the required information above')} %>
   </div>
 <% end %>

From 32d082cc2dfe3e6ce61d1160a56f1b200787a0c9 Mon Sep 17 00:00:00 2001
From: bhavi <bhavi13may@gmail.com>
Date: Tue, 12 Sep 2017 10:51:07 -0500
Subject: [PATCH 3/9] add user profile page js file

---
 .../registrations/_password_details.html.erb  | 73 ++++++++++---------
 .../registrations/_personal_details.html.erb  | 32 ++++----
 lib/assets/javascripts/application.js         |  1 +
 .../views/devise/registrations/edit.js        |  5 ++
 4 files changed, 58 insertions(+), 53 deletions(-)
 create mode 100644 lib/assets/javascripts/views/devise/registrations/edit.js

diff --git a/app/views/devise/registrations/_password_details.html.erb b/app/views/devise/registrations/_password_details.html.erb
index a5b7937253..5ac8888b19 100644
--- a/app/views/devise/registrations/_password_details.html.erb
+++ b/app/views/devise/registrations/_password_details.html.erb
@@ -1,44 +1,45 @@
-<%= form_for(resource, as: resource_name, url: registration_path(resource_name,  tab: 'password-details-tab'), html: {method: :put, class: "roadmap-form white_background"}) do |f| %>
-  <fieldset class="side-by-side">
-    <legend><%= _('If you would like to change your password please complete the following fields.') %></legend>
+<%= form_for(resource, as: resource_name, url: registration_path(resource_name,  tab: 'password-details-tab'), html: {method: :put, id: "personal_details_registration_from", class: "form-horizontal"}) do |f| %>
 
-    <%= hidden_field_tag :skip_personal_details, "true" %>
+  <p class="form-control-static"><%= _('If you would like to change your password please complete the following fields.') %></p>
 
-    <div class="form-input">
-      <%= f.label(:current_password, _('Current password'), class: 'required') %>
-      <%= f.password_field(:current_password, class: 'left-indent required input-medium') %>
-      <span role="" id="current_password_error"
-            class="error-tooltip-right left-indent"></span>
-    </div>
+  <%= hidden_field_tag :skip_personal_details, "true" %>
 
-    <div class="form-input">
-      <%= f.label(:password, _('New password'), class: 'required') %>
-      <%= f.password_field(:password, class: 'left-indent required input-medium', id: 'user_new_password') %>
-      <span role="" id="password_error"
-            class="error-tooltip-right left-indent"></span>
+  <div class="form-group">
+    <%= f.label(:current_password, _('Current password'), class: 'col-sm-2 control-label') %>
+    <div class="col-sm-6">
+      <%= f.password_field(:current_password,  class: 'form-control', "aria-required": true ) %>
     </div>
+  </div>
 
-    <div class="form-input">
-      <%= f.label(:password_confirmation, _('Password confirmation'), class: 'required') %>
-      <%= f.password_field(:password_confirmation, class: 'left-indent required input-medium') %>
-      <span role="" id="password_confirmation_error"
-            class="error-tooltip-right left-indent"></span>
+  <div class="form-group">
+    <%= f.label(:password, _('New password'),  class: 'col-sm-2 control-label') %>
+    <div class="col-sm-6"> 
+      <%= f.password_field(:password,  class: 'form-control', "aria-required": true , id: 'user_new_password') %>
     </div>
+  </div>
 
-    <div class="form-input">
-      <%= label_tag(:password_show, _('Show passwords')) %>
-      <%= check_box_tag(:password_show, "1", false, class: 'left-indent') %>
-    </div>
-    
-    <br />
-    <div class='form-input'>
-      <div class="button-spacer">&nbsp;</div>
-      <%= render partial: 'shared/accessible_submit_button',
-                 locals: {id: 'update',
-                          val: 'Save',
-                          disabled_initially: false,
-                          classes: 'small-input-button left-indent',
-                          tooltip: _('Enter all of the required information above')} %>
+  <div class="form-group">
+    <%= f.label(:password_confirmation, _('Password confirmation'),  class: 'col-sm-2 control-label') %>
+    <div class="col-sm-6">
+      <%= f.password_field(:password_confirmation, class: 'form-control', "aria-required": true ) %>
     </div>
-  </fieldset>
-<% end %>
\ No newline at end of file
+  </div>
+
+  <div class="checkbox">
+    <label for="passwords_toggle">
+      <input type="checkbox" id="passwords_toggle" /><%= _('Show passwords') %>
+    </label>
+  </div>
+
+  <div class='form-submit col-sm-6'>
+    <%= render partial: 'shared/accessible_submit_button',
+               locals: {id: 'update',
+                        val: 'Save',
+                        disabled_initially: false,
+                        classes: 'btn btn-default',
+                        tooltip: _('Enter all of the required information above')} %>
+  </div>
+<% end %>
+
+
+
diff --git a/app/views/devise/registrations/_personal_details.html.erb b/app/views/devise/registrations/_personal_details.html.erb
index a39e5f7350..5ec12e7db4 100644
--- a/app/views/devise/registrations/_personal_details.html.erb
+++ b/app/views/devise/registrations/_personal_details.html.erb
@@ -12,43 +12,39 @@
   <div class="form-group">
     <%= f.label(:email, _('Email'), class: "col-sm-2 control-label") %>
     <div class="col-sm-6">
-      <%= f.email_field(:email, class: "form-control",
-      title: _('Please enter your current password below when changing your email address.'),
-      value: @user.email) %>
+      <%= f.email_field(:email, class: "form-control", "aria-required": true,
+                        title: _('Please enter your current password below when changing your email address.'),
+                        value: @user.email) %>
     </div>
   </div>
 
   <div class="form-group">
     <%= f.label(:firstname, _('First name'), class: "col-sm-2 control-label") %>
     <div class="col-sm-6">
-      <%= f.text_field(:firstname, class: 'required form-control', value: @user.firstname) %>
+      <%= f.text_field(:firstname, class: 'required form-control', required: true, value: @user.firstname) %>
     </div>
   </div>
 
   <div class="form-group">
     <%= f.label(:surname, _('Last name'), class: "col-sm-2 control-label") %>
     <div class="col-sm-6">
-      <%= f.text_field(:surname, class: 'required form-control', value: @user.surname) %>
+      <%= f.text_field(:surname, class: 'required form-control', "aria-required": true, value: @user.surname) %>
     </div>
   </div>
 
   <div class="form-group">
     <%= f.label(:recovery_email, _('Recovery email'), class: "col-sm-2 control-label") %>
     <div class="col-sm-6">
-      <%= f.email_field(:recovery_email, class: ' required form-control',
+      <%= f.email_field(:recovery_email, class: ' required form-control',  "aria-required": true,
                         title: _('This email will be used to recover your account if you change institutions'),
                         value: @user.recovery_email) %>
-      <span role="" id="recovery_email_error"
-          class="error-tooltip-right "></span>
     </div>
   </div>
 
   <div class="form-group">
     <%= f.label(:password, _('Password'), class: "col-sm-2 control-label") %>
     <div class="col-sm-6">
-      <%= f.password_field(:password, class: 'required form-control') %>
-      <span role="" id="password_error"
-          class="error-tooltip-right "></span>
+      <%= f.password_field(:password, class: 'required form-control', "aria-required": true) %>
     </div>
   </div>
 
@@ -100,7 +96,7 @@
           <%= label_tag(:scheme_name, scheme.name.capitalize, class: "col-sm-2 control-label") %>
       <% end %>
 
-      <div class="col-sm-6">
+      <div class="col-sm-6 identifier-scheme">
         <%= render partial: "external_identifier_#{scheme.name}",
                    locals: { scheme: scheme,
                              id: current_user.identifier_for(scheme)} %>
@@ -119,10 +115,12 @@
 
   <div class='form-submit col-sm-6'>
     <%= render partial: 'shared/accessible_submit_button',
-             locals: {id: 'update',
-                      val: 'Save',
-                      disabled_initially: true,
-                      classes: 'btn btn-default',
-                      tooltip: _('Enter all of the required information above')} %>
+               locals: { id: 'update',
+                         val: 'Save',
+                         disabled_initially: true,
+                         classes: 'btn btn-default',
+                         tooltip: _('Enter all of the required information above') } %>
   </div>
 <% end %>
+
+
diff --git a/lib/assets/javascripts/application.js b/lib/assets/javascripts/application.js
index 58a97087df..1520b05d19 100644
--- a/lib/assets/javascripts/application.js
+++ b/lib/assets/javascripts/application.js
@@ -5,3 +5,4 @@ import './views/devise/passwords/new';
 import './views/phases/edit';
 import './views/plans/edit_details';
 import './views/plans/share';
+import './views/devise/registrations/edit';
diff --git a/lib/assets/javascripts/views/devise/registrations/edit.js b/lib/assets/javascripts/views/devise/registrations/edit.js
new file mode 100644
index 0000000000..83cbb9332b
--- /dev/null
+++ b/lib/assets/javascripts/views/devise/registrations/edit.js
@@ -0,0 +1,5 @@
+import ariatiseForm from '../../../utils/ariatiseForm';
+
+$(() => {
+  ariatiseForm({ selector: '#personal_details_registration_from' });
+});

From bf62d5dfde12b59e79ba4fd977d0fa6350f622f8 Mon Sep 17 00:00:00 2001
From: bhavi <bhavi13may@gmail.com>
Date: Tue, 12 Sep 2017 11:01:28 -0500
Subject: [PATCH 4/9] add other tabs form to js bundle as well

---
 app/views/devise/registrations/_password_details.html.erb | 2 +-
 app/views/devise/registrations/_personal_details.html.erb | 2 +-
 lib/assets/javascripts/views/devise/registrations/edit.js | 4 +++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/views/devise/registrations/_password_details.html.erb b/app/views/devise/registrations/_password_details.html.erb
index 5ac8888b19..27299a7be2 100644
--- a/app/views/devise/registrations/_password_details.html.erb
+++ b/app/views/devise/registrations/_password_details.html.erb
@@ -1,4 +1,4 @@
-<%= form_for(resource, as: resource_name, url: registration_path(resource_name,  tab: 'password-details-tab'), html: {method: :put, id: "personal_details_registration_from", class: "form-horizontal"}) do |f| %>
+<%= form_for(resource, as: resource_name, url: registration_path(resource_name,  tab: 'password-details-tab'), html: {method: :put, id: "password_details_registration_form", class: "form-horizontal"}) do |f| %>
 
   <p class="form-control-static"><%= _('If you would like to change your password please complete the following fields.') %></p>
 
diff --git a/app/views/devise/registrations/_personal_details.html.erb b/app/views/devise/registrations/_personal_details.html.erb
index 5ec12e7db4..87804deeff 100644
--- a/app/views/devise/registrations/_personal_details.html.erb
+++ b/app/views/devise/registrations/_personal_details.html.erb
@@ -1,4 +1,4 @@
-<%= form_for(resource, as: resource_name, url: registration_path(resource_name, tab: 'personal-details-tab'), html: {method: :put, class: "form-horizontal"}) do |f| %>
+<%= form_for(resource, as: resource_name, url: registration_path(resource_name, tab: 'personal-details-tab'), html: {method: :put, id: "personal_details_registration_form", class: "form-horizontal"}) do |f| %>
   <p class="form-control-static">
     <%= _("Please note that your email address is used as your username.
     If you change this, remember to use your new email address on sign in.") %>
diff --git a/lib/assets/javascripts/views/devise/registrations/edit.js b/lib/assets/javascripts/views/devise/registrations/edit.js
index 83cbb9332b..e09bd92f7f 100644
--- a/lib/assets/javascripts/views/devise/registrations/edit.js
+++ b/lib/assets/javascripts/views/devise/registrations/edit.js
@@ -1,5 +1,7 @@
 import ariatiseForm from '../../../utils/ariatiseForm';
 
 $(() => {
-  ariatiseForm({ selector: '#personal_details_registration_from' });
+  ariatiseForm({ selector: '#personal_details_registration_form' });
+  ariatiseForm({ selector: '#password_details_registration_form' });
+  ariatiseForm({ selector: '#preferences_registration_form' });
 });

From 60d7392d0bba5442a81e6b7a7010348d5f6a8529 Mon Sep 17 00:00:00 2001
From: bhavi <bhavi13may@gmail.com>
Date: Tue, 12 Sep 2017 12:49:05 -0500
Subject: [PATCH 5/9] import password validator js into user_profile

---
 .../users/_notification_preferences.html.erb  | 97 ++++++++++---------
 .../views/devise/registrations/edit.js        |  3 +
 2 files changed, 53 insertions(+), 47 deletions(-)

diff --git a/app/views/users/_notification_preferences.html.erb b/app/views/users/_notification_preferences.html.erb
index 0e56a73ece..d042e47423 100644
--- a/app/views/users/_notification_preferences.html.erb
+++ b/app/views/users/_notification_preferences.html.erb
@@ -1,60 +1,63 @@
 <p>
-  <%= link_to _('Select all'), '#', id: 'select_all' %> |
-  <%= link_to _('Deselect all'), '#', id: 'deselect_all' %>
+<%= link_to _('Select all'), '#', id: 'select_all' %> |
+<%= link_to _('Deselect all'), '#', id: 'deselect_all' %>
 </p>
 
-
-<fieldset class="preferences">
-  <%= form_tag( update_email_preferences_user_path(@user), method: :put, html: {class: "roadmap-form"}) do |f| %>
+<%= form_tag( update_email_preferences_user_path(@user), method: :put, html: { id: "preferences_registration_form", class: "form-horizontal" }) do |f| %>
 
     <%= hidden_field_tag :tab, 'notification-preferences-tab' %>
-    <p><strong>All Users</strong></p>
-    <div class="form-input">
-      <%= hidden_field_tag 'prefs[users][new_comment]', false %>
-      <%= check_box_tag 'prefs[users][new_comment]', true, @prefs[:users][:new_comment] %>
-      <%= label_tag 'prefs[users][new_comment]', _('A new comment has been added to my DMP'), :class => 'checkbox-label' %>
-    </div>
-      <div class="form-input">
-      <%= hidden_field_tag 'prefs[users][added_as_coowner]', false %>
-      <%=  check_box_tag 'prefs[users][added_as_coowner]', true, @prefs[:users][:added_as_coowner] %>
-      <%= label_tag 'prefs[users][added_as_coowner]', _('A plan has been shared with me'), :class => 'checkbox-label' %>
-    </div>
-    <div class="form-input">
-      <%= hidden_field_tag 'prefs[users][admin_privileges]', false %>
-      <%=  check_box_tag 'prefs[users][admin_privileges]', true, @prefs[:users][:admin_privileges] %>
-      <%= label_tag 'prefs[users][admin_privileges]', _('Admin privileges granted to me'), :class => 'checkbox-label' %>
-    </div>
 
-    <br/>
-    <p><strong>DMP owners and co-owners</strong></p>
-    <div class="form-input">
-      <%= hidden_field_tag 'prefs[owners_and_coowners][visibility_changed]', false %>
-      <%=  check_box_tag 'prefs[owners_and_coowners][visibility_changed]', true, @prefs[:owners_and_coowners][:visibility_changed] %>
-      <%= label_tag 'prefs[owners_and_coowners][visibility_changed]', _("My DMP's visibility has changed"), :class => 'checkbox-label' %>
+    <p class="form-control-static"><strong>All Users</strong></p>
+    <div class="checkbox">
+      <label for="prefs[users][new_comment]">
+        <%= hidden_field_tag 'prefs[users][new_comment]', false %>
+        <%= check_box_tag 'prefs[users][new_comment]', true, @prefs[:users][:new_comment] %><%= _('A new comment has been added to my DMP')  %>
+      </label>
+    </div>
+    <div class="checkbox">
+      <label for="prefs[users][added_as_coowner]">
+        <%= hidden_field_tag 'prefs[users][added_as_coowner]', false %>
+        <%= check_box_tag 'prefs[users][added_as_coowner]', true, @prefs[:users][:added_as_coowner] %><%= _('A plan has been shared with me')  %>
+      </label>
+    </div>
+    <div class="checkbox">
+      <label for="prefs[users][admin_privileges]">
+        <%= hidden_field_tag 'prefs[users][admin_privileges]', false %>
+        <%= check_box_tag 'prefs[users][admin_privileges]', true, @prefs[:users][:admin_privileges] %><%= _('Admin privileges granted to me')  %>
+      </label>
     </div>
 
-    <br/>
-    <p><strong>DMP administrators</strong></p>
-    <div class="form-input">
-      <%= hidden_field_tag 'prefs[admins][template_published]', false %>
-      <%=  check_box_tag 'prefs[admins][template_published]', true, @prefs[:admins][:template_published] %>
-      <%= label_tag 'prefs[admins][template_published]', _('An organisational template is published'), :class => 'checkbox-label' %>
+    <p class="form-control-static"><strong>DMP owners and co-owners</strong></p>
+
+    <div class="checkbox">
+      <label for="prefs[owners_and_coowners][visibility_changed]">
+        <%= hidden_field_tag 'prefs[owners_and_coowners][visibility_changed]', false %>
+        <%= check_box_tag 'prefs[owners_and_coowners][visibility_changed]', true, @prefs[:owners_and_coowners][:visibility_changed] %><%= _("My DMP's visibility has changed")  %>
+      </label>          
     </div>
-    <div class="form-input">
-      <%= hidden_field_tag 'prefs[admins][template_unpublished]', false %>
-      <%=  check_box_tag 'prefs[admins][template_unpublished]', true, @prefs[:admins][:template_unpublished] %>
-      <%= label_tag 'prefs[admins][template_unpublished]', _('An organisational template is unpublished'), :class => 'checkbox-label' %>
+
+    <p class="form-control-static"><strong>DMP administrators</strong></p>
+
+    <div class="checkbox">
+      <label for="prefs[admins][template_published]">
+        <%= hidden_field_tag 'prefs[admins][template_published]', false %>
+        <%= check_box_tag 'prefs[admins][template_published]', true, @prefs[:admins][:template_published] %><%= _('An organisational template is published')  %>
+      </label>
     </div>
-    <div class="form-input">
-      <%= hidden_field_tag 'prefs[admins][feedback_requested]', false %>
-      <%=  check_box_tag 'prefs[admins][feedback_requested]', true, @prefs[:admins][:feedback_requested] %>
-      <%= label_tag 'prefs[admins][feedback_requested]', _('A user has requested feedback on a DMP'), :class => 'checkbox-label' %>
+
+    <div class="checkbox">
+      <label for="prefs[admins][template_unpublished]">
+        <%= hidden_field_tag 'prefs[admins][template_unpublished]', false %>
+        <%= check_box_tag 'prefs[admins][template_unpublished]', true, @prefs[:admins][:template_unpublished] %><%= _('An organisational template is unpublished')  %>
+      </label>
     </div>
 
-    <br/>
-    <div class='form-input'>
-      <div class="button-spacer">&nbsp;</div>
-      <%= submit_tag _('Save'), class: 'btn btn-primary', role: 'button' %>
+    <div class="checkbox">
+      <label for="prefs[admins][feedback_requested]">
+        <%= hidden_field_tag 'prefs[admins][feedback_requested]', false %>
+        <%= check_box_tag 'prefs[admins][feedback_requested]', true, @prefs[:admins][:feedback_requested] %><%= _('A user has requested feedback on a DMP')  %>
+      </label>
     </div>
-  <% end %>
-</fieldset>
\ No newline at end of file
+
+    <%= submit_tag _('Save'), class: 'btn btn-default' %>
+<% end %>
diff --git a/lib/assets/javascripts/views/devise/registrations/edit.js b/lib/assets/javascripts/views/devise/registrations/edit.js
index e09bd92f7f..36131cd41f 100644
--- a/lib/assets/javascripts/views/devise/registrations/edit.js
+++ b/lib/assets/javascripts/views/devise/registrations/edit.js
@@ -1,7 +1,10 @@
 import ariatiseForm from '../../../utils/ariatiseForm';
+import { addMatchingPasswordValidator, togglisePasswords } from '../../../utils/passwordHelper';
 
 $(() => {
   ariatiseForm({ selector: '#personal_details_registration_form' });
   ariatiseForm({ selector: '#password_details_registration_form' });
   ariatiseForm({ selector: '#preferences_registration_form' });
+  addMatchingPasswordValidator({ selector: '#password_details_registration_form' });
+  togglisePasswords({ selector: '#password_details_registration_form' });
 });

From 4222098209def9cf37a3dabb89c0e13520994d97 Mon Sep 17 00:00:00 2001
From: Brian Riley <brian.riley@ucop.edu>
Date: Tue, 12 Sep 2017 15:54:38 -0700
Subject: [PATCH 6/9] Pulling in Bootstrap of Create Plan changes (#89)

* DMPRoadmap/roadmap#issue567

- Bootstrapped the Write Plan page accordions
- Rebased with latest from CDL-MVP

bootstrapped the phases accordion DMPRoadmap/roadmap#567

added es6 function to provide expand/collapse all functionality. bootstrapped several accordions DMPRoadmap/roadmap#567

finished Bootstrapping write plan accordions DMPRoadmap/roadmap#567

fixed linter issue DMPRoadmap/roadmap#issue567

fixed linter issue

* Bootstrapping and ES6 of the Plan Download page DMPRoadmap/roadmap#561.
- Renamed show_export.html.erb to download.html.erb (updated controller, policy, links and route)
- Renamed export_settings.js to download.js and dropped unused auto-save JS (no longer a part of wireframes)
- Bootstrapped page html

changed name of show_export to download to match UI terminology. Bootstrapped download page

Added ES6 JS for download page and made tweaks to the format

* DMPRoadmap/roadmap#562
edit phases using plan navigation layout

bootstrap plan progress. bootstrap sections header. added togglable section icons for expand/collapse

answers_controller returning a JSON with partial views rendered. Split question types in different partials. Started new answers/status.js

Rename view to edit_plan_answers.html.erb. Load tinymce through ES6 for question answers. Delete old status.js ES5. Added timeago to vendor

fixed broken test regarding answers_controller

* fixed linter issue with CRLF

* fixed tests broken by name change from show_export to download.

* Boostrapped the create plan page. DMPRoadmap/roadmap#632

- Converted JS for page over to ES6
- Added stub test and fixture
- Converted jquery autocomplete combobox to Bootstrap and ES6

TODO:
- Add in AJAX calls to retrieve template options based on org/funder selections
- Fix issue with the hidden id field being updated when combobox item is selected
- Finish tests for the autoComplete.js

Bootstrapped Plan Writing and Download pages (#88)

* DMPRoadmap/roadmap#issue567
* DMPRoadmap/roadmap#issue561

- Bootstrapped the Write Plan page accordions
- Rebased with latest from CDL-MVP

bootstrapped the phases accordion DMPRoadmap/roadmap#567

added es6 function to provide expand/collapse all functionality. bootstrapped several accordions DMPRoadmap/roadmap#567

finished Bootstrapping write plan accordions DMPRoadmap/roadmap#567

fixed linter issue DMPRoadmap/roadmap#issue567

fixed linter issue

* Bootstrapping and ES6 of the Plan Download page DMPRoadmap/roadmap#561.
- Renamed show_export.html.erb to download.html.erb (updated controller, policy, links and route)
- Renamed export_settings.js to download.js and dropped unused auto-save JS (no longer a part of wireframes)
- Bootstrapped page html

changed name of show_export to download to match UI terminology. Bootstrapped download page

Added ES6 JS for download page and made tweaks to the format

* DMPRoadmap/roadmap#562
edit phases using plan navigation layout

bootstrap plan progress. bootstrap sections header. added togglable section icons for expand/collapse

answers_controller returning a JSON with partial views rendered. Split question types in different partials. Started new answers/status.js

Rename view to edit_plan_answers.html.erb. Load tinymce through ES6 for question answers. Delete old status.js ES5. Added timeago to vendor

fixed broken test regarding answers_controller

* fixed linter issue with CRLF

* fixed tests broken by name change from show_export to download.

added JS tests for expandCollapseAll accordion functionality

fixed linter complaint about double vs single quotes in test

removed a few empty and unused views. removed old es5 js for create plan page. bootstrapped the create plan page

boostrapped the create plan page. converted jquery autocomplete to ES6 and bootstrap. started adding JS tests

removed unfinished tests for autocomplete, will finihs after demo. added comments to autoComplete.js

* Boostrapped the create plan page
---
 app/views/layouts/_es5_scripts.html.erb       |   4 -
 app/views/plans/_share.html.erb               |   0
 app/views/plans/_share_form.html.erb          |   2 +-
 app/views/plans/new.html.erb                  | 136 ++++++++----------
 .../shared/_accessible_combobox.html.erb      |  15 +-
 lib/assets/javascripts/application.js         |   1 +
 lib/assets/javascripts/constants.js           |   1 +
 .../javascripts/spec/autoCompleteSpec.js      |  26 ++++
 .../javascripts/spec/expandCollapseAllSpec.js |  48 +++++++
 .../javascripts/spec/fixtures/accordion.html  |  60 ++++++++
 .../spec/fixtures/autoComplete.html           |  35 +++++
 lib/assets/javascripts/utils/ariatiseForm.js  |  19 ++-
 lib/assets/javascripts/utils/autoComplete.js  |  58 ++++++++
 lib/assets/javascripts/views/plans/new.js     | 102 ++++++-------
 lib/assets/package-lock.json                  |   4 +-
 lib/assets/webpack.config.js                  |   2 +-
 16 files changed, 363 insertions(+), 150 deletions(-)
 delete mode 100644 app/views/plans/_share.html.erb
 create mode 100644 lib/assets/javascripts/spec/autoCompleteSpec.js
 create mode 100644 lib/assets/javascripts/spec/expandCollapseAllSpec.js
 create mode 100644 lib/assets/javascripts/spec/fixtures/accordion.html
 create mode 100644 lib/assets/javascripts/spec/fixtures/autoComplete.html
 create mode 100644 lib/assets/javascripts/utils/autoComplete.js

diff --git a/app/views/layouts/_es5_scripts.html.erb b/app/views/layouts/_es5_scripts.html.erb
index f473d97dbd..e575d54a4b 100644
--- a/app/views/layouts/_es5_scripts.html.erb
+++ b/app/views/layouts/_es5_scripts.html.erb
@@ -4,7 +4,6 @@
     <%= javascript_include_tag 'jquery.min.js' %>
     <%= javascript_include_tag 'rails.js' %>
     <%= javascript_include_tag 'jquery-ui.min.js' %>
-    <%= javascript_include_tag 'jquery-accessible-autocomplete-list-aria.js' %>
     <%= javascript_include_tag 'placeholder.min.js' %>
     <%= javascript_include_tag 'jquery.tablesorter.min.js' %>
     <%= javascript_include_tag 'jquery.tablesorter.widgets.min.js' %>
@@ -40,10 +39,7 @@
     <%= javascript_include_tag 'views/orgs/shibboleth_ds.js' %> <!-- (app/views/orgs/shibboleth_ds.html.erb) -->
     <%= javascript_include_tag 'views/plans/available_templates.js' %>  <!-- (app/views/plans/_available_templates.html.erb) -->
     <%= javascript_include_tag 'views/plans/index.js' %>    <!-- -->
-    <%= javascript_include_tag 'views/plans/new.js' %>  <!-- (app/views/plans/new.html.erb) -->
     <%= javascript_include_tag 'views/registrations/sign_in_sign_up.js' %>  <!-- -->
-    <%#= javascript_include_tag 'views/shared/accessible_combobox.js' %> <!-- (app/views/shared/_accessible_combobox.html.erb)    BROKEN since uses rails templating for setting values for JS variables -->
-    <%#= javascript_include_tag 'views/shared/accessible_submit_button.js' %>    <!-- (app/views/shared/_accessible_submit_button.html.erb)  BROKEN since uses rails templating for setting values for JS variables -->
     <%= javascript_include_tag 'views/shared/login_form.js' %>  <!-- -->
     <%= javascript_include_tag 'views/shared/register_form.js' %>   <!-- -->
     <%= javascript_include_tag 'views/users/notification_preferences.js' %> <!-- (app/views/users/_notification_preferences.html.erb) -->
diff --git a/app/views/plans/_share.html.erb b/app/views/plans/_share.html.erb
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/app/views/plans/_share_form.html.erb b/app/views/plans/_share_form.html.erb
index a4abdd20b6..a62fb16b14 100644
--- a/app/views/plans/_share_form.html.erb
+++ b/app/views/plans/_share_form.html.erb
@@ -80,5 +80,5 @@
     <%= f.label :access_level, raw("#{f.radio_button :access_level, 3, "aria-required": true} #{_('Co-owner: can edit project details, change visibility, and add collaborators')}") %>
   </div>
 
-  <%= f.button(_('Submit'), class: "btn btn-default", type: "submit") %>
+  <%= f.button(_('Submit'), class: "btn btn-primary", type: "submit") %>
 <% end %>
\ No newline at end of file
diff --git a/app/views/plans/new.html.erb b/app/views/plans/new.html.erb
index 0f80120742..515cd05c97 100644
--- a/app/views/plans/new.html.erb
+++ b/app/views/plans/new.html.erb
@@ -10,89 +10,71 @@
 
 <div class="row">
   <div class="col-md-12">
-    <%= form_for @plan, html: {method: :post, class: "roadmap-form padded bordered"}, remote: true do |f| %>
-      <div id="create_plan">
-
-        <!-- Plan name section -->
-        <fieldset class="standard">
-          <legend><%= _('What research project are you planning?') %></legend>
-      
-          <div class="form-left-side">
-            <%= f.text_field(:title, class: 'left-indent input-large',
+    <%= form_for @plan, html: {method: :post, id: 'create-plan'}, remote: true do |f| %>
+      <!-- Plan name section -->
+      <h2 id="project-title"><%= _('What research project are you planning?') %></h2>
+      <div class="form-group row">
+        <div class="col-xs-6">
+          <%= f.text_field(:title, class: 'form-control', 'aria-describedby': 'project-title', 'aria-required': 'true', 
                 'data-toggle': 'tooltip',
                 'data-content': _('If applying for funding, state the project title exactly as in the proposal.')) %>
-            <%= check_box_tag(:is_test, "1", false, class: 'left-indent') %>
-            <%= label_tag(:is_test, _('mock project for testing, practice, or educational purposes'), class: 'inline checkbox-label') %>
-          </div>
-        </fieldset>
-
-        <!-- Organisation selection -->
-        <fieldset class="standard">
-          <legend><%= _('Select the primary research organisation') %></legend>
-    
-          <div class="form-left-side">
-            <%= render partial: "shared/accessible_combobox", 
-                       locals: {name: 'plan[org_name]',
-                                id: 'plan_org_name',
-                                default_selection: @default_org,
-                                models: @orgs,
-                                attribute: 'name',
-                                tooltip: _('Please select a valid research organisation from the list.'),
-                                error: _('You must select a research organisation from the list.'),
-                                classes: 'input-large'} %>
-          </div>
-      
-          <div class="form-right-side">
-            <p class="inline"><strong>- <%= _('or') %> -</strong></p>
-            <%= check_box_tag(:plan_no_org) %>
-            <%= label_tag(:plan_no_org, raw("
-              #{_('My research organisation is not on the list')}
-              <em>#{_(' or ')}</em>
-              #{_('no research organisation is associated with this plan')}
-              "), class: 'checkbox-label') %>
-          </div>
-        </fieldset>
-  
-        <!-- Funder selection -->
-        <fieldset class="standard">
-          <legend><%= _('Select the primary funding organisation') %></legend>
-    
-          <div class="form-left-side">
-            <%= render partial: "shared/accessible_combobox", 
-                       locals: {name: 'plan[funder_name]',
-                                id: 'plan_funder_name',
-                                default_selection: nil,
-                                models: @funders,
-                                attribute: 'name',
-                                tooltip: _('Please select a valid funding organisation from the list.'),
-                                error: _('You must select a funding organisation from the list.'),
-                                classes: 'input-large'} %>
-          </div>
-          <div class="form-right-side">
-            <p class="inline"><strong>- <%= _('or') %> -</strong></p>
-            <%= check_box_tag(:plan_no_funder) %>
-            <%= label_tag(:plan_no_funder, _('No funder associated with this plan'), class: 'checkbox-label') %>
-          </div>
-        </fieldset>
+        </div>
+        <div class="col-xs-6 checkbox">
+          <%= label_tag(:is_test, raw("#{check_box_tag(:is_test, "1", false)} #{_('mock project for testing, practice, or educational purposes')}")) %>
+        </div>
+      </div>
 
-        <!-- Template selection -->
-        <fieldset class="standard" id="available-templates">
-        </fieldset>
-  
+      <!-- Organisation selection -->
+      <h2 id="research-org"><%= _('Select the primary research organisation') %></h2>
+      <div class="form-group row">
+        <div class="col-xs-6">
+          <%= render partial: "shared/accessible_combobox", 
+                     locals: {name: 'plan[org_name]',
+                              id: 'plan_org_name',
+                              default_selection: @default_org,
+                              models: @orgs,
+                              attribute: 'name',
+                              required: true,
+                              error: _('You must select a research organisation from the list.'),
+                              tooltip: _('Please select a valid research organisation from the list.')} %>
+        </div>
+        <div class="col-xs-6 checkbox">
+          <%= label_tag(:plan_no_org, raw("#{check_box_tag(:plan_no_org)} #{_('My research organisation is not on the list')} <em>#{_(' or ')}</em> #{_('no research organisation is associated with this plan')}")) %>
+        </div>
       </div>
   
-      <fieldset class="standard" id="available-templates">
-        <div class="form-left-side">
-          <%= f.hidden_field(:template_id) %>
-          <%= f.hidden_field(:visibility, value: @is_test ? 'is_test' : Rails.application.config.default_plan_visibility) %>
-          <%= render partial: 'shared/accessible_submit_button',
-                     locals: {id: 'create_plan_submit', 
-                              val: 'Create Plan', 
-                              disabled_initially: true,
-                              classes: "left-indent",
-                              tooltip: _('You can not continue until you have filled in all of the required information.')} %>
+      <!-- Funder selection -->
+      <h2 id="funder-org"><%= _('Select the primary funding organisation') %></h2>
+      <div class="form-group row">
+        <div class="col-xs-6">
+          <%= render partial: "shared/accessible_combobox", 
+                     locals: {name: 'plan[funder_name]',
+                              id: 'plan_funder_name',
+                              default_selection: nil,
+                              models: @funders,
+                              attribute: 'name',
+                              required: true,
+                              error: _('You must select a funding organisation from the list.'),
+                              tooltip: _('Please select a valid funding organisation from the list.')} %>
         </div>
-      </fieldset>
+        <div class="col-xs-6 checkbox">
+          <%= label_tag(:plan_no_funder, raw("#{check_box_tag(:plan_no_funder)} #{_('No funder associated with this plan')}")) %>
+        </div>
+      </div>
+
+      <!-- Template selection -->
+      <div class="form-group row" id="available-templates">
+        <div class="col-xs-6">
+
+        </div>
+        <div class="col-xs-6">
+
+        </div>
+      </div>
+
+      <%= f.hidden_field(:template_id) %>
+      <%= f.hidden_field(:visibility, value: @is_test ? 'is_test' : Rails.application.config.default_plan_visibility) %>
+      <%= f.button(_('Create plan'), class: "btn btn-primary", type: "submit") %>
     <% end %>
   </div>
 </div>
diff --git a/app/views/shared/_accessible_combobox.html.erb b/app/views/shared/_accessible_combobox.html.erb
index 6b32337554..f2ef99f039 100644
--- a/app/views/shared/_accessible_combobox.html.erb
+++ b/app/views/shared/_accessible_combobox.html.erb
@@ -1,10 +1,13 @@
 <% if !models.nil? %>
+  <% required = required ||= false %>
+  <% classes = classes ||= '' %>
+  <% error = error ||= _('Please select an item from the list.') %>
+
   <% json = {} %>
   <% models.map{|m| json[m[attribute]] = m.id} %>
-  <% err_msg = error ||= _('Please select an item from the list.') %>
 
   <input type="text" name="<%= name %>" id="<%= id %>" 
-         class="js-combobox <%= classes %>" list="<%= id %>_list" 
+         class="js-combobox form-control <%= classes %>" list="<%= id %>_list" 
          placeholder="<%= _('Begin typing to see a filtered list') %>"
          data-combobox-prefix-class="combobox"
          data-combobox-case-sensitive="no"
@@ -17,14 +20,16 @@
     <% end %>
   </datalist>
 
+  <!-- Complete content of combobox -->
+  <input type="hidden" id="<%= id %>_crosswalk" value="<%= escape_javascript json.to_json %>" />
+
   <!-- The JQuery accessible combobox doesn't allow for an id to be present in the value attribute -->
   <!-- so we use this hidden input to store the selected id -->
   <!-- the selected id is found after the combobox loses focus by finding the selected item in the crosswalk json -->
   <input type="hidden" id="<%= id.gsub("_#{attribute}", "_id") %>" name="<%= name.gsub("_#{attribute}]", "_id]") %>"
-         value="<%= default_selection.id unless default_selection.nil? %>" />
+         value="<%= default_selection.id unless default_selection.nil? %>" aria-required="<%= required %>"
+         data-validation="js-combobox" data-validation-error="<%= error %>" />
 
-  <span role="" id="<%= id %>_error" class="error-tooltip left-indent"></span>
-  
 <% else %>
   <span id="<%= id %>_no_items"><%= _('No items available.') %></span>
 <% end %>
\ No newline at end of file
diff --git a/lib/assets/javascripts/application.js b/lib/assets/javascripts/application.js
index 0a2fc358b2..9006f600a6 100644
--- a/lib/assets/javascripts/application.js
+++ b/lib/assets/javascripts/application.js
@@ -6,4 +6,5 @@ import './views/devise/passwords/new';
 import './views/phases/edit';
 import './views/plans/download';
 import './views/plans/edit_details';
+import './views/plans/new';
 import './views/plans/share';
diff --git a/lib/assets/javascripts/constants.js b/lib/assets/javascripts/constants.js
index 1ac626714b..cd8245f7a9 100644
--- a/lib/assets/javascripts/constants.js
+++ b/lib/assets/javascripts/constants.js
@@ -7,6 +7,7 @@ export const VALIDATION_MESSAGE_NUMBER = 'Please enter a valid number.';
 export const VALIDATION_MESSAGE_PASSWORD = 'The password must be between 8 and 128 characters.';
 export const VALIDATION_MESSAGE_PASSWORDS_MATCH = 'The passwords must match.';
 export const VALIDATION_MESSAGE_RADIO = 'Please choose one of the options.';
+export const VALIDATION_MESSAGE_SELECT = 'Please select a value from the list.';
 export const VALIDATION_MESSAGE_TEXT = 'This field is required.';
 
 export const SHOW_PASSWORD_MESSAGE = 'Show password';
diff --git a/lib/assets/javascripts/spec/autoCompleteSpec.js b/lib/assets/javascripts/spec/autoCompleteSpec.js
new file mode 100644
index 0000000000..08965ea55d
--- /dev/null
+++ b/lib/assets/javascripts/spec/autoCompleteSpec.js
@@ -0,0 +1,26 @@
+import initAutoComplete from '../utils/autoComplete';
+
+describe('autoComplete test suite', () => {
+  beforeAll(() => fixture.setBase('javascripts/spec/fixtures'));
+
+  beforeEach(() => {
+    $('body').html(fixture.load('autoComplete.html'));
+    initAutoComplete();
+    // Override the form submission, we are just going to validate the ariatisation of the form
+    $('form').submit((e) => { e.preventDefault(); });
+  });
+
+  afterEach(() => {
+    fixture.cleanup();
+    $('body').html('');
+  });
+
+  it('shows/hides the clear button correctly', () => {
+
+  });
+
+  it('Selects the correct id based on the item selected in the combobox', () => {
+
+  });
+
+});
diff --git a/lib/assets/javascripts/spec/expandCollapseAllSpec.js b/lib/assets/javascripts/spec/expandCollapseAllSpec.js
new file mode 100644
index 0000000000..71c129a3b3
--- /dev/null
+++ b/lib/assets/javascripts/spec/expandCollapseAllSpec.js
@@ -0,0 +1,48 @@
+import expandCollapseAll from '../utils/expandCollapseAll';
+
+describe('expandCollapseAll test suite', () => {
+  beforeAll(() => fixture.setBase('javascripts/spec/fixtures'));
+
+  beforeEach(() => {
+    this.form = fixture.load('accordion.html');
+    expandCollapseAll({ selector: '#accordion' });
+  });
+
+  afterEach(() => {
+    fixture.cleanup();
+  });
+
+  it('should be able to expand all sections when all are either expanded or collapsed', () => {
+    // Collapse all of the sections 
+    //    - click on 'collapse all' should have no effect 
+    //    - click on 'expand all' should expand all sections
+    $('#accordion div.panel-collapse').collapse('hide');
+    expect($('.in').length === 0);
+    $('a[data-toggle-direction="hide"]').click();
+    expect($('.in').length === 0);
+    $('a[data-toggle-direction="show"]').click();
+    expect($('.in').length === 3);
+
+    // Expand all of the sections 
+    //    - click on 'expand all' should have no effect 
+    //    - click on 'collapse all' should collapse all sections
+    $('#accordion div.panel-collapse').collapse('show');
+    expect($('.in').length === 3);
+    $('a[data-toggle-direction="show"]').click();
+    expect($('.in').length === 3);
+    $('a[data-toggle-direction="hide"]').click();
+    expect($('.in').length === 0);
+  });
+
+  it('should be able to expand all sections when some are open and some collapsed', () => {
+    // Expand 2 of the 3 sections - click 'collapse all' - verify that all are collapsed
+    $('#collapseA, #collapseC').collapse('show');
+    $('a[data-toggle-direction="hide"]').click();
+    expect($('.in').length === 0);
+
+    // Expand 2 of the 3 sections - click 'expand all' - verify that all are expanded
+    $('#collapseA, #collapseC').collapse('show');
+    $('a[data-toggle-direction="show"]').click();
+    expect($('.in').length === 3);
+  });
+});
diff --git a/lib/assets/javascripts/spec/fixtures/accordion.html b/lib/assets/javascripts/spec/fixtures/accordion.html
new file mode 100644
index 0000000000..78cb5aa72a
--- /dev/null
+++ b/lib/assets/javascripts/spec/fixtures/accordion.html
@@ -0,0 +1,60 @@
+<div id="accordion-tester">
+  <!-- accordion expand/collapse all controls -->
+  <div class="accordion-controls" data-parent="accordion">
+    <a href="#" data-toggle-direction="show"><%= _('expand all') %></a>
+    <span>|</span>
+    <a href="#" data-toggle-direction="hide"><%= _('collapse all') %></a>
+  </div>
+
+
+  <!-- Standard Bootstrap 3.x accordion -->
+  <div id="accordion" class="panel-group" role="tablist" aria-multiselectable="true">
+    <div class="panel panel-default">
+      <div class="panel-heading" role="tab" id="headingA">
+        <h2 class="panel-title">
+          <a role="button" data-toggle="collapse" data-parent="accordion" href="#collapseA" aria-controls="collapseA" aria-expanded="false">
+            Section A
+            <span class="fa fa-plus" aria-hidden="true"></span>
+          </a>
+        </h2>
+      </div>
+    </div>
+    <div id="collapseA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingA">
+      <div class="panel-body">
+        This is test section A.
+      </div>
+    </div>
+
+    <div class="panel panel-default">
+      <div class="panel-heading" role="tab" id="headingB">
+        <h2 class="panel-title">
+          <a role="button" data-toggle="collapse" data-parent="accordion" href="#collapseB" aria-controls="collapseB" aria-expanded="false">
+            Section B
+            <span class="fa fa-plus" aria-hidden="true"></span>
+          </a>
+        </h2>
+      </div>
+    </div>
+    <div id="collapseB" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingB">
+      <div class="panel-body">
+        This is test section B.
+      </div>
+    </div>
+
+    <div class="panel panel-default">
+      <div class="panel-heading" role="tab" id="headingC">
+        <h2 class="panel-title">
+          <a role="button" data-toggle="collapse" data-parent="accordion" href="#collapseC" aria-controls="collapseC" aria-expanded="false">
+            Section C
+            <span class="fa fa-plus" aria-hidden="true"></span>
+          </a>
+        </h2>
+      </div>
+    </div>
+    <div id="collapseC" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingC">
+      <div class="panel-body">
+        This is test section C.
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/lib/assets/javascripts/spec/fixtures/autoComplete.html b/lib/assets/javascripts/spec/fixtures/autoComplete.html
new file mode 100644
index 0000000000..7c3ce2fb8f
--- /dev/null
+++ b/lib/assets/javascripts/spec/fixtures/autoComplete.html
@@ -0,0 +1,35 @@
+<form id="test-form">
+  <!-- JQuery autocomplete tester -->
+  <h2>JQuery Accessible Auto-complete Combobox</h2>
+  <div class="form-group">
+    <label for="combobox" class="control-label">Combobox</label>
+    
+    <input type="text" name="form[combobox_name]" id="form_combobox_name" 
+           class="js-combobox form-control" list="combobox_list" 
+           placeholder="Begin typing to see a filtered list"
+           data-combobox-prefix-class="combobox"
+           data-combobox-case-sensitive="no"
+           data-combobox-search-option="containing"
+           data-combobox-allow-suggestion-on-empty="true"
+           value="" />
+    <datalist id="combobox_list">
+     <option value="Test A" />
+     <option value="Test B" />
+     <option value="test C" />
+     <option value="testing D" />
+     <option value="Foo" />
+     <option value="Bar" />
+     <option value="Tester 123" />
+    </datalist>
+
+    <!-- Complete content of combobox -->
+    <input type="hidden" id="form_combobox_crosswalk" 
+           value='{"Test A":0,"Test B":1,"test C":2,"testing D":3,"Foo":4,"Bar":5,"Tester 123":6}' />
+
+    <!-- The JQuery accessible combobox doesn't allow for an id to be present in the value attribute -->
+    <!-- so we use this hidden input to store the selected id -->
+    <!-- the selected id is found after the combobox loses focus by finding the selected item in the crosswalk json -->
+    <input type="hidden" id="form_combobox_id" name="form[combobox_id]"
+           value="" aria-required="true" data-validation="js-combobox" data-validation-error="Please select an item!" />
+  </div>
+</form>
\ No newline at end of file
diff --git a/lib/assets/javascripts/utils/ariatiseForm.js b/lib/assets/javascripts/utils/ariatiseForm.js
index fdd417a562..2db61b3c45 100644
--- a/lib/assets/javascripts/utils/ariatiseForm.js
+++ b/lib/assets/javascripts/utils/ariatiseForm.js
@@ -103,12 +103,14 @@ const isValid = (type, value) => {
       return validator.isValidPassword(value);
     case 'radio':
       return validator.isValidText(value);
+    case 'js-combobox':
+      return validator.isValidText(value);
     default:
       return false;
   }
 };
 
-const getValidationMessage = (type) => {
+const getDefaultValidationMessage = (type) => {
   switch (type) {
     case 'text':
       return constants.VALIDATION_MESSAGE_TEXT;
@@ -120,11 +122,21 @@ const getValidationMessage = (type) => {
       return constants.VALIDATION_MESSAGE_PASSWORD;
     case 'radio':
       return constants.VALIDATION_MESSAGE_RADIO;
+    case 'js-combobox':
+      return constants.VALIDATION_MESSAGE_SELECT;
     default:
       return constants.VALIDATION_MESSAGE_DEFAULT;
   }
 };
 
+const getValidationMessage = (el) => {
+  if ($(el).attr('data-validation-error')) {
+    return $(el).attr('data-validation-error');
+  }
+  // Use the default validation error message if none was specified
+  return getDefaultValidationMessage(getValidationTypeForElement(el));
+};
+
 const valid = (el) => {
   $(el).parent().removeClass(validationStates.hasError);
   $(el).attr(ariaInvalid(false));
@@ -142,9 +154,8 @@ export default (options) => {
 
     // Add validation error message sections for each validatable input element
     validatable.each((i, el) => {
-      const type = getValidationTypeForElement(el);
       $(el).attr(ariaDescribedBy(`help${i}`));
-      $(el).after(blockHelp(`help${i}`, getValidationMessage(type)));
+      $(el).after(blockHelp(`help${i}`, getValidationMessage(el)));
     });
 
     // Bind validations to the form's submit button
@@ -160,7 +171,7 @@ export default (options) => {
             valid(el);
           } else {
             anyInvalid = true;
-            invalid(el, getValidationMessage(type));
+            invalid(el);
           }
         }
       });
diff --git a/lib/assets/javascripts/utils/autoComplete.js b/lib/assets/javascripts/utils/autoComplete.js
new file mode 100644
index 0000000000..44b77f1f97
--- /dev/null
+++ b/lib/assets/javascripts/utils/autoComplete.js
@@ -0,0 +1,58 @@
+import debounce from '../utils/debounce';
+
+/*
+ * Looks up the id for the text selected by the user in the jquery autocomplete combobox and
+ * then sets updates the hidden id field with the id value so that its available on form submit.
+ * The id-text mappings are stored as JSON in the corresponding hidden crosswalk field
+ * @param the combobox element
+ */
+const updateIdField = (el) => {
+  const crosswalk = $(`#${$(el).attr('id')}_crosswalk`);
+  const idField = $(el).attr('id').replace(/_name/, '_id');
+
+  if (crosswalk && idField) {
+    const json = JSON.parse(`${$(crosswalk).val().replace(/\\"/g, '"').replace(/\\'/g, '\'')}`);
+    const selection = json[$(el).val()];
+    $(idField).val(selection === 'undefined' ? '' : selection).change();
+  }
+};
+
+/*
+ * Shows/hides the combobox's clear button based on whether or not text is present
+ * @param the combobox id
+ */
+const toggleClearButton = (el) => {
+  const clearButton = $(el).parent().find('.combobox-clear-button');
+  if ($(el).val().trim().length <= 0) {
+    $(clearButton).addClass('hidden');
+  } else {
+    $(clearButton).removeClass('hidden');
+  }
+};
+
+/*
+ * Wires up the jquery autocomplete combobox so that it calls the above 2 functions when the
+ * user changes the text values in the combobox by typing or selecting a value
+ */
+export default () => {
+  $('.js-combobox').each((idx, el) => {
+    const debounced = debounce((e) => {
+      toggleClearButton(e);
+      updateIdField(e);
+    }, 500);
+
+    // When the value in the combobox changes update the hidden id field
+    $(el).on('keyup', (e) => {
+      debounced($(e.currentTarget));
+    });
+
+    // Clear the text and hide the button when the user clicks the clear button
+    $(el).parent().find('.combobox-clear-button').on('click', () => {
+      $(el).val('').focus();
+      debounced($(el));
+    });
+
+    // Show/hide the clear button on page load
+    toggleClearButton(el);
+  });
+};
diff --git a/lib/assets/javascripts/views/plans/new.js b/lib/assets/javascripts/views/plans/new.js
index 05ea6c6a18..815c832938 100644
--- a/lib/assets/javascripts/views/plans/new.js
+++ b/lib/assets/javascripts/views/plans/new.js
@@ -1,75 +1,67 @@
-$(document).ready(function(){
-  $("#available-templates").hide();
+import ariatiseForm from '../../utils/ariatiseForm';
+import initAutoComplete from '../../utils/autoComplete';
 
-  var defaultVisibility = $("#plan_visibility").val();
+const handleCheckboxClick = (name, checked) => {
+  $(`#plan_${name}_name`).prop('disabled', checked);
+  $('#plan_template_id').val('').change();
+  $('#available-templates').fadeOut();
 
-  // retrieve the template options and toggle the submit button on page reload
+  if (checked) {
+    $(`#plan_${name}_name`).val('');
+    $(`#plan_${name}_id`).val('-1').change();
+    $(`#plan_${name}_name`).siblings('.combobox-clear-button').hide();
+  } else {
+    $(`#plan_${name}_id`).val('').change();
+  }
+};
+
+const handleComboboxChange = () => {
+  const validOrg = ($('#plan_org_id').val().trim().length > 0 || $('#plan_no_org').prop('checked'));
+  const validFunder = ($('#plan_funder_id').val().trim().length > 0 || $('#plan_no_funder').prop('checked'));
+
+  if (!validOrg || !validFunder) {
+    $('#available-templates').fadeOut();
+    $('#plan_template_id').val('');
+  }
+};
+
+$().ready(() => {
+  initAutoComplete();
+  ariatiseForm({ selector: '#create-plan' });
+
+  const defaultVisibility = $('#plan_visibility').val();
+
+  // Initialize the form
   handleComboboxChange();
-  handleCheckboxClick("org", $("#plan_no_org").prop("checked"));
-  handleCheckboxClick("funder", $("#plan_no_funder").prop("checked"));
-  
+  handleCheckboxClick('org', $('#plan_no_org').prop('checked'));
+  handleCheckboxClick('funder', $('#plan_no_funder').prop('checked'));
+
   // When the user checks the 'mock project' box we need to set the 
   // visibility to 'is_test'
-  $("#is_test").click(function(){
-    $("#plan_visibility").val(($(this)[0].checked ? 'is_test' : defaultVisibility));
+  $('#is_test').click((e) => {
+    $('#plan_visibility').val(($(e.currentTarget)[0].checked ? 'is_test' : defaultVisibility));
   });
 
   // When the hidden org and funder id fields change toogle the submit button
-  $("#plan_org_id, #plan_funder_id").change(function(){
+  $('#plan_org_id, #plan_funder_id').change(() => {
     handleComboboxChange();
   });
 
   // Make sure the checkbox is unchecked if we're entering text
-  $(".js-combobox").keyup(function(){
-    var whichOne = $(this).prop('id').split('_')[1];
-    $("#plan_no_" + whichOne).prop("checked", false);
+  $('.js-combobox').keyup((e) => {
+    const whichOne = $(e.currentTarget).prop('id').split('_')[1];
+    $(`#plan_no_${whichOne}`).prop('checked', false);
   });
 
   // If the user clicks the no Org/Funder checkbox disable the dropdown 
   // and hide clear button
-  $("#plan_no_org, #plan_no_funder").click(function(){
-    var whichOne = $(this).prop('id').split('_')[2];
-    handleCheckboxClick(whichOne, this.checked);
+  $('#plan_no_org, #plan_no_funder').click((e) => {
+    const whichOne = $(e.currentTarget).prop('id').split('_')[2];
+    handleCheckboxClick(whichOne, e.currentTarget.checked);
   });
-  
+
   // When the form receives a valid template id enable the button
-  $("#plan_template_id").change(function(){
-    $("#create_plan_submit").attr('aria-disabled', ($(this).val().trim().length <= 0));
+  $('#plan_template_id').change((e) => {
+    $('#create_plan_submit').attr('aria-disabled', ($(e.currentTarget).val().trim().length <= 0));
   });
 });
-
-// Only display the submit button if the user has made each decision
-// -------------------------------------------------------------
-function handleComboboxChange(){
-  // If the (no_org checkbox is checked OR an org was selected) AND
-  //        (no_funder checkbox is checked OR a funder was selected) AND
-  //        (the template selector is not visible OR a template has been selected)
-  var retrieve = ($("#plan_no_org").prop("checked") || 
-                  ($("#plan_org_id").val() && $("#plan_org_id").val().trim().length > 0)) &&
-                 ($("#plan_no_funder").prop("checked") || 
-                  ($("#plan_org_id").val() && $("#plan_funder_id").val().trim().length > 0));
-  
-  if(retrieve){
-    if($("#plan_template_id").val().trim().length <= 0){
-      $("form").submit();
-    }
-    
-  }else{
-    $("#available-templates").fadeOut();
-    $("#plan_template_id").val("");
-  }
-}
-
-// Clear the combobox and disable it if the box was checked
-// -------------------------------------------------------------
-function handleCheckboxClick(name, checked){
-  $("#plan_" + name + "_name").prop("disabled", checked);
-  $("#plan_template_id").val("").change();
-  $("#available-templates").fadeOut();
-  
-  if(checked){
-    $("#plan_" + name + "_name").val("");
-    $("#plan_" + name + "_id").val("").change();
-    $("#plan_" + name + "_name").siblings(".combobox-clear-button").hide();
-  }
-}
diff --git a/lib/assets/package-lock.json b/lib/assets/package-lock.json
index 10cb86b9b4..d43dad43be 100644
--- a/lib/assets/package-lock.json
+++ b/lib/assets/package-lock.json
@@ -4652,9 +4652,7 @@
       "integrity": "sha1-XE2d5lKvbNCncBVKYxu6ErAVx4c="
     },
     "jquery-accessible-autocomplete-list-aria": {
-      "version": "1.5.5",
-      "resolved": "https://registry.npmjs.org/jquery-accessible-autocomplete-list-aria/-/jquery-accessible-autocomplete-list-aria-1.5.5.tgz",
-      "integrity": "sha1-2EG0wfBwSQaGcri1FsIkhUaPi4s=",
+      "version": "github:nico3333fr/jquery-accessible-autocomplete-list-aria#38a057140ccafa9a1c8a948b1bbf4a410c0181c6",
       "requires": {
         "jquery": "3.2.1"
       }
diff --git a/lib/assets/webpack.config.js b/lib/assets/webpack.config.js
index 6e205704cc..63fd3eb79c 100644
--- a/lib/assets/webpack.config.js
+++ b/lib/assets/webpack.config.js
@@ -15,7 +15,7 @@ module.exports = {
   context: __dirname,
 
   entry: {
-    vendor: ['jquery', 'timeago/jquery.timeago'],
+    vendor: ['jquery', 'timeago/jquery.timeago', 'jquery-accessible-autocomplete-list-aria/jquery-accessible-autocomplete-list-aria'],
     application: ['./javascripts/application.js', './stylesheets/application.scss'],
   },
 

From 94fb7ed1825a5dceeea8f9976d14c95f9948014b Mon Sep 17 00:00:00 2001
From: bhavi <bhavi13may@gmail.com>
Date: Tue, 12 Sep 2017 10:51:07 -0500
Subject: [PATCH 7/9] add user profile page js file

---
 .../registrations/_password_details.html.erb  | 73 ++++++++++---------
 .../registrations/_personal_details.html.erb  | 32 ++++----
 lib/assets/javascripts/application.js         |  1 +
 .../views/devise/registrations/edit.js        |  5 ++
 4 files changed, 58 insertions(+), 53 deletions(-)
 create mode 100644 lib/assets/javascripts/views/devise/registrations/edit.js

diff --git a/app/views/devise/registrations/_password_details.html.erb b/app/views/devise/registrations/_password_details.html.erb
index a5b7937253..5ac8888b19 100644
--- a/app/views/devise/registrations/_password_details.html.erb
+++ b/app/views/devise/registrations/_password_details.html.erb
@@ -1,44 +1,45 @@
-<%= form_for(resource, as: resource_name, url: registration_path(resource_name,  tab: 'password-details-tab'), html: {method: :put, class: "roadmap-form white_background"}) do |f| %>
-  <fieldset class="side-by-side">
-    <legend><%= _('If you would like to change your password please complete the following fields.') %></legend>
+<%= form_for(resource, as: resource_name, url: registration_path(resource_name,  tab: 'password-details-tab'), html: {method: :put, id: "personal_details_registration_from", class: "form-horizontal"}) do |f| %>
 
-    <%= hidden_field_tag :skip_personal_details, "true" %>
+  <p class="form-control-static"><%= _('If you would like to change your password please complete the following fields.') %></p>
 
-    <div class="form-input">
-      <%= f.label(:current_password, _('Current password'), class: 'required') %>
-      <%= f.password_field(:current_password, class: 'left-indent required input-medium') %>
-      <span role="" id="current_password_error"
-            class="error-tooltip-right left-indent"></span>
-    </div>
+  <%= hidden_field_tag :skip_personal_details, "true" %>
 
-    <div class="form-input">
-      <%= f.label(:password, _('New password'), class: 'required') %>
-      <%= f.password_field(:password, class: 'left-indent required input-medium', id: 'user_new_password') %>
-      <span role="" id="password_error"
-            class="error-tooltip-right left-indent"></span>
+  <div class="form-group">
+    <%= f.label(:current_password, _('Current password'), class: 'col-sm-2 control-label') %>
+    <div class="col-sm-6">
+      <%= f.password_field(:current_password,  class: 'form-control', "aria-required": true ) %>
     </div>
+  </div>
 
-    <div class="form-input">
-      <%= f.label(:password_confirmation, _('Password confirmation'), class: 'required') %>
-      <%= f.password_field(:password_confirmation, class: 'left-indent required input-medium') %>
-      <span role="" id="password_confirmation_error"
-            class="error-tooltip-right left-indent"></span>
+  <div class="form-group">
+    <%= f.label(:password, _('New password'),  class: 'col-sm-2 control-label') %>
+    <div class="col-sm-6"> 
+      <%= f.password_field(:password,  class: 'form-control', "aria-required": true , id: 'user_new_password') %>
     </div>
+  </div>
 
-    <div class="form-input">
-      <%= label_tag(:password_show, _('Show passwords')) %>
-      <%= check_box_tag(:password_show, "1", false, class: 'left-indent') %>
-    </div>
-    
-    <br />
-    <div class='form-input'>
-      <div class="button-spacer">&nbsp;</div>
-      <%= render partial: 'shared/accessible_submit_button',
-                 locals: {id: 'update',
-                          val: 'Save',
-                          disabled_initially: false,
-                          classes: 'small-input-button left-indent',
-                          tooltip: _('Enter all of the required information above')} %>
+  <div class="form-group">
+    <%= f.label(:password_confirmation, _('Password confirmation'),  class: 'col-sm-2 control-label') %>
+    <div class="col-sm-6">
+      <%= f.password_field(:password_confirmation, class: 'form-control', "aria-required": true ) %>
     </div>
-  </fieldset>
-<% end %>
\ No newline at end of file
+  </div>
+
+  <div class="checkbox">
+    <label for="passwords_toggle">
+      <input type="checkbox" id="passwords_toggle" /><%= _('Show passwords') %>
+    </label>
+  </div>
+
+  <div class='form-submit col-sm-6'>
+    <%= render partial: 'shared/accessible_submit_button',
+               locals: {id: 'update',
+                        val: 'Save',
+                        disabled_initially: false,
+                        classes: 'btn btn-default',
+                        tooltip: _('Enter all of the required information above')} %>
+  </div>
+<% end %>
+
+
+
diff --git a/app/views/devise/registrations/_personal_details.html.erb b/app/views/devise/registrations/_personal_details.html.erb
index a39e5f7350..5ec12e7db4 100644
--- a/app/views/devise/registrations/_personal_details.html.erb
+++ b/app/views/devise/registrations/_personal_details.html.erb
@@ -12,43 +12,39 @@
   <div class="form-group">
     <%= f.label(:email, _('Email'), class: "col-sm-2 control-label") %>
     <div class="col-sm-6">
-      <%= f.email_field(:email, class: "form-control",
-      title: _('Please enter your current password below when changing your email address.'),
-      value: @user.email) %>
+      <%= f.email_field(:email, class: "form-control", "aria-required": true,
+                        title: _('Please enter your current password below when changing your email address.'),
+                        value: @user.email) %>
     </div>
   </div>
 
   <div class="form-group">
     <%= f.label(:firstname, _('First name'), class: "col-sm-2 control-label") %>
     <div class="col-sm-6">
-      <%= f.text_field(:firstname, class: 'required form-control', value: @user.firstname) %>
+      <%= f.text_field(:firstname, class: 'required form-control', required: true, value: @user.firstname) %>
     </div>
   </div>
 
   <div class="form-group">
     <%= f.label(:surname, _('Last name'), class: "col-sm-2 control-label") %>
     <div class="col-sm-6">
-      <%= f.text_field(:surname, class: 'required form-control', value: @user.surname) %>
+      <%= f.text_field(:surname, class: 'required form-control', "aria-required": true, value: @user.surname) %>
     </div>
   </div>
 
   <div class="form-group">
     <%= f.label(:recovery_email, _('Recovery email'), class: "col-sm-2 control-label") %>
     <div class="col-sm-6">
-      <%= f.email_field(:recovery_email, class: ' required form-control',
+      <%= f.email_field(:recovery_email, class: ' required form-control',  "aria-required": true,
                         title: _('This email will be used to recover your account if you change institutions'),
                         value: @user.recovery_email) %>
-      <span role="" id="recovery_email_error"
-          class="error-tooltip-right "></span>
     </div>
   </div>
 
   <div class="form-group">
     <%= f.label(:password, _('Password'), class: "col-sm-2 control-label") %>
     <div class="col-sm-6">
-      <%= f.password_field(:password, class: 'required form-control') %>
-      <span role="" id="password_error"
-          class="error-tooltip-right "></span>
+      <%= f.password_field(:password, class: 'required form-control', "aria-required": true) %>
     </div>
   </div>
 
@@ -100,7 +96,7 @@
           <%= label_tag(:scheme_name, scheme.name.capitalize, class: "col-sm-2 control-label") %>
       <% end %>
 
-      <div class="col-sm-6">
+      <div class="col-sm-6 identifier-scheme">
         <%= render partial: "external_identifier_#{scheme.name}",
                    locals: { scheme: scheme,
                              id: current_user.identifier_for(scheme)} %>
@@ -119,10 +115,12 @@
 
   <div class='form-submit col-sm-6'>
     <%= render partial: 'shared/accessible_submit_button',
-             locals: {id: 'update',
-                      val: 'Save',
-                      disabled_initially: true,
-                      classes: 'btn btn-default',
-                      tooltip: _('Enter all of the required information above')} %>
+               locals: { id: 'update',
+                         val: 'Save',
+                         disabled_initially: true,
+                         classes: 'btn btn-default',
+                         tooltip: _('Enter all of the required information above') } %>
   </div>
 <% end %>
+
+
diff --git a/lib/assets/javascripts/application.js b/lib/assets/javascripts/application.js
index 9328f2380e..c45234fd96 100644
--- a/lib/assets/javascripts/application.js
+++ b/lib/assets/javascripts/application.js
@@ -4,3 +4,4 @@ import './views/devise/passwords/edit';
 import './views/devise/passwords/new';
 import './views/plans/edit_details';
 import './views/plans/share';
+import './views/devise/registrations/edit';
diff --git a/lib/assets/javascripts/views/devise/registrations/edit.js b/lib/assets/javascripts/views/devise/registrations/edit.js
new file mode 100644
index 0000000000..83cbb9332b
--- /dev/null
+++ b/lib/assets/javascripts/views/devise/registrations/edit.js
@@ -0,0 +1,5 @@
+import ariatiseForm from '../../../utils/ariatiseForm';
+
+$(() => {
+  ariatiseForm({ selector: '#personal_details_registration_from' });
+});

From 3d25b4ef6874e311db050756736c13b668bd6fd9 Mon Sep 17 00:00:00 2001
From: bhavi <bhavi13may@gmail.com>
Date: Tue, 12 Sep 2017 11:01:28 -0500
Subject: [PATCH 8/9] add other tabs form to js bundle as well

import password validator js into user_profile

update the jquery to es6 for preferences
---
 .../registrations/_password_details.html.erb  |  23 ++--
 .../registrations/_personal_details.html.erb  |  19 ++--
 .../users/_notification_preferences.html.erb  | 103 ++++++++++--------
 .../views/devise/registrations/edit.js        |   9 +-
 .../views/users/notification_preferences.js   |   8 +-
 5 files changed, 91 insertions(+), 71 deletions(-)

diff --git a/app/views/devise/registrations/_password_details.html.erb b/app/views/devise/registrations/_password_details.html.erb
index 5ac8888b19..8ae2718206 100644
--- a/app/views/devise/registrations/_password_details.html.erb
+++ b/app/views/devise/registrations/_password_details.html.erb
@@ -1,4 +1,4 @@
-<%= form_for(resource, as: resource_name, url: registration_path(resource_name,  tab: 'password-details-tab'), html: {method: :put, id: "personal_details_registration_from", class: "form-horizontal"}) do |f| %>
+<%= form_for(resource, as: resource_name, url: registration_path(resource_name,  tab: 'password-details-tab'), html: {method: :put, id: "password_details_registration_form", class: "form-horizontal"}) do |f| %>
 
   <p class="form-control-static"><%= _('If you would like to change your password please complete the following fields.') %></p>
 
@@ -25,21 +25,24 @@
     </div>
   </div>
 
-  <div class="checkbox">
-    <label for="passwords_toggle">
-      <input type="checkbox" id="passwords_toggle" /><%= _('Show passwords') %>
-    </label>
+  <div class="form-group">
+    <div class="col-sm-offset-2 col-sm-10">
+      <div class="checkbox">
+        <label>
+           <input type="checkbox" id="passwords_toggle" /><%= _('Show passwords') %>
+        </label>
+      </div>
+    </div>
   </div>
 
-  <div class='form-submit col-sm-6'>
-    <%= render partial: 'shared/accessible_submit_button',
+  <div class="form-group">
+    <div class="col-sm-offset-2 col-sm-10">
+      <%= render partial: 'shared/accessible_submit_button',
                locals: {id: 'update',
                         val: 'Save',
                         disabled_initially: false,
                         classes: 'btn btn-default',
                         tooltip: _('Enter all of the required information above')} %>
+    </div>
   </div>
 <% end %>
-
-
-
diff --git a/app/views/devise/registrations/_personal_details.html.erb b/app/views/devise/registrations/_personal_details.html.erb
index 5ec12e7db4..71c39dc5ed 100644
--- a/app/views/devise/registrations/_personal_details.html.erb
+++ b/app/views/devise/registrations/_personal_details.html.erb
@@ -1,4 +1,4 @@
-<%= form_for(resource, as: resource_name, url: registration_path(resource_name, tab: 'personal-details-tab'), html: {method: :put, class: "form-horizontal"}) do |f| %>
+<%= form_for(resource, as: resource_name, url: registration_path(resource_name, tab: 'personal-details-tab'), html: {method: :put, id: "personal_details_registration_form", class: "form-horizontal"}) do |f| %>
   <p class="form-control-static">
     <%= _("Please note that your email address is used as your username.
     If you change this, remember to use your new email address on sign in.") %>
@@ -113,14 +113,17 @@
     </div>
   <% end %>
 
-  <div class='form-submit col-sm-6'>
-    <%= render partial: 'shared/accessible_submit_button',
-               locals: { id: 'update',
-                         val: 'Save',
-                         disabled_initially: true,
-                         classes: 'btn btn-default',
-                         tooltip: _('Enter all of the required information above') } %>
+  <div class="form-group">
+    <div class="col-sm-offset-2 col-sm-10">
+      <%= render partial: 'shared/accessible_submit_button',
+               locals: {id: 'update',
+                        val: 'Save',
+                        disabled_initially: false,
+                        classes: 'btn btn-default',
+                        tooltip: _('Enter all of the required information above')} %>
+    </div>
   </div>
+  
 <% end %>
 
 
diff --git a/app/views/users/_notification_preferences.html.erb b/app/views/users/_notification_preferences.html.erb
index 0e56a73ece..51f8e384f6 100644
--- a/app/views/users/_notification_preferences.html.erb
+++ b/app/views/users/_notification_preferences.html.erb
@@ -1,60 +1,67 @@
-<p>
-  <%= link_to _('Select all'), '#', id: 'select_all' %> |
-  <%= link_to _('Deselect all'), '#', id: 'deselect_all' %>
-</p>
+<%= form_tag( update_email_preferences_user_path(@user), method: :put, html: { id: "preferences_registration_form", class: "form-horizontal" }) do |f| %>
+  <div class="preferences col-sm-10">
 
+  <p>
+    <%= link_to _('Select all'), '#', id: 'select_all' %> |
+    <%= link_to _('Deselect all'), '#', id: 'deselect_all' %>
+  </p>
 
-<fieldset class="preferences">
-  <%= form_tag( update_email_preferences_user_path(@user), method: :put, html: {class: "roadmap-form"}) do |f| %>
+  <%= hidden_field_tag :tab, 'notification-preferences-tab' %>
 
-    <%= hidden_field_tag :tab, 'notification-preferences-tab' %>
-    <p><strong>All Users</strong></p>
-    <div class="form-input">
+  <p class="form-control-static"><strong>All Users</strong></p>
+  <div class="checkbox">
+    <label for="prefs[users][new_comment]">
       <%= hidden_field_tag 'prefs[users][new_comment]', false %>
-      <%= check_box_tag 'prefs[users][new_comment]', true, @prefs[:users][:new_comment] %>
-      <%= label_tag 'prefs[users][new_comment]', _('A new comment has been added to my DMP'), :class => 'checkbox-label' %>
-    </div>
-      <div class="form-input">
+      <%= check_box_tag 'prefs[users][new_comment]', true, @prefs[:users][:new_comment] %><%= _('A new comment has been added to my DMP')  %>
+    </label>
+  </div>
+  <div class="checkbox">
+    <label for="prefs[users][added_as_coowner]">
       <%= hidden_field_tag 'prefs[users][added_as_coowner]', false %>
-      <%=  check_box_tag 'prefs[users][added_as_coowner]', true, @prefs[:users][:added_as_coowner] %>
-      <%= label_tag 'prefs[users][added_as_coowner]', _('A plan has been shared with me'), :class => 'checkbox-label' %>
-    </div>
-    <div class="form-input">
+      <%= check_box_tag 'prefs[users][added_as_coowner]', true, @prefs[:users][:added_as_coowner] %><%= _('A plan has been shared with me')  %>
+    </label>
+  </div>
+  <div class="checkbox">
+    <label for="prefs[users][admin_privileges]">
       <%= hidden_field_tag 'prefs[users][admin_privileges]', false %>
-      <%=  check_box_tag 'prefs[users][admin_privileges]', true, @prefs[:users][:admin_privileges] %>
-      <%= label_tag 'prefs[users][admin_privileges]', _('Admin privileges granted to me'), :class => 'checkbox-label' %>
-    </div>
+      <%= check_box_tag 'prefs[users][admin_privileges]', true, @prefs[:users][:admin_privileges] %><%= _('Admin privileges granted to me')  %>
+    </label>
+  </div>
 
-    <br/>
-    <p><strong>DMP owners and co-owners</strong></p>
-    <div class="form-input">
+  <p class="form-control-static"><strong>DMP owners and co-owners</strong></p>
+
+  <div class="checkbox">
+    <label for="prefs[owners_and_coowners][visibility_changed]">
       <%= hidden_field_tag 'prefs[owners_and_coowners][visibility_changed]', false %>
-      <%=  check_box_tag 'prefs[owners_and_coowners][visibility_changed]', true, @prefs[:owners_and_coowners][:visibility_changed] %>
-      <%= label_tag 'prefs[owners_and_coowners][visibility_changed]', _("My DMP's visibility has changed"), :class => 'checkbox-label' %>
-    </div>
+      <%= check_box_tag 'prefs[owners_and_coowners][visibility_changed]', true, @prefs[:owners_and_coowners][:visibility_changed] %><%= _("My DMP's visibility has changed")  %>
+    </label>          
+  </div>
+
+  <p class="form-control-static"><strong>DMP administrators</strong></p>
 
-    <br/>
-    <p><strong>DMP administrators</strong></p>
-    <div class="form-input">
+  <div class="checkbox">
+    <label for="prefs[admins][template_published]">
       <%= hidden_field_tag 'prefs[admins][template_published]', false %>
-      <%=  check_box_tag 'prefs[admins][template_published]', true, @prefs[:admins][:template_published] %>
-      <%= label_tag 'prefs[admins][template_published]', _('An organisational template is published'), :class => 'checkbox-label' %>
-    </div>
-    <div class="form-input">
+      <%= check_box_tag 'prefs[admins][template_published]', true, @prefs[:admins][:template_published] %><%= _('An organisational template is published')  %>
+    </label>
+  </div>
+
+  <div class="checkbox">
+    <label for="prefs[admins][template_unpublished]">
       <%= hidden_field_tag 'prefs[admins][template_unpublished]', false %>
-      <%=  check_box_tag 'prefs[admins][template_unpublished]', true, @prefs[:admins][:template_unpublished] %>
-      <%= label_tag 'prefs[admins][template_unpublished]', _('An organisational template is unpublished'), :class => 'checkbox-label' %>
-    </div>
-    <div class="form-input">
+      <%= check_box_tag 'prefs[admins][template_unpublished]', true, @prefs[:admins][:template_unpublished] %><%= _('An organisational template is unpublished')  %>
+    </label>
+  </div>
+
+  <div class="checkbox">
+    <label for="prefs[admins][feedback_requested]">
       <%= hidden_field_tag 'prefs[admins][feedback_requested]', false %>
-      <%=  check_box_tag 'prefs[admins][feedback_requested]', true, @prefs[:admins][:feedback_requested] %>
-      <%= label_tag 'prefs[admins][feedback_requested]', _('A user has requested feedback on a DMP'), :class => 'checkbox-label' %>
-    </div>
-
-    <br/>
-    <div class='form-input'>
-      <div class="button-spacer">&nbsp;</div>
-      <%= submit_tag _('Save'), class: 'btn btn-primary', role: 'button' %>
-    </div>
-  <% end %>
-</fieldset>
\ No newline at end of file
+      <%= check_box_tag 'prefs[admins][feedback_requested]', true, @prefs[:admins][:feedback_requested] %><%= _('A user has requested feedback on a DMP')  %>
+    </label>
+  </div>
+
+  <div class="form-group">
+    <%= submit_tag _('Save'), class: 'btn btn-default' %>
+  </div>
+  </div>
+<% end %>
diff --git a/lib/assets/javascripts/views/devise/registrations/edit.js b/lib/assets/javascripts/views/devise/registrations/edit.js
index 83cbb9332b..f8fe8100df 100644
--- a/lib/assets/javascripts/views/devise/registrations/edit.js
+++ b/lib/assets/javascripts/views/devise/registrations/edit.js
@@ -1,5 +1,12 @@
+import 'bootstrap-sass/assets/javascripts/bootstrap/tooltip';
+import 'bootstrap-sass/assets/javascripts/bootstrap/popover';
 import ariatiseForm from '../../../utils/ariatiseForm';
+import { addMatchingPasswordValidator, togglisePasswords } from '../../../utils/passwordHelper';
 
 $(() => {
-  ariatiseForm({ selector: '#personal_details_registration_from' });
+  ariatiseForm({ selector: '#personal_details_registration_form' });
+  ariatiseForm({ selector: '#password_details_registration_form' });
+  ariatiseForm({ selector: '#preferences_registration_form' });
+  addMatchingPasswordValidator({ selector: '#password_details_registration_form' });
+  togglisePasswords({ selector: '#password_details_registration_form' });
 });
diff --git a/lib/assets/javascripts/views/users/notification_preferences.js b/lib/assets/javascripts/views/users/notification_preferences.js
index a1d54cef69..aaaed3a761 100644
--- a/lib/assets/javascripts/views/users/notification_preferences.js
+++ b/lib/assets/javascripts/views/users/notification_preferences.js
@@ -1,9 +1,9 @@
-$(document).ready(function() {
-  $("#select_all").click(function() {
+$(() => {
+  $('#select_all').click(() => {
     $('.preferences').find('input[type="checkbox"]').prop('checked', true);
   });
 
-  $("#deselect_all").click(function() {
+  $('#deselect_all').click(() => {
     $('.preferences').find('input[type="checkbox"]').prop('checked', false);
   });
-});
\ No newline at end of file
+});

From 6dfe6a05006ec724814bb5e8780097bd4565bd27 Mon Sep 17 00:00:00 2001
From: bhavi <bhavi13may@gmail.com>
Date: Fri, 15 Sep 2017 09:58:09 -0500
Subject: [PATCH 9/9] fixing minor issues on user_profile related to forms

---
 .../registrations/_password_details.html.erb       | 14 +-------------
 .../registrations/_personal_details.html.erb       | 10 ++--------
 2 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/app/views/devise/registrations/_password_details.html.erb b/app/views/devise/registrations/_password_details.html.erb
index 25bb4bac61..26cf54b234 100644
--- a/app/views/devise/registrations/_password_details.html.erb
+++ b/app/views/devise/registrations/_password_details.html.erb
@@ -18,13 +18,6 @@
     </div>
   </div>
 
-  <div class="form-group">
-    <%= f.label(:current_password, _('Current password'), class: 'col-sm-2 control-label') %>
-    <div class="col-sm-6">
-      <%= f.password_field(:current_password,  class: 'form-control', "aria-required": true ) %>
-    </div>
-  </div>
-
   <div class="form-group">
     <%= f.label(:password_confirmation, _('Password confirmation'),  class: 'col-sm-2 control-label') %>
     <div class="col-sm-6">
@@ -44,12 +37,7 @@
 
   <div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
-      <%= render partial: 'shared/accessible_submit_button',
-               locals: {id: 'update',
-                        val: 'Save',
-                        disabled_initially: false,
-                        classes: 'btn btn-default',
-                        tooltip: _('Enter all of the required information above')} %>
+    <%= f.button(_('Save'), class: "btn btn-default", type: "submit") %>
     </div>
   </div>
 <% end %>
diff --git a/app/views/devise/registrations/_personal_details.html.erb b/app/views/devise/registrations/_personal_details.html.erb
index 7af319f09f..e08b028118 100644
--- a/app/views/devise/registrations/_personal_details.html.erb
+++ b/app/views/devise/registrations/_personal_details.html.erb
@@ -4,8 +4,7 @@
     If you change this, remember to use your new email address on sign in.") %>
   </p>
 
-  <!-- Edit Profile -->
-  <%= _('You can edit any of the details below.') %>
+  <p class="form-control-static"><%= _('You can edit any of the details below.') %></p>
   <%= hidden_field_tag :unlink_flag, "false", id: "unlink_flag" %>
   <%= hidden_field_tag :skip_personal_details, "false" %>
 
@@ -115,12 +114,7 @@
 
   <div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
-      <%= render partial: 'shared/accessible_submit_button',
-               locals: {id: 'update',
-                        val: 'Save',
-                        disabled_initially: false,
-                        classes: 'btn btn-default',
-                        tooltip: _('Enter all of the required information above')} %>
+      <%= f.button(_('Save'), class: "btn btn-default", type: "submit") %>
     </div>
   </div>
 <% end %>