2016-05-12 12 views
1

ログインページのフロントエンドを作成しました。今私はバックエンド(ログイン、サインアップ、...)をしたい。 「Devise」という名前の宝石からYouTubeのチュートリアルを見ました。かなり素晴らしいですね。カスタムHTMLファイルをRailsファイルに統合する方法

私はこれらの標準のdevises 'registrations/new.html.erb'ファイルを持っています。

<h2>Sign up</h2> 

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> 
<%= devise_error_messages! %> 

<div class="field"> 
    <%= f.label :email %><br /> 
    <%= f.email_field :email, autofocus: true %> 
</div> 

<div class="field"> 
    <%= f.label :password %> 
    <% if @minimum_password_length %> 
    <em>(<%= @minimum_password_length %> characters minimum)</em> 
    <% end %><br /> 
    <%= f.password_field :password, autocomplete: "off" %> 
</div> 

<div class="field"> 
    <%= f.label :password_confirmation %><br /> 
    <%= f.password_field :password_confirmation, autocomplete: "off" %> 
</div> 

<div class="actions"> 
    <%= f.submit "Sign up" %> 
</div> 
<% end %> 

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

これは私のカスタムファイルです。ブートストラップを使用しています。 'sign_up.html.erb'

<div class="wrapper"> 
<div class="box"> 
<h2 class="title">Sign Up</h2> 
    <form role="form"> 
    <div class="form-group"> 
     <label for="first_name">First name:</label> 
     <input type="text" class="form-control" id="first_name"> 
    </div> 
    <div class="form-group"> 
     <label for="last_name">Last name:</label> 
     <input type="text" class="form-control" id="last_name"> 
    </div> 
    <div class="form-group"> 
     <label for="username">Username:</label> 
     <input type="text" class="form-control" id="username"> 
    </div> 
    <div class="form-group"> 
     <label for="email">Email address:</label> 
     <input type="email" class="form-control" id="email"> 
    </div> 
    <div class="form-group"> 
     <label for="pwd">Password:</label> 
     <input type="password" class="form-control" id="pwd"> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
    <%= link_to 'Cancel', sign_login_path, class: 'btn btn-default' %> 
    </form> 
</div> 
</div> 

私の質問は、これらの2つのファイルを1つのファイルに追加する方法です。私のカスタムファイルからレイアウトを保持し、devineファイルのバックエンドコードを使用してください。

+0

あなたが見たのは、Devise(https://github.com/plataformatec/devise)です。 –

+1

ええ、申し訳ありません: - /私はそれを編集;-) –

+0

気にしないでください。時々起こる –

答えて

4

<%= %>の間の部分は、ルビコードです。あなたのレイアウトを維持しながら、あなたのページのdeviseからルビコードを使用してください。 <%= form_for %>は、デバイス用に設定された<form>要素を出力し、<%= f.label %><label><%= f.something_field %><input><%= f.submit %><button>です。

あなたは次のようにクラスとidを渡すことができますあなたのためにそれをやってなくてもっと言って

<%= f.email_field :name, autofocus: true, class: "form-control", id: "email" %> 

ハード。