Convert app/views/profiles/show.html.haml to bootstrap_form

app/helpers/users_helper.rb

@@ -4,4 +4,14 @@ module UsersHelper
             title: user.email,
             class: 'has-tooltip commit-committer-link')
   end
+
+  def user_email_help_text(user)
+    return 'We also use email for avatar detection if no avatar is uploaded.' unless user.unconfirmed_email.present?
+
+    confirmation_link = link_to 'Resend confirmation e-mail', user_confirmation_path(user: { email: @user.unconfirmed_email }), method: :post
+
+    h('Please click the link in the confirmation email before continuing. It was sent to ') +
+      content_tag(:strong) { user.unconfirmed_email } + h('.') +
+      content_tag(:p) { confirmation_link }
+  end
 end

app/views/profiles/show.html.haml

 = render 'profiles/head'
 
-= form_for @user, url: profile_path, method: :put, html: { multipart: true, class: "edit-user prepend-top-default" }, authenticity_token: true do |f|
+= bootstrap_form_for @user, url: profile_path, method: :put, html: { multipart: true, class: 'edit-user prepend-top-default' }, authenticity_token: true do |f|
   = form_errors(@user)
 
   .row
@@ -11,11 +11,11 @@
         - if @user.avatar?
           You can change your avatar here
           - if gravatar_enabled?
-            or remove the current avatar to revert to #{link_to Gitlab.config.gravatar.host, "http://" + Gitlab.config.gravatar.host}
+            or remove the current avatar to revert to #{link_to Gitlab.config.gravatar.host, 'http://' + Gitlab.config.gravatar.host}
         - else
           You can upload an avatar here
           - if gravatar_enabled?
-            or change it at #{link_to Gitlab.config.gravatar.host, "http://" + Gitlab.config.gravatar.host}
+            or change it at #{link_to Gitlab.config.gravatar.host, 'http://' + Gitlab.config.gravatar.host}
     .col-lg-9
       .clearfix.avatar-image.append-bottom-default
         = link_to avatar_icon(@user, 400), target: '_blank', rel: 'noopener noreferrer' do
@@ -26,12 +26,12 @@
         %a.btn.js-choose-user-avatar-button
           Browse file...
         %span.avatar-file-name.prepend-left-default.js-avatar-filename No file chosen
-        = f.file_field :avatar, class: "js-user-avatar-input hidden", accept: "image/*"
+        = f.file_field_without_bootstrap :avatar, class: 'js-user-avatar-input hidden', accept: 'image/*'
       .help-block
         The maximum file size allowed is 200KB.
       - if @user.avatar?
         %hr
-        = link_to 'Remove avatar', profile_avatar_path, data: { confirm: "Avatar will be removed. Are you sure?" }, method: :delete, class: "btn btn-gray"
+        = link_to 'Remove avatar', profile_avatar_path, data: { confirm: 'Avatar will be removed. Are you sure?' }, method: :delete, class: 'btn btn-gray'
   %hr
   .row
     .col-lg-3.profile-settings-sidebar
@@ -43,91 +43,50 @@
           Some options are unavailable for LDAP accounts
     .col-lg-9
       .row
-        .form-group.col-md-9
-          = f.label :name, class: "label-light"
-          = f.text_field :name, class: "form-control", required: true
-          %span.help-block Enter your name, so people you know can recognize you.
+        = f.text_field :name,  required: true, wrapper: { class: 'col-md-9' },
+          help: 'Enter your name, so people you know can recognize you.'
+        = f.text_field :id, readonly: true, label: 'User ID', wrapper: { class: 'col-md-3' }
 
-        .form-group.col-md-3
-          = f.label :id, class: 'label-light' do
-            User ID
-          = f.text_field :id, class: 'form-control', readonly: true
-
-
-      .form-group
-        = f.label :email, class: "label-light"
       - if @user.external_email?
-          = f.text_field :email, class: "form-control", required: true, readonly: true
-          %span.help-block.light
-            Your email address was automatically set based on your #{email_provider_label} account.
-        - else
-          - if @user.temp_oauth_email?
-            = f.text_field :email, class: "form-control", required: true, value: nil
-          - else
-            = f.text_field :email, class: "form-control", required: true
-          - if @user.unconfirmed_email.present?
-            %span.help-block
-              Please click the link in the confirmation email before continuing. It was sent to
-              = succeed "." do
-                %strong= @user.unconfirmed_email
-              %p
-              = link_to "Resend confirmation e-mail", user_confirmation_path(user: { email: @user.unconfirmed_email }), method: :post
-
+        = f.text_field :email, required: true, readonly: true, help: 'Your email address was automatically set based on your #{email_provider_label} account.'
       - else
