Bootstrap 4

.gitignore

@@ -1,22 +1,11 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+
 *.gem
-*.rbc
-.bundle
-.config
-.yardoc
-Gemfile.lock
-InstalledFiles
-_yardoc
-coverage
-doc/
-lib/bundler/man
-pkg
-rdoc
-spec/reports
-test/tmp
-test/version_tmp
-tmp
-*.bundle
-*.so
-*.o
-*.a
-mkmf.log

README.md

@@ -2,70 +2,60 @@
 
 Here are some of the highlights:
 
-* Devise views with Bootstrap 3.
-* Used Bootstrap responsive columns.
-* I18n Support.
+- Devise views with Bootstrap 4
+- Used Bootstrap responsive columns
+- I18n Support
+
+***WARNING***
 
-WARNING:
 This gem copies lots of its code from [devise-i18n-views](https://github.com/mcasimir/devise-i18n-views) gem.
 
 ## Screenshot
+
 ![Screenshot](https://raw.githubusercontent.com/hisea/devise-bootstrap-views/master/Screenshot.png)
 
 ## Installation
 
-Add these lines in the head tag of your application.html.erb:
+Make sure Bootstrap 4 is installed, either as a Ruby gem or using CDN:
+
+```html
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+```
 
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css">
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.css">
 
 Add this line to your application's Gemfile:
 
-    gem 'devise-bootstrap-views'
+```ruby
+gem 'devise-bootstrap-views', '~> 1.0'
+```
 
 And then execute:
 
     $ bundle
 
-Add some minor css fix to your rails asset pipeline manifest
-
-    # SASS
-    *= require devise_bootstrap_views
-
-    # LESS
-    *= require devise_bootstrap_views_less
-
-Then you need to install the required translations in your `config/locales`. The  [devise-i18n-views](https://github.com/mcasimir/devise-i18n-views) project is no longer maintained after being merged into [devise-i18n](https://github.com/tigrish/devise-i18n), which is currently the best source for updated Devise translations. You can manually download locale dictionaries from [devise-i18n/rails/locales](https://github.com/tigrish/devise-i18n/tree/master/rails/locales) or generate them by running `devise:views:locale <chosen_locale>`:
+Then you can install the required translations in your `config/locales`. Use [devise-i18n](https://github.com/tigrish/devise-i18n) — the best source for updated Devise translations. You can manually generate locale files by executing `rails generate devise:views:locale <chosen_locale>`:
 
 ``` sh
-rails g devise:views:locale it
+rails generate devise:views:locale de
 ```
 
-will generate `config/locales/devise.views.it.yml`.
+will generate `config/locales/devise.views.de.yml`.
 
 ## Customizing Views
 
 The `devise:views:bootstrap_templates` generator will copy all views to your application, so you can modify the files as you wish:
 
 ``` sh
-rails g devise:views:bootstrap_templates
-```
-
-``` sh
-rails g devise:views:bootstrap_haml_templates
+rails generate devise:views:bootstrap_templates
 ```
 
-``` sh
-rails g devise:views:bootstrap_slim_templates
-```
+## Remove Devise Bootstrap views
 
-## Remove devise-bootstrap-views
-If you would like to remove devise-bootstrap-views, please follow the steps below
+If you would like to remove `devise-bootstrap-views`, please follow the steps below:
 
 1. Remove `gem devise-bootstrap-views` from Gemfile
-2. Delete Gemfile.lock
-3. Command `bundle install`
-4. Remove the contexts below from your stylesheets
+2. Command `bundle install`
+3. Remove the contexts below from your stylesheets
 
     ```sh
     # SASS
@@ -75,11 +65,11 @@ If you would like to remove devise-bootstrap-views, please follow the steps belo
     *= require devise_bootstrap_views_less
     ```
 
-5. Remove devise view files
+4. Remove devise view files
     ```sh
     rails destroy devise:views
     ```
-6. Generate devise view files again
+5. Generate devise view files again
     ```sh
     rails g devise:views
     ```

Rakefile

@@ -1,2 +1 @@
-require "bundler/gem_tasks"
-
+require 'bundler/gem_tasks'

app/assets/stylesheets/devise_bootstrap_views.scss

@@ -1,10 +0,0 @@
-.float-none {
-  float: none;
-}
-
-.panel-heading {
-  padding: 15px;
-  h4 {
-    margin: 0px;
-  }
-}

app/assets/stylesheets/devise_bootstrap_views_less.less

@@ -1,10 +0,0 @@
-.float-none {
-  float: none;
-}
-
-.panel-heading {
-  padding: 15px;
-  h4 {
-    margin: 0px;
-  }
-}

app/views/devise/confirmations/new.html.erb

@@ -1,18 +1,16 @@
 <%= bootstrap_devise_error_messages! %>
-<div class="panel panel-default devise-bs">
-  <div class="panel-heading">
-    <h4><%= t('.resend_confirmation_instructions', default: 'Resend confirmation instructions') %></h4>
+
+<h1><%= t('.resend_confirmation_instructions', default: 'Resend confirmation instructions') %></h1>
+
+<%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post, role: 'form' }) do |f| %>
+  <div class="form-group">
+    <%= f.label :email %>
+    <%= f.email_field :email, autofocus: true, class: "form-control"  %>
   </div>
-  <div class="panel-body">
-    <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post, role: 'form' }) do |f| %>
-      <div class="form-group">
-        <%= f.label :email %>
-        <%= f.email_field :email, autofocus: true, class: "form-control"  %>
-      </div>
 
