BETA

【Sinatra】チェック機能付きサインアップフォーム

投稿日:2019-10-10
最終更新:2019-10-10

Sinatraでチェック機能付きのサインアップフォームを作成します。

*参考
http://sinatrarb.com/intro-ja.html

*注意
出来た嬉しさのあまりBootstrap等適応してないむき出しコードです。スミマセン。。
別記事でflashを使用したメッセージの表示も公開予定です。

やりたいこと

こんな感じでサインアップ時にパスワード入力フォームとパスワード確認フォームを設置してサインアップ時に双方の齟齬を確認してサインアップをしたいです。

ユーザテーブル

class CreateUsers < ActiveRecord::Migration[6.0]  
  def change  
    create_table :users do |t|   
      t.string :name  
      t.string :email  
      t.string :password_digest  
    end  
  end  
end  

カラムがnameとemailとpassword_digestのみです。
もう一つパスワード確認用のカラムを追加しとけばよかったと一瞬公開しましたが、ユーザテーブルのカラムはこのままでパスワード確認が出来る方法があったのでご安心を。

トライしたこと

Bootstrapがサポートしている機能使った確認(リサーチ)
→Bootstrapはパスワード確認用のフォームを提供していなかった

Vue.jsを使用した確認(フロント)
→フロントの機能としてJQueryみたいにVue.jsを使用します。
入力されたパスワードの文字列を取ってきて、Vue.js側で確認しようとしましたが、バックの処理が動いたあとにフロントの処理が動くので、現実的でない。

Vue.jsを使用した確認(バック)
→WebpackでVue.jsを導入したあと、Vue.jsのパスワード確認用のプラグインがあるらしく、それをインストールすれば出来るみたいです。しかし、それほどの労力をかけるものか?ということで見送りに。。

どうしたか

SinatraのREADMEを読んでると、paramsを使うと変数はコントローラとViewを行き来する という趣旨の記述を発見しました。
これだ!!!コントローラ側で処理できるっぽいいいい!

サインアップフォームを見てみます。
signup.erb

<form method="post" action="/session/signup">  
<li>  
名前  
<input type= "text" name="user[name]" placeholder="山田太郎">  
<li>  
メールアドレス  
<input type= "text" name="user[email]" placeholder="email">  
<li>  
    <input type= "password" name="user[password]" placeholder="password" id: 'password-input', class: 'form-control', required: true, pattern: '^(?=.*?[a-zA-Z_-])(?=.*?\d)[0-9a-zA-Z_-]{8,}$' %>  
    <div class="invalid-feedback" style="width: 100%">  
      パスワードを正しいフォーム(数字、小か大文字を含む8文字以上)で入力してください  
    </div>  
    <input type= "password" name="password[confirmation]" placeholder="password確認用" id: 'password-confirmation-input', class: 'form-control', required: true, pattern: '^(?=.*?[a-zA-Z_-])(?=.*?\d)[0-9a-zA-Z_-]{8,}$' %>  
    <div class="invalid-feedback" style="width: 100%">  
      空欄もしくはパスワードが不一致です  
    </div>  

<input type= "submit" value="作成">  
</form>  

パスワードフォームのところだけ注目してください。色々書いてるのはHTML5の機能で、入力された文字タイプの判別を行っています。

session.rb

  get '/signup' do  
    if logged_in?  
      redirect '/'  
    else  
      erb :'session/signup'  
    end  
  end  

  post '/signup' do  
    pass = params[:user][:password]  
    ck_pass = params[:password][:confirmation]  
    if pass == ck_pass  
      @user = User.create({:name => params[:user][:name],:email => params[:user][:email],:password => params[:user][:password]})  
    else  
      redirect '/session/signup'  
    end  
    if @user.save  
      session[:user_id] = @user.id  
      redirect '/'  
    else  
      redirect '/session/signup'  
    end  
  end      

この、

    pass = params[:user][:password]  
    ck_pass = params[:password][:confirmation]  

でパスワード入力用フォームとパスワード確認用フォームの両方から一度値を取得してきています。
params のあとは各自のerbに合わせてください。
params にこんな使い方があったとは。。

取得したパスワードの値をif文で同じものか確認をして処理を進めていくって流れになります。

まとめ

Railsにはパスワード確認用の機能があったあり、Vue.jsを使うにしてもVue.jsをまるっとインストールして使ってたり、Sinatraだけでパスワード確認をやってる人おらんのかい!!って感じでした。笑
Rialsでなんでも揃ってるより、自分で考えてコード書く方が成長できるのでこういう落とし穴のみたいなもの、もっとこい!

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

初学者の成長が垣間見れます

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう