giftcon_dev/resources/views/web/auth/find_password.blade.php

@extends('web.layouts.auth')

@section('title', '비밀번호 찾기 | PIN FOR YOU')
@section('meta_description', 'PIN FOR YOU 비밀번호 찾기 페이지입니다.')
@section('canonical', url('/auth/find-password'))

@section('h1', '비밀번호 찾기')
@section('desc', '가입된 이메일과 인증을 통해 새 비밀번호를 설정합니다.')
@section('card_aria', '비밀번호 찾기 폼')
@section('show_cs_links', true)

@section('auth_content')
    <div class="auth-steps" aria-label="진행 단계">
        <div class="auth-step is-active" data-step-ind="1">1. 계정 확인</div>
        <div class="auth-step" data-step-ind="2">2. 인증</div>
        <div class="auth-step" data-step-ind="3">3. 재설정</div>
    </div>

    <form class="auth-form" id="findPwForm" onsubmit="return false;">
        {{-- STEP 1 --}}
        <div class="auth-panel is-active" data-step="1">
            <div class="auth-field">
                <label class="auth-label" for="fp_email">아이디(이메일)</label>
                <input class="auth-input"
                       id="fp_email"
                       type="email"
                       placeholder="example@domain.com"
                       autocomplete="username"
                       value="{{ $email ?? '' }}">
                <div class="auth-help">가입된 이메일을 입력하면 인증번호를 발송합니다.</div>
            </div>

            <div class="auth-actions">
                <button class="auth-btn auth-btn--primary" type="button" data-next>인증번호 받기</button>
                <a class="auth-btn auth-btn--ghost" href="{{ route('web.auth.login') }}">로그인으로 돌아가기</a>
            </div>
        </div>

        {{-- STEP 2 --}}
        <div class="auth-panel" data-step="2">
            <div class="auth-field">
                <label class="auth-label" for="fp_code">인증번호</label>
                <input class="auth-input"
                       id="fp_code"
                       type="text"
                       placeholder="6자리 인증번호"
                       inputmode="numeric">
                <div class="auth-help">인증번호 유효시간 내에 입력해 주세요.</div>
            </div>

            <div class="auth-actions">
                <button class="auth-btn auth-btn--primary" type="button" data-next>확인</button>
                <button class="auth-btn auth-btn--ghost" type="button" data-prev>이전</button>
            </div>
        </div>

        {{-- STEP 3 --}}
        <div class="auth-panel" data-step="3">
            <div class="auth-field">
                <label class="auth-label" for="fp_new">새 비밀번호 <small>영문/숫자/특수문자 권장</small></label>
                <input class="auth-input"
                       id="fp_new"
                       type="password"
                       placeholder="새 비밀번호"
                       autocomplete="new-password">
            </div>

            <div class="auth-field">
                <label class="auth-label" for="fp_new2">새 비밀번호 확인</label>
                <input class="auth-input"
                       id="fp_new2"
                       type="password"
                       placeholder="새 비밀번호 재입력"
                       autocomplete="new-password">
            </div>

            <div class="auth-actions">
                <button class="auth-btn auth-btn--primary" type="button" data-reset>비밀번호 변경</button>
                <button class="auth-btn auth-btn--ghost" type="button" data-prev>이전</button>
            </div>

            <div class="auth-help" style="margin-top:10px;">
                인증이 완료된 상태에서만 비밀번호 재설정이 가능합니다.
            </div>
        </div>
    </form>
@endsection

@section('auth_bottom')
@endsection

