326 lines
12 KiB
TypeScript
326 lines
12 KiB
TypeScript
|
import { A, useNavigate } from '@solidjs/router';
|
|||
|
|
import { createMemo, createSignal, For, Show } from 'solid-js';
|
|||
|
|
import PublicBackground from '~/components/PublicBackground';
|
|||
|
|
import PublicHeader from '~/components/PublicHeader';
|
|||
|
|
import CaptchaCanvas from '~/components/CaptchaCanvas';
|
|||
|
|
import { isValidEmail } from '~/lib/form-validation';
|
|||
|
|
|
|||
|
|
type RoleKey = 'company' | 'job_seeker' | 'professional' | 'customer';
|
|||
|
|
|
|||
|
|
function makeCaptcha() {
|
|||
|
|
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
|
|||
|
|
return Array.from({ length: 6 }, () => chars[Math.floor(Math.random() * chars.length)]).join('');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function PasswordVisibilityIcon(props: { visible: boolean }) {
|
|||
|
|
if (props.visible) {
|
|||
|
|
return (
|
|||
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|||
|
|
<path d="M3 3l18 18" />
|
|||
|
|
<path d="M10.58 10.58a2 2 0 0 0 2.83 2.83" />
|
|||
|
|
<path d="M9.88 5.09A11 11 0 0 1 12 4.9c5.5 0 10 4.1 10 7.1 0 1.2-.72 2.53-1.95 3.72" />
|
|||
|
|
<path d="M6.1 6.1C3.54 7.58 2 9.79 2 12c0 3 4.48 7.1 10 7.1 1.72 0 3.36-.4 4.84-1.12" />
|
|||
|
|
</svg>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
return (
|
|||
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|||
|
|
<path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z" />
|
|||
|
|
<circle cx="12" cy="12" r="3" />
|
|||
|
|
</svg>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function LoginRoute() {
|
|||
|
|
const navigate = useNavigate();
|
|||
|
|
const [email, setEmail] = createSignal('');
|
|||
|
|
const [password, setPassword] = createSignal('');
|
|||
|
|
const [otp, setOtp] = createSignal(['', '', '', '', '', '']);
|
|||
|
|
const [showVerify, setShowVerify] = createSignal(false);
|
|||
|
|
const [showPassword, setShowPassword] = createSignal(false);
|
|||
|
|
const [captcha, setCaptcha] = createSignal(makeCaptcha());
|
|||
|
|
const [captchaInput, setCaptchaInput] = createSignal('');
|
|||
|
|
const [error, setError] = createSignal('');
|
|||
|
|
const [submitting, setSubmitting] = createSignal(false);
|
|||
|
|
const [roleGuess, setRoleGuess] = createSignal<RoleKey>('job_seeker');
|
|||
|
|
|
|||
|
|
const otpCode = createMemo(() => otp().join(''));
|
|||
|
|
|
|||
|
|
const setOtpDigit = (index: number, value: string) => {
|
|||
|
|
const clean = value.replace(/\D/g, '').slice(0, 1);
|
|||
|
|
setOtp((prev) => {
|
|||
|
|
const next = prev.slice();
|
|||
|
|
next[index] = clean;
|
|||
|
|
return next;
|
|||
|
|
});
|
|||
|
|
if (clean) {
|
|||
|
|
const nextEl = document.querySelector<HTMLInputElement>(`#login-otp-${index + 1}`);
|
|||
|
|
if (nextEl) nextEl.focus();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const saveUser = (user: any) => {
|
|||
|
|
const fullName = String(user?.full_name || user?.fullName || '').trim();
|
|||
|
|
const [firstName, ...rest] = fullName.split(' ');
|
|||
|
|
const lastName = rest.join(' ');
|
|||
|
|
const normalizedRole = String(user?.active_role || user?.role || roleGuess() || '')
|
|||
|
|
.trim()
|
|||
|
|
.toUpperCase()
|
|||
|
|
.replace(/\s+/g, '_');
|
|||
|
|
const storedRole = normalizedRole
|
|||
|
|
? normalizedRole.toLowerCase()
|
|||
|
|
: roleGuess();
|
|||
|
|
const payload = {
|
|||
|
|
firstName: firstName || '',
|
|||
|
|
lastName: lastName || '',
|
|||
|
|
fullName: fullName || '',
|
|||
|
|
name: fullName || '',
|
|||
|
|
displayName: fullName || '',
|
|||
|
|
email: String(user?.email || email()).trim().toLowerCase(),
|
|||
|
|
roleKey: storedRole,
|
|||
|
|
role: storedRole,
|
|||
|
|
active_role: normalizedRole || 'JOB_SEEKER',
|
|||
|
|
user,
|
|||
|
|
};
|
|||
|
|
if (typeof window !== 'undefined') {
|
|||
|
|
window.localStorage.setItem('nxtgauge_auth_user', JSON.stringify(payload));
|
|||
|
|
window.localStorage.setItem('nxtgauge_user', JSON.stringify(payload));
|
|||
|
|
window.localStorage.setItem('nxtgauge_signup_profile_v1', JSON.stringify(payload));
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const login = async () => {
|
|||
|
|
setError('');
|
|||
|
|
if (email().trim().toLowerCase() === 'demo@nxtgauge.com' && password() === 'Demo@1234') {
|
|||
|
|
dummyLogin();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!isValidEmail(email())) {
|
|||
|
|
setError('Enter a valid email address.');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!password().trim()) {
|
|||
|
|
setError('Password is required.');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!captchaInput().trim() || captchaInput().trim().toUpperCase() !== captcha().toUpperCase()) {
|
|||
|
|
setError('Captcha does not match. Please try again.');
|
|||
|
|
setCaptcha(makeCaptcha());
|
|||
|
|
setCaptchaInput('');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setSubmitting(true);
|
|||
|
|
try {
|
|||
|
|
const res = await fetch('/api/gateway/api/auth/login', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
|
|||
|
|
credentials: 'include',
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
email: email().trim().toLowerCase(),
|
|||
|
|
password: password(),
|
|||
|
|
}),
|
|||
|
|
});
|
|||
|
|
const data = await res.json().catch(() => ({}));
|
|||
|
|
if (!res.ok) {
|
|||
|
|
const code = String(data?.code || '').toUpperCase();
|
|||
|
|
if (code === 'EMAIL_NOT_VERIFIED') {
|
|||
|
|
setShowVerify(true);
|
|||
|
|
setError('Email not verified. Enter OTP sent to your inbox.');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setError(String(data?.error || data?.message || 'Invalid login credentials.'));
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const accessToken = String(data?.access_token || '').trim();
|
|||
|
|
if (typeof window !== 'undefined' && accessToken) {
|
|||
|
|
window.sessionStorage.setItem('nxtgauge_access_token', accessToken);
|
|||
|
|
window.sessionStorage.setItem('nxtgauge_frontend_access_token', accessToken);
|
|||
|
|
window.localStorage.setItem('nxtgauge_access_token', accessToken);
|
|||
|
|
}
|
|||
|
|
saveUser(data?.user || {});
|
|||
|
|
navigate('/dashboard', { replace: true });
|
|||
|
|
} finally {
|
|||
|
|
setSubmitting(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const resendOtp = async () => {
|
|||
|
|
setError('');
|
|||
|
|
setSubmitting(true);
|
|||
|
|
try {
|
|||
|
|
const res = await fetch('/api/gateway/api/auth/resend-otp', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
|
|||
|
|
credentials: 'include',
|
|||
|
|
body: JSON.stringify({ email: email().trim().toLowerCase() }),
|
|||
|
|
});
|
|||
|
|
const data = await res.json().catch(() => ({}));
|
|||
|
|
if (!res.ok) {
|
|||
|
|
setError(String(data?.error || data?.message || 'Unable to resend OTP.'));
|
|||
|
|
}
|
|||
|
|
} finally {
|
|||
|
|
setSubmitting(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const verifyThenLogin = async () => {
|
|||
|
|
setError('');
|
|||
|
|
if (otpCode().length !== 6) {
|
|||
|
|
setError('Enter a valid 6-digit OTP.');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setSubmitting(true);
|
|||
|
|
try {
|
|||
|
|
const verifyRes = await fetch('/api/gateway/api/auth/verify-email', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
|
|||
|
|
credentials: 'include',
|
|||
|
|
body: JSON.stringify({ otp: otpCode() }),
|
|||
|
|
});
|
|||
|
|
const verifyData = await verifyRes.json().catch(() => ({}));
|
|||
|
|
if (!verifyRes.ok) {
|
|||
|
|
setError(String(verifyData?.error || verifyData?.message || 'OTP verification failed.'));
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
await login();
|
|||
|
|
} finally {
|
|||
|
|
setSubmitting(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const dummyLogin = () => {
|
|||
|
|
const demoUser = {
|
|||
|
|
id: 'demo-user-001',
|
|||
|
|
email: 'demo@nxtgauge.com',
|
|||
|
|
full_name: 'Demo User',
|
|||
|
|
email_verified: true,
|
|||
|
|
active_role: 'JOB_SEEKER',
|
|||
|
|
roles: ['JOB_SEEKER'],
|
|||
|
|
};
|
|||
|
|
const payload = {
|
|||
|
|
firstName: 'Demo',
|
|||
|
|
lastName: 'User',
|
|||
|
|
fullName: 'Demo User',
|
|||
|
|
name: 'Demo User',
|
|||
|
|
displayName: 'Demo User',
|
|||
|
|
email: 'demo@nxtgauge.com',
|
|||
|
|
roleKey: 'job_seeker',
|
|||
|
|
role: 'job_seeker',
|
|||
|
|
user: demoUser,
|
|||
|
|
};
|
|||
|
|
if (typeof window !== 'undefined') {
|
|||
|
|
window.sessionStorage.setItem('nxtgauge_access_token', 'dummy-access-token');
|
|||
|
|
window.sessionStorage.setItem('nxtgauge_frontend_access_token', 'dummy-access-token');
|
|||
|
|
window.localStorage.setItem('nxtgauge_access_token', 'dummy-access-token');
|
|||
|
|
window.localStorage.setItem('nxtgauge_auth_user', JSON.stringify(payload));
|
|||
|
|
window.localStorage.setItem('nxtgauge_user', JSON.stringify(payload));
|
|||
|
|
window.localStorage.setItem('nxtgauge_signup_profile_v1', JSON.stringify(payload));
|
|||
|
|
}
|
|||
|
|
setRoleGuess('job_seeker');
|
|||
|
|
navigate('/dashboard', { replace: true });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<main class="auth-page">
|
|||
|
|
<PublicBackground />
|
|||
|
|
<PublicHeader />
|
|||
|
|
|
|||
|
|
<div class="auth-layout">
|
|||
|
|
<section class="auth-visual card glass-dark">
|
|||
|
|
<img class="auth-visual-img" src="/images/auth-company-1.jpg" alt="Public Workspace" />
|
|||
|
|
<div class="auth-visual-overlay" />
|
|||
|
|
<div class="auth-visual-content">
|
|||
|
|
<p class="eyebrow">Public Workspace</p>
|
|||
|
|
<h1 class="title light">Welcome Back To Nxtgauge</h1>
|
|||
|
|
<p class="subtitle light">Sign in to manage your profile, portfolio, and verification in one place.</p>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="auth-form card glass-light">
|
|||
|
|
<h2 class="title">Sign In</h2>
|
|||
|
|
|
|||
|
|
<div class="field">
|
|||
|
|
<label class="label" for="login-email">EMAIL</label>
|
|||
|
|
<input id="login-email" type="email" class="input" value={email()} onInput={(e) => setEmail(e.currentTarget.value)} placeholder="Enter your email" />
|
|||
|
|
<p class="validation-note" style={{ color: email().trim() && isValidEmail(email()) ? '#fd6116' : '#6e7591' }}>
|
|||
|
|
{email().trim() && isValidEmail(email()) ? '✓ Valid email format' : '• Enter a valid email format'}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="field">
|
|||
|
|
<label class="label" for="login-password">PASSWORD</label>
|
|||
|
|
<div class="auth-password-wrap">
|
|||
|
|
<input id="login-password" type={showPassword() ? 'text' : 'password'} class="input" value={password()} onInput={(e) => setPassword(e.currentTarget.value)} placeholder="Enter your password" />
|
|||
|
|
<button
|
|||
|
|
class="auth-toggle-visibility"
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setShowPassword((prev) => !prev)}
|
|||
|
|
aria-label={showPassword() ? 'Hide password' : 'Show password'}
|
|||
|
|
>
|
|||
|
|
<PasswordVisibilityIcon visible={showPassword()} />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="field">
|
|||
|
|
<label class="label">CAPTCHA</label>
|
|||
|
|
<div class="auth-captcha-row">
|
|||
|
|
<button class="auth-captcha-refresh" type="button" onClick={() => { setCaptcha(makeCaptcha()); setCaptchaInput(''); }}>↻</button>
|
|||
|
|
<CaptchaCanvas code={captcha()} class="auth-captcha-canvas" />
|
|||
|
|
<input class="input" value={captchaInput()} onInput={(e) => setCaptchaInput(e.currentTarget.value)} placeholder="Enter captcha" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Show when={showVerify()}>
|
|||
|
|
<label class="label">EMAIL OTP</label>
|
|||
|
|
<div class="otp-row">
|
|||
|
|
<For each={Array.from({ length: 6 }, (_, index) => index)}>
|
|||
|
|
{(index) => (
|
|||
|
|
<input
|
|||
|
|
id={`login-otp-${index}`}
|
|||
|
|
class="otp-input"
|
|||
|
|
inputMode="numeric"
|
|||
|
|
maxlength={1}
|
|||
|
|
value={otp()[index]}
|
|||
|
|
onInput={(e) => setOtpDigit(index, e.currentTarget.value)}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</For>
|
|||
|
|
</div>
|
|||
|
|
<div class="auth-footer-row">
|
|||
|
|
<p class="note">Didn’t receive code?</p>
|
|||
|
|
<button class="auth-forgot-link" type="button" onClick={() => void resendOtp()} disabled={submitting()}>
|
|||
|
|
Resend OTP
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</Show>
|
|||
|
|
|
|||
|
|
<button class="auth-submit-btn" type="button" onClick={() => void login()} disabled={submitting()}>
|
|||
|
|
{submitting() ? 'Signing In...' : 'Sign In'}
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<button class="auth-submit-btn" type="button" onClick={dummyLogin} disabled={submitting()} style={{ 'margin-top': '8px', background: '#111827' }}>
|
|||
|
|
Dummy Login (Dashboard Test)
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<Show when={showVerify()}>
|
|||
|
|
<button class="auth-submit-btn" type="button" onClick={() => void verifyThenLogin()} disabled={submitting()}>
|
|||
|
|
{submitting() ? 'Verifying...' : 'Verify Email and Login'}
|
|||
|
|
</button>
|
|||
|
|
</Show>
|
|||
|
|
|
|||
|
|
<div class="auth-footer-row">
|
|||
|
|
<p class="footer-text">Secure login with email verification.</p>
|
|||
|
|
<p class="note">New user? <A href="/users/choose-role">Sign Up</A></p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Show when={error()}>
|
|||
|
|
<p class="error">{error()}</p>
|
|||
|
|
</Show>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
</main>
|
|||
|
|
);
|
|||
|
|
}
|