https://madamefigaro.jp/society-business/wp-content/themes/madamef…/assets/js/login/login_ui.js?ver=1790568907

1/**
2 * Figaro Login UI
3 * CCCMH OAuth連携ログイン機能
4 *
5 * @package madameFIGARO.jp
6 * @since 1.0.0
7 */
8
9var figaroLoginUI = (function($) {
10    'use strict';
11
12    var config = {
13        ajaxUrl: '/_auth/login_ui.php',
14        loginUrl: '/_auth/login.php',
15        mypageUrl: 'https://id.cccmh.jp/member',
16        saveUrlAction: 'save_url',
17        loginStatus: null // null=未確認, true=ログイン済み, false=未ログイン
18    };
19
20    /**
21     * 初期化
22     */
23    function init() {
24        // WordPressからの設定を読み込み（wp_localize_script）
25        if (typeof figaroLoginConfig !== 'undefined') {
26            config = $.extend({}, config, figaroLoginConfig);
27        }
28
29        // 現在ページを lastPageUri クッキーに保存（ログイン後の戻り先。/_auth/login.php が参照）
30        saveLastPage();
31
32        // ページ読み込み時にログイン状態を確認
33        checkLoginStatus();
34
35        // イベントリスナー設定
36        setupEventListeners();
37    }
38
39    /**
40     * 現在ページURLを lastPageUri クッキーに保存する
41     */
42    function saveLastPage() {
43        try {
44            document.cookie = 'lastPageUri=' + encodeURIComponent(window.location.href)
45                + '; path=/; max-age=1800; SameSite=Lax; Secure';
46        } catch (e) {}
47    }
48
49    /**
50     * ログイン状態の確認
51     */
52    function checkLoginStatus() {
53        $.ajax({
54            url: config.ajaxUrl,
55            type: 'GET',
56            dataType: 'json',
57            cache: false,
58            success: function(response) {
59                // STG限定の動作確認ログ（本番は response.debug が無いため出力されない）
60                if (response.debug) {
61                    console.log('[CCCMH login]', response.debug);
62                }
63                if (response.result === 'mypage') {
64                    // ログイン済み
65                    config.loginStatus = true;
66                    showMypageButton(response.url);
67                } else {
68                    // 未ログイン
69                    config.loginStatus = false;
70                    showLoginButton();
71                }
72            },
73            error: function() {
74                // エラー時は未ログイン扱い
75                config.loginStatus = false;
76                showLoginButton();
77            }
78        });
79    }
80
81    /**
82     * Loginボタンを表示
83     */
84    function showLoginButton() {
85        $('[data-login-state="logged-out"]').show();
86        $('[data-login-state="logged-in"]').hide();
87    }
88
89    /**
90     * Mypageボタンを表示
91     */
92    function showMypageButton(mypageUrl) {
93        var $el = $('[data-login-state="logged-in"]');
94
95        // プレースホルダーを置換（旧実装と同じ方式）
96        if (mypageUrl) {
97            $el.html($el.html().replace('__%CCCMH_MYPAGE_URL%__', mypageUrl));
98        }
99
100        $('[data-login-state="logged-out"]').hide();
101        $el.show();
102    }
103
104    /**
105     * ログインモーダルを表示
106     */
107    function showLoginModal() {
108        // 現在のURLを保存（ログイン後の戻り先）
109        saveCurrentUrl();
110
111        // モーダルを表示
112        $('#js-login-overlay').fadeIn(300);
113        $('#js-login-wrapper').fadeIn(300);
114        $('body').css('overflow', 'hidden');
115
116        // cccmh.jpのログインフォームを初期化
117        // ※ cccmh.jpクライアントJS（V2）が#idc3mhV2内にフォームを生成
118        initCccmhLoginForm();
119    }
120
121    /**
122     * ログインモーダルを非表示
123     */
124    function hideLoginModal() {
125        $('#js-login-overlay').fadeOut(300);
126        $('#js-login-wrapper').fadeOut(300);
127        $('body').css('overflow', '');
128    }
129
130    /**
131     * 現在のURLを保存（ログイン後の戻り先）
132     */
133    function saveCurrentUrl() {
134        var currentUrl = window.location.href;
135
136        $.ajax({
137            url: config.loginUrl,
138            type: 'POST',
139            data: {
140                action: config.saveUrlAction,
141                url: currentUrl
142            },
143            dataType: 'json'
144        });
145    }
146
147    /**
148     * CCCMH ログインフォームの初期化
149     */
150    function initCccmhLoginForm() {
151        // cccmh.jpのクライアントJS（V2: {base}/v2/client/js?client_id=...）が
152        // ページ読み込み時に #idc3mhV2 内へログインフォームを自動描画する。
153        // モーダルは常時DOMに存在する #idc3mhV2 を開閉するのみ。
154        // ※ 追加の初期化APIが必要な場合はCCCMHの仕様に応じてここへ記述する。
155    }
156
157    /**
158     * イベントリスナー設定
159     */
160    function setupEventListeners() {
161        // モーダル外クリックで閉じる
162        $(document).on('click', '#js-login-overlay', function() {
163            hideLoginModal();
164        });
165
166        // ESCキーで閉じる
167        $(document).on('keydown', function(e) {
168            if (e.key === 'Escape' || e.keyCode === 27) {
169                hideLoginModal();
170            }
171        });
172
173        // CCCMHの閉じるボタン（動的生成されるため.onでイベント委譲）

174        $(document).on('click', '#idc3mhV2 .modal-close', function() {
175            hideLoginModal();
176        });
177
178        // WordPress側の閉じるボタン
179        $(document).on('click', '.login-close', function() {
180            hideLoginModal();
181        });
182    }
183
184    /**
185     * ログイン状態を外部から確認
186     * @returns {boolean|null} true=ログイン済み, false=未ログイン, null=未確認
187     */
188    function isLoggedIn() {
189        return config.loginStatus;
190    }
191
192    // ページ読み込み完了時に初期化
193    $(document).ready(function() {
194        init();
195    });
196
197    // 公開API
198    return {
199        showLoginModal: showLoginModal,
200        hideLoginModal: hideLoginModal,
201        checkLoginStatus: checkLoginStatus,
202        isLoggedIn: isLoggedIn
203    };
204
205})(jQuery);
206
207// グローバル変数としてもエクスポート（後方互換性のため）
208var gLoginUi = figaroLoginUI;