create-snapify-app 0.0.0-stage → 1.1.0

package/template/src/admin/account/SecurityForms.tsx

@@ -0,0 +1,276 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React, { useState } from 'react';
+import { toast } from 'sonner';
+import { Check, Copy, Download, Eye, EyeOff, KeyRound, ShieldCheck, Smartphone, X } from 'lucide-react';
+import { useAuth } from '../context/AuthContext';
+import { api, type MeUser, type PasswordPolicy } from '../lib/api';
+import { errorMessage } from '../lib/hooks';
+import { Alert, Button, cx, Field, Input } from '../ui/primitives';
+
+export const PasswordInput = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement> & { invalid?: boolean }>(function PasswordInput(props, ref) {
+  const [show, setShow] = useState(false);
+  return (
+    <div className="relative">
+      <Input ref={ref} {...props} type={show ? 'text' : 'password'} className={cx('pr-10', props.className)} />
+      <button
+        type="button"
+        tabIndex={-1}
+        onClick={() => setShow((s) => !s)}
+        className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-slate-400 hover:text-slate-700"
+        aria-label={show ? 'Masquer le mot de passe' : 'Afficher le mot de passe'}
+      >
+        {show ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+      </button>
+    </div>
+  );
+});
+
+export function policyChecks(password: string, policy: PasswordPolicy) {
+  return [
+    { ok: password.length >= policy.passwordMinLength, label: `${policy.passwordMinLength} caractères minimum` },
+    { ok: /[a-zA-Z]/.test(password), label: 'Au moins une lettre' },
+    ...(policy.requireUppercase ? [{ ok: /[A-Z]/.test(password) && /[a-z]/.test(password), label: 'Majuscules et minuscules' }] : []),
+    ...(policy.requireNumber ? [{ ok: /\d/.test(password), label: 'Au moins un chiffre' }] : []),
+    ...(policy.requireSymbol ? [{ ok: /[^a-zA-Z0-9]/.test(password), label: 'Au moins un caractère spécial' }] : []),
+  ];
+}
+
+export function PasswordChecklist({ password, policy }: { password: string; policy: PasswordPolicy }) {
+  const checks = policyChecks(password, policy);
+  const score = checks.filter((c) => c.ok).length / checks.length;
+  return (
+    <div className="space-y-2">
+      <div className="h-1.5 overflow-hidden rounded-full bg-slate-100">
+        <div
+          className={cx('h-full rounded-full transition-all', score === 1 ? 'bg-emerald-500' : score >= 0.5 ? 'bg-amber-400' : 'bg-rose-400')}
+          style={{ width: `${Math.max(password ? 8 : 0, score * 100)}%` }}
+        />
+      </div>
+      <ul className="grid gap-1 text-xs sm:grid-cols-2">
+        {checks.map((c) => (
+          <li key={c.label} className={cx('flex items-center gap-1.5', c.ok ? 'text-emerald-700' : 'text-slate-500')}>
+            {c.ok ? <Check className="h-3.5 w-3.5" /> : <X className="h-3.5 w-3.5 text-slate-300" />}
+            {c.label}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export function PasswordChangeForm({ onDone, submitLabel = 'Mettre à jour le mot de passe' }: { onDone?: () => void; submitLabel?: string }) {
+  const { user, setSession } = useAuth();
+  const [current, setCurrent] = useState('');
+  const [next, setNext] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+  if (!user) return null;
+  const valid = policyChecks(next, user.policy).every((c) => c.ok);
+  const mismatch = !!confirm && next !== confirm;
+
+  return (
+    <form
+      className="space-y-4"
+      onSubmit={async (e) => {
+        e.preventDefault();
+        setError('');
+        if (next !== confirm) return setError('Les deux mots de passe ne correspondent pas.');
+        setSaving(true);
+        try {
+          const r = await api.changePassword(current, next);
+          setSession(r.token, r.user);
+          toast.success(r.closedSessions ? `Mot de passe mis à jour — ${r.closedSessions} autre(s) session(s) fermée(s)` : 'Mot de passe mis à jour');
+          setCurrent('');
+          setNext('');
+          setConfirm('');
+          onDone?.();
+        } catch (err) {
+          setError(errorMessage(err));
+        } finally {
+          setSaving(false);
+        }
+      }}
+    >
+      {error ? <Alert tone="danger">{error}</Alert> : null}
+      <Field label="Mot de passe actuel">
+        <PasswordInput autoComplete="current-password" required value={current} onChange={(e) => setCurrent(e.target.value)} />
+      </Field>
+      <Field label="Nouveau mot de passe">
+        <PasswordInput autoComplete="new-password" required value={next} onChange={(e) => setNext(e.target.value)} />
+      </Field>
+      {next ? <PasswordChecklist password={next} policy={user.policy} /> : null}
+      <Field label="Confirmer le nouveau mot de passe" error={mismatch ? 'Les mots de passe ne correspondent pas' : undefined}>
+        <PasswordInput autoComplete="new-password" required value={confirm} onChange={(e) => setConfirm(e.target.value)} invalid={mismatch} />
+      </Field>
+      <p className="text-xs text-slate-500">Vos autres sessions ouvertes seront fermées par sécurité.</p>
+      <Button type="submit" variant="primary" icon={KeyRound} loading={saving} disabled={!current || !valid || !confirm || mismatch}>
+        {submitLabel}
+      </Button>
+    </form>
+  );
+}
+
+export function RecoveryCodes({ codes, siteName }: { codes: string[]; siteName?: string }) {
+  const text = `Codes de secours — ${siteName || 'Snapify'}\nChaque code ne fonctionne qu’une fois.\n\n${codes.join('\n')}\n`;
+  return (
+    <div className="space-y-3">
+      <Alert tone="warning" title="Conservez ces codes en lieu sûr">
+        Ils permettent de vous connecter si vous perdez votre téléphone. Chaque code ne sert qu’une fois et ils ne seront plus affichés.
+      </Alert>
+      <div className="grid grid-cols-2 gap-2 rounded-xl border border-slate-200 bg-slate-50 p-4 font-mono text-sm text-slate-800">
+        {codes.map((c) => (
+          <span key={c} className="tracking-wider">
+            {c}
+          </span>
+        ))}
+      </div>
+      <div className="flex flex-wrap gap-2">
+        <Button
+          size="sm"
+          icon={Copy}
+          onClick={() => {
+            void navigator.clipboard.writeText(codes.join('\n'));
+            toast.success('Codes copiés');
+          }}
+        >
+          Copier
+        </Button>
+        <Button
+          size="sm"
+          icon={Download}
+          onClick={() => {
+            const url = URL.createObjectURL(new Blob([text], { type: 'text/plain;charset=utf-8' }));
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'codes-de-secours-snapify.txt';
+            a.click();
+            URL.revokeObjectURL(url);
+          }}
+        >
+          Télécharger
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+/** Assistant d'activation : QR code → vérification d'un code → codes de secours. */
+export function TwoFactorSetup({ onDone, siteName }: { onDone?: () => void; siteName?: string }) {
+  const { setUser } = useAuth();
+  const [step, setStep] = useState<'intro' | 'scan' | 'codes'>('intro');
+  const [setup, setSetup] = useState<{ secret: string; qrDataUrl: string } | null>(null);
+  const [code, setCode] = useState('');
+  const [codes, setCodes] = useState<string[]>([]);
+  // Appliqué seulement après lecture des codes : sinon l'écran obligatoire disparaîtrait avant leur affichage.
+  const [pendingUser, setPendingUser] = useState<MeUser | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const start = async () => {
+    setLoading(true);
+    setError('');
+    try {
+      setSetup(await api.twoFactor.setup());
+      setStep('scan');
+    } catch (e) {
+      setError(errorMessage(e));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (step === 'intro') {
+    return (
+      <div className="space-y-4">
+        {error ? <Alert tone="danger">{error}</Alert> : null}
+        <div className="flex items-start gap-3 text-sm text-slate-600">
+          <Smartphone className="mt-0.5 h-5 w-5 shrink-0 text-brand-600" />
+          <p>
+            Installez une application d’authentification (Google Authenticator, Microsoft Authenticator, Authy, 1Password…) sur votre téléphone. À chaque connexion,
+            elle vous donnera un code à 6 chiffres en plus de votre mot de passe.
+          </p>
+        </div>
+        <Button variant="primary" icon={ShieldCheck} loading={loading} onClick={start}>
+          Configurer la double authentification
+        </Button>
+      </div>
+    );
+  }
+
+  if (step === 'scan' && setup) {
+    return (
+      <form
+        className="space-y-4"
+        onSubmit={async (e) => {
+          e.preventDefault();
+          setLoading(true);
+          setError('');
+          try {
+            const r = await api.twoFactor.enable(code);
+            setCodes(r.recoveryCodes);
+            setPendingUser(r.user);
+            setStep('codes');
+            toast.success('Double authentification activée');
+          } catch (err) {
+            setError(errorMessage(err));
+          } finally {
+            setLoading(false);
+          }
+        }}
+      >
+        {error ? <Alert tone="danger">{error}</Alert> : null}
+        <div className="flex flex-col gap-5 sm:flex-row sm:items-start">
+          <img src={setup.qrDataUrl} alt="QR code à scanner" className="h-44 w-44 shrink-0 rounded-xl border border-slate-200 bg-white p-2" />
+          <div className="min-w-0 space-y-3 text-sm text-slate-600">
+            <p>1. Scannez ce QR code avec votre application.</p>
+            <p>
+              Impossible de scanner ? Saisissez cette clé manuellement :
+              <code className="mt-1 block break-all rounded-lg bg-slate-100 px-2.5 py-1.5 font-mono text-xs tracking-wider text-slate-800">
+                {setup.secret.replace(/(.{4})/g, '$1 ').trim()}
+              </code>
+            </p>
+            <p>2. Saisissez le code à 6 chiffres affiché :</p>
+            <Input
+              autoFocus
+              inputMode="numeric"
+              autoComplete="one-time-code"
+              maxLength={7}
+              value={code}
+              onChange={(e) => setCode(e.target.value.replace(/[^\d ]/g, ''))}
+              className="h-11 max-w-[180px] text-center font-mono text-lg tracking-[0.3em]"
+              placeholder="000000"
+            />
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <Button type="submit" variant="primary" loading={loading} disabled={code.replace(/\s/g, '').length !== 6}>
+            Vérifier et activer
+          </Button>
+          <Button onClick={() => setStep('intro')}>Annuler</Button>
+        </div>
+      </form>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <RecoveryCodes codes={codes} siteName={siteName} />
+      <Button
+        variant="primary"
+        icon={Check}
+        onClick={() => {
+          if (pendingUser) setUser(pendingUser);
+          onDone?.();
+        }}
+      >
+        J’ai conservé mes codes
+      </Button>
+    </div>
+  );
+}

package/template/src/admin/admin.css

@@ -0,0 +1,127 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+@import "tailwindcss";
+
+@theme {
+  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --color-brand-50: #e6faf8;
+  --color-brand-100: #c2f2ee;
+  --color-brand-200: #8fe6df;
+  --color-brand-500: #00c6ba;
+  --color-brand-600: #00a89d;
+  --color-brand-700: #00867d;
+  --color-navy-800: #111d33;
+  --color-navy-900: #0b1528;
+  --color-navy-950: #070e1c;
+}
+
+@layer base {
+  html,
+  body {
+    font-family: var(--font-sans);
+    background: #f6f7f9;
+    color: #0f172a;
+    -webkit-font-smoothing: antialiased;
+    font-feature-settings: 'cv11', 'ss01';
+  }
+  ::selection {
+    background: rgb(0 198 186 / 0.2);
+  }
+  :focus-visible {
+    outline: 2px solid var(--color-brand-500);
+    outline-offset: 2px;
+  }
+}
+
+/* Contenu édité dans TipTap — reflète la typographie du site public */
+.rte-content {
+  min-height: 220px;
+  outline: none;
+  font-size: 15px;
+  line-height: 1.7;
+  color: #1e293b;
+}
+.rte-content.rte-compact {
+  min-height: 110px;
+  font-size: 14px;
+}
+.rte-content > * + * {
+  margin-top: 0.75em;
+}
+.rte-content h2 {
+  font-size: 1.5rem;
+  font-weight: 650;
+  line-height: 1.3;
+  color: #0b1528;
+  margin-top: 1.4em;
+}
+.rte-content h3 {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: #0b1528;
+  margin-top: 1.2em;
+}
+.rte-content h4 {
+  font-size: 1rem;
+  font-weight: 600;
+}
+.rte-content ul {
+  list-style: disc;
+  padding-left: 1.4em;
+}
+.rte-content ol {
+  list-style: decimal;
+  padding-left: 1.4em;
+}
+.rte-content blockquote {
+  border-left: 3px solid var(--color-brand-500);
+  padding-left: 1em;
+  color: #475569;
+  font-style: italic;
+}
+.rte-content a {
+  color: var(--color-brand-700);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.rte-content img {
+  border-radius: 10px;
+  max-width: 100%;
+}
+.rte-content img.ProseMirror-selectednode {
+  outline: 3px solid var(--color-brand-500);
+}
+.rte-content code {
+  background: #f1f5f9;
+  padding: 0.1em 0.35em;
+  border-radius: 4px;
+  font-size: 0.9em;
+}
+.rte-content hr {
+  border: none;
+  border-top: 1px solid #e2e8f0;
+  margin: 1.5em 0;
+}
+.rte-content p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  color: #94a3b8;
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background: rgb(148 163 184 / 0.35);
+  border-radius: 8px;
+}
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}

package/template/src/admin/context/AuthContext.tsx

@@ -0,0 +1,147 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { api, tokenStore, type MeUser, type Permission } from '../lib/api';
+
+type LoginOutcome = { twoFactor: false } | { twoFactor: true; challenge: string };
+
+interface AuthState {
+  user: MeUser | null;
+  ready: boolean;
+  login: (email: string, password: string, remember: boolean) => Promise<LoginOutcome>;
+  verify2fa: (challenge: string, code: string) => Promise<void>;
+  logout: (message?: string) => Promise<void>;
+  /** Remplace le jeton (changement de mot de passe) et éventuellement l'utilisateur. */
+  setSession: (token: string, user?: MeUser) => void;
+  setUser: (user: MeUser) => void;
+  refresh: () => Promise<void>;
+  /** Vrai si l'utilisateur possède au moins une des permissions (le super administrateur les a toutes). */
+  can: (...perms: Permission[]) => boolean;
+  isSuper: boolean;
+}
+
+const AuthContext = createContext<AuthState | null>(null);
+
+const ACTIVITY_EVENTS = ['mousemove', 'mousedown', 'keydown', 'scroll', 'touchstart'] as const;
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<MeUser | null>(null);
+  const [ready, setReady] = useState(false);
+
+  const refresh = useCallback(async () => {
+    if (!tokenStore.get()) return;
+    try {
+      setUser((await api.me()).user);
+    } catch {
+      /* 401 : géré par l'événement admin:session-expired */
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!tokenStore.get()) {
+      setReady(true);
+      return;
+    }
+    api
+      .me()
+      .then((r) => setUser(r.user))
+      .catch(() => tokenStore.set(null))
+      .finally(() => setReady(true));
+  }, []);
+
+  useEffect(() => {
+    const onExpired = (e: Event) => {
+      const reason = (e as CustomEvent<string | undefined>).detail;
+      setUser((u) => {
+        if (u) toast.error(reason && reason !== 'Session expirée' ? `${reason} : reconnectez-vous.` : 'Votre session a expiré, veuillez vous reconnecter.');
+        return null;
+      });
+    };
+    const onRequirements = () => void refresh();
+    window.addEventListener('admin:session-expired', onExpired);
+    window.addEventListener('admin:requirements', onRequirements);
+    return () => {
+      window.removeEventListener('admin:session-expired', onExpired);
+      window.removeEventListener('admin:requirements', onRequirements);
+    };
+  }, [refresh]);
+
+  const login = useCallback(async (email: string, password: string, remember: boolean): Promise<LoginOutcome> => {
+    const r = await api.login(email, password, remember);
+    if ('twoFactor' in r) return { twoFactor: true, challenge: r.challenge };
+    tokenStore.set(r.token);
+    setUser(r.user);
+    return { twoFactor: false };
+  }, []);
+
+  const verify2fa = useCallback(async (challenge: string, code: string) => {
+    const r = await api.login2fa(challenge, code);
+    tokenStore.set(r.token);
+    setUser(r.user);
+  }, []);
+
+  const logout = useCallback(async (message?: string) => {
+    if (tokenStore.get()) await api.logout().catch(() => undefined);
+    tokenStore.set(null);
+    setUser(null);
+    if (message) toast.info(message);
+  }, []);
+
+  /* Déconnexion après inactivité : l'activité locale prolonge aussi la session côté serveur. */
+  const idleMinutes = user?.policy.idleMinutes ?? 0;
+  const lastActivity = useRef(Date.now());
+  const lastPing = useRef(Date.now());
+  useEffect(() => {
+    if (!user || idleMinutes <= 0) return;
+    lastActivity.current = Date.now();
+    const mark = () => {
+      lastActivity.current = Date.now();
+    };
+    ACTIVITY_EVENTS.forEach((ev) => window.addEventListener(ev, mark, { passive: true }));
+    const timer = window.setInterval(() => {
+      const now = Date.now();
+      if (now - lastActivity.current > idleMinutes * 60_000) {
+        void logout(`Déconnexion automatique après ${idleMinutes} min d’inactivité.`);
+      } else if (now - lastActivity.current < 60_000 && now - lastPing.current > 60_000) {
+        lastPing.current = now;
+        void api.me().catch(() => undefined);
+      }
+    }, 15_000);
+    return () => {
+      ACTIVITY_EVENTS.forEach((ev) => window.removeEventListener(ev, mark));
+      window.clearInterval(timer);
+    };
+  }, [user, idleMinutes, logout]);
+
+  const value = useMemo<AuthState>(
+    () => ({
+      user,
+      ready,
+      login,
+      verify2fa,
+      logout,
+      setSession: (t, u) => {
+        tokenStore.set(t);
+        if (u) setUser(u);
+      },
+      setUser,
+      refresh,
+      can: (...perms) => !!user && (user.isSuper || perms.some((p) => user.permissions.includes(p))),
+      isSuper: !!user?.isSuper,
+    }),
+    [user, ready, login, verify2fa, logout, refresh]
+  );
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error('useAuth hors AuthProvider');
+  return ctx;
+}

package/template/src/admin/context/SiteContext.tsx

@@ -0,0 +1,50 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React, { createContext, useCallback, useContext, useMemo } from 'react';
+import { isDemoPath, toDemoUrl } from '../../demoBase';
+import { api, type ClientSnapshot } from '../lib/api';
+import { useAsync } from '../lib/hooks';
+
+interface SiteState {
+  site: ClientSnapshot | null;
+  loading: boolean;
+  error: string | null;
+  reload: () => Promise<unknown>;
+  /** Met à jour la copie locale après une sauvegarde réussie. */
+  patchSite: <K extends keyof ClientSnapshot>(key: K, value: ClientSnapshot[K]) => void;
+}
+
+const SiteContext = createContext<SiteState | null>(null);
+
+export function SiteProvider({ children }: { children: React.ReactNode }) {
+  const { data, setData, loading, error, reload } = useAsync(() => api.snapshot(), []);
+  const patchSite = useCallback<SiteState['patchSite']>((key, value) => setData((s) => (s ? { ...s, [key]: value } : s)), [setData]);
+  const value = useMemo(() => ({ site: data, loading, error, reload, patchSite }), [data, loading, error, reload, patchSite]);
+  return <SiteContext.Provider value={value}>{children}</SiteContext.Provider>;
+}
+
+export function useSite() {
+  const ctx = useContext(SiteContext);
+  if (!ctx) throw new Error('useSite hors SiteProvider');
+  return ctx;
+}
+
+/** Le snapshot chargé (à utiliser sous un composant qui garantit sa présence). */
+export function useSiteData(): ClientSnapshot {
+  const { site } = useSite();
+  if (!site) throw new Error('Site non chargé');
+  return site;
+}
+
+/** Liens « Voir le site » : le CMS public est sous /demo/ (/ sert la landing produit). */
+export function publicUrl(site: ClientSnapshot | null, path = '/'): string {
+  const base = (site?.settings.publicUrl || window.location.origin).replace(/\/+$/, '');
+  const raw = path.startsWith('/') ? path : `/${path}`;
+  // API, sitemaps et robots restent à la racine ; le reste pointe vers la démo CMS.
+  if (/^\/(api\/|sitemap|robots\.txt)/.test(raw) || isDemoPath(raw)) return `${base}${raw}`;
+  return `${base}${toDemoUrl(raw)}`;
+}