606 lines
21 KiB
TypeScript
606 lines
21 KiB
TypeScript
import { A, useNavigate } from "@solidjs/router";
|
||
import { createMemo, createSignal, For, Show } from "solid-js";
|
||
import { useAuth } from "~/lib/auth";
|
||
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 normalizeRoleValue(value: unknown): string {
|
||
return String(value || "")
|
||
.trim()
|
||
.toUpperCase()
|
||
.replace(/\s+/g, "_");
|
||
}
|
||
|
||
function extractRoleKey(value: unknown): string {
|
||
const normalized = normalizeRoleValue(value);
|
||
if (normalized && normalized !== "[OBJECT_OBJECT]") return normalized;
|
||
if (!value || typeof value !== "object") return normalized;
|
||
const maybe = value as Record<string, unknown>;
|
||
return normalizeRoleValue(
|
||
maybe.key ?? maybe.role_key ?? maybe.roleKey ?? maybe.name ?? maybe.role ?? maybe.id
|
||
);
|
||
}
|
||
|
||
function normalizeRoleKeysList(value: unknown): string[] {
|
||
if (!Array.isArray(value)) return [];
|
||
return value.map((item) => extractRoleKey(item)).filter(Boolean);
|
||
}
|
||
|
||
function isJobSeekerRole(roleKey: string): boolean {
|
||
return normalizeRoleValue(roleKey) === "JOB_SEEKER";
|
||
}
|
||
|
||
function firstNonJobSeekerRole(roleKeys: string[]): string | null {
|
||
for (const roleKey of roleKeys) {
|
||
if (!isJobSeekerRole(roleKey)) return roleKey;
|
||
}
|
||
return null;
|
||
}
|
||
|
||
function getStoredPreferredRole(emailHint?: string): string | null {
|
||
if (typeof window === "undefined") return null;
|
||
const keys = ["nxtgauge_signup_profile_v1", "nxtgauge_auth_user", "nxtgauge_user"];
|
||
|
||
for (const key of keys) {
|
||
const raw = window.localStorage.getItem(key);
|
||
if (!raw) continue;
|
||
try {
|
||
const parsed = JSON.parse(raw) as Record<string, any>;
|
||
const storedEmail = String(parsed?.email || "")
|
||
.trim()
|
||
.toLowerCase();
|
||
if (emailHint && storedEmail && storedEmail !== emailHint.trim().toLowerCase()) continue;
|
||
|
||
const selectedProfessionalRole = normalizeRoleValue(parsed?.selectedProfessionalRole);
|
||
if (selectedProfessionalRole) return selectedProfessionalRole;
|
||
|
||
const activeRole = normalizeRoleValue(parsed?.active_role || parsed?.role);
|
||
if (activeRole) return activeRole;
|
||
} catch {
|
||
// Ignore malformed local storage payloads.
|
||
}
|
||
}
|
||
|
||
return null;
|
||
}
|
||
|
||
function resolveActiveRole(rawBackendRole: unknown, emailHint?: string): string {
|
||
const backendRole = normalizeRoleValue(rawBackendRole);
|
||
if (backendRole) return backendRole;
|
||
const preferredRole = getStoredPreferredRole(emailHint);
|
||
if (preferredRole) return preferredRole;
|
||
return "";
|
||
}
|
||
|
||
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 auth = useAuth();
|
||
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 [roleHint, setRoleHint] = createSignal("");
|
||
const [checkingRole, setCheckingRole] = createSignal(false);
|
||
|
||
const otpCode = createMemo(() => otp().join(""));
|
||
|
||
const formatRoleLabel = (value: string): string =>
|
||
String(value || "")
|
||
.trim()
|
||
.replace(/[_\s]+/g, " ")
|
||
.toLowerCase()
|
||
.replace(/\b\w/g, (ch) => ch.toUpperCase());
|
||
|
||
const lookupRoleByEmail = async (emailValue: string) => {
|
||
const normalized = emailValue.trim().toLowerCase();
|
||
if (!normalized || !isValidEmail(normalized)) {
|
||
setRoleHint("");
|
||
return;
|
||
}
|
||
setCheckingRole(true);
|
||
try {
|
||
const response = await fetch("/api/auth/check-email", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json", Accept: "application/json" },
|
||
credentials: "include",
|
||
body: JSON.stringify({ email: normalized }),
|
||
});
|
||
const payload = await response.json().catch(() => ({}));
|
||
if (!response.ok || !payload?.exists) {
|
||
setRoleHint("");
|
||
return;
|
||
}
|
||
const detectedRole = normalizeRoleValue(
|
||
payload?.active_role || payload?.role || payload?.roles?.[0]
|
||
);
|
||
if (!detectedRole) {
|
||
const fallbackRole = normalizeRoleValue(getStoredPreferredRole(normalized));
|
||
setRoleHint(fallbackRole ? `Role: ${formatRoleLabel(fallbackRole)}` : "Role: Not assigned");
|
||
return;
|
||
}
|
||
setRoleHint(`Role: ${formatRoleLabel(detectedRole)}`);
|
||
const roleLower = detectedRole.toLowerCase();
|
||
if (
|
||
roleLower === "company" ||
|
||
roleLower === "customer" ||
|
||
roleLower === "job_seeker" ||
|
||
roleLower === "professional"
|
||
) {
|
||
setRoleGuess(roleLower as RoleKey);
|
||
}
|
||
} catch {
|
||
setRoleHint("");
|
||
} finally {
|
||
setCheckingRole(false);
|
||
}
|
||
};
|
||
|
||
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;
|
||
});
|
||
// Defer focus until after SolidJS reactive flush so the next input exists in DOM
|
||
queueMicrotask(() => {
|
||
if (clean && index < 5) {
|
||
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(" ");
|
||
// Trust the passed-in role and never force a JOB_SEEKER fallback.
|
||
const preferredRole = getStoredPreferredRole(String(user?.email || email()));
|
||
const normalizedRole = normalizeRoleValue(
|
||
user?.active_role || user?.role || preferredRole || ""
|
||
);
|
||
const storedRole = normalizedRole ? normalizedRole.toLowerCase() : "";
|
||
const selectedRoleForStorage =
|
||
isJobSeekerRole(normalizedRole) && preferredRole && !isJobSeekerRole(preferredRole)
|
||
? preferredRole
|
||
: normalizedRole;
|
||
|
||
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,
|
||
selectedProfessionalRole: selectedRoleForStorage,
|
||
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 () => {
|
||
if (submitting()) return;
|
||
setError("");
|
||
if (!isValidEmail(email())) {
|
||
setError("Enter a valid email address.");
|
||
return;
|
||
}
|
||
if (!password().trim()) {
|
||
setError("Password is required.");
|
||
return;
|
||
}
|
||
// DEV bypass: skip CAPTCHA validation in development
|
||
const isDev = typeof import.meta !== 'undefined' && import.meta.env?.DEV;
|
||
if (!isDev && (!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/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();
|
||
const normalizedEmail = email().trim().toLowerCase();
|
||
const userEmail = String(data?.user?.email || normalizedEmail).trim().toLowerCase();
|
||
const availableRoleKeys = normalizeRoleKeysList(data?.user?.roles || data?.roles);
|
||
const backendActiveRoleKey =
|
||
extractRoleKey(
|
||
data?.user?.active_role ||
|
||
data?.active_role ||
|
||
data?.role ||
|
||
data?.role_code
|
||
) ||
|
||
firstNonJobSeekerRole(availableRoleKeys) ||
|
||
"";
|
||
const preferredRoleKey = getStoredPreferredRole(userEmail);
|
||
let discoveredRoleKeys = [...availableRoleKeys];
|
||
let discoveredActiveRole = backendActiveRoleKey;
|
||
|
||
if (discoveredRoleKeys.length === 0 || isJobSeekerRole(discoveredActiveRole)) {
|
||
try {
|
||
const checkRes = await fetch("/api/auth/check-email", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json", Accept: "application/json" },
|
||
credentials: "include",
|
||
body: JSON.stringify({ email: userEmail }),
|
||
});
|
||
const checkPayload = await checkRes.json().catch(() => ({}));
|
||
if (checkRes.ok && checkPayload?.exists) {
|
||
const checkRoles = normalizeRoleKeysList(checkPayload?.roles);
|
||
if (checkRoles.length > 0) {
|
||
discoveredRoleKeys = Array.from(new Set([...discoveredRoleKeys, ...checkRoles]));
|
||
}
|
||
const checkActive = extractRoleKey(checkPayload?.active_role || checkPayload?.role);
|
||
if (checkActive) {
|
||
discoveredActiveRole = checkActive;
|
||
}
|
||
}
|
||
} catch {
|
||
// Ignore check-email failures; continue with login payload roles.
|
||
}
|
||
}
|
||
|
||
// Choose the role we *want* to activate:
|
||
// 1) Prefer the stored role selection (from signup/switch services) when it isn't JOB_SEEKER.
|
||
// If backend doesn't return roles, still attempt to activate it via switch-role.
|
||
// 2) Otherwise, if backend returns JOB_SEEKER but other roles exist, pick the first non-JOB_SEEKER role.
|
||
let requestedRoleKey: string | null = null;
|
||
if (
|
||
preferredRoleKey &&
|
||
!isJobSeekerRole(preferredRoleKey) &&
|
||
(discoveredRoleKeys.length === 0 || discoveredRoleKeys.includes(preferredRoleKey))
|
||
) {
|
||
requestedRoleKey = preferredRoleKey;
|
||
} else if (isJobSeekerRole(discoveredActiveRole)) {
|
||
requestedRoleKey = firstNonJobSeekerRole(discoveredRoleKeys);
|
||
}
|
||
|
||
let finalAccessToken = accessToken;
|
||
let desiredRoleKey = discoveredActiveRole;
|
||
if (finalAccessToken && requestedRoleKey && requestedRoleKey !== discoveredActiveRole) {
|
||
try {
|
||
const switchRes = await fetch("/api/auth/switch-role", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
Accept: "application/json",
|
||
Authorization: `Bearer ${finalAccessToken}`,
|
||
},
|
||
credentials: "include",
|
||
body: JSON.stringify({ role_key: requestedRoleKey }),
|
||
});
|
||
const switchPayload = await switchRes.json().catch(() => ({}));
|
||
const switchedToken = String(switchPayload?.access_token || "").trim();
|
||
if (switchRes.ok && switchedToken) {
|
||
finalAccessToken = switchedToken;
|
||
desiredRoleKey = requestedRoleKey;
|
||
}
|
||
} catch {
|
||
// Ignore switch failures; fall back to backend active role token.
|
||
}
|
||
}
|
||
|
||
if (typeof window !== "undefined" && finalAccessToken) {
|
||
window.sessionStorage.setItem("nxtgauge_access_token", finalAccessToken);
|
||
window.sessionStorage.setItem("nxtgauge_frontend_access_token", finalAccessToken);
|
||
}
|
||
|
||
const finalRole = normalizeRoleValue(
|
||
desiredRoleKey ||
|
||
backendActiveRoleKey ||
|
||
preferredRoleKey ||
|
||
firstNonJobSeekerRole(discoveredRoleKeys) ||
|
||
""
|
||
);
|
||
if (!finalRole) {
|
||
setError("No active role is assigned to this account. Please contact support.");
|
||
return;
|
||
}
|
||
const userPayload = {
|
||
id: String(data?.user?.id || ""),
|
||
email: userEmail,
|
||
full_name: String(data?.user?.full_name || data?.user?.name || data?.name || ""),
|
||
active_role: finalRole,
|
||
email_verified: Boolean(data?.user?.email_verified ?? true),
|
||
};
|
||
saveUser({ ...userPayload });
|
||
if (auth.refreshUser) {
|
||
auth.refreshUser(userPayload);
|
||
}
|
||
navigate(`/dashboard?role=${encodeURIComponent(finalRole)}`, { replace: true });
|
||
} catch {
|
||
setError("Network error during login. Please try again.");
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
const resendOtp = async () => {
|
||
if (submitting()) return;
|
||
setError("");
|
||
setSubmitting(true);
|
||
try {
|
||
const res = await fetch("/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 () => {
|
||
if (submitting()) return;
|
||
setError("");
|
||
if (otpCode().length !== 6) {
|
||
setError("Enter a valid 6-digit OTP.");
|
||
return;
|
||
}
|
||
setSubmitting(true);
|
||
try {
|
||
const verifyRes = await fetch("/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);
|
||
}
|
||
};
|
||
|
||
if (typeof window !== 'undefined') {
|
||
window.__captchaCode = captcha();
|
||
(window as any).__loginVerifyOtp = verifyThenLogin;
|
||
(window as any).__setLoginOtp = setOtp;
|
||
(window as any).__loginOtp = otp;
|
||
}
|
||
|
||
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) => {
|
||
const value = e.currentTarget.value;
|
||
setEmail(value);
|
||
void lookupRoleByEmail(value);
|
||
}}
|
||
onBlur={(e) => {
|
||
void lookupRoleByEmail(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>
|
||
<Show when={roleHint() || checkingRole()}>
|
||
<p class="validation-note" style={{ color: "#0f766e" }}>
|
||
{checkingRole() ? "Checking account role..." : `• ${roleHint()}`}
|
||
</p>
|
||
</Show>
|
||
</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={() => {
|
||
const newCaptcha = makeCaptcha();
|
||
setCaptcha(newCaptcha);
|
||
window.__captchaCode = newCaptcha;
|
||
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>
|
||
|
||
<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="/signup">Sign Up</A>
|
||
</p>
|
||
<p class="note">
|
||
<A href="/forgot-password">Forgot Password?</A>
|
||
</p>
|
||
</div>
|
||
|
||
<Show when={error()}>
|
||
<p class="error">{error()}</p>
|
||
</Show>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
);
|
||
}
|