ジャンル別に投稿・チャットできるようなアプリ作ってみた〜ログインページ編〜

14085 ワード
Ruby2.5.1 haml rails5.2 haml テキストリンク

これから個人アプリの機能一つ一つをどのように作成したか、記事にしていきたいと思います。
おかしいところあってもご容赦ください。
又はコメントにご指摘くださるとありがたいです。

ログインページ


ログインには、gem 'devise'を使用しました

Gemfile
# ログインやユーザ登録機能に便利
gem 'devise'

ターミナルでbundle installe

% bundle install

まあ、機能としては大体deviseのものをそのまま使っています。
ただ、deviseの登録ってメールアドレスとパスワードなんですよね。
ということで、登録する際は、名前も登録してもらうようにしました。

登録画面

app/views/devise/registrations/new.html.haml
.new-header
  = render "devise/shared/error_messages", resource: resource
.middle
  .middle__login
    .middle__login__top
      %p.middle__login__top__text
        登録しちゃう？(￣▽￣)
    .middle__login__bottom
      .middle__login__bottom__form
        = form_with(model: @user, url: user_registration_path,local: true,method: :post) do |f|
          .middle__login__bottom__form__box
            = f.text_field :name, autofocus: true, autocomplete: "name", class: "middle-show__login__bottom__form__box__name", id: "form", placeholder: "お名前は?",required:"required"
          .middle__login__bottom__form__box
            = f.email_field :email, autocomplete: "email", class: "middle__login__bottom__form__box__address", id: "form", placeholder: "メールアドレスは？",required:"required"
          .middle__login__bottom__form__box
            = f.password_field :password, autocomplete: "new-password", class: "middle__login__bottom__form__box__password", id: "form", placeholder: "パスワードは英数字6文字以上で",required:"required"
          .middle__login__bottom__form__box
            = f.password_field :password_confirmation, autocomplete: "new-password", class: "middle__login__bottom__form__box__password-second", id: "form", placeholder: "パスワードもう一回！",required:"required"
          .actions
            = f.submit "これで君も仲間だ！",class: "middle__login__bottom__form__button__submit"
.new-footer
  = render "devise/shared/links"
app/controllers/users/registrations_controller.rb
class Users::RegistrationsController < Devise::RegistrationsController

  # GET /resource/sign_up
  def new
    super
  end

  def create
    @user = User.new(user_params)
    if @user.valid?
      @user.save
      sign_in(:user,@user)
      redirect_to root_path
    else
      render :new
    end
  end

  def edit

  end

  private

  def user_params
    params.require(:user).permit(:name,:email,:password,:password_confirmation)
  end

  # editでパスワード無効で変更するための記述
  def update_resource(resource, params)
    resource.update_without_password(params)
  end

end

登録段階では、特別なことはしてないんですよね。

ログインページ

app/views/devise/sessions/new.html.haml
.index-header
.main
  .main__login
    .main__login__top
      %p.main__login__top__text
        ようこそ♪( ´▽｀)
    .main__login__bottom
      .main__login__bottom__form
        = form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
          .main__login__bottom__form__box
            = f.email_field :email, autofocus: true, autocomplete: "email",class: "main__login__bottom__form__box__address", id: "form", placeholder: "メールアドレスよろ", required:"required"
          .main__login__bottom__form__box
            = f.password_field :password, autocomplete: "current-password",class: "main__login__bottom__form__box__password", id: "form", placeholder: "パスワードよろ", required:"required"
          %label.main__login__bottom__form__button 
            = f.submit class: "main__login__bottom__form__button__submit", value: "いざゆかん！"
.index-footer
  %h6.guide
    = render "devise/shared/links"
app/controllers/users/sessions_controller.rb
class Users::SessionsController < Devise::SessionsController
  # GET /resource/sign_in
  def new
    super
  end

end

ログイン画面はdeviseの機能をそのままに見た目変えた感じです。

私が作成時に知ったこと
autofocus: true
これは自動フォーカスを意味しており、ページを開いたらそこにすぐに入力できるようにするというコード

ログイン・登録はあまり特別なところはないですね。