パスワード変更画面

会員のパスワードを変更する画面です。
この画面はパスワードリセット案内画面やパスワードリセット画面とは違い、会員がログインした状態でパスワードを変更する画面です。

パスワード変更時の「現在のパスワード入力欄」について

「設定 > 購入/フォーム > ショップフォーム設定 (opens in a new tab)」の「現在のパスワードの設定」で入力を要求するか、しないかを設定します。セキュリティの観点で「入力する」の設定を推奨します。

ショップのパス

ドメイン/shop/customer/password/edit

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

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

JS タグ

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

必要なコンポーネント

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

<!-- パスワード変更コンテナ -->
<div id="customers-password-edit-view">
  {{ 'notice' | flash: 'alert alert-success', 'text' }}
  {{ 'error' | flash: 'alert alert-danger', 'text' }}
 
  <!-- パスワード変更フォーム -->
  <form action="/shop/customer/password" id="customer_form" method="post">
    <input name="_method" type="hidden" value="put">
    <input name="authenticity_token" type="hidden" value="form_authenticity_token">
 
    <!-- 現在のパスワード -->
    {% if shop_form_settings['current_password'] %}
      <input class="validate[required,minSize[8]]" id="current_password" maxlength="99" name="customer[current_password]" type="password">
    {% endif %}
 
    <!-- 新しいパスワード -->
    <input class="validate[required,custom[validatePasswordForCustomerByAdminSetting]]" id="password" maxlength="99" name="customer[password]" type="password">
 
    <!-- 新しいパスワード (確認) -->
    <input class="validate[required,equals[password]]" maxlength="99" name="customer[password_confirmation]" type="password">
 
    <!-- 送信ボタン -->
    <input type="submit" name="commit" value="保存" data-disable-with="保存中...">
  </form>
 
</div>

画面イメージ

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