feat: add auth pages (login, signup, password reset, onboarding)
- Create stub auth API (lib/auth.ts) with simulated delay - Add PasswordInput component with visibility toggle - Add SocialAuthButtons component (Google/Apple placeholders) - Add AuthLayout with split-panel layout and rotating testimonial - Implement login page with email/password validation and remember me - Implement signup page with password strength indicator and ToS checkbox - Implement forgot-password page with email submission and success state - Implement reset-password page with token validation from query params - Implement 4-step onboarding flow (plan selection, watchlist, invites, success) - Add ToastProvider to root app - Write 28 tests for all auth components and form validation
This commit is contained in:
255
web/src/routes/(auth)/auth-pages.test.tsx
Normal file
255
web/src/routes/(auth)/auth-pages.test.tsx
Normal file
@@ -0,0 +1,255 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { render } from "solid-js/web";
|
||||
import { Router, Route } from "@solidjs/router";
|
||||
import { MetaProvider } from "@solidjs/meta";
|
||||
import type { JSX } from "solid-js";
|
||||
|
||||
import LoginPage from "./login";
|
||||
import SignupPage from "./signup";
|
||||
import ForgotPasswordPage from "./forgot-password";
|
||||
import OnboardingPage from "./onboarding";
|
||||
|
||||
import * as auth from "~/lib/auth";
|
||||
|
||||
function mount(comp: () => JSX.Element): HTMLDivElement {
|
||||
const container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
render(() => comp(), container);
|
||||
return container;
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
document.body.innerHTML = "";
|
||||
if (!globalThis.crypto) {
|
||||
Object.defineProperty(globalThis, "crypto", { value: {} });
|
||||
}
|
||||
(globalThis.crypto as unknown as Record<string, unknown>).randomUUID = vi.fn(
|
||||
() => "test-uuid-1234",
|
||||
);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
document.body.innerHTML = "";
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
function setInputValue(input: HTMLInputElement, value: string) {
|
||||
input.value = value;
|
||||
input.dispatchEvent(
|
||||
new InputEvent("input", { bubbles: true, composed: true }),
|
||||
);
|
||||
}
|
||||
|
||||
describe("LoginPage", () => {
|
||||
function WrappedLogin() {
|
||||
return (
|
||||
<MetaProvider>
|
||||
<Router>
|
||||
<Route path="/" component={LoginPage} />
|
||||
</Router>
|
||||
</MetaProvider>
|
||||
);
|
||||
}
|
||||
|
||||
it("renders sign in form with email, password, and submit button", () => {
|
||||
mount(() => <WrappedLogin />);
|
||||
expect(document.body.textContent).toContain("Welcome back");
|
||||
expect(document.body.textContent).toContain("Email");
|
||||
expect(document.querySelector("input[type='email']")).toBeTruthy();
|
||||
expect(document.body.textContent).toContain("Sign In");
|
||||
});
|
||||
|
||||
it("renders Remember me and Forgot password links", () => {
|
||||
mount(() => <WrappedLogin />);
|
||||
expect(document.body.textContent).toContain("Remember me");
|
||||
expect(document.body.textContent).toContain("Forgot password?");
|
||||
expect(document.body.textContent).toContain("Sign up");
|
||||
expect(document.body.textContent).toContain("Or continue with");
|
||||
});
|
||||
|
||||
it("shows validation errors for empty fields on submit", () => {
|
||||
mount(() => <WrappedLogin />);
|
||||
const form = document.querySelector("form")!;
|
||||
form.dispatchEvent(
|
||||
new Event("submit", { bubbles: true, cancelable: true }),
|
||||
);
|
||||
expect(document.body.textContent).toContain("Email is required");
|
||||
expect(document.body.textContent).toContain("Password is required");
|
||||
});
|
||||
|
||||
it("shows email format error for invalid email", () => {
|
||||
mount(() => <WrappedLogin />);
|
||||
const emailInput =
|
||||
document.querySelector<HTMLInputElement>("input[type='email']")!;
|
||||
setInputValue(emailInput, "not-an-email");
|
||||
const form = document.querySelector("form")!;
|
||||
form.dispatchEvent(
|
||||
new Event("submit", { bubbles: true, cancelable: true }),
|
||||
);
|
||||
expect(document.body.textContent).toContain("Invalid email format");
|
||||
});
|
||||
|
||||
it("shows server error on failed login", async () => {
|
||||
vi.spyOn(auth, "login").mockRejectedValue(new Error("Invalid credentials"));
|
||||
mount(() => <WrappedLogin />);
|
||||
const emailInput =
|
||||
document.querySelector<HTMLInputElement>("input[type='email']")!;
|
||||
setInputValue(emailInput, "test@example.com");
|
||||
const passwordInput =
|
||||
document.querySelector<HTMLInputElement>(
|
||||
"input[type='password']",
|
||||
)!;
|
||||
setInputValue(passwordInput, "password123");
|
||||
const form = document.querySelector("form")!;
|
||||
form.dispatchEvent(
|
||||
new Event("submit", { bubbles: true, cancelable: true }),
|
||||
);
|
||||
await vi.waitFor(() => {
|
||||
expect(document.body.textContent).toContain("Invalid email or password");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("SignupPage", () => {
|
||||
function WrappedSignup() {
|
||||
return (
|
||||
<MetaProvider>
|
||||
<Router>
|
||||
<Route path="/" component={SignupPage} />
|
||||
</Router>
|
||||
</MetaProvider>
|
||||
);
|
||||
}
|
||||
|
||||
it("renders sign up form with all fields", () => {
|
||||
mount(() => <WrappedSignup />);
|
||||
expect(document.body.textContent).toContain("Create your account");
|
||||
expect(document.body.textContent).toContain("Full name");
|
||||
expect(document.body.textContent).toContain("Email");
|
||||
expect(document.body.textContent).toContain("Password");
|
||||
expect(document.body.textContent).toContain("Confirm password");
|
||||
expect(document.body.textContent).toContain("Terms of Service");
|
||||
expect(document.body.textContent).toContain("Create Account");
|
||||
});
|
||||
|
||||
it("shows validation errors for empty fields on submit", () => {
|
||||
mount(() => <WrappedSignup />);
|
||||
const form = document.querySelector("form")!;
|
||||
form.dispatchEvent(
|
||||
new Event("submit", { bubbles: true, cancelable: true }),
|
||||
);
|
||||
expect(document.body.textContent).toContain("Name is required");
|
||||
expect(document.body.textContent).toContain("Email is required");
|
||||
expect(document.body.textContent).toContain("Password is required");
|
||||
});
|
||||
|
||||
it("shows password mismatch error", () => {
|
||||
mount(() => <WrappedSignup />);
|
||||
const inputs = document.querySelectorAll<HTMLInputElement>("input");
|
||||
const passwordInput = inputs[2];
|
||||
const confirmInput = inputs[3];
|
||||
setInputValue(passwordInput, "password123");
|
||||
setInputValue(confirmInput, "different");
|
||||
const form = document.querySelector("form")!;
|
||||
form.dispatchEvent(
|
||||
new Event("submit", { bubbles: true, cancelable: true }),
|
||||
);
|
||||
expect(document.body.textContent).toContain("Passwords do not match");
|
||||
});
|
||||
|
||||
it("shows ToS error when checkbox is unchecked", () => {
|
||||
mount(() => <WrappedSignup />);
|
||||
const nameInput =
|
||||
document.querySelector<HTMLInputElement>("input[name='name']")!;
|
||||
const emailInput =
|
||||
document.querySelector<HTMLInputElement>("input[name='email']")!;
|
||||
setInputValue(nameInput, "Test User");
|
||||
setInputValue(emailInput, "test@example.com");
|
||||
const form = document.querySelector("form")!;
|
||||
form.dispatchEvent(
|
||||
new Event("submit", { bubbles: true, cancelable: true }),
|
||||
);
|
||||
expect(document.body.textContent).toContain("You must agree to the Terms");
|
||||
});
|
||||
|
||||
it("renders Log in link and social buttons", () => {
|
||||
mount(() => <WrappedSignup />);
|
||||
expect(document.body.textContent).toContain("Log in");
|
||||
expect(document.body.textContent).toContain("Or continue with");
|
||||
});
|
||||
});
|
||||
|
||||
describe("ForgotPasswordPage", () => {
|
||||
function WrappedForgot() {
|
||||
return (
|
||||
<MetaProvider>
|
||||
<Router>
|
||||
<Route path="/" component={ForgotPasswordPage} />
|
||||
</Router>
|
||||
</MetaProvider>
|
||||
);
|
||||
}
|
||||
|
||||
it("renders forgot password form", () => {
|
||||
mount(() => <WrappedForgot />);
|
||||
expect(document.body.textContent).toContain("Forgot password?");
|
||||
expect(document.body.textContent).toContain("Send Reset Link");
|
||||
expect(document.body.textContent).toContain("Back to sign in");
|
||||
});
|
||||
|
||||
it("shows validation error for empty email", () => {
|
||||
mount(() => <WrappedForgot />);
|
||||
const form = document.querySelector("form")!;
|
||||
form.dispatchEvent(
|
||||
new Event("submit", { bubbles: true, cancelable: true }),
|
||||
);
|
||||
expect(document.body.textContent).toContain("Email is required");
|
||||
});
|
||||
|
||||
it("shows success state after submission", async () => {
|
||||
vi.spyOn(auth, "forgotPassword").mockResolvedValue(undefined);
|
||||
mount(() => <WrappedForgot />);
|
||||
const emailInput =
|
||||
document.querySelector<HTMLInputElement>("input[type='email']")!;
|
||||
setInputValue(emailInput, "test@example.com");
|
||||
const form = document.querySelector("form")!;
|
||||
form.dispatchEvent(
|
||||
new Event("submit", { bubbles: true, cancelable: true }),
|
||||
);
|
||||
await vi.waitFor(() => {
|
||||
expect(document.body.textContent).toContain("Check your email");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("OnboardingPage", () => {
|
||||
function WrappedOnboarding() {
|
||||
return (
|
||||
<MetaProvider>
|
||||
<Router>
|
||||
<Route path="/" component={OnboardingPage} />
|
||||
</Router>
|
||||
</MetaProvider>
|
||||
);
|
||||
}
|
||||
|
||||
it("renders step 1 (Choose Plan) by default with plan cards", () => {
|
||||
mount(() => <WrappedOnboarding />);
|
||||
expect(document.body.textContent).toContain("Choose your plan");
|
||||
expect(document.body.textContent).toContain("Basic");
|
||||
expect(document.body.textContent).toContain("Plus");
|
||||
expect(document.body.textContent).toContain("Premium");
|
||||
expect(document.body.textContent).toContain("Popular");
|
||||
});
|
||||
|
||||
it("advances to step 2 when Continue is clicked", () => {
|
||||
mount(() => <WrappedOnboarding />);
|
||||
const continueBtn = [...document.querySelectorAll("button")].find((b) =>
|
||||
b.textContent?.includes("Continue"),
|
||||
)!;
|
||||
continueBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(document.body.textContent).toContain(
|
||||
"Add your first watchlist item",
|
||||
);
|
||||
});
|
||||
});
|
||||
127
web/src/routes/(auth)/forgot-password.tsx
Normal file
127
web/src/routes/(auth)/forgot-password.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
import { createSignal, Show } from "solid-js";
|
||||
import { Title } from "@solidjs/meta";
|
||||
import { AuthLayout } from "~/components/auth";
|
||||
import { Input } from "~/components/ui";
|
||||
import { Button } from "~/components/ui";
|
||||
import { forgotPassword } from "~/lib/auth";
|
||||
|
||||
const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
||||
export default function ForgotPasswordPage() {
|
||||
const [email, setEmail] = createSignal("");
|
||||
const [error, setError] = createSignal("");
|
||||
const [loading, setLoading] = createSignal(false);
|
||||
const [sent, setSent] = createSignal(false);
|
||||
|
||||
function validate(): boolean {
|
||||
if (!email().trim()) {
|
||||
setError("Email is required");
|
||||
return false;
|
||||
}
|
||||
if (!EMAIL_REGEX.test(email())) {
|
||||
setError("Invalid email format");
|
||||
return false;
|
||||
}
|
||||
setError("");
|
||||
return true;
|
||||
}
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
if (!validate()) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
await forgotPassword(email());
|
||||
setSent(true);
|
||||
} catch {
|
||||
setError("Something went wrong. Please try again.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthLayout>
|
||||
<Title>Forgot Password — ShieldAI</Title>
|
||||
<div class="flex flex-col gap-6">
|
||||
<Show
|
||||
when={!sent()}
|
||||
fallback={
|
||||
<div class="flex flex-col items-center gap-4 py-4 text-center">
|
||||
<div class="h-12 w-12 rounded-full bg-[var(--color-success-bg)] flex items-center justify-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 text-[var(--color-success)]"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M22 2L11 13" />
|
||||
<path d="M22 2L15 22L11 13L2 9L22 2Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-[var(--color-text-primary)]">
|
||||
Check your email
|
||||
</h3>
|
||||
<p class="text-sm text-[var(--color-text-secondary)]">
|
||||
We've sent a password reset link to{" "}
|
||||
<span class="font-medium text-[var(--color-text-primary)]">
|
||||
{email()}
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-xs text-[var(--color-text-tertiary)]">
|
||||
Didn't receive the email?{" "}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSent(false)}
|
||||
class="text-[var(--color-brand-primary)] hover:underline cursor-pointer"
|
||||
>
|
||||
Try again
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div class="text-center">
|
||||
<h2 class="text-2xl font-bold text-[var(--color-text-primary)]">
|
||||
Forgot password?
|
||||
</h2>
|
||||
<p class="text-sm text-[var(--color-text-secondary)] mt-1">
|
||||
Enter your email and we'll send you a reset link
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} class="flex flex-col gap-4">
|
||||
<Input
|
||||
label="Email"
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="you@example.com"
|
||||
value={email()}
|
||||
onInput={(e) => {
|
||||
setEmail(e.currentTarget.value);
|
||||
setError("");
|
||||
}}
|
||||
error={error()}
|
||||
required
|
||||
/>
|
||||
<Button type="submit" loading={loading()} class="w-full">
|
||||
Send Reset Link
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<p class="text-center text-sm text-[var(--color-text-secondary)]">
|
||||
Remember your password?{" "}
|
||||
<a
|
||||
href="/login"
|
||||
class="text-[var(--color-brand-primary)] hover:text-[var(--color-brand-primary-light)] font-medium transition-colors"
|
||||
>
|
||||
Back to sign in
|
||||
</a>
|
||||
</p>
|
||||
</Show>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
139
web/src/routes/(auth)/login.tsx
Normal file
139
web/src/routes/(auth)/login.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
import { createSignal, Show } from "solid-js";
|
||||
import { Title } from "@solidjs/meta";
|
||||
import { useNavigate } from "@solidjs/router";
|
||||
import { AuthLayout, SocialAuthButtons } from "~/components/auth";
|
||||
import { Input } from "~/components/ui";
|
||||
import { Button } from "~/components/ui";
|
||||
import { login } from "~/lib/auth";
|
||||
|
||||
const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
||||
interface FormErrors {
|
||||
email?: string;
|
||||
password?: string;
|
||||
}
|
||||
|
||||
export default function LoginPage() {
|
||||
const navigate = useNavigate();
|
||||
const [email, setEmail] = createSignal("");
|
||||
const [password, setPassword] = createSignal("");
|
||||
const [rememberMe, setRememberMe] = createSignal(false);
|
||||
const [errors, setErrors] = createSignal<FormErrors>({});
|
||||
const [loading, setLoading] = createSignal(false);
|
||||
const [serverError, setServerError] = createSignal("");
|
||||
|
||||
function validate(): boolean {
|
||||
const errs: FormErrors = {};
|
||||
if (!email().trim()) errs.email = "Email is required";
|
||||
else if (!EMAIL_REGEX.test(email())) errs.email = "Invalid email format";
|
||||
if (!password()) errs.password = "Password is required";
|
||||
setErrors(errs);
|
||||
return Object.keys(errs).length === 0;
|
||||
}
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
setServerError("");
|
||||
if (!validate()) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
await login(email(), password(), rememberMe());
|
||||
navigate("/dashboard", { replace: true });
|
||||
} catch {
|
||||
setServerError("Invalid email or password. Please try again.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthLayout>
|
||||
<Title>Sign In — ShieldAI</Title>
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="text-center">
|
||||
<h2 class="text-2xl font-bold text-[var(--color-text-primary)]">
|
||||
Welcome back
|
||||
</h2>
|
||||
<p class="text-sm text-[var(--color-text-secondary)] mt-1">
|
||||
Sign in to your account
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Show when={serverError()}>
|
||||
<div
|
||||
class="px-4 py-3 rounded-lg text-sm bg-[var(--color-error-bg)] text-[var(--color-error)] border border-[var(--color-error)]/30"
|
||||
role="alert"
|
||||
>
|
||||
{serverError()}
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<form onSubmit={handleSubmit} class="flex flex-col gap-4">
|
||||
<Input
|
||||
label="Email"
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="you@example.com"
|
||||
value={email()}
|
||||
onInput={(e) => setEmail(e.currentTarget.value)}
|
||||
error={errors().email}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="Password"
|
||||
type="password"
|
||||
name="password"
|
||||
placeholder="Enter your password"
|
||||
value={password()}
|
||||
onInput={(e) => setPassword(e.currentTarget.value)}
|
||||
error={errors().password}
|
||||
required
|
||||
/>
|
||||
<div class="flex items-center justify-between">
|
||||
<label class="flex items-center gap-2 text-sm text-[var(--color-text-secondary)] cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={rememberMe()}
|
||||
onChange={() => setRememberMe(!rememberMe())}
|
||||
class="rounded border-[var(--color-border)] text-[var(--color-brand-primary)] focus:ring-[var(--color-brand-primary)]"
|
||||
/>
|
||||
Remember me
|
||||
</label>
|
||||
<a
|
||||
href="/forgot-password"
|
||||
class="text-sm text-[var(--color-brand-primary)] hover:text-[var(--color-brand-primary-light)] transition-colors"
|
||||
>
|
||||
Forgot password?
|
||||
</a>
|
||||
</div>
|
||||
<Button type="submit" loading={loading()} class="w-full">
|
||||
Sign In
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-[var(--color-border)]" />
|
||||
</div>
|
||||
<div class="relative flex justify-center text-xs uppercase">
|
||||
<span class="bg-[var(--gradient-card-start)] px-2 text-[var(--color-text-tertiary)]">
|
||||
Or continue with
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SocialAuthButtons />
|
||||
|
||||
<p class="text-center text-sm text-[var(--color-text-secondary)]">
|
||||
Don't have an account?{" "}
|
||||
<a
|
||||
href="/signup"
|
||||
class="text-[var(--color-brand-primary)] hover:text-[var(--color-brand-primary-light)] font-medium transition-colors"
|
||||
>
|
||||
Sign up
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
418
web/src/routes/(auth)/onboarding.tsx
Normal file
418
web/src/routes/(auth)/onboarding.tsx
Normal file
@@ -0,0 +1,418 @@
|
||||
import { createSignal, For, Show } from "solid-js";
|
||||
import { Title } from "@solidjs/meta";
|
||||
import { useNavigate } from "@solidjs/router";
|
||||
import { Button, Input, Badge } from "~/components/ui";
|
||||
import { submitOnboarding } from "~/lib/auth";
|
||||
import type { OnboardingData } from "~/lib/auth";
|
||||
|
||||
const plans = [
|
||||
{
|
||||
id: "basic",
|
||||
name: "Basic",
|
||||
price: "Free",
|
||||
features: ["Basic monitoring", "1 email address", "1 phone number"],
|
||||
},
|
||||
{
|
||||
id: "plus",
|
||||
name: "Plus",
|
||||
price: "$9.99/mo",
|
||||
features: [
|
||||
"Advanced monitoring",
|
||||
"Unlimited emails & phones",
|
||||
"Dark web scanning",
|
||||
"Real-time alerts",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "premium",
|
||||
name: "Premium",
|
||||
price: "$19.99/mo",
|
||||
features: [
|
||||
"Everything in Plus",
|
||||
"Family members (up to 5)",
|
||||
"Priority support",
|
||||
"Identity restoration assistance",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const steps = [
|
||||
"Choose Plan",
|
||||
"Add Watchlist",
|
||||
"Invite Family",
|
||||
"Complete",
|
||||
];
|
||||
|
||||
export default function OnboardingPage() {
|
||||
const navigate = useNavigate();
|
||||
const [step, setStep] = createSignal(0);
|
||||
const [plan, setPlan] = createSignal("plus");
|
||||
const [watchlistItem, setWatchlistItem] = createSignal("");
|
||||
const [watchlistItems, setWatchlistItems] = createSignal<string[]>([]);
|
||||
const [familyInput, setFamilyInput] = createSignal("");
|
||||
const [familyInvites, setFamilyInvites] = createSignal<string[]>([]);
|
||||
const [submitting, setSubmitting] = createSignal(false);
|
||||
const [watchlistError, setWatchlistError] = createSignal("");
|
||||
|
||||
function addWatchlistItem() {
|
||||
const val = watchlistItem().trim();
|
||||
if (!val) {
|
||||
setWatchlistError("Please enter an email or phone number");
|
||||
return;
|
||||
}
|
||||
if (watchlistItems().includes(val)) {
|
||||
setWatchlistError("This item is already in your watchlist");
|
||||
return;
|
||||
}
|
||||
setWatchlistError("");
|
||||
setWatchlistItems((prev) => [...prev, val]);
|
||||
setWatchlistItem("");
|
||||
}
|
||||
|
||||
function removeWatchlistItem(idx: number) {
|
||||
setWatchlistItems((prev) => prev.filter((_, i) => i !== idx));
|
||||
}
|
||||
|
||||
function addFamilyInvite() {
|
||||
const val = familyInput().trim();
|
||||
if (!val) return;
|
||||
if (familyInvites().includes(val)) return;
|
||||
setFamilyInvites((prev) => [...prev, val]);
|
||||
setFamilyInput("");
|
||||
}
|
||||
|
||||
function removeFamilyInvite(idx: number) {
|
||||
setFamilyInvites((prev) => prev.filter((_, i) => i !== idx));
|
||||
}
|
||||
|
||||
async function completeOnboarding() {
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const data: OnboardingData = {
|
||||
plan: plan(),
|
||||
watchlistItems: watchlistItems(),
|
||||
familyInvites: familyInvites(),
|
||||
};
|
||||
await submitOnboarding(data);
|
||||
setStep(3);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<main class="min-h-screen flex flex-col items-center justify-center py-8 md:py-12 px-4">
|
||||
<Title>Set Up Your Account — ShieldAI</Title>
|
||||
|
||||
<div class="w-full max-w-2xl">
|
||||
<div class="flex items-center justify-center gap-2 mb-8">
|
||||
<For each={steps}>
|
||||
{(label, i) => (
|
||||
<>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<div
|
||||
class={`h-8 w-8 rounded-full flex items-center justify-center text-sm font-medium transition-all duration-300 ${
|
||||
i() <= step()
|
||||
? "gradient-primary text-white"
|
||||
: "bg-[var(--color-bg-tertiary)] text-[var(--color-text-tertiary)]"
|
||||
}`}
|
||||
>
|
||||
{i() < step() ? (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="3"
|
||||
>
|
||||
<path d="M20 6L9 17L4 12" />
|
||||
</svg>
|
||||
) : (
|
||||
i() + 1
|
||||
)}
|
||||
</div>
|
||||
<span
|
||||
class={`text-xs hidden sm:block ${
|
||||
i() <= step()
|
||||
? "text-[var(--color-text-primary)] font-medium"
|
||||
: "text-[var(--color-text-tertiary)]"
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
{i() < steps.length - 1 && (
|
||||
<div
|
||||
class={`flex-1 h-0.5 ${
|
||||
i() < step()
|
||||
? "gradient-primary"
|
||||
: "bg-[var(--color-bg-tertiary)]"
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
|
||||
<div class="gradient-card border border-[var(--color-border)]/50 rounded-xl p-6 md:p-8">
|
||||
<Show when={step() === 0}>
|
||||
<div class="flex flex-col gap-6">
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-[var(--color-text-primary)]">
|
||||
Choose your plan
|
||||
</h2>
|
||||
<p class="text-sm text-[var(--color-text-secondary)] mt-1">
|
||||
Select the plan that works best for you. You can upgrade anytime.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<For each={plans}>
|
||||
{(p) => (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPlan(p.id)}
|
||||
class={`relative flex flex-col gap-3 p-4 rounded-lg border-2 text-left transition-all duration-200 cursor-pointer ${
|
||||
plan() === p.id
|
||||
? "border-[var(--color-brand-primary)] bg-[var(--color-brand-primary)]/5"
|
||||
: "border-[var(--color-border)] hover:border-[var(--color-border-dark)]"
|
||||
}`}
|
||||
>
|
||||
{p.id === "premium" && (
|
||||
<Badge
|
||||
variant="info"
|
||||
class="absolute -top-2.5 right-3"
|
||||
>
|
||||
Popular
|
||||
</Badge>
|
||||
)}
|
||||
<div>
|
||||
<p class="font-semibold text-[var(--color-text-primary)]">
|
||||
{p.name}
|
||||
</p>
|
||||
<p class="text-lg font-bold text-[var(--color-brand-primary)] mt-1">
|
||||
{p.price}
|
||||
</p>
|
||||
</div>
|
||||
<ul class="flex flex-col gap-1.5">
|
||||
<For each={p.features}>
|
||||
{(f) => (
|
||||
<li class="flex items-start gap-2 text-sm text-[var(--color-text-secondary)]">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4 mt-0.5 shrink-0 text-[var(--color-success)]"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M20 6L9 17L4 12" />
|
||||
</svg>
|
||||
{f}
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
<Button onClick={() => setStep(1)} class="w-full">
|
||||
Continue
|
||||
</Button>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={step() === 1}>
|
||||
<div class="flex flex-col gap-6">
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-[var(--color-text-primary)]">
|
||||
Add your first watchlist item
|
||||
</h2>
|
||||
<p class="text-sm text-[var(--color-text-secondary)] mt-1">
|
||||
Add an email address or phone number to monitor.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<div class="flex-1">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Email or phone number"
|
||||
value={watchlistItem()}
|
||||
onInput={(e) => {
|
||||
setWatchlistItem(e.currentTarget.value);
|
||||
setWatchlistError("");
|
||||
}}
|
||||
error={watchlistError()}
|
||||
/>
|
||||
</div>
|
||||
<Button onClick={addWatchlistItem} variant="secondary">
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
<Show when={watchlistItems().length > 0}>
|
||||
<div class="flex flex-col gap-2">
|
||||
<For each={watchlistItems()}>
|
||||
{(item, i) => (
|
||||
<div class="flex items-center justify-between px-3 py-2 rounded-lg bg-[var(--color-bg-secondary)]">
|
||||
<span class="text-sm text-[var(--color-text-primary)]">
|
||||
{item}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeWatchlistItem(i())}
|
||||
class="text-[var(--color-text-tertiary)] hover:text-[var(--color-error)] transition-colors cursor-pointer"
|
||||
aria-label={`Remove ${item}`}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M18 6L6 18M6 6L18 18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
<div class="flex gap-3">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setStep(0)}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setStep(2)}
|
||||
class="flex-1"
|
||||
>
|
||||
{watchlistItems().length > 0
|
||||
? "Continue"
|
||||
: "Skip for now"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={step() === 2}>
|
||||
<div class="flex flex-col gap-6">
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-[var(--color-text-primary)]">
|
||||
Invite family members
|
||||
</h2>
|
||||
<p class="text-sm text-[var(--color-text-secondary)] mt-1">
|
||||
Optional. Add family members to extend protection.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<div class="flex-1">
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="Family member's email"
|
||||
value={familyInput()}
|
||||
onInput={(e) => setFamilyInput(e.currentTarget.value)}
|
||||
/>
|
||||
</div>
|
||||
<Button onClick={addFamilyInvite} variant="secondary">
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
<Show when={familyInvites().length > 0}>
|
||||
<div class="flex flex-col gap-2">
|
||||
<For each={familyInvites()}>
|
||||
{(email, i) => (
|
||||
<div class="flex items-center justify-between px-3 py-2 rounded-lg bg-[var(--color-bg-secondary)]">
|
||||
<span class="text-sm text-[var(--color-text-primary)]">
|
||||
{email}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeFamilyInvite(i())}
|
||||
class="text-[var(--color-text-tertiary)] hover:text-[var(--color-error)] transition-colors cursor-pointer"
|
||||
aria-label={`Remove ${email}`}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M18 6L6 18M6 6L18 18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
<div class="flex gap-3">
|
||||
<Button variant="ghost" onClick={() => setStep(1)}>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setStep(3)}
|
||||
class="flex-1"
|
||||
>
|
||||
{familyInvites().length > 0
|
||||
? "Continue"
|
||||
: "Skip for now"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={step() === 3}>
|
||||
<div class="flex flex-col items-center gap-6 py-8 text-center">
|
||||
<div class="h-16 w-16 rounded-full gradient-primary flex items-center justify-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-8 w-8 text-white"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M20 6L9 17L4 12" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-[var(--color-text-primary)]">
|
||||
You're all set!
|
||||
</h2>
|
||||
<p class="text-sm text-[var(--color-text-secondary)] mt-2 max-w-sm">
|
||||
Your ShieldAI account is ready. We're already monitoring your
|
||||
selected items and will alert you of any threats.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 w-full max-w-xs">
|
||||
<Button
|
||||
onClick={() => navigate("/dashboard", { replace: true })}
|
||||
class="w-full"
|
||||
>
|
||||
Go to Dashboard
|
||||
</Button>
|
||||
{!submitting && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={completeOnboarding}
|
||||
class="w-full"
|
||||
>
|
||||
Submit onboarding data
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
146
web/src/routes/(auth)/reset-password.tsx
Normal file
146
web/src/routes/(auth)/reset-password.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
import { createSignal, Show } from "solid-js";
|
||||
import { Title } from "@solidjs/meta";
|
||||
import { useSearchParams, useNavigate } from "@solidjs/router";
|
||||
import { AuthLayout, PasswordInput } from "~/components/auth";
|
||||
import { Button } from "~/components/ui";
|
||||
import { resetPassword } from "~/lib/auth";
|
||||
|
||||
interface FormErrors {
|
||||
password?: string;
|
||||
confirmPassword?: string;
|
||||
}
|
||||
|
||||
export default function ResetPasswordPage() {
|
||||
const [searchParams] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
const token = () => (Array.isArray(searchParams.token) ? searchParams.token[0] : searchParams.token) ?? "";
|
||||
const [password, setPassword] = createSignal("");
|
||||
const [confirmPassword, setConfirmPassword] = createSignal("");
|
||||
const [errors, setErrors] = createSignal<FormErrors>({});
|
||||
const [loading, setLoading] = createSignal(false);
|
||||
const [serverError, setServerError] = createSignal("");
|
||||
const [success, setSuccess] = createSignal(false);
|
||||
|
||||
function validate(): boolean {
|
||||
const errs: FormErrors = {};
|
||||
if (!password()) errs.password = "Password is required";
|
||||
else if (password().length < 8)
|
||||
errs.password = "Password must be at least 8 characters";
|
||||
if (password() !== confirmPassword())
|
||||
errs.confirmPassword = "Passwords do not match";
|
||||
setErrors(errs);
|
||||
return Object.keys(errs).length === 0;
|
||||
}
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
setServerError("");
|
||||
if (!validate()) return;
|
||||
if (!token()) {
|
||||
setServerError("Invalid or missing reset token.");
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
try {
|
||||
await resetPassword(token(), password());
|
||||
setSuccess(true);
|
||||
} catch {
|
||||
setServerError("Something went wrong. Please try again.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthLayout>
|
||||
<Title>Reset Password — ShieldAI</Title>
|
||||
<div class="flex flex-col gap-6">
|
||||
<Show
|
||||
when={!success()}
|
||||
fallback={
|
||||
<div class="flex flex-col items-center gap-4 py-4 text-center">
|
||||
<div class="h-12 w-12 rounded-full bg-[var(--color-success-bg)] flex items-center justify-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 text-[var(--color-success)]"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M20 6L9 17L4 12" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-[var(--color-text-primary)]">
|
||||
Password reset successful
|
||||
</h3>
|
||||
<p class="text-sm text-[var(--color-text-secondary)]">
|
||||
Your password has been updated.
|
||||
</p>
|
||||
<Button onClick={() => navigate("/login", { replace: true })}>
|
||||
Back to Sign In
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div class="text-center">
|
||||
<h2 class="text-2xl font-bold text-[var(--color-text-primary)]">
|
||||
Set new password
|
||||
</h2>
|
||||
<p class="text-sm text-[var(--color-text-secondary)] mt-1">
|
||||
Enter your new password below
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Show when={serverError()}>
|
||||
<div
|
||||
class="px-4 py-3 rounded-lg text-sm bg-[var(--color-error-bg)] text-[var(--color-error)] border border-[var(--color-error)]/30"
|
||||
role="alert"
|
||||
>
|
||||
{serverError()}
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={!token()}>
|
||||
<div
|
||||
class="px-4 py-3 rounded-lg text-sm bg-[var(--color-warning-bg)] text-[var(--color-warning)] border border-[var(--color-warning)]/30"
|
||||
role="alert"
|
||||
>
|
||||
Invalid or missing reset token. Please request a new password
|
||||
reset.
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<form onSubmit={handleSubmit} class="flex flex-col gap-4">
|
||||
<PasswordInput
|
||||
label="New password"
|
||||
name="password"
|
||||
placeholder="Enter new password"
|
||||
value={password()}
|
||||
onInput={(e) => setPassword(e.currentTarget.value)}
|
||||
error={errors().password}
|
||||
required
|
||||
/>
|
||||
<PasswordInput
|
||||
label="Confirm new password"
|
||||
name="confirmPassword"
|
||||
placeholder="Re-enter new password"
|
||||
value={confirmPassword()}
|
||||
onInput={(e) => setConfirmPassword(e.currentTarget.value)}
|
||||
error={errors().confirmPassword}
|
||||
required
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
loading={loading()}
|
||||
disabled={!token()}
|
||||
class="w-full"
|
||||
>
|
||||
Reset Password
|
||||
</Button>
|
||||
</form>
|
||||
</Show>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
218
web/src/routes/(auth)/signup.tsx
Normal file
218
web/src/routes/(auth)/signup.tsx
Normal file
@@ -0,0 +1,218 @@
|
||||
import { createSignal, createMemo, Show } from "solid-js";
|
||||
import { Title } from "@solidjs/meta";
|
||||
import { useNavigate } from "@solidjs/router";
|
||||
import { AuthLayout, PasswordInput, SocialAuthButtons } from "~/components/auth";
|
||||
import { Input } from "~/components/ui";
|
||||
import { Button } from "~/components/ui";
|
||||
import { signup } from "~/lib/auth";
|
||||
|
||||
const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
||||
interface FormErrors {
|
||||
name?: string;
|
||||
email?: string;
|
||||
password?: string;
|
||||
confirmPassword?: string;
|
||||
terms?: string;
|
||||
}
|
||||
|
||||
type StrengthLevel = "none" | "weak" | "medium" | "strong";
|
||||
|
||||
export default function SignupPage() {
|
||||
const navigate = useNavigate();
|
||||
const [name, setName] = createSignal("");
|
||||
const [email, setEmail] = createSignal("");
|
||||
const [password, setPassword] = createSignal("");
|
||||
const [confirmPassword, setConfirmPassword] = createSignal("");
|
||||
const [agreeTerms, setAgreeTerms] = createSignal(false);
|
||||
const [errors, setErrors] = createSignal<FormErrors>({});
|
||||
const [loading, setLoading] = createSignal(false);
|
||||
const [serverError, setServerError] = createSignal("");
|
||||
|
||||
const strength = createMemo<{ level: StrengthLevel; label: string; percent: number }>(() => {
|
||||
const pwd = password();
|
||||
if (!pwd) return { level: "none", label: "", percent: 0 };
|
||||
let score = 0;
|
||||
if (pwd.length >= 8) score++;
|
||||
if (pwd.length >= 12) score++;
|
||||
if (/[a-z]/.test(pwd) && /[A-Z]/.test(pwd)) score++;
|
||||
if (/\d/.test(pwd)) score++;
|
||||
if (/[^a-zA-Z0-9]/.test(pwd)) score++;
|
||||
if (score <= 1) return { level: "weak", label: "Weak", percent: 25 };
|
||||
if (score <= 3) return { level: "medium", label: "Medium", percent: 60 };
|
||||
return { level: "strong", label: "Strong", percent: 100 };
|
||||
});
|
||||
|
||||
const strengthColors: Record<string, string> = {
|
||||
weak: "bg-[var(--color-error)]",
|
||||
medium: "bg-[var(--color-warning)]",
|
||||
strong: "bg-[var(--color-success)]",
|
||||
};
|
||||
|
||||
function validate(): boolean {
|
||||
const errs: FormErrors = {};
|
||||
if (!name().trim()) errs.name = "Name is required";
|
||||
if (!email().trim()) errs.email = "Email is required";
|
||||
else if (!EMAIL_REGEX.test(email())) errs.email = "Invalid email format";
|
||||
if (!password()) errs.password = "Password is required";
|
||||
else if (password().length < 8) errs.password = "Password must be at least 8 characters";
|
||||
if (password() !== confirmPassword()) errs.confirmPassword = "Passwords do not match";
|
||||
if (!agreeTerms()) errs.terms = "You must agree to the Terms of Service";
|
||||
setErrors(errs);
|
||||
return Object.keys(errs).length === 0;
|
||||
}
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
setServerError("");
|
||||
if (!validate()) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
await signup(name(), email(), password());
|
||||
navigate("/onboarding", { replace: true });
|
||||
} catch {
|
||||
setServerError("Something went wrong. Please try again.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthLayout>
|
||||
<Title>Create Account — ShieldAI</Title>
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="text-center">
|
||||
<h2 class="text-2xl font-bold text-[var(--color-text-primary)]">
|
||||
Create your account
|
||||
</h2>
|
||||
<p class="text-sm text-[var(--color-text-secondary)] mt-1">
|
||||
Start protecting your identity
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Show when={serverError()}>
|
||||
<div
|
||||
class="px-4 py-3 rounded-lg text-sm bg-[var(--color-error-bg)] text-[var(--color-error)] border border-[var(--color-error)]/30"
|
||||
role="alert"
|
||||
>
|
||||
{serverError()}
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<form onSubmit={handleSubmit} class="flex flex-col gap-4">
|
||||
<Input
|
||||
label="Full name"
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="John Doe"
|
||||
value={name()}
|
||||
onInput={(e) => setName(e.currentTarget.value)}
|
||||
error={errors().name}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="Email"
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="you@example.com"
|
||||
value={email()}
|
||||
onInput={(e) => setEmail(e.currentTarget.value)}
|
||||
error={errors().email}
|
||||
required
|
||||
/>
|
||||
<div>
|
||||
<PasswordInput
|
||||
label="Password"
|
||||
name="password"
|
||||
placeholder="Create a strong password"
|
||||
value={password()}
|
||||
onInput={(e) => setPassword(e.currentTarget.value)}
|
||||
error={errors().password}
|
||||
required
|
||||
/>
|
||||
<Show when={strength().level !== "none"}>
|
||||
<div class="mt-2">
|
||||
<div class="h-1.5 w-full bg-[var(--color-bg-tertiary)] rounded-full overflow-hidden">
|
||||
<div
|
||||
class={`h-full rounded-full transition-all duration-300 ${strengthColors[strength().level]}`}
|
||||
style={{ width: `${strength().percent}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p class={`text-xs mt-1 text-[var(--color-text-tertiary)]`}>
|
||||
Password strength:{" "}
|
||||
<span
|
||||
class={`font-medium ${
|
||||
strength().level === "weak"
|
||||
? "text-[var(--color-error)]"
|
||||
: strength().level === "medium"
|
||||
? "text-[var(--color-warning)]"
|
||||
: "text-[var(--color-success)]"
|
||||
}`}
|
||||
>
|
||||
{strength().label}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
<PasswordInput
|
||||
label="Confirm password"
|
||||
name="confirmPassword"
|
||||
placeholder="Re-enter your password"
|
||||
value={confirmPassword()}
|
||||
onInput={(e) => setConfirmPassword(e.currentTarget.value)}
|
||||
error={errors().confirmPassword}
|
||||
required
|
||||
/>
|
||||
<label class="flex items-start gap-2 text-sm text-[var(--color-text-secondary)] cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={agreeTerms()}
|
||||
onChange={() => setAgreeTerms(!agreeTerms())}
|
||||
class="mt-0.5 rounded border-[var(--color-border)] text-[var(--color-brand-primary)] focus:ring-[var(--color-brand-primary)]"
|
||||
/>
|
||||
<span>
|
||||
I agree to the{" "}
|
||||
<a href="/terms" class="text-[var(--color-brand-primary)] hover:underline">
|
||||
Terms of Service
|
||||
</a>{" "}
|
||||
and{" "}
|
||||
<a href="/privacy" class="text-[var(--color-brand-primary)] hover:underline">
|
||||
Privacy Policy
|
||||
</a>
|
||||
</span>
|
||||
</label>
|
||||
<Show when={errors().terms}>
|
||||
<p class="text-sm text-[var(--color-error)] -mt-2">{errors().terms}</p>
|
||||
</Show>
|
||||
<Button type="submit" loading={loading()} class="w-full">
|
||||
Create Account
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-[var(--color-border)]" />
|
||||
</div>
|
||||
<div class="relative flex justify-center text-xs uppercase">
|
||||
<span class="bg-[var(--gradient-card-start)] px-2 text-[var(--color-text-tertiary)]">
|
||||
Or continue with
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SocialAuthButtons />
|
||||
|
||||
<p class="text-center text-sm text-[var(--color-text-secondary)]">
|
||||
Already have an account?{" "}
|
||||
<a
|
||||
href="/login"
|
||||
class="text-[var(--color-brand-primary)] hover:text-[var(--color-brand-primary-light)] font-medium transition-colors"
|
||||
>
|
||||
Log in
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user