null



<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
<link rel="stylesheet" href="/?page=c.login.stylesheet&amp;v=1.1.0null&amp;bLoB_contenttype=text/css">
<div class="lw">
<a href="?page=c.market" class="logo">WatchPro<span>Site</span></a>
<div class="lc">
<h1 id="formTitle">Sign In or Create Account</h1>
<p id="formSubtitle">Enter your email to continue</p>


<button type="button" class="btn-apple" onclick="appleSignIn()">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
Continue with Apple
</button>
<div class="apple-note">Works for new &amp; existing accounts</div>
<script>
AppleID.auth.init({clientId:'com.midson.watchprosite',scope:'name email',redirectURI:'https://www.watchprosite.com/AppleConf/',state:'optional-state',usePopup:true});
function appleSignIn(){
AppleID.auth.signIn().then(function(response){
var firstName=response.user&&response.user.name?response.user.name.firstName:'';
var lastName=response.user&&response.user.name?response.user.name.lastName:'';
fetch('/AppleConf',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({code:response.authorization.code,firstName:firstName,lastName:lastName})}).then(function(r){return r.json();}).then(function(d){if(d.redirectURL){var p=new URLSearchParams(window.location.search);var ret=p.get('returnTo')||'c.market';var url='/?page='+ret;if(p.get('ti'))url+='&ti='+p.get('ti');if(p.get('id'))url+='&id='+p.get('id');window.location.href=url;}}).catch(function(e){console.error('Token exchange error:',e);});
}).catch(function(e){console.error('Apple Sign-In error:',e);});
}
</script>

<div class="divider"><span>or use email</span></div>

<form method="post" action="/?page=c.login" class="lf" id="authForm">
<input type="hidden" name="login" value="login">

<!-- Step 1: Email entry -->
<div id="step1">
<label>Email</label>
<input type="text" name="name" id="emailInput" placeholder="your@email.com" value="">
<button type="button" class="btn" id="continueBtn" onclick="checkEmail()">Continue</button>
<div id="notYou" class="not-you hidden"></div>
</div>

<!-- Step 2: Login (existing user) -->
<div id="step2login" class="hidden">
<div class="welcome">Welcome back<span id="userName"></span>!</div>
<div class="email-display">
<span class="email" id="displayEmail"></span>
<a class="change" onclick="resetForm()">Change</a>
</div>
<label>Password</label>
<input type="password" name="password" id="loginPassword" placeholder="Enter your password" disabled>
<button type="submit" class="btn">Sign In</button>
<div class="ll"><a id="forgotLink" href="/?page=c.forgot">Forgot password?</a></div>
</div>

<!-- Step 2: Register (new user) -->
<div id="step2register" class="hidden">
<div class="email-display">
<span class="email" id="displayEmail2"></span>
<a class="change" onclick="resetForm()">Change</a>
</div>
<label>Username</label>
<input type="text" name="handle" id="regHandle" placeholder="Choose a username" disabled>
<div class="hint">Displayed publicly on your listings</div>
<label>Password</label>
<input type="password" name="password" id="regPassword" placeholder="Choose a password" disabled>
<label>Confirm Password</label>
<input type="password" name="confirm" id="regConfirm" placeholder="Re-enter password" disabled>
<button type="submit" class="btn">Create Account</button>
</div>
</form>
</div>
</div>
<script>
const form=document.getElementById('authForm');
const step1=document.getElementById('step1');
const step2login=document.getElementById('step2login');
const step2register=document.getElementById('step2register');
const emailInput=document.getElementById('emailInput');
const continueBtn=document.getElementById('continueBtn');
const formTitle=document.getElementById('formTitle');
const formSubtitle=document.getElementById('formSubtitle');
const loginPassword=document.getElementById('loginPassword');
const regHandle=document.getElementById('regHandle');
const regPassword=document.getElementById('regPassword');
const regConfirm=document.getElementById('regConfirm');
const notYouDiv=document.getElementById('notYou');
const forgotLink=document.getElementById('forgotLink');
const debugParam=new URLSearchParams(window.location.search).get('debug');
const debugStr=debugParam?'&debug='+debugParam:'';
const newParam=new URLSearchParams(window.location.search).get('new');

