テーマ仕様書
shop
会員登録・ログイン
パスワードリセット
パスワードリセット画面

パスワードリセット画面

会員のパスワードをリセットする画面です。
パスワードリセット案内画面にメールアドレスを入力・送信後、「ワンタイムトークン認証」に成功すると当画面に遷移します。

動作の詳細は ecforce FAQ: 顧客がパスワードを忘れた場合の対処方法を教えてください。 (opens in a new tab)をご確認ください。

ショップのパス

ドメイン/shop/customers/password/edit?reset_password_token=[トークン]

テーマ管理のファイルパス

ec_force/shop/customers/passwords/edit.html.liquid
ec_force/shop/customers/passwords/edit.html+smartphone.liquid

JS タグ

{{ 'shop/customers/passwords' | javascript_include_tag }}

必要なコンポーネント

※任意とあるもの以外はシステム上必要なコンポーネントとなりますので、必ず使用するようにしてください。

<!-- パスワードリセットコンテナ -->
<div id="customers-password-edit-view">
 
  <!-- フラッシュメッセージ -->
  {{ 'error' | flash: 'alert alert-danger', 'text' }}
  
  <!-- パスワードリセットフォーム -->
  <form id="new_customer" action="/shop/customers/password" accept-charset="UTF-8" method="post">
 
    <input type="hidden" name="_method" value="put">
    
    <!-- パスワードをリセットするためのトークン -->
    <input type="hidden" name="customer[reset_password_token]" id="customer_reset_password_token" value='{{ reset_password_token }}'>
 
    <!-- 新しいパスワード -->
    <input type="password" class="validate[required,custom[validatePasswordForCustomerByAdminSetting]]" id="password" name="customer[password]">
    
    <!-- 新しいパスワード (確認) -->
    <input type="password" class="validate[required,equals[password]]" name="customer[password_confirmation]" id="customer_password_confirmation">
    
    <!-- 送信ボタン -->
    <input type="submit" name="commit" value="パスワードを再設定する">
  </form>
 
</div>

画面イメージ

※こちらは、上記で紹介しているコンポーネントのコードにデフォルトデザインをCSSであてたイメージになります。コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。