keystone-design-bootstrap 1.0.55 → 1.0.56

package/src/design_system/portal/LoginForm.tsx

@@ -0,0 +1,339 @@
+'use client';
+
+import React, { useState, useMemo } from 'react';
+import { useRouter } from 'next/navigation';
+import { loginAction, signupAction, initiateAuthAction } from './actions';
+import { countries } from '../../utils/countries';
+import { getNationalMask, formatDigitsToMask } from '../../utils/phone-helpers';
+
+type Step = 'identifier' | 'returning' | 'new';
+
+interface LoginFormProps {
+  onSuccess?: () => void;
+  onClose?: () => void;
+}
+
+const inputClass =
+  'block w-full rounded border border-gray-300 bg-primary px-3 py-2.5 text-sm text-primary placeholder-gray-400 focus:border-gray-700 focus:outline-none focus:ring-1 focus:ring-gray-700 transition-colors';
+const labelClass = 'block text-sm text-secondary mb-1';
+
+function isValidEmail(value: string): boolean {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim());
+}
+
+export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
+  const router = useRouter();
+  const [step, setStep] = useState<Step>('identifier');
+
+  // Identifier step state
+  const [email, setEmail] = useState('');
+  const [phoneValue, setPhoneValue] = useState(''); // formatted national number
+  const [selectedCountry, setSelectedCountry] = useState('US');
+
+  // Later steps
+  const [welcomeName, setWelcomeName] = useState<string | null>(null);
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [password, setPassword] = useState('');
+  const [passwordConfirm, setPasswordConfirm] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  // Phone helpers
+  const country = useMemo(() => countries.find((c) => c.code === selectedCountry), [selectedCountry]);
+  const phoneCode = country ? (country.phoneCode.startsWith('+') ? country.phoneCode : `+${country.phoneCode}`) : '+1';
+  const nationalMask = useMemo(() => getNationalMask(country), [country]);
+  const nationalPlaceholder = nationalMask ? nationalMask.replace(/#/g, '0') : '(555) 000-0000';
+  const countryOptions = useMemo(
+    () => countries.map((c) => ({ label: c.phoneCode.startsWith('+') ? c.phoneCode : `+${c.phoneCode}`, value: c.code })),
+    []
+  );
+
+  // Computed API values
+  const phoneDigits = phoneValue.replace(/\D/g, '');
+  const fullPhone = phoneDigits.length > 0 ? `${phoneCode}${phoneDigits}` : null;
+  const emailVal = email.trim() || null;
+
+  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const digits = e.target.value.replace(/\D/g, '');
+    const formatted = nationalMask ? formatDigitsToMask(digits, nationalMask) : digits;
+    setPhoneValue(formatted);
+  };
+
+  const handleContinue = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!emailVal && !fullPhone) { setError('Enter your email address or phone number to continue.'); return; }
+    if (emailVal && !isValidEmail(emailVal)) { setError('Enter a valid email address.'); return; }
+    setError(null);
+    setLoading(true);
+    try {
+      const result = await initiateAuthAction({ email: emailVal, phone: fullPhone });
+      if (result.exists === true) {
+        setWelcomeName(result.firstName ?? null);
+        setStep(result.hasPassword === false ? 'new' : 'returning');
+      } else if (result.exists === false) {
+        setStep('new');
+      } else {
+        // exists === null — network/server error. Stay on identifier step with a message.
+        setError('Something went wrong. Please check your connection and try again.');
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSignIn = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const result = await loginAction({ email: emailVal, phone: fullPhone, password });
+      if (result.error) {
+        if (result.code === 'not_found' || result.code === 'no_password') {
+          setStep('new');
+          setError(null);
+          return;
+        }
+        setError(result.error);
+        return;
+      }
+      if (onSuccess) onSuccess(); else router.refresh();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSignUp = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (password !== passwordConfirm) { setError('Passwords do not match.'); return; }
+    setError(null);
+    setLoading(true);
+    try {
+      const result = await signupAction({
+        email: emailVal,
+        phone: fullPhone,
+        password,
+        password_confirmation: passwordConfirm,
+        first_name: firstName.trim() || undefined,
+        last_name: lastName.trim() || undefined,
+      });
+      if (result.error) { setError(result.error); return; }
+      if (onSuccess) onSuccess(); else router.refresh();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const goBack = () => {
+    setStep('identifier');
+    setPassword('');
+    setPasswordConfirm('');
+    setError(null);
+  };
+
+  const identifierSummary = [emailVal, fullPhone].filter(Boolean).join(' / ');
+
+  const headerTitle =
+    step === 'identifier' ? 'Pricing & Booking Portal' :
+    step === 'returning' ? (welcomeName ? `Welcome back, ${welcomeName}!` : 'Welcome back!') :
+    (welcomeName ? `Welcome back, ${welcomeName}!` : 'Welcome!');
+
+  const headerSubtitle =
+    step === 'identifier' ? 'Enter your email or phone number to get started.' :
+    step === 'returning' ? 'Enter your password to sign in.' :
+    (welcomeName ? 'Create a password to access your account.' : "Let's get you set up.");
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="flex items-start justify-between gap-4 mb-5">
+        <div>
+          <h3 className="text-lg font-normal text-primary">{headerTitle}</h3>
+          <p className="mt-0.5 text-sm text-tertiary">{headerSubtitle}</p>
+        </div>
+        {onClose && (
+          <button
+            type="button"
+            onClick={onClose}
+            className="shrink-0 p-1 text-tertiary hover:text-primary transition-colors"
+            aria-label="Close"
+          >
+            <svg className="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        )}
+      </div>
+
+      {error && (
+        <div className="mb-4 rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+          {error}
+        </div>
+      )}
+
+      {/* Step: identifier */}
+      {step === 'identifier' && (
+        <form onSubmit={handleContinue} className="space-y-3">
+          <div>
+            <label className={labelClass}>Email address</label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="you@example.com"
+              className={inputClass}
+              autoComplete="email"
+              autoFocus
+            />
+          </div>
+          <div className="flex items-center gap-3">
+            <hr className="flex-1 border-gray-200" />
+            <span className="text-xs text-gray-400">or</span>
+            <hr className="flex-1 border-gray-200" />
+          </div>
+          <div>
+            <label className={labelClass}>Phone number</label>
+            <div className="flex rounded border border-gray-300 overflow-hidden focus-within:border-gray-700 focus-within:ring-1 focus-within:ring-gray-700 transition-colors">
+              <select
+                value={selectedCountry}
+                onChange={(e) => { setSelectedCountry(e.target.value); setPhoneValue(''); }}
+                className="border-r border-gray-200 bg-gray-50 px-2 py-2.5 text-sm text-gray-700 focus:outline-none"
+                aria-label="Country code"
+              >
+                {countryOptions.map((opt) => (
+                  <option key={opt.value} value={opt.value}>{opt.label}</option>
+                ))}
+              </select>
+              <input
+                type="tel"
+                value={phoneValue}
+                onChange={handlePhoneChange}
+                placeholder={nationalPlaceholder}
+                className="flex-1 px-3 py-2.5 text-sm text-gray-900 placeholder-gray-400 bg-transparent focus:outline-none"
+              />
+            </div>
+          </div>
+          <div className="pt-1">
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full rounded border border-secondary bg-primary px-4 py-2.5 text-sm font-medium text-primary hover:bg-secondary transition-colors disabled:opacity-50"
+            >
+              {loading ? 'Looking you up…' : 'Continue'}
+            </button>
+          </div>
+        </form>
+      )}
+
+      {/* Step: returning user */}
+      {step === 'returning' && (
+        <form onSubmit={handleSignIn} className="space-y-3">
+          <div>
+            <label className={labelClass}>Password</label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+              className={inputClass}
+              required
+              autoComplete="current-password"
+              autoFocus
+            />
+          </div>
+          <div className="pt-1">
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full rounded border border-secondary bg-primary px-4 py-2.5 text-sm font-medium text-primary hover:bg-secondary transition-colors disabled:opacity-50"
+            >
+              {loading ? 'Signing in…' : 'Sign in'}
+            </button>
+          </div>
+          <button
+            type="button"
+            onClick={goBack}
+            className="w-full text-center text-sm text-tertiary hover:text-primary transition-colors"
+          >
+            ← {identifierSummary ? `Not ${identifierSummary}?` : 'Change email or phone'}
+          </button>
+        </form>
+      )}
+
+      {/* Step: new user / claim account */}
+      {step === 'new' && (
+        <form onSubmit={handleSignUp} className="space-y-3">
+          {/* Only ask for name if we don't already know who they are */}
+          {!welcomeName && (
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className={labelClass}>First name</label>
+                <input
+                  type="text"
+                  value={firstName}
+                  onChange={(e) => setFirstName(e.target.value)}
+                  placeholder="Jane"
+                  className={inputClass}
+                  autoComplete="given-name"
+                  autoFocus
+                />
+              </div>
+              <div>
+                <label className={labelClass}>Last name</label>
+                <input
+                  type="text"
+                  value={lastName}
+                  onChange={(e) => setLastName(e.target.value)}
+                  placeholder="Smith"
+                  className={inputClass}
+                  autoComplete="family-name"
+                />
+              </div>
+            </div>
+          )}
+          <div>
+            <label className={labelClass}>Password</label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+              className={inputClass}
+              required
+              autoComplete="new-password"
+              autoFocus={!!welcomeName}
+            />
+          </div>
+          <div>
+            <label className={labelClass}>Confirm password</label>
+            <input
+              type="password"
+              value={passwordConfirm}
+              onChange={(e) => setPasswordConfirm(e.target.value)}
+              placeholder="••••••••"
+              className={inputClass}
+              required
+              autoComplete="new-password"
+            />
+          </div>
+          <div className="pt-1">
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full rounded border border-secondary bg-primary px-4 py-2.5 text-sm font-medium text-primary hover:bg-secondary transition-colors disabled:opacity-50"
+            >
+              {loading ? 'Creating account…' : 'Create account'}
+            </button>
+          </div>
+          <button
+            type="button"
+            onClick={goBack}
+            className="w-full text-center text-sm text-tertiary hover:text-primary transition-colors"
+          >
+            ← Back
+          </button>
+        </form>
+      )}
+    </div>
+  );
+}

package/src/design_system/portal/LoginModalController.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { Modal } from '../elements/modal/modal';
+import { LoginForm } from './LoginForm';
+import { KeystoneLogoMinimal } from '../logo/keystone-logo-minimal';
+
+const keystoneFooter = (
+  <div className="px-6 py-4 bg-secondary flex flex-col items-center gap-1">
+    <div className="flex items-center gap-1.5">
+      <KeystoneLogoMinimal className="size-5 shrink-0" />
+      <span className="text-sm font-medium text-primary">Keystone</span>
+    </div>
+    <p className="text-xs text-quaternary">Powered by Keystone Universal Login</p>
+  </div>
+);
+
+/**
+ * Renders a single login modal for the entire portal.
+ * Any server-rendered element with `data-open-login-modal` will open it on click.
+ * After successful auth the server component re-renders with the new cookie.
+ */
+export function LoginModalController() {
+  const [open, setOpen] = useState(false);
+  const [redirectUrl, setRedirectUrl] = useState<string | null>(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      const trigger = (e.target as HTMLElement).closest('[data-open-login-modal]');
+      if (trigger) {
+        e.preventDefault();
+        setRedirectUrl(trigger.getAttribute('data-login-redirect'));
+        setOpen(true);
+      }
+    };
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+  }, []);
+
+  const handleSuccess = () => {
+    setOpen(false);
+    if (redirectUrl) {
+      router.push(redirectUrl);
+      setRedirectUrl(null);
+    } else {
+      router.refresh();
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={open}
+      onClose={() => setOpen(false)}
+      hideHeader
+      ariaLabel="Sign in or create account"
+      footer={keystoneFooter}
+    >
+      <LoginForm onSuccess={handleSuccess} onClose={() => setOpen(false)} />
+    </Modal>
+  );
+}

package/src/design_system/portal/LogoutButton.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { logoutAction } from './actions';
+
+export function LogoutButton() {
+  const router = useRouter();
+
+  const handleLogout = async () => {
+    await logoutAction();
+    router.refresh();
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleLogout}
+      className="text-xs text-tertiary hover:text-primary transition-colors"
+    >
+      Sign out
+    </button>
+  );
+}

package/src/design_system/portal/MessageComposer.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import React, { useState, useTransition, useRef, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { sendMessageAction } from './actions';
+
+export function MessageComposer({ contactId }: { contactId: number }) {
+  const [body, setBody] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const router = useRouter();
+
+  // Auto-resize textarea
+  useEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = `${Math.min(el.scrollHeight, 120)}px`;
+  }, [body]);
+
+  function submit() {
+    if (!body.trim() || isPending) return;
+    setError(null);
+    startTransition(async () => {
+      const result = await sendMessageAction({ contactId, body: body.trim() });
+      if (result.error) {
+        setError(result.error);
+      } else {
+        setBody('');
+        router.refresh();
+      }
+    });
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    submit();
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      submit();
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="border-t border-secondary px-4 py-3">
+      {error && (
+        <p className="mb-2 text-xs text-red-600">{error}</p>
+      )}
+      <div className="flex items-end gap-2">
+        <textarea
+          ref={textareaRef}
+          value={body}
+          onChange={(e) => setBody(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Type a message… (Enter to send)"
+          rows={1}
+          disabled={isPending}
+          className="flex-1 resize-none rounded-xl border border-gray-300 bg-primary px-3 py-2 text-sm text-primary placeholder-gray-400 focus:border-gray-700 focus:outline-none focus:ring-1 focus:ring-gray-700 transition-colors disabled:opacity-50"
+        />
+        <button
+          type="submit"
+          disabled={!body.trim() || isPending}
+          className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-gray-900 text-white transition-colors hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed"
+          aria-label="Send message"
+        >
+          {isPending ? (
+            <svg className="size-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+          ) : (
+            <svg className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.269 20.876L5.999 12zm0 0h7.5" />
+            </svg>
+          )}
+        </button>
+      </div>
+    </form>
+  );
+}