@push('scripts')
    <script>
        (function(){
            const root = document.getElementById('findPwForm');
            if(!root) return;

            const panels = root.querySelectorAll('.auth-panel');
            const stepInd = document.querySelectorAll('.auth-step');

            let step = Number(@json($initialStep ?? 1));

            const $email = document.getElementById('fp_email');
            const $code  = document.getElementById('fp_code');
            const $newPw = document.getElementById('fp_new');
            const $newPw2= document.getElementById('fp_new2');

            // 메시지 영역: 항상 활성 패널의 actions 위에 위치
            const mkMsg = () => {
                let el = root.querySelector('.auth-msg');
                if(!el){
                    el = document.createElement('div');
                    el.className = 'auth-msg';
                    el.style.marginTop = '10px';
                    el.style.fontSize = '13px';
                    el.style.lineHeight = '1.4';
                }
                const activeActions = root.querySelector('.auth-panel.is-active .auth-actions');
                if(activeActions && el.parentNode !== activeActions){
                    activeActions.prepend(el);
                }
                return el;
            };

            const setMsg = (text, type='info') => {
                const el = mkMsg();
                el.textContent = text || '';
                el.style.color =
                    (type === 'error') ? '#ff6b6b' :
                        (type === 'success') ? '#2ecc71' :
                            '#c7c7c7';
            };

            const render = () => {
                // 전환 전 포커스 제거
                const activeEl = document.activeElement;
                if (activeEl && root.contains(activeEl)) activeEl.blur();

                panels.forEach(p => {
                    const on = Number(p.dataset.step) === step;
                    p.classList.toggle('is-active', on);
                    p.style.display = on ? 'block' : 'none';

                    if (!on) {
                        p.setAttribute('aria-hidden', 'true');
                        p.setAttribute('inert', '');
                    } else {
                        p.setAttribute('aria-hidden', 'false');
                        p.removeAttribute('inert');
                    }
                });

                stepInd.forEach(s => {
                    const on = Number(s.dataset.stepInd) === step;
                    s.classList.toggle('is-active', on);
                });

                mkMsg();

                // 전환 후 포커스 이동
                const target = root.querySelector(`.auth-panel[data-step="${step}"] input, .auth-panel[data-step="${step}"] button, .auth-panel[data-step="${step}"] a`);
                target?.focus?.();
            };

            // -------- helpers ----------
            const csrf = () => document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

            const postJson = async (url, data) => {
                const res = await fetch(url, {
                    method: 'POST',
                    credentials: 'same-origin',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrf(),
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify(data || {})
                });

                const ct = res.headers.get('content-type') || '';
                const raw = await res.text();

                let json = null;
                if (ct.includes('application/json')) {
                    try { json = JSON.parse(raw); } catch(e){}
                }

                if (!res.ok) {
                    const msg = json?.message || `요청 실패 (${res.status})`;
                    const err = new Error(msg);
                    err.status = res.status;
                    err.payload = json;
                    err.raw = raw;
                    throw err;
                }

                return json ?? { ok: true };
            };

            // -------- timer ----------
            let timerId = null;
            let remain = 0;

            const ensureTimerUI = () => {
                let wrap = root.querySelector('.fp-timer');
                if(!wrap){
                    wrap = document.createElement('div');
                    wrap.className = 'fp-timer';
                    wrap.style.marginTop = '8px';
                    wrap.style.display = 'flex';
                    wrap.style.gap = '10px';
                    wrap.style.alignItems = 'center';

                    const t = document.createElement('span');
                    t.className = 'fp-timer__text';
                    t.style.fontSize = '13px';
                    t.style.color = '#c7c7c7';

                    const btn = document.createElement('button');
                    btn.type = 'button';
                    btn.className = 'auth-btn auth-btn--ghost fp-resend';
                    btn.textContent = '재전송';
                    btn.style.padding = '10px 12px';

                    wrap.appendChild(t);
                    wrap.appendChild(btn);

                    const step2Field = root.querySelector('[data-step="2"] .auth-field');
                    step2Field?.appendChild(wrap);
                }
                return wrap;
            };

            const tick = () => {
                const wrap = ensureTimerUI();
                const t = wrap.querySelector('.fp-timer__text');
                const btn = wrap.querySelector('.fp-resend');

                const mm = String(Math.floor(remain/60)).padStart(2,'0');
                const ss = String(remain%60).padStart(2,'0');

                t.textContent = remain > 0 ? `유효시간 ${mm}:${ss}` : '인증번호가 만료되었습니다. 재전송 해주세요.';
                btn.disabled = remain > 0;

                if(remain <= 0){
                    clearInterval(timerId);
                    timerId = null;
                    return;
                }
                remain -= 1;
            };

            const startTimer = (sec) => {
                remain = Number(sec || 180);
                if(timerId) clearInterval(timerId);
                timerId = setInterval(tick, 1000);
                tick();
            };

            // -------- actions ----------
            const sendCode = async () => {
                const email = ($email?.value || '').trim();
                if(!email){
                    setMsg('이메일을 입력해 주세요.', 'error');
                    return;
                }

                setMsg('확인 중입니다...', 'info');

                try {
                    const json = await postJson(@json(route('web.auth.find_password.send_code')), { email });

                    setMsg(json.message || '인증번호를 발송했습니다.', 'success');

                    step = 2;
                    render();

                    startTimer(json.expires_in || 180);

                    if(json.dev_code){
                        setMsg(`(개발용) 인증번호: ${json.dev_code}`, 'info');
                    }
                } catch (err) {
                    const p = err.payload || {};

                    if (err.status === 404 && p.code === 'EMAIL_NOT_FOUND') {
                        step = 1;
                        render();
                        setMsg(p.message || '해당 이메일로 가입된 계정을 찾을 수 없습니다.', 'error');
                        return;
                    }

                    setMsg(err.message || '오류가 발생했습니다.', 'error');
                }
            };

            const verifyCode = async () => {
                const code = ($code?.value || '').trim();
                if(!/^\d{6}$/.test(code)){
                    setMsg('인증번호 6자리를 입력해 주세요.', 'error');
                    return;
                }

                setMsg('인증 확인 중입니다...', 'info');

                try {
                    const json = await postJson(@json(route('web.auth.find_password.verify')), { code });

                    step = 3;
                    render();

                    setMsg(json.message || '인증이 완료되었습니다. 새 비밀번호를 설정해 주세요.', 'success');
                } catch (err) {
                    setMsg(err.message || '오류가 발생했습니다.', 'error');
                }
            };

            const resetPassword = async () => {
                const pw1 = ($newPw?.value || '');
                const pw2 = ($newPw2?.value || '');

                if(!pw1 || pw1.length < 8){
                    setMsg('비밀번호는 8자 이상으로 입력해 주세요.', 'error');
                    return;
                }
                if(pw1 !== pw2){
                    setMsg('비밀번호 확인이 일치하지 않습니다.', 'error');
                    return;
                }

                setMsg('변경 처리 중입니다...', 'info');

                try {
                    const json = await postJson(@json(route('web.auth.find_password.reset')), {
                        new_password: pw1,
                        new_password_confirmation: pw2
                    });

                    setMsg(json.message || '비밀번호가 변경되었습니다. 로그인해 주세요.', 'success');

                    if (json.redirect_url) {
                        setTimeout(() => { window.location.href = json.redirect_url; }, 800);
                    }
                } catch (err) {
                    setMsg(err.message || '오류가 발생했습니다.', 'error');
                }
            };

            // -------- events ----------
            root.addEventListener('click', async (e) => {
                const resend = e.target.closest('.fp-resend');
                const next   = e.target.closest('[data-next]');
                const prev   = e.target.closest('[data-prev]');
                const reset  = e.target.closest('[data-reset]');

                try{
                    if(resend){
                        await sendCode();
                        return;
                    }

                    if(next){
                        if(step === 1) await sendCode();
                        else if(step === 2) await verifyCode();
                        return;
                    }

                    if(reset){
                        await resetPassword();
                        return;
                    }

                    if(prev){
                        step = Math.max(1, step - 1);
                        render();
                        return;
                    }
                }catch(err){
                    const stepFromServer = err?.payload?.step;
                    if(stepFromServer){
                        step = Number(stepFromServer);
                        render();
                    }
                    setMsg(err.message || '오류가 발생했습니다.', 'error');
                }
            });

            // Enter 키 UX
            $email?.addEventListener('keydown', (e) => {
                if(e.key === 'Enter'){
                    e.preventDefault();
                    root.querySelector('[data-step="1"] [data-next]')?.click();
                }
            });

            $code?.addEventListener('keydown', (e) => {
                if(e.key === 'Enter'){
                    e.preventDefault();
                    root.querySelector('[data-step="2"] [data-next]')?.click();
                }
            });

            $newPw2?.addEventListener('keydown', (e) => {
                if(e.key === 'Enter'){
                    e.preventDefault();
                    root.querySelector('[data-step="3"] [data-reset]')?.click();
                }
            });

            render();
        })();
    </script>
@endpush