@slyxup/ui 0.1.0 → 0.2.0

package/src/components/ForgotPassword/ForgotPassword.tsx

@@ -0,0 +1,122 @@
+import { SlyxupClient } from '@slyxup/core';
+import { type FormEvent, useEffect, useState } from 'react';
+import { CheckIcon, KeyholeMark } from '../../icons';
+
+export interface ForgotPasswordProps {
+  apiUrl?: string;
+  onSuccess?: () => void;
+  onBackToSignIn?: () => void;
+}
+
+/** Request a password-reset email. */
+export function ForgotPassword({
+  apiUrl,
+  onSuccess,
+  onBackToSignIn,
+}: ForgotPasswordProps) {
+  const [email, setEmail] = useState('');
+  const [sent, setSent] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (error) {
+      const t = setTimeout(() => setError(null), 4000);
+      return () => clearTimeout(t);
+    }
+  }, [error]);
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    setError(null);
+    try {
+      await fetch(
+        `${(apiUrl ?? process.env.NEXT_PUBLIC_SLYXUP_API_URL ?? 'https://auth.slyxup.online').replace(/\/$/, '')}/v1/verification/password/forgot`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email }),
+        }
+      );
+      setSent(true); // always success — never reveal account existence
+      onSuccess?.();
+    } catch {
+      setError('Network problem. Check your connection and try again.');
+    } finally {
+      setBusy(false);
+    }
+    void SlyxupClient; // tree-shake guard
+  }
+
+  if (sent) {
+    return (
+      <div className="slx-card">
+        <div className="slx-success-icon">
+          <CheckIcon />
+        </div>
+        <h1 className="slx-title" style={{ textAlign: 'center' }}>
+          Check your email
+        </h1>
+        <p className="slx-subtitle" style={{ textAlign: 'center' }}>
+          If an account exists for {email}, a reset link is on its way.
+        </p>
+        {onBackToSignIn && (
+          <p className="slx-footer">
+            <button type="button" className="slx-link" onClick={onBackToSignIn}>
+              Back to sign in
+            </button>
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={`slx-card${error ? ' slx-card-error' : ''}`}>
+      <div className="slx-mark">
+        <KeyholeMark />
+      </div>
+      <h1 className="slx-title">Reset your password</h1>
+      <p className="slx-subtitle">
+        Enter your email and we&apos;ll send you a reset link.
+      </p>
+
+      {error && (
+        <p className="slx-error-text" role="alert">
+          {error}
+        </p>
+      )}
+
+      <form onSubmit={onSubmit}>
+        <div className="slx-field">
+          <label className="slx-label" htmlFor="slx-forgot-email">
+            Email
+          </label>
+          <input
+            id="slx-forgot-email"
+            className="slx-input"
+            type="email"
+            autoComplete="email"
+            placeholder="you@example.com"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+        </div>
+        <button className="slx-btn" type="submit" disabled={busy}>
+          {busy && <span className="slx-spinner" aria-hidden="true" />}
+          {busy ? 'Sending…' : 'Send reset link'}
+        </button>
+      </form>
+
+      {onBackToSignIn && (
+        <p className="slx-footer">
+          <button type="button" className="slx-link" onClick={onBackToSignIn}>
+            Back to sign in
+          </button>
+        </p>
+      )}
+    </div>
+  );
+}

package/src/components/ResetPassword/ResetPassword.tsx

@@ -0,0 +1,120 @@
+import { type FormEvent, useEffect, useState } from 'react';
+import { CheckIcon, KeyholeMark } from '../../icons';
+
+export interface ResetPasswordProps {
+  /** Reset token (from email link ?token=...) */
+  token: string;
+  apiUrl?: string;
+  onSuccess?: () => void;
+}
+
+/** Set a new password using the emailed reset token. */
+export function ResetPassword({
+  token,
+  apiUrl,
+  onSuccess,
+}: ResetPasswordProps) {
+  const [password, setPassword] = useState('');
+  const [done, setDone] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (error) {
+      const t = setTimeout(() => setError(null), 4000);
+      return () => clearTimeout(t);
+    }
+  }, [error]);
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    setError(null);
+    try {
+      const base = (
+        apiUrl ??
+        process.env.NEXT_PUBLIC_SLYXUP_API_URL ??
+        'https://auth.slyxup.online'
+      ).replace(/\/$/, '');
+      const res = await fetch(`${base}/v1/verification/password/reset`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token, password }),
+      });
+      if (!res.ok) {
+        const data = await res
+          .json()
+          .catch(() => ({ error: 'Invalid or expired link' }));
+        throw new Error(data.error ?? 'Invalid or expired link');
+      }
+      setDone(true);
+      onSuccess?.();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Something went wrong.');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  if (done) {
+    return (
+      <div className="slx-card">
+        <div className="slx-success-icon">
+          <CheckIcon />
+        </div>
+        <h1 className="slx-title" style={{ textAlign: 'center' }}>
+          Password updated
+        </h1>
+        <p className="slx-subtitle" style={{ textAlign: 'center' }}>
+          Your password has been changed. Use it to sign in.
+        </p>
+        {onSuccess && (
+          <button type="button" className="slx-btn" onClick={onSuccess}>
+            Continue to sign in
+          </button>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={`slx-card${error ? ' slx-card-error' : ''}`}>
+      <div className="slx-mark">
+        <KeyholeMark />
+      </div>
+      <h1 className="slx-title">Choose a new password</h1>
+      <p className="slx-subtitle">
+        Pick something strong you haven&apos;t used before.
+      </p>
+
+      {error && (
+        <p className="slx-error-text" role="alert">
+          {error}
+        </p>
+      )}
+
+      <form onSubmit={onSubmit}>
+        <div className="slx-field">
+          <label className="slx-label" htmlFor="slx-reset-password">
+            New password
+          </label>
+          <input
+            id="slx-reset-password"
+            className="slx-input"
+            type="password"
+            autoComplete="new-password"
+            placeholder="At least 8 characters"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            minLength={8}
+          />
+        </div>
+        <button className="slx-btn" type="submit" disabled={busy}>
+          {busy && <span className="slx-spinner" aria-hidden="true" />}
+          {busy ? 'Updating…' : 'Update password'}
+        </button>
+      </form>
+    </div>
+  );
+}

package/src/components/SignIn/SignIn.tsx

@@ -0,0 +1,143 @@
+import { SlyxupError } from '@slyxup/core';
+import { useAuth } from '@slyxup/react';
+import { type FormEvent, useEffect, useRef, useState } from 'react';
+import { GitHubIcon, GoogleIcon, KeyholeMark } from '../../icons';
+
+export interface SignInProps {
+  /** Show social buttons (default true) */
+  social?: boolean;
+  /** Called after successful sign in */
+  onSuccess?: () => void;
+  /** Switch to sign up */
+  onSignUpClick?: () => void;
+}
+
+/** Email/password + OAuth sign-in card. */
+export function SignIn({
+  social = true,
+  onSuccess,
+  onSignUpClick,
+}: SignInProps) {
+  const { signIn } = useAuth();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (error) {
+      const t = setTimeout(() => setError(null), 4000);
+      return () => clearTimeout(t);
+    }
+  }, [error]);
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    setError(null);
+    try {
+      await signIn({ email, password });
+      onSuccess?.();
+    } catch (err) {
+      setError(
+        err instanceof SlyxupError
+          ? err.message
+          : 'Something went wrong. Try again.'
+      );
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function oauth(provider: 'google' | 'github') {
+    window.location.href = `/v1/oauth/${provider}`;
+  }
+
+  return (
+    <div ref={cardRef} className={`slx-card${error ? ' slx-card-error' : ''}`}>
+      <div className="slx-mark">
+        <KeyholeMark />
+      </div>
+      <h1 className="slx-title">Sign in</h1>
+      <p className="slx-subtitle">
+        Welcome back. Enter your details to continue.
+      </p>
+
+      {social && (
+        <>
+          <div className="slx-social">
+            <button
+              type="button"
+              className="slx-social-btn"
+              onClick={() => oauth('google')}
+            >
+              <GoogleIcon /> Continue with Google
+            </button>
+            <button
+              type="button"
+              className="slx-social-btn"
+              onClick={() => oauth('github')}
+            >
+              <GitHubIcon /> Continue with GitHub
+            </button>
+          </div>
+          <div className="slx-divider">or</div>
+        </>
+      )}
+
+      {error && (
+        <p className="slx-error-text" role="alert">
+          {error}
+        </p>
+      )}
+
+      <form onSubmit={onSubmit} noValidate={false}>
+        <div className="slx-field">
+          <label className="slx-label" htmlFor="slx-signin-email">
+            Email
+          </label>
+          <input
+            id="slx-signin-email"
+            className="slx-input"
+            type="email"
+            autoComplete="email"
+            placeholder="you@example.com"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+        </div>
+        <div className="slx-field">
+          <label className="slx-label" htmlFor="slx-signin-password">
+            Password
+          </label>
+          <input
+            id="slx-signin-password"
+            className="slx-input"
+            type="password"
+            autoComplete="current-password"
+            placeholder="••••••••"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            minLength={8}
+          />
+        </div>
+        <button className="slx-btn" type="submit" disabled={busy}>
+          {busy && <span className="slx-spinner" aria-hidden="true" />}
+          {busy ? 'Signing in…' : 'Sign in'}
+        </button>
+      </form>
+
+      {onSignUpClick && (
+        <p className="slx-footer">
+          Don&apos;t have an account?{' '}
+          <button type="button" className="slx-link" onClick={onSignUpClick}>
+            Sign up
+          </button>
+        </p>
+      )}
+    </div>
+  );
+}

