@astratra/saas-kit-ui 0.1.0 → 1.0.1

package/README.md

@@ -44,3 +44,26 @@ VITE_API_URL=http://localhost:4000 npm run dev
 
 Le package ne contient pas de serveur Express et ne fixe aucun domaine metier.
 Le backend reste fourni par `@astratra/saas-kit` ou par ton application.
+
+## `AuthProvider`/`useAuth` vs `@astratra/react`
+
+Deux packages Astratra exposent des primitives de session React, avec des
+choix différents et volontaires — ce n'est pas un doublon accidentel :
+
+- **`AuthProvider`/`useAuth` (ce package)** : garde le JWT en mémoire JS et
+  l'attache en `Authorization: Bearer` via `apiFetch`. Couplé au dashboard
+  complet `AstratraDashboardApp` (login/users/settings/overview) — conçu
+  pour démarrer vite avec un backend `@astratra/saas-kit` standard, pas pour
+  être réutilisé isolément dans une UI déjà existante.
+- **`SessionProvider`/`useSession` (`@astratra/react`)** : ne stocke aucun
+  token côté client — la session vit dans un cookie `HttpOnly` géré par le
+  backend, l'app injecte juste `getSession`/`signIn`/`signOut`. Pas de
+  dashboard imposé, pas de routes fixes ; à choisir quand tu construis ta
+  propre UI par-dessus `@astratra/saas-kit` (avec les cookies de session
+  activés côté `@astratra/security`) plutôt que d'utiliser
+  `AstratraDashboardApp` tel quel.
+
+En résumé : utilise ce package si `AstratraDashboardApp` te convient tel
+quel ; utilise `@astratra/react` si tu construis ta propre interface et que
+ton backend utilise les sessions cookie `HttpOnly` plutôt qu'un token Bearer
+géré côté client.

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@astratra/saas-kit-ui",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "description": "Reusable React dashboard shell for Astratra SaaS applications.",
+  "engines": {
+    "node": ">=20"
+  },
   "type": "module",
   "main": "src/index.jsx",
   "module": "src/index.jsx",

package/src/components/Layout.jsx