-      <%= f.submit t('.resend_confirmation_instructions', default: 'Resend confirmation instructions'), class: 'btn btn-primary' %>
-    <% end %>
+  <div class="form-group">
+    <%= f.submit t('.resend_confirmation_instructions', default: 'Resend confirmation instructions'), class: 'btn btn-primary' %>
   </div>
-</div>
+<% end %>
 
 <%= render 'devise/shared/links' %>

app/views/devise/mailer/confirmation_instructions.html.erb

@@ -2,5 +2,7 @@
 
 <p><%= t('.instruction', default: 'You can confirm your account email through the link below:') %></p>
 
-<p><%= link_to t('.action', default: 'Confirm my account'),
-         confirmation_url(@resource, confirmation_token: @token, locale: I18n.locale) %></p>
+<p>
+  <%= link_to t('.action', default: 'Confirm my account'),
+              confirmation_url(@resource, confirmation_token: @token, locale: I18n.locale) %>
+</p>

app/views/devise/mailer/reset_password_instructions.html.erb

@@ -5,4 +5,5 @@
 <p><%= link_to t('.action', default: 'Change my password'), edit_password_url(@resource, reset_password_token: @token, locale: I18n.locale) %></p>
 
 <p><%= t('.instruction_2', default: "If you didn't request this, please ignore this email.") %></p>
+
 <p><%= t('.instruction_3', default: "Your password won't change until you access the link above and create a new one.") %></p>

app/views/devise/passwords/edit.html.erb

@@ -1,24 +1,23 @@
 <%= bootstrap_devise_error_messages! %>
-<div class="panel panel-default devise-bs">
-  <div class="panel-heading">
-    <h4><%= t('.change_your_password', default: 'Change your password') %></h4>
-  </div>
-  <div class="panel-body">
-    <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put, role: 'form' }) do |f| %>
-      <%= f.hidden_field :reset_password_token %>
 
-      <div class="form-group">
-        <%= f.label :password, t('.new_password', default: 'New password') %>
-        <%= f.password_field :password, autofocus: true, class: 'form-control'  %>
-      </div>
+<h1><%= t('.change_your_password', default: 'Change your password') %></h1>
+
+<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put, role: 'form' }) do |f| %>
+  <%= f.hidden_field :reset_password_token %>
+
+  <div class="form-group">
+    <%= f.label :password, t('.new_password', default: 'New password') %>
+    <%= f.password_field :password, autofocus: true, class: 'form-control'  %>
+  </div>
 
-      <div class="form-group">
-        <%= f.label :password_confirmation, t('.confirm_new_password', default: 'Confirm new password') %>
-        <%= f.password_field :password_confirmation, class: 'form-control'  %>
-      </div>
+  <div class="form-group">
+    <%= f.label :password_confirmation, t('.confirm_new_password', default: 'Confirm new password') %>
+    <%= f.password_field :password_confirmation, class: 'form-control'  %>
+  </div>
 
-      <%= f.submit t('.change_my_password', default: 'Change my password'), class: 'btn btn-primary' %>
-    <% end %>
+  <div class="form-group">
+    <%= f.submit t('.change_my_password', default: 'Change my password'), class: 'btn btn-primary' %>
   </div>
-</div>
+<% end %>
+
 <%= render 'devise/shared/links' %>

app/views/devise/passwords/new.html.erb

@@ -1,17 +1,16 @@
 <%= bootstrap_devise_error_messages! %>
-<div class="panel panel-default devise-bs">
-  <div class="panel-heading">
-    <h4><%= t('.forgot_your_password', default: 'Forgot your password?') %></h4>
+
+<h1><%= t('.forgot_your_password', default: 'Forgot your password?') %></h1>
+
+<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post, role: 'form' }) do |f| %>
+  <div class="form-group">
+    <%= f.label :email %>
+    <%= f.email_field :email, autofocus: true, class: 'form-control' %>
   </div>
-  <div class="panel-body">
-    <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post, role: "form" }) do |f| %>
-      <div class="form-group">
-        <%= f.label :email %>
-        <%= f.email_field :email, autofocus: true, class: 'form-control' %>
-      </div>
 
-      <%= f.submit t('.send_me_reset_password_instructions', default: 'Send me reset password instructions'), class: 'btn btn-primary' %>
-    <% end %>
+  <div class="form-group">
+    <%= f.submit t('.send_me_reset_password_instructions', default: 'Send me reset password instructions'), class: 'btn btn-primary' %>
   </div>
