391 lines
15 KiB
PHP
391 lines
15 KiB
PHP
@extends('web.layouts.auth')
|
|
|
|
@section('title', '아이디 찾기 | PIN FOR YOU')
|
|
@section('meta_description', 'PIN FOR YOU 아이디(이메일) 찾기 페이지입니다.')
|
|
@section('canonical', url('/auth/find-id'))
|
|
|
|
@section('h1', '아이디 찾기')
|
|
@section('desc', '가입 시 등록한 휴대폰 번호로 아이디를 확인할 수 있어요.')
|
|
@section('card_aria', '아이디 찾기 폼')
|
|
@section('show_cs_links', true)
|
|
|
|
@section('auth_content')
|
|
<form class="auth-form" id="findIdForm" onsubmit="return false;">
|
|
{{-- STEP 1 --}}
|
|
<div class="auth-panel is-active" data-step="1">
|
|
<div class="auth-field">
|
|
<label class="auth-label" for="fi_phone">휴대폰 번호</label>
|
|
<input class="auth-input" id="fi_phone" type="tel" placeholder="010-0000-0000" autocomplete="tel" value="{{ $phone ? preg_replace('/(\d{3})(\d{4})(\d{4})/', '$1-$2-$3', $phone) : '' }}">
|
|
<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="fi_code">인증번호</label>
|
|
<input class="auth-input" id="fi_code" type="text" placeholder="6자리 인증번호" inputmode="numeric">
|
|
<div class="auth-help">※ 현재는 UI만 구성되어 있어 실제 발송/검증은 동작하지 않습니다.</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">확인 결과</label>
|
|
<div class="auth-help" id="findIdResult" style="font-weight:850;">
|
|
가입된 아이디는 <b>example@domain.com</b> 형태로 안내됩니다. (샘플)
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="auth-actions">
|
|
<a class="auth-btn auth-btn--primary" href="{{ route('web.auth.login') }}">로그인 하기</a>
|
|
<a class="auth-btn auth-btn--ghost" href="{{ route('web.auth.find_password') }}">비밀번호 찾기</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
@endsection
|
|
|
|
@section('auth_bottom')
|
|
{{-- 필요 시 하단에 추가 문구/링크를 넣고 싶으면 여기 --}}
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
(function(){
|
|
const root = document.getElementById('findIdForm');
|
|
if(!root) return;
|
|
|
|
const panels = root.querySelectorAll('.auth-panel');
|
|
const stepInd = document.querySelectorAll('.auth-step');
|
|
|
|
let step = Number(@json($initialStep ?? 1));
|
|
|
|
const $phone = document.getElementById('fi_phone');
|
|
const $code = document.getElementById('fi_code');
|
|
|
|
// ✅ 결과 박스는 id로 고정 (절대 흔들리지 않음)
|
|
const resultBox = document.getElementById('findIdResult');
|
|
|
|
// 메시지 영역: 항상 "현재 활성 패널"의 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 = () => {
|
|
// ✅ 1) 전환 전에 현재 포커스 제거 (경고 원인 제거)
|
|
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';
|
|
|
|
// ✅ 2) aria-hidden은 유지하되, 포커스/클릭 차단은 inert로 처리
|
|
// on=false인 패널은 inert 적용(포커스 못 감)
|
|
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();
|
|
|
|
// ✅ 3) 전환 후 포커스 이동(접근성/UX)
|
|
// 현재 step 패널의 첫 input 또는 버튼으로 포커스
|
|
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', // ✅ include 대신 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(); // ✅ 먼저 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 };
|
|
};
|
|
|
|
|
|
const normalizePhone = (v) => (v || '').replace(/[^\d]/g,'');
|
|
const formatPhone = (digits) => {
|
|
if(!digits) return '';
|
|
if(digits.length === 11) return digits.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
|
|
if(digits.length === 10) return digits.replace(/(\d{3})(\d{3,4})(\d{4})/, '$1-$2-$3');
|
|
return digits;
|
|
};
|
|
|
|
// -------- timer ----------
|
|
let timerId = null;
|
|
let remain = 0;
|
|
|
|
const ensureTimerUI = () => {
|
|
let wrap = root.querySelector('.fi-timer');
|
|
if(!wrap){
|
|
wrap = document.createElement('div');
|
|
wrap.className = 'fi-timer';
|
|
wrap.style.marginTop = '8px';
|
|
wrap.style.display = 'flex';
|
|
wrap.style.gap = '10px';
|
|
wrap.style.alignItems = 'center';
|
|
|
|
const t = document.createElement('span');
|
|
t.className = 'fi-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 fi-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('.fi-timer__text');
|
|
const btn = wrap.querySelector('.fi-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 raw = $phone?.value || '';
|
|
const digits = normalizePhone(raw);
|
|
|
|
if(!digits){
|
|
setMsg('휴대폰 번호를 입력해 주세요.', 'error');
|
|
return;
|
|
}
|
|
|
|
setMsg('확인 중입니다...', 'info');
|
|
|
|
try {
|
|
const json = await postJson(@json(route('web.auth.find_id.send_code')), { phone: raw });
|
|
|
|
// ✅ 성공 (ok true)
|
|
setMsg(json.message || '인증번호를 발송했습니다.', 'success');
|
|
|
|
step = 2;
|
|
render();
|
|
|
|
startTimer(json.expires_in || 180);
|
|
|
|
if(json.dev_code){
|
|
setMsg(`(개발용) 인증번호: ${json.dev_code}`, 'info');
|
|
}
|
|
|
|
} catch (err) {
|
|
// ✅ 여기서 404(PHONE_NOT_FOUND)도 UX로 처리
|
|
const p = err.payload || {};
|
|
|
|
if (err.status === 404 && p.code === 'PHONE_NOT_FOUND') {
|
|
// step 1 유지
|
|
step = 1;
|
|
render();
|
|
setMsg(p.message || '해당 번호로 가입된 계정을 찾을 수 없습니다.', 'error');
|
|
return;
|
|
}
|
|
|
|
// 기타 에러(429/422/500 등)
|
|
setMsg(err.message || '오류가 발생했습니다.', 'error');
|
|
}
|
|
};
|
|
|
|
|
|
const verifyCode = async () => {
|
|
const code = ($code?.value || '').trim();
|
|
|
|
if(!/^\d{6}$/.test(code)){
|
|
setMsg('인증번호 6자리를 입력해 주세요.', 'error');
|
|
return;
|
|
}
|
|
|
|
setMsg('인증 확인 중입니다...', 'info');
|
|
|
|
const json = await postJson(@json(route('web.auth.find_id.verify')), { code });
|
|
|
|
|
|
// ✅ 먼저 step 이동 + 렌더 (패널 표시 보장)
|
|
step = 3;
|
|
render();
|
|
|
|
// ✅ 결과 반영은 렌더 후
|
|
const maskedList = Array.isArray(json.masked_emails) ? json.masked_emails : [];
|
|
if (resultBox) {
|
|
if (maskedList.length > 0) {
|
|
// 여러 개 출력 (줄바꿈)
|
|
const html = maskedList.map(e => `<div>• <b>${e}</b></div>`).join('');
|
|
resultBox.innerHTML = `가입된 아이디는 아래와 같습니다.${html}`;
|
|
} else {
|
|
resultBox.innerHTML = `해당 번호로 가입된 계정을 찾을 수 없습니다.`;
|
|
}
|
|
}
|
|
|
|
setMsg(json.message || '인증이 완료되었습니다.', 'success');
|
|
};
|
|
|
|
// -------- events ----------
|
|
root.addEventListener('click', async (e) => {
|
|
const resend = e.target.closest('.fi-resend');
|
|
const next = e.target.closest('[data-next]');
|
|
const prev = e.target.closest('[data-prev]');
|
|
|
|
try{
|
|
if(resend){
|
|
await sendCode();
|
|
return;
|
|
}
|
|
|
|
if(next){
|
|
if(step === 1) await sendCode();
|
|
else if(step === 2) await verifyCode();
|
|
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');
|
|
}
|
|
});
|
|
|
|
// input UX
|
|
if($phone){
|
|
$phone.addEventListener('input', () => {
|
|
const digits = normalizePhone($phone.value);
|
|
$phone.value = formatPhone(digits);
|
|
});
|
|
|
|
$phone.addEventListener('keydown', (e) => {
|
|
if(e.key === 'Enter'){
|
|
e.preventDefault();
|
|
root.querySelector('[data-step="1"] [data-next]')?.click();
|
|
}
|
|
});
|
|
}
|
|
|
|
if($code){
|
|
$code.addEventListener('keydown', (e) => {
|
|
if(e.key === 'Enter'){
|
|
e.preventDefault();
|
|
root.querySelector('[data-step="2"] [data-next]')?.click();
|
|
}
|
|
});
|
|
}
|
|
|
|
render();
|
|
})();
|
|
</script>
|
|
@endpush
|
|
|
|
|