@@ -4,8 +4,8 @@ import styles from './Layout.module.css';
 
 const NAV_ITEMS = [
   { id: 'dashboard', index: '01', label: 'Dashboard' },
-  { id: 'users', index: '02', label: 'Users' },
-  { id: 'settings', index: '03', label: 'Settings' }
+  { id: 'users', index: '02', label: 'Utilisateurs' },
+  { id: 'settings', index: '03', label: 'Parametres' }
 ];
 
 export default function Layout({ activeView, children, onNavigate }) {
@@ -18,7 +18,7 @@ export default function Layout({ activeView, children, onNavigate }) {
           <img src={logoUrl} alt="Astratra" className={styles.brandMark} />
           <span>
             <strong>Astratra</strong>
-            <small>saas_starter@v0.1.0</small>
+            <small>saas_starter@v1.0.0</small>
           </span>
         </div>
 
@@ -43,8 +43,8 @@ export default function Layout({ activeView, children, onNavigate }) {
 
         <div className={styles.account}>
           <span>{user?.email}</span>
-          <small>role: {user?.role}</small>
-          <button type="button" onClick={logout}>[ logout ]</button>
+          <small>role : {user?.role}</small>
+          <button type="button" onClick={logout}>[ deconnexion ]</button>
         </div>
       </aside>
       <main className={styles.content}>{children}</main>

package/src/screens/Dashboard.jsx

@@ -28,19 +28,19 @@ export default function Dashboard() {
   return (
     <section className={styles.screen}>
       <header className={styles.header}>
-        <p>Overview</p>
+        <p>Vue d'ensemble</p>
         <h1>Dashboard</h1>
       </header>
       <Notice tone="error">{error}</Notice>
-      {!summary && !error ? <p className={styles.muted}>Loading dashboard...</p> : null}
+      {!summary && !error ? <p className={styles.muted}>Chargement du dashboard...</p> : null}
       {summary ? (
         <div className={styles.grid}>
           <article className={styles.statCard}>
-            <span>Total users</span>
+            <span>Utilisateurs</span>
             <strong>{summary.userCount}</strong>
           </article>
           <article className={styles.wideCard}>
-            <span>Role breakdown</span>
+            <span>Repartition des roles</span>
             <div className={styles.bars}>
               {roles.map(([role, count]) => (
                 <div key={role} className={styles.barRow}>

package/src/screens/Login.jsx

@@ -30,14 +30,14 @@ export default function Login({ onLoggedIn }) {
         <div className={styles.frame} aria-hidden="true" />
         <div className={styles.identity}>
           <span className={styles.tag}>astratra/saas-kit</span>
-          <span className={styles.tagMuted}>v0.1.0</span>
+          <span className={styles.tagMuted}>v1.0.0</span>
         </div>
         <h1 id="login-title">
-          <span className={styles.prompt}>&gt;</span> sign_in
+          <span className={styles.prompt}>&gt;</span> connexion
           <span className={styles.cursor} aria-hidden="true" />
         </h1>
         <p className={styles.copy}>
-          // authenticate with the seeded owner account to inspect the generic SaaS API screens
+          // connectez-vous avec le compte owner de demo pour explorer l'API SaaS generique
         </p>
         <Notice tone="error">{error}</Notice>
         <form className={styles.form} onSubmit={handleSubmit}>
@@ -46,10 +46,10 @@ export default function Login({ onLoggedIn }) {
             <input value={email} onChange={(event) => setEmail(event.target.value)} type="email" required />
           </label>
           <label>
-            password
+            mot de passe
             <input value={password} onChange={(event) => setPassword(event.target.value)} type="password" required />
           </label>
-          <button type="submit" disabled={loading}>{loading ? 'authenticating...' : '[ sign in ]'}</button>
+          <button type="submit" disabled={loading}>{loading ? 'connexion...' : '[ se connecter ]'}</button>
         </form>
       </section>
     </main>

package/src/screens/Settings.jsx

@@ -17,7 +17,7 @@ export default function Settings() {
       setSettings(data || {});
       setDrafts(Object.fromEntries(Object.entries(data || {}).map(([key, value]) => [key, JSON.stringify(value)])));
     } catch (apiError) {
-      setError(apiError.status === 403 ? 'Not authorized to manage settings.' : apiError.message);
+      setError(apiError.status === 403 ? 'Vous n etes pas autorise a gerer les parametres.' : apiError.message);
     }
   }
 
@@ -42,9 +42,9 @@ export default function Settings() {
       });
       setSettings({ ...settings, [updated.key]: updated.value });
       setDrafts({ ...drafts, [updated.key]: JSON.stringify(updated.value) });
-      setSuccess(`${updated.key} saved.`);
+      setSuccess(`${updated.key} enregistre.`);
     } catch (apiError) {
-      setError(apiError.status === 403 ? 'Not authorized to update settings.' : apiError.message);
+      setError(apiError.status === 403 ? 'Vous n etes pas autorise a modifier les parametres.' : apiError.message);
     }
   }
 
@@ -54,11 +54,11 @@ export default function Settings() {
     <section className={styles.screen}>
       <header className={styles.header}>
         <p>Configuration</p>
-        <h1>Settings</h1>
+        <h1>Parametres</h1>
       </header>
       <Notice tone="error">{error}</Notice>
       <Notice tone="success">{success}</Notice>
-      {rows.length === 0 && !error ? <p className={styles.muted}>No settings yet.</p> : null}
+      {rows.length === 0 && !error ? <p className={styles.muted}>Aucun parametre pour le moment.</p> : null}
       <div className={styles.settingsList}>
         {rows.map(([key]) => (
           <div className={styles.settingRow} key={key}>
@@ -69,7 +69,7 @@ export default function Settings() {
                 onChange={(event) => setDrafts({ ...drafts, [key]: event.target.value })}
               />
             </label>
-            <button type="button" onClick={() => saveSetting(key)}>Save</button>
+            <button type="button" onClick={() => saveSetting(key)}>Enregistrer</button>
           </div>
         ))}
       </div>

package/src/screens/Users.jsx

@@ -10,6 +10,7 @@ export default function Users() {
   const [success, setSuccess] = useState('');
   const [form, setForm] = useState({ email: '', role: 'member', password: 'password' });
   const [loading, setLoading] = useState(true);
+  const [authorized, setAuthorized] = useState(true);
 
   async function loadUsers() {
     setLoading(true);
@@ -17,8 +18,14 @@ export default function Users() {
     try {
       const data = await request('/users?limit=50&offset=0');
       setUsers(data.items || []);
+      setAuthorized(true);
     } catch (apiError) {
-      setError(apiError.status === 403 ? 'Not authorized to manage users.' : apiError.message);
+      if (apiError.status === 403) {
+        setAuthorized(false);
+        setError('Vous n etes pas autorise a gerer les utilisateurs.');
+      } else {
+        setError(apiError.message);
+      }
     } finally {
       setLoading(false);
     }
@@ -35,10 +42,10 @@ export default function Users() {
     try {
       await request('/users', { method: 'POST', body: form });
       setForm({ email: '', role: 'member', password: 'password' });
-      setSuccess('User created.');
+      setSuccess('Utilisateur cree.');
       await loadUsers();
     } catch (apiError) {
-      setError(apiError.status === 403 ? 'Not authorized to create users.' : apiError.message);
+      setError(apiError.status === 403 ? 'Vous n etes pas autorise a creer des utilisateurs.' : apiError.message);
     }
   }
 
@@ -46,55 +53,59 @@ export default function Users() {
     <section className={styles.screen}>
       <header className={styles.header}>
         <p>Administration</p>
-        <h1>Users</h1>
+        <h1>Utilisateurs</h1>
       </header>
       <Notice tone="error">{error}</Notice>
       <Notice tone="success">{success}</Notice>
-      <form className={styles.inlineForm} onSubmit={createUser}>
-        <input
-          aria-label="Email"
-          placeholder="email@example.test"
-          type="email"
-          value={form.email}
-          onChange={(event) => setForm({ ...form, email: event.target.value })}
-          required
-        />
-        <select
-          aria-label="Role"
-          value={form.role}
-          onChange={(event) => setForm({ ...form, role: event.target.value })}
-        >
-          <option value="member">member</option>
-          <option value="admin">admin</option>
-          <option value="owner">owner</option>
-        </select>
-        <input
-          aria-label="Password"
-          value={form.password}
-          onChange={(event) => setForm({ ...form, password: event.target.value })}
-          required
-        />
-        <button type="submit">Create user</button>
-      </form>
-      {loading ? <p className={styles.muted}>Loading users...</p> : null}
-      <div className={styles.tableWrap}>
-        <table>
-          <thead>
-            <tr>
-              <th>Email</th>
-              <th>Role</th>
-            </tr>
-          </thead>
-          <tbody>
-            {users.map((user) => (
-              <tr key={user.id}>
-                <td>{user.email}</td>
-                <td>{user.role || 'unknown'}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+      {authorized ? (
+        <>
+          <form className={styles.inlineForm} onSubmit={createUser}>
+            <input
+              aria-label="Email"
+              placeholder="email@example.test"
+              type="email"
+              value={form.email}
+              onChange={(event) => setForm({ ...form, email: event.target.value })}
+              required
+            />
+            <select
+              aria-label="Role"
+              value={form.role}
+              onChange={(event) => setForm({ ...form, role: event.target.value })}
+            >
+              <option value="member">member</option>
+              <option value="admin">admin</option>
+              <option value="owner">owner</option>
+            </select>
+            <input
+              aria-label="Mot de passe"
+              value={form.password}
+              onChange={(event) => setForm({ ...form, password: event.target.value })}
+              required
+            />
+            <button type="submit">Creer un utilisateur</button>
+          </form>
+          {loading ? <p className={styles.muted}>Chargement des utilisateurs...</p> : null}
+          <div className={styles.tableWrap}>
+            <table>
+              <thead>
+                <tr>
+                  <th>Email</th>
+                  <th>Role</th>
+                </tr>
+              </thead>
+              <tbody>
+                {users.map((user) => (
+                  <tr key={user.id}>
+                    <td>{user.email}</td>
+                    <td>{user.role || 'inconnu'}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </>
+      ) : null}
     </section>
   );
 }