package/src/components/SignUp/SignUp.tsx

@@ -0,0 +1,156 @@
+import { SlyxupError } from '@slyxup/core';
+import { useAuth } from '@slyxup/react';
+import { type FormEvent, useEffect, useRef, useState } from 'react';
+import { GitHubIcon, GoogleIcon, KeyholeMark } from '../../icons';
+
+export interface SignUpProps {
+  social?: boolean;
+  onSuccess?: () => void;
+  onSignInClick?: () => void;
+}
+
+/** Email/password + OAuth sign-up card. */
+export function SignUp({
+  social = true,
+  onSuccess,
+  onSignInClick,
+}: SignUpProps) {
+  const { signUp } = useAuth();
+  const [firstName, setFirstName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (error) {
+      const t = setTimeout(() => setError(null), 4000);
+      return () => clearTimeout(t);
+    }
+  }, [error]);
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    setError(null);
+    try {
+      await signUp({ email, password, firstName: firstName || undefined });
+      onSuccess?.();
+    } catch (err) {
+      setError(
+        err instanceof SlyxupError
+          ? err.message
+          : 'Something went wrong. Try again.'
+      );
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function oauth(provider: 'google' | 'github') {
+    window.location.href = `/v1/oauth/${provider}`;
+  }
+
+  return (
+    <div ref={cardRef} className={`slx-card${error ? ' slx-card-error' : ''}`}>
+      <div className="slx-mark">
+        <KeyholeMark />
+      </div>
+      <h1 className="slx-title">Create your account</h1>
+      <p className="slx-subtitle">A minute to set up. Sign in forever after.</p>
+
+      {social && (
+        <>
+          <div className="slx-social">
+            <button
+              type="button"
+              className="slx-social-btn"
+              onClick={() => oauth('google')}
+            >
+              <GoogleIcon /> Continue with Google
+            </button>
+            <button
+              type="button"
+              className="slx-social-btn"
+              onClick={() => oauth('github')}
+            >
+              <GitHubIcon /> Continue with GitHub
+            </button>
+          </div>
+          <div className="slx-divider">or</div>
+        </>
+      )}
+
+      {error && (
+        <p className="slx-error-text" role="alert">
+          {error}
+        </p>
+      )}
+
+      <form onSubmit={onSubmit}>
+        <div className="slx-field">
+          <label className="slx-label" htmlFor="slx-signup-name">
+            First name
+          </label>
+          <input
+            id="slx-signup-name"
+            className="slx-input"
+            type="text"
+            autoComplete="given-name"
+            placeholder="Ada"
+            value={firstName}
+            onChange={(e) => setFirstName(e.target.value)}
+          />
+        </div>
+        <div className="slx-field">
+          <label className="slx-label" htmlFor="slx-signup-email">
+            Email
+          </label>
+          <input
+            id="slx-signup-email"
+            className="slx-input"
+            type="email"
+            autoComplete="email"
+            placeholder="you@example.com"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+        </div>
+        <div className="slx-field">
+          <label className="slx-label" htmlFor="slx-signup-password">
+            Password
+          </label>
+          <input
+            id="slx-signup-password"
+            className="slx-input"
+            type="password"
+            autoComplete="new-password"
+            placeholder="At least 8 characters"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            minLength={8}
+          />
+          <p className="slx-hint">
+            Use 8+ characters with a mix of letters and numbers.
+          </p>
+        </div>
+        <button className="slx-btn" type="submit" disabled={busy}>
+          {busy && <span className="slx-spinner" aria-hidden="true" />}
+          {busy ? 'Creating account…' : 'Create account'}
+        </button>
+      </form>
+
+      {onSignInClick && (
+        <p className="slx-footer">
+          Already have an account?{' '}
+          <button type="button" className="slx-link" onClick={onSignInClick}>
+            Sign in
+          </button>
+        </p>
+      )}
+    </div>
+  );
+}

