0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【rails】ボタンをクリックするとランダムの英数字パスワードを作成、パスワードフィールドに入力する方法

Last updated at Posted at 2020-07-12

パスワードを自動生成したい

ポートフォリオの投稿機能にパスワード機能を設定したのですが、
パスワードを自動的に生成、入力までしてくれる機能あったら便利じゃん。

ということで作っていきましょう!

この記事のゴール

「パスワードを生成する」ボタンをクリックして
自動的に入力できるようにしましょう!
パスワード生成.gif

前提

rails:5.2
ruby:2.6.3
bootstrap
jquery

パスワードを生成する

まずはコントローラーでランダムの英数字を作れるようにします。

topics_controller.rb
def new
  @topic    = Topic.new
  @password = SecureRandom.alphanumeric(6)
  -> ランダムの英数字(A-Z, a-z, 0-9)を生成
   (6)は6桁、指定なしの場合は16
end

ボタンクリックでフィールドに入力できるようにする

次に先ほど作したパスワードをpassword_field(今回はtext_fieldにしています)に
入力できるようにします。

new.html.erb
<div class="topic-new-wrapper" >
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
          <%= form_for @topic do |f| %>
            <div class="form-group">
              <%= f.label :password, 'password(任意)' %>
              <%= f.text_field :password, class: 'form-control', id: 'password' %>
              <%= button_tag 'パスワードを生成する', id: 'auto-fill-link' %>
            </div>
  
            <%= f.submit 'パスワード登録', class: 'btn btn-black btn-block' %>
  
          <% end %>
      </div>
    </div>
  </div>
</div>
  
<script>
  $(function(){
    autoFill();
    function autoFill() {
      $('#auto-fill-link').click(function(){
        $('#password').val("<%= @password %>");
      });
    }
  })
</script>

"auto-fill-link"というidを含むリンクがクリックされると、"password"というidを含む
fieldに@passwordが入力されます。

ただこれだとbutton_tagがクリックされたときにsubmitされてしまうため、
ただのボタンとして利用する際は以下のコードを追加してあげます。

type: "button"

new.html.erb
<div class="topic-new-wrapper" >
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
          <%= form_for @topic do |f| %>
            <div class="form-group">
              <%= f.label :password, 'password(任意)' %>
              <%= f.text_field :password, class: 'form-control', id: 'password' %>
この行->       <%= button_tag 'パスワードを生成する', id: 'auto-fill-link', type: "button" %>
            </div>
  
            <%= f.submit 'パスワード登録', class: 'btn btn-black btn-block' %>
  
          <% end %>
      </div>
    </div>
  </div>
</div>
  
<script>
  $(function(){
    autoFill();
    function autoFill() {
      $('#auto-fill-link').click(function(){
        $('#password').val("<%= @password %>");
      });
    }
  })
</script>

まとめ

パスワードの生成から入力までしてくれる機能を作成しました。

簡単なので上記のコードぜひ使ってくださいね。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?