// If new=1, clear the remembered email
if(newParam==='1'){
  emailInput.value='';
}

const rememberedEmail=emailInput.value;

// Show "Not you?" if email was pre-filled
if(rememberedEmail && rememberedEmail.includes('@')){
  const shortEmail=rememberedEmail.length>20?rememberedEmail.substring(0,17)+'...':rememberedEmail;
  notYouDiv.innerHTML='Not '+shortEmail+'? <a onclick="useNewAccount()">Use different account</a>';
  notYouDiv.classList.remove('hidden');
  // Auto-check remembered email
  setTimeout(checkEmail, 100);
}

function useNewAccount(){
  const url=new URL(window.location.href);
  url.searchParams.set('new','1');
  window.location.href=url.toString();
}

async function checkEmail(){
  const email=emailInput.value.trim();
  if(!email||!email.includes('@')){
    alert('Please enter a valid email');
    return;
  }
  continueBtn.disabled=true;
  continueBtn.textContent='Checking...';
  try{
    const resp=await fetch('/?page=c.login.check.email&email='+encodeURIComponent(email)+debugStr);
    const data=await resp.json();
    if(data.emailExists===1){
      showLogin(email,data.handle);
    }else{
      showRegister(email);
    }
  }catch(e){
    console.error(e);
    alert('Error checking email. Please try again.');
    continueBtn.disabled=false;
    continueBtn.textContent='Continue';
  }
}

function showLogin(email,handle){
  step1.classList.add('hidden');
  step2register.classList.add('hidden');
  step2login.classList.remove('hidden');
  emailInput.type='hidden';
  regHandle.disabled=true;
  regPassword.disabled=true;
  regConfirm.disabled=true;
  loginPassword.disabled=false;
  document.getElementById('displayEmail').textContent=email;
  document.getElementById('userName').textContent=handle?' '+handle:'';
  formTitle.textContent='Welcome Back';
  formSubtitle.textContent='Enter your password to sign in';
  var retParam=new URLSearchParams(window.location.search).get('returnTo');var retStr=retParam?'&returnTo='+retParam:'';form.action='/?page=c.login'+debugStr+retStr;
  forgotLink.href='/?page=c.forgot&email='+encodeURIComponent(email);
  loginPassword.focus();
}

function showRegister(email){
  step1.classList.add('hidden');
  step2login.classList.add('hidden');
  step2register.classList.remove('hidden');
  emailInput.type='hidden';
  emailInput.name='email';
  loginPassword.disabled=true;
  regHandle.disabled=false;
  regPassword.disabled=false;
  regConfirm.disabled=false;
  document.getElementById('displayEmail2').textContent=email;
  formTitle.textContent='Create Account';
  formSubtitle.textContent='Join the watch collector community';
  form.action='/?page=c.register'+debugStr;
  regHandle.focus();
}

function resetForm(){
  step1.classList.remove('hidden');
  step2login.classList.add('hidden');
  step2register.classList.add('hidden');
  emailInput.type='text';
  emailInput.name='name';
  loginPassword.disabled=true;
  regHandle.disabled=true;
  regPassword.disabled=true;
  regConfirm.disabled=true;
  formTitle.textContent='Sign In or Create Account';
  formSubtitle.textContent='Enter your email to continue';
  continueBtn.disabled=false;
  continueBtn.textContent='Continue';
  var retParam=new URLSearchParams(window.location.search).get('returnTo');var retStr=retParam?'&returnTo='+retParam:'';form.action='/?page=c.login'+debugStr+retStr;
  emailInput.focus();
}

emailInput.addEventListener('keypress',function(e){
  if(e.key==='Enter'){e.preventDefault();checkEmail();}
});
</script>