{#
This file is part of EC-CUBE
Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
http://www.ec-cube.co.jp/
For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends 'default_frame.twig' %}
{% set body_class = 'registration_page' %}
{% form_theme form 'Form/form_div_layout.twig' %}
{% block javascript %}
<script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
<script>
//----------------
//カスタマイズ メルマガの自動有効化とパスワード視覚化
//----------------
// メルマガのラジオボタンをデフォルトで有効にする
document.addEventListener('DOMContentLoaded', function () { // "受け取る"ラジオボタンを選択状態にする
let mailMagazinForm = document.getElementById('entry_mailmaga_flg_0');
if (mailMagazinForm) {
mailMagazinForm.checked = true;
}
});
// パスワードの視覚化
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.toggle-password').forEach(function (toggleButton) {
toggleButton.addEventListener('click', function () {
$(this).toggleClass("fa-eye fa-eye-slash");
var passwordField = this.previousElementSibling;
if (passwordField.type === "password") {
passwordField.type = "text";
} else {
passwordField.type = "password";
}
});
});
});
// ロード時と、フォーム入力時にチェック
window.addEventListener('load', function () {
//インプットボックス
let passwordInput = document.getElementById('entry_plain_password_first');
//ロード完了時
checkFormPassword(passwordInput);
//フォーム編集時
passwordInput.addEventListener('input', function (e) {
checkFormPassword(this);
});
});
// パスワードの入力チェック関数
function checkFormPassword(e){
let value = e.value;
let uppercasePattern = /[A-Z]/;
let lowercasePattern = /[a-z]/;
let numberPattern = /[0-9]/;
let minLength = {{ eccube_config.eccube_password_min_len }};
let maxLength = {{ eccube_config.eccube_password_max_len }};
document.getElementById('criteria-uppercase').classList.toggle('checked', uppercasePattern.test(value));
document.getElementById('criteria-lowercase').classList.toggle('checked', lowercasePattern.test(value));
document.getElementById('criteria-number').classList.toggle('checked', numberPattern.test(value));
document.getElementById('criteria-length').classList.toggle('checked', value.length >= minLength && value.length <= maxLength);
}
</script>
{% endblock javascript %}
{% block main %}
{# 現在の言語情報の取得 #}
{% set current_locale = 'ja' %} {# 初期値は日本語 #}
{% for locale in supported_locales() %}
{% if is_current_locale(locale) %}
{% set current_locale = locale %} {# 現在の言語を保存 #}
{% endif %}
{% endfor %}
<style>
.bg-load-overlay{
display: none !important;
}
</style>
<div class="ec-registerRole">
<div class="ec-pageHeader">
<h1>{{ 'front.entry.title'|trans }}</h1>
</div>
<div class="ec-off1Grid">
<div class="ec-off1Grid__cell">
<form id="entryForm" method="post" action="{{ url('entry',{'ref': ref}) }}" novalidate class="h-adr" method="post">
<span class="p-country-name" style="display:none;">Japan</span>
{{ form_widget(form._token) }}
<div
class="ec-borderedDefs">
<!--
*カスタマイズ代理店コードの追加
*代理店コードを入力して登録 or 代理店コードを読み取って登録の場合のみ招待コードのフォームを表示する
-->
{% if ref is null %}
<dl>
<dt>
{{ form_label(form.agencyCode, 'front.entry.form.coupon_invitation'|trans , { 'label_attr': { 'class': 'ec-label' }}) }}
<p class="entry_birth_note">{{ 'front.entry.password_note'|trans }}</p>
</dt>
<dd>
<div class="ec-telInput{{ has_errors(form.agencyCode) ? ' error' }}">
{{ form_widget(form.agencyCode) }}
{{ form_errors(form.agencyCode) }}
</div>
</dd>
</dl>
{% elseif ref is empty %}
{# refは存在するが値が空の場合の処理 #}
<input type="hidden" name="ref" value="{{ ref }}">
<dl>
<dt>
{{ form_label(form.agencyCode, 'front.entry.form.coupon_invitation'|trans, { 'label_attr': { 'class': 'ec-label' }}) }}
<p class="entry_birth_note">{{ 'front.entry.password_note'|trans }}</p>
</dt>
<dd>
<div class="ec-telInput{{ has_errors(form.agencyCode) ? ' error' }}">
{#{{ form_widget(form.agencyCode, {'attr': {'value': ''}}) }}#}
{{ form_widget(form.agencyCode) }}
{{ form_errors(form.agencyCode) }}
</div>
</dd>
</dl>
{% else %}
{#refが存在し、かつ値もある場合の処理 #}
<input type="hidden" name="ref" value="{{ ref }}">
<dl>
<dt>
{{ form_label(form.agencyCode, 'front.entry.form.coupon_invitation'|trans, { 'label_attr': { 'class': 'ec-label' }}) }}
<p class="entry_birth_note">{{ 'front.entry.password_note'|trans }}</p>
</dt>
<dd>
<div class="ec-telInput{{ has_errors(form.agencyCode) ? ' error' }}">
{{ form_widget(form.agencyCode, {'attr': {'value': ref, 'readonly': 'readonly'}}) }}
{{ form_errors(form.agencyCode) }}
</div>
</dd>
</dl>
{% endif %}
<!--end / カスタマイズ代理店コード-->
<dl>
<dt>
{{ form_label(form.name, 'front.entry.form.name'|trans, { 'label_attr': { 'class': 'ec-label' }}) }}
</dt>
<dd>
<div class="ec-halfInput{{ has_errors(form.name.name01, form.name.name02) ? ' error'}}">
{{ form_widget(form.name.name01, { 'attr': { 'placeholder': 'front.entry.form.sei'|trans }}) }}
{{ form_widget(form.name.name02, { 'attr': { 'placeholder': 'front.entry.form.mei'|trans }}) }}
{{ form_errors(form.name.name01) }}
{{ form_errors(form.name.name02) }}
</div>
</dd>
</dl>
{% if current_locale == 'ja' %}
<dl>
<dt>
{{ form_label(form.kana, 'front.entry.form.name_kana'|trans , { 'label_attr': { 'class': 'ec-label' }}) }}
</dt>
<dd>
<div class="ec-halfInput{{ has_errors(form.kana.kana01, form.kana.kana02) ? ' error'}}">
{{ form_widget(form.kana.kana01, { 'attr': { 'placeholder': 'front.entry.form.sei_kana'|trans }}) }}
{{ form_widget(form.kana.kana02, { 'attr': { 'placeholder': 'front.entry.form.mei_kana'|trans }}) }}
{{ form_errors(form.kana.kana01) }}
{{ form_errors(form.kana.kana02) }}
</div>
</dd>
</dl>
{% else %}
{# 英語の場合は隠しフィールドとして出力 #}
<div style="display: none;">
{{ form_widget(form.kana) }}
</div>
{% endif %}
<dl>
<dt>
{{ form_label(form.company_name, 'front.entry.form.company_department_name'|trans , { 'label_attr': { 'class': 'ec-label' }}) }}
</dt>
<dd>
<div class="ec-halfInput{{ has_errors(form.company_name) ? ' error' }}">
{{ form_widget(form.company_name) }}
{{ form_errors(form.company_name) }}
</div>
</dd>
</dl>
<dl>
<dt>
{{ form_label(form.address, 'front.entry.form.address'|trans , { 'label_attr': { 'class': 'ec-label' }}) }}
</dt>
<dd>
<div class="ec-zipInput{{ has_errors(form.postal_code) ? ' error' }}">
<span>{{ 'front.entry.form.post_icon'|trans }}</span>
{{ form_widget(form.postal_code) }}
<div class="ec-zipInputHelp">
<div class="ec-zipInputHelp__icon">
<div class="ec-icon"><img src="{{ asset('assets/icon/question-white.svg') }}" alt="">
</div>
</div>
<a href="https://www.post.japanpost.jp/zipcode/" target="_blank">
<span>{{ 'front.entry.form.postcode_search'|trans }}</span>
</a>
</div>
{{ form_errors(form.postal_code) }}
</div>
<div class="ec-select{{ has_errors(form.address.pref) ? ' error' }}">
{{ form_widget(form.address.pref) }}
{{ form_errors(form.address.pref) }}
</div>
<div class="ec-input{{ has_errors(form.address.addr01) ? ' error' }}">
{{ form_widget(form.address.addr01, { 'attr': { 'placeholder': 'front.entry.form.city_town_name'|trans }}) }}
{{ form_errors(form.address.addr01) }}
</div>
<div class="ec-input{{ has_errors(form.address.addr02) ? ' error' }}">
{{ form_widget(form.address.addr02, { 'attr': { 'placeholder': 'front.entry.form.street_building_name'|trans }}) }}
{{ form_errors(form.address.addr02) }}
</div>
</dd>
</dl>
<dl>
<dt>
{{ form_label(form.phone_number, 'front.entry.form.phone_number'|trans , { 'label_attr': { 'class': 'ec-label' }}) }}
</dt>
<dd>
<div class="ec-telInput{{ has_errors(form.phone_number) ? ' error' }}">
{{ form_widget(form.phone_number, { 'attr': { 'placeholder': 'front.entry.form.example_phone_number'|trans }}) }}
{{ form_errors(form.phone_number) }}
</div>
</dd>
</dl>
<dl>
<dt>
{{ form_label(form.email, 'front.entry.form.mail'|trans, { 'label_attr': { 'class': 'ec-label' }}) }}
</dt>
<dd>
<div class="ec-input{{ has_errors(form.email.first) ? ' error' }}">
{{ form_widget(form.email.first, { 'attr': { 'placeholder': 'front.entry.form.mail_sample'|trans }}) }}
{{ form_errors(form.email.first) }}
</div>
<div class="ec-input{{ has_errors(form.email.second) ? ' error' }}">
{{ form_widget(form.email.second, { 'attr': { 'placeholder': 'front.entry.form.mail_confirm'|trans }}) }}
{{ form_errors(form.email.second) }}
</div>
</dd>
</dl>
<dl>
<dt>
{{ form_label(form.plain_password, 'front.entry.form.pass'|trans, { 'label_attr': {'class': 'ec-label' }}) }}
<p class="password-criteria_note">{{ 'front.entry.form.pass_validation'|trans }}</p>
</dt>
<dd>
<div class="ec-input{{ has_errors(form.plain_password.first) ? ' error' }}">
{{ form_widget(form.plain_password.first, {
'attr': { 'placeholder': 'front.entry.form.password_length'|trans({ '%min%': eccube_config.eccube_password_min_len, '%max%': eccube_config.eccube_password_max_len }), 'class': 'password-field' },
'type': 'password'
}) }}
<span type="button" class="fa fa-fw fa-eye field-icon toggle-password"></span>
{{ form_errors(form.plain_password.first) }}
</div>
<div class="password-criteria_area">
<ul id="password-criteria">
<li id="criteria-uppercase">{{'front.entry.form.password_uppercase_letter'|trans}}</li>
<li id="criteria-lowercase">{{ 'front.entry.form.password_lowercase_letter'|trans }}</li>
<li id="criteria-number">{{'front.entry.form.password_number'|trans}}</li>
<li id="criteria-length">{{'front.entry.form.character_count'|trans}} ({{ eccube_config.eccube_password_min_len }} to {{ eccube_config.eccube_password_max_len }} {{'front.entry.form.letter'|trans}})</li>
</ul>
</div>
<div class="ec-input{{ has_errors(form.plain_password.second) ? ' error' }}">
{{ form_widget(form.plain_password.second, {
'attr': { 'placeholder': 'front.entry.form.password_confirm'|trans, 'class': 'password-field' },
'type': 'password'
}) }}
<span type="button" class="fa fa-fw fa-eye field-icon toggle-password"></span>
{{ form_errors(form.plain_password.second) }}
</div>
</dd>
</dl>
<dl>
<dt>
{{ form_label(form.birth, 'front.entry.form.date_of_birth'|trans, { 'label_attr': {'class': 'ec-label' }}) }}
<p class="entry_birth_note">
{{'front.entry.form.teen_service_confirm'|trans}}<br>
{{'front.entry.form.teen_service_confirm_after_registration'|trans}}
</p>
</dt>
<dd>
<div class="ec-birth{{ has_errors(form.birth) ? ' error' }}">
{{ form_widget(form.birth.year) }}<span>/</span>
{{ form_widget(form.birth.month) }}<span>/</span>
{{ form_widget(form.birth.day) }}
{{ form_errors(form.birth) }}
</div>
</dd>
</dl>
{# エンティティ拡張の自動出力 #}
{% for f in form|filter(f => f.vars.eccube_form_options.auto_render) %}
{% if f.vars.eccube_form_options.form_theme %}
{% form_theme f f.vars.eccube_form_options.form_theme %}
{{ form_row(f) }}
{% else %}
<dl>
<dt>
{% set label_class = f.vars.label_attr.class is defined ? f.vars.label_attr.class : '' %}
{{ form_label(f, f.vars.label, { 'label_attr': {'class': label_class ~ ' ec-label' }}) }}
</dt>
<dd>
<div class="{{ f.vars.eccube_form_options.style_class }}{{ has_errors(f) ? ' error' }}">
{{ form_widget(f) }}
{{ form_errors(f) }}
</div>
</dd>
</dl>
{% endif %}
{% endfor %}
</div>
<div class="ec-registerRole__actions">
<div class="ec-checkbox{{ has_errors(form.user_policy_check) ? ' error' }}">
<label>
{{ form_widget(form.user_policy_check) }}
{{ 'form.entry.message.agree_terms'|trans({ '%url%': url('help_agreement') })|raw }}
</label>
{{ form_errors(form.user_policy_check) }}
</div>
<div class="ec-off4Grid">
<div class="ec-off4Grid__cell">
<button id="confirm_birthday" class="ec-blockBtn--action" type="submit" name="mode" value="confirm">{{ 'front.entry.form.agree'|trans }}</button>
<a class="ec-blockBtn--cancel" href="{{ url('homepage') }}">{{ 'front.entry.form.disagree'|trans }}</a>
</div>
</div>
</div>
<div class="popup_start_plan postage_popup_hide" id="popupElement">
<div class="popup_postage-free_inner">
<div class="popup_content">
<h5><span class="pop_product_name">{{ 'front.entry.service_usage_confirmation'|trans }}</h4>
<p class="pop_product_text">
{{'front.entry.before_using_this_service_1'|trans}}<br>
{{'front.entry.before_using_this_service_2'|trans}}
</p>
<div class="popup_content_btn">
<p onclick="postagePopupClose()" class="ec-blockBtn--cancel">{{'front.entry.return_to_input_screen'|trans}}</p>
<button class="ec-blockBtn--action" type="submit" name="mode" value="confirm">{{ 'front.entry.form.agree'|trans }}</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
let popupEl = document.getElementById('popupElement');
//ポップアップ非表示
function postagePopupClose(){
popupEl.classList.add('postage_popup_hide');
// 入力された誕生日の初期化
document.getElementById('entry_birth_year').value = "";
document.getElementById('entry_birth_month').value = "";
document.getElementById('entry_birth_day').value = "";
}
//ポップアップ表示
function postagePopupOpen(){
popupEl.classList.remove('postage_popup_hide');
}
document.getElementById('confirm_birthday').addEventListener('click', function(event) {
// 現在の日付
const today = new Date();
const currentYear = today.getFullYear();
const currentMonth = today.getMonth() + 1;
const currentDay = today.getDate();
// 入力された誕生日
const birthYear = parseInt(document.getElementById('entry_birth_year').value, 10);
const birthMonth = parseInt(document.getElementById('entry_birth_month').value, 10);
const birthDay = parseInt(document.getElementById('entry_birth_day').value, 10);
// 年齢計算
let age = currentYear - birthYear;
if (currentMonth < birthMonth || (currentMonth === birthMonth && currentDay < birthDay)) {
age--;
}
// 18歳未満の場合、ポップアップ表示
if (age < 18) {
event.preventDefault(); // フォームの送信を一時停止
postagePopupOpen();
} else {
// 18歳以上の場合、フォームを送信
document.getElementById('entryForm').submit();
//デバック用
// alert("test");
}
});
</script>
{% if current_locale == 'en' %}
<script>
const nameFields = {
name01: document.querySelector('input[name="entry[name][name01]"]'),
name02: document.querySelector('input[name="entry[name][name02]"]')
};
const kanaFields = {
kana01: document.querySelector('input[name="entry[kana][kana01]"]'),
kana02: document.querySelector('input[name="entry[kana][kana02]"]')
};
// 名前フィールドの変更を監視してカナフィールドに反映
if (nameFields.name01 && kanaFields.kana01) {
nameFields.name01.addEventListener('input', function() {
kanaFields.kana01.value = this.value;
});
// 初期値も設定
if (nameFields.name01.value) {
kanaFields.kana01.value = nameFields.name01.value;
}
}
if (nameFields.name02 && kanaFields.kana02) {
nameFields.name02.addEventListener('input', function() {
kanaFields.kana02.value = this.value;
});
// 初期値も設定
if (nameFields.name02.value) {
kanaFields.kana02.value = nameFields.name02.value;
}
}
</script>
{% endif %}
{% endblock %}