-            %span.help-block We also use email for avatar detection if no avatar is uploaded.
-      .form-group
-        = f.label :public_email, class: "label-light"
-        = f.select :public_email, options_for_select(@user.all_emails, selected: @user.public_email), { include_blank: 'Do not show on profile' }, class: "select2"
-        %span.help-block This email will be displayed on your public profile.
-      .form-group
-        = f.label :preferred_language, class: "label-light"
+        = f.text_field :email, required: true, value: (@user.email unless @user.temp_oauth_email?),
+          help: user_email_help_text(@user)
+      = f.select :public_email, options_for_select(@user.all_emails, selected: @user.public_email),
+        { help: 'This email will be displayed on your public profile.', include_blank: 'Do not show on profile' },
+        control_class: 'select2'
       = f.select :preferred_language, Gitlab::I18n::AVAILABLE_LANGUAGES.map { |value, label| [label, value] },
-          {}, class: "select2"
-        %span.help-block This feature is experimental and translations are not complete yet.
-      .form-group
-        = f.label :skype, class: "label-light"
-        = f.text_field :skype, class: "form-control"
-      .form-group
-        = f.label :linkedin, class: "label-light"
-        = f.text_field :linkedin, class: "form-control"
-      .form-group
-        = f.label :twitter, class: "label-light"
-        = f.text_field :twitter, class: "form-control"
-      .form-group
-        = f.label :website_url, 'Website', class: "label-light"
-        = f.text_field :website_url, class: "form-control"
-      .form-group
-        = f.label :location, 'Location', class: "label-light"
-        = f.text_field :location, class: "form-control"
-      .form-group
-        = f.label :organization, 'Organization', class: "label-light"
-        = f.text_field :organization, class: "form-control"
-      .form-group
-        = f.label :bio, class: "label-light"
-        = f.text_area :bio, rows: 4, class: "form-control", maxlength: 250
-        %span.help-block Tell us about yourself in fewer than 250 characters.
+        { help: 'This feature is experimental and translations are not complete yet.' },
+        control_class: 'select2'
+      = f.text_field :skype
+      = f.text_field :linkedin
+      = f.text_field :twitter
+      = f.text_field :website_url, label: 'Website'
+      = f.text_field :location
+      = f.text_field :organization
+      = f.text_area :bio, rows: 4, maxlength: 250, help: 'Tell us about yourself in fewer than 250 characters.'
       .prepend-top-default.append-bottom-default
-        = f.submit 'Update profile settings', class: "btn btn-success"
-        = link_to "Cancel", user_path(current_user), class: "btn btn-cancel"
+        = f.submit 'Update profile settings', class: 'btn btn-success'
+        = link_to 'Cancel', user_path(current_user), class: 'btn btn-cancel'
 
 .modal.modal-profile-crop
   .modal-dialog
     .modal-content
       .modal-header
-        %button.close{ :type => "button", :'data-dismiss' => "modal" }
+        %button.close{ type: 'button', 'data-dismiss': 'modal' }
           %span
             ×
         %h4.modal-title
           Position and size your new avatar
       .modal-body
         .profile-crop-image-container
-          %img.modal-profile-crop-image{ alt: "Avatar cropper" }
+          %img.modal-profile-crop-image{ alt: 'Avatar cropper' }
         .crop-controls
           .btn-group
-            %button.btn.btn-primary{ data: { method: "zoom", option: "0.1" } }
+            %button.btn.btn-primary{ data: { method: 'zoom', option: '0.1' } }
               %span.fa.fa-search-plus
-            %button.btn.btn-primary{ data: { method: "zoom", option: "-0.1" } }
+            %button.btn.btn-primary{ data: { method: 'zoom', option: '-0.1' } }
               %span.fa.fa-search-minus
       .modal-footer
-        %button.btn.btn-primary.js-upload-user-avatar{ :type => "button" }
+        %button.btn.btn-primary.js-upload-user-avatar{ type: 'button' }
           Set new profile picture

config/initializers/bootstrap_form.rb

+module BootstrapFormBuilderCustomization
+  def label_class
+    "label-light"
+  end
+end
+
+BootstrapForm::FormBuilder.prepend(BootstrapFormBuilderCustomization)