// screens-auth.jsx — Login + Signup (with real API calls)
// Reusable password input with show/hide toggle
function PasswordInput({ value, onChange, placeholder, required, minLength, autoComplete, autoFocus }) {
const [show, setShow] = React.useState(false);
return (
setShow(s => !s)}
tabIndex={-1}
title={show ? 'Hide password' : 'Show password'}
style={{
position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)',
background: 'none', border: 'none', cursor: 'pointer',
color: 'var(--fg3)', padding: 4, display: 'flex', alignItems: 'center',
borderRadius: 6, lineHeight: 1,
}}
onMouseEnter={e => e.currentTarget.style.color = 'var(--psy-ink)'}
onMouseLeave={e => e.currentTarget.style.color = 'var(--fg3)'}
>
);
}
function AuthShell({ children, kicker, title, subtitle }) {
return (
{kicker && {kicker} }
{title}
{subtitle && {subtitle}
}
{children}
);
}
function SocialRow({ onAuth }) {
const GOOGLE_CLIENT_ID = '140535414511-opindnumda1f5d7vpsk2kbk98njd86ku.apps.googleusercontent.com';
function handleGoogleClick() {
if (!window.google) return alert('Google SDK not loaded yet, please try again.');
window.google.accounts.id.initialize({
client_id: GOOGLE_CLIENT_ID,
callback: async ({ credential }) => {
try {
const r = await fetch('/api/auth/google', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ credential }),
});
const data = await r.json();
if (!r.ok) return alert(data.error || 'Google login failed.');
onAuth && onAuth(data);
} catch (e) {
alert('Google login failed. Please try again.');
}
},
});
window.google.accounts.id.prompt();
}
return (
);
}
function GoogleGlyph() {
return (
);
}
function Divider({ label = 'or' }) {
return (
);
}
// ===========================================================
// LOGIN
// ===========================================================
function LoginScreen({ onLogin, onSwitchSignup }) {
const { t } = useLang();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [remember, setRemember] = useState(true);
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
async function handleSubmit(e) {
e.preventDefault();
setError('');
setLoading(true);
try {
const { token, user } = await API.login({ email, password });
if (remember) localStorage.setItem('psyche-auth', JSON.stringify({ token, user }));
onLogin({ user });
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
}
return (
{
localStorage.setItem('psyche-auth', JSON.stringify({ token, user }));
onLogin({ user });
}} />
{t('signin_new')} {t('signin_create')}
);
}
// ===========================================================
// SIGNUP — three small steps
// preRole: if passed, skips step 1 and locks the role
// ===========================================================
function SignupScreen({ onSignup, onSwitchLogin, preRole = null }) {
const { t } = useLang();
const [step, setStep] = useState(preRole ? 2 : 1);
const [role, setRole] = useState(preRole);
const [form, setForm] = useState({
name: '', email: '', password: '', district: 'Nicosia', accept: false,
licenseNumber: '', credentials: '', files: [],
});
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const [submitted, setSubmitted] = useState(false); // pro-only success screen
function up(k, v) { setForm({ ...form, [k]: v }); }
const isPro = role === 'pro';
// Pro signup: show success screen within the same page instead of routing away
if (submitted && isPro) {
return (
Our team will verify your licence against the Cyprus Psychologists Board (ΠΣΨΨ) registry — usually within 24 hours.
We will email {form.email} once you are approved.
Back to sign in
);
}
async function handleFinish() {
setError('');
setLoading(true);
try {
const { token, user } = await API.signup({
name: form.name,
email: form.email,
password: form.password,
role: isPro ? 'pro' : 'user',
district: form.district,
credentials: isPro ? form.credentials : undefined,
license_number: isPro ? form.licenseNumber : undefined,
});
localStorage.setItem('psyche-auth', JSON.stringify({ token, user }));
if (isPro) {
// Upload documents if the psychologist attached any
if (form.files && form.files.length > 0) {
await fetch('/api/psychologists/upload-docs', {
method: 'POST',
headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token },
body: JSON.stringify({ files: form.files }),
}).catch(e => console.warn('[upload]', e.message));
}
// Show in-page success screen — don't try to render the provider dashboard yet
setSubmitted(true);
} else {
onSignup({ role: user.role, user });
}
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
}
return (
{[1, 2, 3].map(i => (
{step === 1 && (
{[
{ id: 'user', icon: 'person', title: "I'm looking for a psychologist", sub: 'Browse, get matched, book sessions, journal your mood, talk anonymously in the community.' },
{ id: 'pro', icon: 'medical_services', title: "I'm a licensed psychologist", sub: 'List your practice, receive enquiries, message clients, get verified reviews.' },
].map(r => (
setRole(r.id)}
className={`quiz-option ${role === r.id ? 'selected' : ''}`}
style={{ alignItems: 'flex-start', padding: '20px 22px' }}>
{r.title}
{r.sub}
))}
setStep(2)}>
{t('btn_continue')}
)}
{step === 2 && (
)}
{step === 3 && (
{isPro ? (
<>
Your licence number (ΠΣΨΨ)
up('licenseNumber', e.target.value)} placeholder="e.g. ΠΣΨΨ 1284" />
Upload your diploma + licence
{form.files.map((f, i) => (
({(f.size / 1024).toFixed(0)} KB)
))}
Click to add more files
Click to browse files
PDF or image · up to 10 MB each
)}
) : (
<>
Anything we should know before showing you matches? (optional)
)}
Terms of Service and Privacy Policy {isPro ? '. I confirm my licence is valid and in good standing.' : '.'}
{error && (
{error}
)}
setStep(2)}>
{loading ? t('signup_creating') : isPro ? t('signup_pro_btn') : t('signup_btn')}
{t('signup_already')} {t('signin_btn')}
);
}
// ===========================================================
// AUTH MODAL — lightweight overlay for guest → action gating
// ===========================================================
function AuthModal({ view, onClose, onLogin, onSignup, onSwitchView, onOpenProSignup }) {
return (
e.stopPropagation()}
style={{
background: 'var(--psy-surface-2)',
borderRadius: 24,
padding: '36px 40px',
width: '100%',
maxWidth: 460,
boxShadow: '0 24px 64px rgba(15,21,37,0.22)',
position: 'relative',
}}>
{/* Close */}
{view === 'login'
?
onSwitchView('signup')} onOpenProSignup={onOpenProSignup} />
: onSwitchView('login')} onOpenProSignup={onOpenProSignup} />}
);
}
function ModalLogin({ onLogin, onSwitch, onOpenProSignup }) {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
async function handleSubmit(e) {
e.preventDefault();
setError(''); setLoading(true);
try {
const { token, user } = await API.login({ email, password });
localStorage.setItem('psyche-auth', JSON.stringify({ token, user }));
onLogin({ user });
} catch (err) { setError(err.message); }
finally { setLoading(false); }
}
return (
<>
Sign in
You need an account to do this. Already have one? Sign in below.
{
localStorage.setItem('psyche-auth', JSON.stringify({ token, user }));
onLogin({ user });
}} />
No account? Create one — it's free
{onOpenProSignup && (
Are you a psychologist? Register your practice →
)}
);
}
function ModalSignup({ onSignup, onSwitch, onOpenProSignup }) {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
async function handleSubmit(e) {
e.preventDefault();
setError(''); setLoading(true);
try {
const { token, user } = await API.signup({ name, email, password, role: 'user' });
localStorage.setItem('psyche-auth', JSON.stringify({ token, user }));
onSignup({ role: 'user', user });
} catch (err) { setError(err.message); }
finally { setLoading(false); }
}
return (
<>
Create an account
Free, private, and takes 30 seconds.
{
localStorage.setItem('psyche-auth', JSON.stringify({ token, user }));
onSignup({ role: 'user', user });
}} />
Already have an account? Sign in
{onOpenProSignup && (
Are you a psychologist? Register your practice →
)}
);
}
Object.assign(window, { LoginScreen, SignupScreen, AuthModal });