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の未入力エラーメッセージが表示されてしまいます。

そのため、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 テンプレートも同様に仕込む必要があります。

会員機能のテンプレートをビューで管理する方法は以下で紹介しています。

PowerCMS X の会員機能でテンプレートをビューで管理する