💟

[Rails]Log_inをもっとシンプルに🥺gem:simple_form

2024/08/19に公開

Bootstrap

deviseを使っていたけど記述量を減らせるとのことでgem:simple_formを使ってみた〜〜です。

[前提]devise導入済み

方法

Gemfileにsimple_formを追加。

gem

gem 'simple_form'

bundle installする
2. Bootstrapを使用している場合は

ターミナル

rails generate simple_form:install --bootstrap

Bootstrapを使用していない場合

ターミナル

rails generate simple_form:install

コード書き換える

元のコード

<h2>Log in</h2>

<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>

  <div class="field">
    <%= f.label :password %><br />
    <%= f.password_field :password, autocomplete: "current-password" %>
  </div>

  <% if devise_mapping.rememberable? %>
    <div class="field">
      <%= f.check_box :remember_me %>
      <%= f.label :remember_me %>
    </div>
  <% end %>

  <div class="actions">
    <%= f.submit "Log in" %>
  </div>
<% end %>

<%= render "public/shared/links" %>

<h2>Log in</h2>

<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
  <%= f.input :email, autofocus: true, input_html: { autocomplete: 'email' } %>
  <%= f.input :password, input_html: { autocomplete: 'current-password' } %>

  <% if devise_mapping.rememberable? %>
    <%= f.input :remember_me, as: :boolean, label: "Remember me" %>
  <% end %>

  <%= f.button :submit, "Log in" %>
<% end %>

<%= render "public/shared/links" %>

減らせた〜〜〜

レイアウト

<style>
  h2.text-center {
    font-size: 5rem; 
    color: #FF9999; 
  }

  .btn-primary {
    background-color: #FF9999; /* ボタンの背景色 */
    border-color: #FF9999; /* ボタンのボーダー色 */
    font-size: 1.2rem; /* ボタンのフォントサイズ */
  }
</style>

<h2 class="text-center">Log in</h2>

<%= render "public/shared/links" %>

<div class="container mt-4">
  <div class="row justify-content-center">
    <div class="col-12 col-md-6 col-lg-4">
      <%= simple_form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: 'form-horizontal' }) do |f| %>
        <%= f.input :email, autofocus: true, input_html: { autocomplete: 'email', class: 'form-control' }, label_html: { class: 'form-label' } %>
        
        <%= f.input :password, input_html: { autocomplete: 'current-password', class: 'form-control' }, label_html: { class: 'form-label' } %>
        
        <% if devise_mapping.rememberable? %>
          <%= f.input :remember_me, as: :boolean, label: "Remember me", input_html: { class: 'form-check-input' }, label_html: { class: 'form-check-label' } %>
        <% end %>

        <%= f.button :submit, "Log in", class: 'btn btn-primary btn-block' %>
      <% end %>
    </div>
  </div>
</div>

こういうプラスアルファも増やしていきたい

[前提]devise導入済み

方法

レイアウト

Discussion