![見出し画像](https://assets.st-note.com/production/uploads/images/131812781/rectangle_large_type_2_2e35a192aaa32034df263d263c5b6554.png?width=1200)
PowerCMS X の会員機能でメールアドレスをログインIDとして利用する
残念ながら、PowerCMS X の会員機能でメールアドレスをログインIDとして利用することはできません。そのため裏技を紹介します。
PowerCMS X の会員機能は以下のカラムがあります。Member モデルのカラムを見ると分かると思います。
Name
Email
Name がログインID、Email がユーザーのメールアドレスになります。どちらも必須項目です。
Name フィールドを JavaScript で非表示にして、Email の入力値をリアルタイムに JavaScript で Name フィールドへコピーさせればよいです。
以下のコードを member_sign_up.tmpl の最下部に貼り込んでください。
最下部は <mt:include file="include/footer.tmpl"> があるので、その直前に貼り込んでください。
<script>
document.addEventListener("DOMContentLoaded", function() {
// ドキュメントが読み込まれたときに実行されるコード
// idが"name"のinput要素の親要素であるdivを非表示にする
var nameInput = document.getElementById("name");
if (nameInput) {
var parentDiv = nameInput.closest(".row.form-group");
if (parentDiv) {
parentDiv.style.display = "none";
}
}
// email フィールドを name フィールドに値をリアルタイムにコピーするコード
document.getElementById('email').addEventListener('input', function() {
var emailValue = this.value;
document.getElementById('name').value = emailValue;
});
});
</script>
このコードは1点問題があります。
会員登録フォームでメールアドレスが未入力で submit すると、Nameの未入力エラーメッセージが表示されてしまいます。
![](https://assets.st-note.com/img/1708685647889-n38IHY0H5n.png?width=1200)
そのため、JavaScriptで非表示にする必要があります。以下が最終版です。
<script>
document.addEventListener("DOMContentLoaded", function() {
// ドキュメントが読み込まれたときに実行されるコード
// idが"name"のinput要素の親要素であるdivを非表示にする
var nameInput = document.getElementById("name");
if (nameInput) {
var parentDiv = nameInput.closest(".row.form-group");
if (parentDiv) {
parentDiv.style.display = "none";
}
}
// email フィールドを name フィールドに値をリアルタイムにコピーするコード
document.getElementById('email').addEventListener('input', function() {
var emailValue = this.value;
document.getElementById('name').value = emailValue;
});
// 指定されたテキストを持つ<li>要素を非表示にする
var keyword = "「<mt:trans phrase="Name">」は必須です。";
var prefix = "同じ名前の";
var liElements = document.querySelectorAll('li');
liElements.forEach(function(liElement) {
var trimmedText = liElement.textContent.trim();
// 条件の変更
if (trimmedText === keyword || trimmedText.startsWith(prefix)) {
liElement.classList.add('hidden');
}
});
});
</script>
注意点としては フレーズ「Display Name」を「表示名」から「名前」に変更しないことです。「Name」のフレーズと名称がかぶってしまいます。
あとコードの中に「同じ名前のメンバー「hoge@hoge.jp」が既に存在します。」というエラーメッセージも消し込むようにしています。
このコードは member_edit_profile テンプレートも同様に仕込む必要があります。
会員機能のテンプレートをビューで管理する方法は以下で紹介しています。
この記事が気に入ったらサポートをしてみませんか?