@slyxup/ui 0.2.14 → 0.3.0

package/src/components/ResetPassword/ResetPassword.tsx

@@ -1,122 +0,0 @@
-import { type FormEvent, useEffect, useState } from 'react';
-import { CheckIcon, KeyholeMark } from '../../icons';
-import { injectStyles } from '../../styles';
-
-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) {
-  injectStyles();
-  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

@@ -1,239 +0,0 @@
-import { SlyxupError } from '@slyxup/core';
-import { useAuth } from '@slyxup/react';
-import { type FormEvent, useEffect, useRef, useState } from 'react';
-import { GitHubIcon, GoogleIcon, KeyholeMark } from '../../icons';
-import { injectStyles } from '../../styles';
-
-export interface SignInProps {
-  /** Show social buttons (default true) */
-  social?: boolean;
-  /** Called after successful sign in */
-  onSuccess?: () => void;
-  /** Switch to sign up */
-  onSignUpClick?: () => void;
-  /** Show "Forgot password?" — navigates via this callback */
-  onForgotPasswordClick?: () => void;
-}
-
-/** Email/password + OAuth sign-in card. */
-export function SignIn({
-  social = true,
-  onSuccess,
-  onSignUpClick,
-  onForgotPasswordClick,
-}: SignInProps) {
-  injectStyles();
-  const { signIn, completeSignIn, client } = useAuth() as unknown as {
-    signIn: ReturnType<typeof useAuth>['signIn'];
-    completeSignIn: ReturnType<typeof useAuth>['completeSignIn'];
-    client: { publishableKey?: string; apiUrl: string };
-  };
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [challengeToken, setChallengeToken] = useState<string | null>(null);
-  const [tfaCode, setTfaCode] = useState('');
-  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 {
-      const res = await signIn({ email, password });
-      if (res && 'challengeToken' in res) {
-        setChallengeToken(res.challengeToken);
-        return;
-      }
-      onSuccess?.();
-    } catch (err) {
-      setError(
-        err instanceof SlyxupError
-          ? err.message
-          : 'Something went wrong. Try again.'
-      );
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  async function onSubmit2FA(e: FormEvent) {
-    e.preventDefault();
-    if (!challengeToken) return;
-    setBusy(true);
-    setError(null);
-    try {
-      await completeSignIn({ challengeToken, code: tfaCode.trim() });
-      onSuccess?.();
-    } catch (err) {
-      setError(
-        err instanceof SlyxupError ? err.message : 'Invalid code. Try again.'
-      );
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  function oauth(provider: 'google' | 'github') {
-    const redirect = encodeURIComponent(window.location.href);
-    window.location.href = `${client.apiUrl}/v1/oauth/${provider}?redirect_url=${redirect}`;
-  }
-
-  const missingKey =
-    !client.publishableKey ||
-    client.publishableKey === 'pk_test_missing' ||
-    client.publishableKey.includes('REPLACE');
-
-  return (
-    <div ref={cardRef} className={`slx-card${error ? ' slx-card-error' : ''}`}>
-      {missingKey && (
-        <p className="slx-setup-note">
-          <strong>Setup:</strong> Add{' '}
-          <code>NEXT_PUBLIC_SLYXUP_PUBLISHABLE_KEY</code> to{' '}
-          <code>.env.local</code> — run <code>npx @slyxup/cli keys create</code>
-        </p>
-      )}
-      <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>
-      )}
-
-      {challengeToken ? (
-        <form onSubmit={onSubmit2FA} noValidate={false}>
-          <div className="slx-field">
-            <label className="slx-label" htmlFor="slx-signin-2fa">
-              Authenticator code
-            </label>
-            <input
-              id="slx-signin-2fa"
-              className="slx-input"
-              type="text"
-              inputMode="numeric"
-              autoComplete="one-time-code"
-              maxLength={6}
-              pattern="[0-9]*"
-              placeholder="000000"
-              value={tfaCode}
-              onChange={(e) => setTfaCode(e.target.value.replace(/\D/g, ''))}
-              required
-            />
-            <p className="slx-hint">
-              Enter the 6-digit code from your authenticator app.
-            </p>
-          </div>
-          <button className="slx-btn" type="submit" disabled={busy}>
-            {busy && <span className="slx-spinner" aria-hidden="true" />}
-            {busy ? 'Verifying…' : 'Verify code'}
-          </button>
-          <button
-            type="button"
-            className="slx-link"
-            style={{ marginTop: 8 }}
-            onClick={() => {
-              setChallengeToken(null);
-              setTfaCode('');
-            }}
-          >
-            ← Back to sign in
-          </button>
-        </form>
-      ) : (
-        <form onSubmit={onSubmit} noValidate={false}>
-          <div className="slx-field">
-            <label className="slx-label" htmlFor="slx-signin-email">
-              Email <span className="slx-hint">or username</span>
-            </label>
-            <input
-              id="slx-signin-email"
-              className="slx-input"
-              type="text"
-              autoComplete="username"
-              placeholder="you@example.com or yourname"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              required
-            />
-          </div>
-          <div className="slx-field">
-            <div className="slx-row">
-              <label className="slx-label" htmlFor="slx-signin-password">
-                Password
-              </label>
-              {onForgotPasswordClick && (
-                <button
-                  type="button"
-                  className="slx-link slx-forgot"
-                  onClick={onForgotPasswordClick}
-                >
-                  Forgot password?
-                </button>
-              )}
-            </div>
-            <input
-              id="slx-signin-password"
-              className="slx-input"
-              type="password"
-              autoComplete="current-password"
-              placeholder="••••••••"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-            />
-          </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

@@ -1,211 +0,0 @@
-import { SlyxupError } from '@slyxup/core';
-import { useAuth } from '@slyxup/react';
-import { type FormEvent, useEffect, useRef, useState } from 'react';
-import { GitHubIcon, GoogleIcon, KeyholeMark } from '../../icons';
-import { injectStyles } from '../../styles';
-
-export interface SignUpProps {
-  social?: boolean;
-  onSuccess?: () => void;
-  onSignInClick?: () => void;
-}
-
-/** Email/password + OAuth sign-up card. */
-export function SignUp({
-  social = true,
-  onSuccess,
-  onSignInClick,
-}: SignUpProps) {
-  injectStyles();
-  const { signUp, client } = useAuth() as unknown as {
-    signUp: ReturnType<typeof useAuth>['signUp'];
-    client: { publishableKey?: string; apiUrl: string };
-  };
-  const [firstName, setFirstName] = useState('');
-  const [username, setUsername] = useState('');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [successEmail, setSuccessEmail] = 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,
-        username: username || undefined,
-      });
-      setSuccessEmail(email);
-      onSuccess?.();
-    } catch (err) {
-      setError(
-        err instanceof SlyxupError
-          ? err.message
-          : 'Something went wrong. Try again.'
-      );
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  function oauth(provider: 'google' | 'github') {
-    const redirect = encodeURIComponent(window.location.href);
-    window.location.href = `${client.apiUrl}/v1/oauth/${provider}?redirect_url=${redirect}`;
-  }
-
-  const missingKey =
-    !client.publishableKey ||
-    client.publishableKey === 'pk_test_missing' ||
-    client.publishableKey.includes('REPLACE');
-
-  return (
-    <div ref={cardRef} className={`slx-card${error ? ' slx-card-error' : ''}`}>
-      {missingKey && (
-        <p className="slx-setup-note">
-          <strong>Setup:</strong> Add{' '}
-          <code>NEXT_PUBLIC_SLYXUP_PUBLISHABLE_KEY</code> — run{' '}
-          <code>npx @slyxup/cli keys create</code>
-        </p>
-      )}
-      <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>
-      )}
-
-      {successEmail && (
-        <p
-          className="slx-success-text"
-          aria-live="polite"
-          style={{ color: 'var(--slx-success)' }}
-        >
-          Account created! We sent a verification link to{' '}
-          <strong>{successEmail}</strong>. Check your inbox to verify and sign
-          in.
-        </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-username">
-            Username
-          </label>
-          <input
-            id="slx-signup-username"
-            className="slx-input"
-            type="text"
-            autoComplete="username"
-            placeholder="ada"
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-          />
-          <p className="slx-hint">
-            Optional — lets you sign in with a username instead of your email.
-          </p>
-        </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

@@ -1,47 +0,0 @@
-import { useAuth } from '@slyxup/react';
-import { GitHubIcon, GoogleIcon } from '../../icons';
-import { injectStyles } from '../../styles';
-
-export interface SocialButtonsProps {
-  /** Show only these providers. Default: both */
-  providers?: Array<'google' | 'github'>;
-  /** OAuth start path base. Default: `<apiUrl>/v1/oauth` from the provider client */
-  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,
-}: SocialButtonsProps) {
-  injectStyles();
-  const { client } = useAuth() as unknown as {
-    client?: { apiUrl?: string };
-  };
-  const base = basePath ?? `${client?.apiUrl ?? ''}/v1/oauth`;
-  return (
-    <div className="slx-social">
-      {providers.map((p) => {
-        const { label, Icon } = META[p];
-        return (
-          <button
-            key={p}
-            type="button"
-            className="slx-social-btn"
-            onClick={() => {
-              const redirect = encodeURIComponent(window.location.href);
-              window.location.href = `${base}/${p}?redirect_url=${redirect}`;
-            }}
-          >
-            <Icon /> {label}
-          </button>
-        );
-      })}
-    </div>
-  );
-}