package/src/components/SocialButtons/SocialButtons.tsx

@@ -0,0 +1,39 @@
+import { GitHubIcon, GoogleIcon } from '../../icons';
+
+export interface SocialButtonsProps {
+  /** Show only these providers. Default: both */
+  providers?: Array<'google' | 'github'>;
+  /** OAuth start path base (default /v1/oauth) */
+  basePath?: string;
+}
+
+const META = {
+  google: { label: 'Continue with Google', Icon: GoogleIcon },
+  github: { label: 'Continue with GitHub', Icon: GitHubIcon },
+} as const;
+
+/** Provider buttons that redirect to hosted OAuth start. */
+export function SocialButtons({
+  providers = ['google', 'github'],
+  basePath = '/v1/oauth',
+}: SocialButtonsProps) {
+  return (
+    <div className="slx-social">
+      {providers.map((p) => {
+        const { label, Icon } = META[p];
+        return (
+          <button
+            key={p}
+            type="button"
+            className="slx-social-btn"
+            onClick={() => {
+              window.location.href = `${basePath}/${p}`;
+            }}
+          >
+            <Icon /> {label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/UserButton/UserButton.tsx

@@ -0,0 +1,89 @@
+import { useAuth, useUser } from '@slyxup/react';
+import { useEffect, useRef, useState } from 'react';
+
+function initials(name: string | null | undefined, email: string): string {
+  if (name?.trim()) return name.trim().slice(0, 1).toUpperCase();
+  return email.slice(0, 1).toUpperCase();
+}
+
+/** Avatar + dropdown with profile actions and sign out. */
+export function UserButton() {
+  const { isLoaded, user } = useUser();
+  const { signOut } = useAuth();
+  const [open, setOpen] = useState(false);
+  const wrapRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function onDocClick(e: MouseEvent) {
+      if (wrapRef.current && !wrapRef.current.contains(e.target as Node))
+        setOpen(false);
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') setOpen(false);
+    }
+    document.addEventListener('mousedown', onDocClick);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDocClick);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, []);
+
+  if (!isLoaded)
+    return <div className="slx-userbtn-avatar" aria-hidden="true" />;
+  const email = user?.email ?? '';
+  const name = user?.firstName;
+
+  async function onSignOut() {
+    await signOut();
+    setOpen(false);
+  }
+
+  return (
+    <div className="slx-userbtn-wrap" ref={wrapRef}>
+      <button
+        type="button"
+        className="slx-userbtn-avatar"
+        onClick={() => setOpen((o) => !o)}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-label="Account menu"
+      >
+        {user?.avatarUrl ? (
+          <img src={user.avatarUrl} alt="" />
+        ) : (
+          initials(name, email || '?')
+        )}
+      </button>
+
+      {open && (
+        <div className="slx-menu" role="menu">
+          <div className="slx-menu-header">
+            <p className="slx-menu-name">
+              {name
+                ? `${name}${user?.lastName ? ` ${user.lastName}` : ''}`
+                : email.split('@')[0]}
+            </p>
+            <p className="slx-menu-email">{email}</p>
+          </div>
+          <button
+            type="button"
+            className="slx-menu-item"
+            role="menuitem"
+            onClick={() => setOpen(false)}
+          >
+            Profile settings
+          </button>
+          <button
+            type="button"
+            className="slx-menu-item slx-menu-item-danger"
+            role="menuitem"
+            onClick={onSignOut}
+          >
+            Sign out
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}