-</div>
+<% end %>
+
 <%= render 'devise/shared/links' %>

app/views/devise/registrations/edit.html.erb

@@ -1,30 +1,29 @@
 <%= bootstrap_devise_error_messages! %>
-<div class="panel panel-default devise-bs">
-  <div class="panel-heading">
-    <h4><%= t('.title', resource: resource_class.model_name.human , default: "Edit #{resource_name.to_s.humanize}") %></h4>
+
+<h1><%= t('.title', resource: resource_class.model_name.human , default: "Edit #{resource_name.to_s.humanize}") %></h1>
+
+<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
+  <div class="form-group">
+    <%= f.label :email %>
+    <%= f.email_field :email, autofocus: true, class: 'form-control' %>
+  </div>
+  <div class="form-group">
+    <%= f.label :password %> <i>(<%= t('.leave_blank_if_you_don_t_want_to_change_it', default: "leave blank if you don't want to change it") %>)</i>
+    <%= f.password_field :password, autocomplete: "off", class: 'form-control' %>
   </div>
-  <div class="panel-body">
-    <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
-      <div class="form-group">
-        <%= f.label :email %>
-        <%= f.email_field :email, autofocus: true, class: 'form-control' %>
-      </div>
-      <div class="form-group">
-        <%= f.label :password %> <i>(<%= t('.leave_blank_if_you_don_t_want_to_change_it', default: "leave blank if you don't want to change it") %>)</i>
-        <%= f.password_field :password, autocomplete: "off", class: 'form-control' %>
-      </div>
-      <div class="form-group">
-        <%= f.label :password_confirmation %>
-        <%= f.password_field :password_confirmation, class: 'form-control'  %>
-      </div>
-      <div class="form-group">
-        <%= f.label :current_password %> <i>(<%= t('.we_need_your_current_password_to_confirm_your_changes', default: 'we need your current password to confirm your changes') %>)</i>
-        <%= f.password_field :current_password, class: 'form-control' %>
-      </div>
-      <%= f.submit t('.update', default: 'Update'), class: 'btn btn-primary' %>
-    <% end %>
+  <div class="form-group">
+    <%= f.label :password_confirmation %>
+    <%= f.password_field :password_confirmation, class: 'form-control'  %>
+  </div>
+  <div class="form-group">
+    <%= f.label :current_password %> <i>(<%= t('.we_need_your_current_password_to_confirm_your_changes', default: 'we need your current password to confirm your changes') %>)</i>
+    <%= f.password_field :current_password, class: 'form-control' %>
+  </div>
+
+  <div class="form-group">
+    <%= f.submit t('.update', default: 'Update'), class: 'btn btn-primary' %>
   </div>
-</div>
+<% end %>
 
 <p><%= t('.unhappy', default: 'Unhappy') %>? <%= link_to t('.cancel_my_account', default: 'Cancel my account'), registration_path(resource_name), data: { confirm: t('.are_you_sure', default: "Are you sure?") }, method: :delete %>.</p>
 

app/views/devise/registrations/new.html.erb

@@ -1,24 +1,24 @@
 <%= bootstrap_devise_error_messages! %>
-<div class="panel panel-default devise-bs">
-  <div class="panel-heading">
-    <h4><%= t('.sign_up', default: 'Sign up') %></h4>
+
+<h1><%= t('.sign_up', default: 'Sign up') %></h1>
+
+<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { role: 'form' }) do |f| %>
+  <div class="form-group">
+    <%= f.label :email %>
+    <%= f.email_field :email, autofocus: true, class: 'form-control' %>
   </div>
-  <div class="panel-body">
-    <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { role: 'form' }) do |f| %>
-      <div class="form-group">
-        <%= f.label :email %>
-        <%= f.email_field :email, autofocus: true, class: 'form-control' %>
-      </div>
-      <div class="form-group">
-        <%= f.label :password %>
-        <%= f.password_field :password, class: 'form-control' %>
-      </div>
-      <div class="form-group">
-        <%= f.label :password_confirmation %>
-        <%= f.password_field :password_confirmation, class: 'form-control' %>
-      </div>
-      <%= f.submit t('.sign_up', default: 'Sign up'), class: 'btn btn-primary' %>
-    <% end %>
+  <div class="form-group">
+    <%= f.label :password %>
+    <%= f.password_field :password, class: 'form-control' %>
   </div>
-</div>
+  <div class="form-group">
+    <%= f.label :password_confirmation %>
+    <%= f.password_field :password_confirmation, class: 'form-control' %>
+  </div>
+
+  <div class="form-group">
+    <%= f.submit t('.sign_up', default: 'Sign up'), class: 'btn btn-primary' %>
+  </div>
+<% end %>
+
 <%= render 'devise/shared/links' %>