create-astram-app 0.1.3 → 0.3.0

package/template/frontend/src/pages/access/RoleActionsMenu.jsx

@@ -0,0 +1,42 @@
+/**
+ * RoleActionsMenu — the ⋯ row-action menu on the granted-roles listing.
+ * Edit permissions · Duplicate to another role · (sep) · Revoke all access (destructive).
+ * "View audit log" is intentionally reserved for the dedicated Audit feature (not wired).
+ */
+import { MoreHorizontal, Pencil, Copy, Trash2 } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+export default function RoleActionsMenu({ role, onEdit, onDuplicate, onRevokeAll }) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          aria-label={`Actions for ${role.roleName}`}
+          className="inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <MoreHorizontal className="size-4" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-52">
+        <DropdownMenuItem onClick={() => onEdit(role)}>
+          <Pencil className="size-4" /> Edit permissions
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => onDuplicate(role)}>
+          <Copy className="size-4" /> Duplicate to another role
+        </DropdownMenuItem>
+        {/* View audit log — reserved for the Audit feature. */}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem variant="destructive" onClick={() => onRevokeAll(role)}>
+          <Trash2 className="size-4" /> Revoke all access
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/template/frontend/src/pages/account/AccountLayout.jsx

@@ -0,0 +1,229 @@
+/**
+ * AccountLayout — the persistent shell for the self-service account area. Replicates
+ * OCA's tabbed-account pattern with astram3's shadcn components: SEPARATE ROUTES per
+ * tab (bookmarkable, back-button works) under one layout that stays mounted.
+ *
+ *   /account/profile   → ProfilePage   (index / default)
+ *   /account/password  → ChangePasswordPage
+ *   /account/2fa       → TwoFactorPage
+ *
+ * Layout (≥lg): LEFT = an identity card (avatar + display NAME + @user/email +
+ * company/role, from useAuth().profile — NAMES only, never a UUID) with a VERTICAL
+ * NavLink tab strip below it; RIGHT = <Outlet/>. ≤lg the identity card becomes a
+ * horizontal banner and the tabs a horizontal equal-width tile row (icon over label,
+ * bottom-underline active accent). All display values are resolved names — no raw IDs.
+ */
+import { KeyRound, ShieldCheck, User } from 'lucide-react';
+import { NavLink, Outlet, useLocation } from 'react-router-dom';
+import { useAuth } from '@/auth/AuthContext';
+import AppShell from '@/shell/AppShell';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { cn } from '@/lib/utils';
+
+/** Two-letter initials from a display name (fallback 'U'), never a UUID. Mirrors Sidebar. */
+function initialsOf(name) {
+  if (!name) return 'U';
+  const clean = name.includes('@') ? name.split('@')[0] : name;
+  const parts = clean.trim().split(/[\s._-]+/).filter(Boolean);
+  const letters = parts.length >= 2 ? parts[0][0] + parts[1][0] : clean.slice(0, 2);
+  return letters.replace(/[^a-zA-Z0-9]/g, '').slice(0, 2).toUpperCase() || 'U';
+}
+
+const TABS = [
+  {
+    to: '/account/profile',
+    icon: User,
+    label: 'Profile',
+    short: 'Profile',
+    desc: 'Your name and email',
+    subtitle: 'Update your display name and email.',
+  },
+  {
+    to: '/account/password',
+    icon: KeyRound,
+    label: 'Change password',
+    short: 'Password',
+    desc: 'Set a new password',
+    subtitle: 'Change your password and sign out other sessions.',
+  },
+  {
+    to: '/account/2fa',
+    icon: ShieldCheck,
+    label: 'Two-factor',
+    short: '2FA',
+    desc: 'Authenticator app',
+    subtitle: 'Add a one-time code as a second sign-in factor.',
+  },
+];
+
+/** The signed-in user's identity card. `banner` = the ≤lg horizontal variant. */
+function IdentityCard({ banner = false }) {
+  const { profile, identityHint } = useAuth();
+  const name = profile?.name || (identityHint ? identityHint.split('@')[0] : 'Signed in');
+  const handle = profile?.email || identityHint || '';
+  const company = profile?.company?.name || '';
+  const role = profile?.roles?.[0]?.name || '';
+  const initials = initialsOf(profile?.name || identityHint);
+
+  return (
+    <div
+      className={cn(
+        'rounded-xl border bg-card p-4 shadow-sm',
+        banner ? 'flex items-center gap-3' : 'flex flex-col items-center text-center',
+      )}
+    >
+      <Avatar
+        className={cn(
+          'shrink-0 rounded-xl ring-1 ring-primary/20',
+          banner ? 'size-11' : 'size-16',
+        )}
+      >
+        <AvatarFallback
+          className={cn(
+            'rounded-xl bg-primary font-semibold text-primary-foreground',
+            banner ? 'text-sm' : 'text-lg',
+          )}
+        >
+          {initials}
+        </AvatarFallback>
+      </Avatar>
+      <div className={cn('min-w-0', banner ? 'leading-tight' : 'mt-3 w-full')}>
+        <p className="truncate text-sm font-semibold text-foreground">{name}</p>
+        {handle && <p className="truncate text-xs text-muted-foreground">{handle}</p>}
+        {(company || role) && (
+          <p className="mt-0.5 truncate text-[11px] font-medium uppercase tracking-wide text-primary/80">
+            {[company, role].filter(Boolean).join(' · ')}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function AccountLayout() {
+  const location = useLocation();
+  const active = TABS.find((t) => location.pathname.startsWith(t.to));
+  const subtitle = active?.subtitle || 'Manage your credentials and security settings.';
+
+  return (
+    <AppShell section="Account" title={active?.label ?? 'Account'}>
+      <div className="p-4">
+        {/* Page header — matches Dashboard.jsx's header style. */}
+        <div className="mb-4">
+          <h1 className="text-xl font-bold tracking-tight">Account</h1>
+          <p className="mt-0.5 text-sm text-muted-foreground">{subtitle}</p>
+        </div>
+
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-start">
+          {/* LEFT rail (≥lg): identity card + vertical tab strip. */}
+          <aside className="w-full shrink-0 lg:w-64">
+            {/* Identity: centered card ≥lg, horizontal banner ≤lg. */}
+            <div className="hidden lg:block">
+              <IdentityCard />
+            </div>
+            <div className="lg:hidden">
+              <IdentityCard banner />
+            </div>
+
+            {/* Vertical tab strip ≥lg. */}
+            <nav className="mt-4 hidden flex-col gap-1 lg:flex">
+              {TABS.map((tab) => {
+                const Icon = tab.icon;
+                return (
+                  <NavLink key={tab.to} to={tab.to} className="block">
+                    {({ isActive }) => (
+                      <span
+                        className={cn(
+                          // Extra left padding (pl-5) leaves room between the inset accent
+                          // bar and the icon/text; pr-3 keeps the right side compact.
+                          'group relative flex items-start gap-3 rounded-lg border py-2.5 pl-5 pr-3 transition-colors',
+                          isActive
+                            ? 'border-primary/30 bg-primary/10'
+                            : 'border-transparent hover:bg-accent',
+                        )}
+                      >
+                        {/* Left accent bar on the active tab — inset slightly from the
+                            edge (left-1) so it floats off the card border. */}
+                        <span
+                          className={cn(
+                            'absolute inset-y-1.5 left-1 w-1 rounded-full bg-primary transition-opacity',
+                            isActive ? 'opacity-100' : 'opacity-0',
+                          )}
+                        />
+                        <Icon
+                          className={cn(
+                            'mt-0.5 size-4 shrink-0',
+                            isActive ? 'text-primary' : 'text-muted-foreground',
+                          )}
+                        />
+                        <span className="min-w-0">
+                          <span
+                            className={cn(
+                              'block text-sm font-semibold',
+                              isActive ? 'text-foreground' : 'text-foreground/90',
+                            )}
+                          >
+                            {tab.label}
+                          </span>
+                          <span className="block text-xs text-muted-foreground">{tab.desc}</span>
+                        </span>
+                      </span>
+                    )}
+                  </NavLink>
+                );
+              })}
+            </nav>
+
+            {/* Horizontal tab tiles ≤lg (icon over short label, bottom-underline active). */}
+            <nav className="mt-4 grid grid-cols-3 gap-2 lg:hidden">
+              {TABS.map((tab) => {
+                const Icon = tab.icon;
+                return (
+                  <NavLink key={tab.to} to={tab.to} className="block">
+                    {({ isActive }) => (
+                      <span
+                        className={cn(
+                          'flex flex-col items-center gap-1.5 rounded-lg border px-2 py-3 text-center transition-colors',
+                          isActive
+                            ? 'border-primary/30 bg-primary/10'
+                            : 'border-border hover:bg-accent',
+                        )}
+                      >
+                        <Icon
+                          className={cn(
+                            'size-5',
+                            isActive ? 'text-primary' : 'text-muted-foreground',
+                          )}
+                        />
+                        <span
+                          className={cn(
+                            'text-xs font-medium',
+                            isActive ? 'text-foreground' : 'text-muted-foreground',
+                          )}
+                        >
+                          {tab.short}
+                        </span>
+                        {/* Bottom underline accent on the active tile. */}
+                        <span
+                          className={cn(
+                            'h-0.5 w-8 rounded-full bg-primary transition-opacity',
+                            isActive ? 'opacity-100' : 'opacity-0',
+                          )}
+                        />
+                      </span>
+                    )}
+                  </NavLink>
+                );
+              })}
+            </nav>
+          </aside>
+
+          {/* RIGHT: the active sub-page. */}
+          <div className="min-w-0 flex-1">
+            <Outlet />
+          </div>
+        </div>
+      </div>
+    </AppShell>
+  );
+}

package/template/frontend/src/pages/account/ChangePasswordPage.jsx

@@ -0,0 +1,235 @@
+/**
+ * ChangePasswordPage — OCA's two-pane change-password treatment rebuilt in shadcn.
+ * Rendered inside <AccountLayout/>'s <Outlet/>.
+ *
+ * LEFT pane: the three password fields (Current / New / Confirm) with a show/hide eye
+ * toggle, a 4-segment strength meter (scored 0–4 from length + char-class variety),
+ * and the submit button. RIGHT pane (border-separated): a LIVE requirements checklist
+ * that ticks green as each rule is met.
+ *
+ * HARD-required to submit: new ≥ 8 chars, differs from current, confirmation matches.
+ * ADVISORY (feed the meter only): mixed case, has a number/symbol. Core change-password
+ * call + toast + clear-on-success + inline error are lifted verbatim from the former
+ * single-page Account.jsx ChangePasswordCard.
+ */
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { Check, Eye, EyeOff, KeyRound, Loader2, Minus, ShieldCheck } from 'lucide-react';
+import { useAuth } from '@/auth/AuthContext';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+
+const MIN_PASSWORD_LEN = 8;
+
+/** Score a password 0–4 from length + character-class variety (advisory UX signal). */
+function scorePassword(pw) {
+  if (!pw) return 0;
+  let score = 0;
+  if (pw.length >= MIN_PASSWORD_LEN) score += 1;
+  if (pw.length >= 12) score += 1;
+  if (/[a-z]/.test(pw) && /[A-Z]/.test(pw)) score += 1;
+  if (/\d/.test(pw) || /[^A-Za-z0-9]/.test(pw)) score += 1;
+  return Math.min(score, 4);
+}
+
+const STRENGTH = [
+  { label: '', bar: 'bg-transparent', text: 'text-muted-foreground' },
+  { label: 'Weak', bar: 'bg-destructive', text: 'text-destructive' },
+  { label: 'Fair', bar: 'bg-[var(--warn)]', text: 'text-[var(--warn)]' },
+  { label: 'Good', bar: 'bg-primary', text: 'text-primary' },
+  { label: 'Strong', bar: 'bg-[var(--ok)]', text: 'text-[var(--ok)]' },
+];
+
+/** A single live requirement row — Check (met) or a muted dash (not yet). */
+function Rule({ met, children }) {
+  return (
+    <li className="flex items-center gap-2 text-sm">
+      {met ? (
+        <Check className="size-4 shrink-0 text-[var(--ok)]" />
+      ) : (
+        <Minus className="size-4 shrink-0 text-muted-foreground/60" />
+      )}
+      <span className={met ? 'text-foreground' : 'text-muted-foreground'}>{children}</span>
+    </li>
+  );
+}
+
+export default function ChangePasswordPage() {
+  const { tokens, account } = useAuth();
+  const [current, setCurrent] = useState('');
+  const [next, setNext] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [show, setShow] = useState(false);
+  const [error, setError] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  // Live rule state.
+  const longEnough = next.length >= MIN_PASSWORD_LEN;
+  const mixedCase = /[a-z]/.test(next) && /[A-Z]/.test(next);
+  const hasNumberOrSymbol = /\d/.test(next) || /[^A-Za-z0-9]/.test(next);
+  const differs = next.length > 0 && next !== current;
+  const matches = next.length > 0 && next === confirm;
+  const score = scorePassword(next);
+  const strength = STRENGTH[score];
+
+  const reset = () => {
+    setCurrent('');
+    setNext('');
+    setConfirm('');
+  };
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+
+    // Client-side pre-checks (server is authoritative; these are UX). Only the HARD
+    // rules gate submission — mixed-case / number are advisory (meter only).
+    if (!current || !next) {
+      setError('Please fill in your current and new password.');
+      return;
+    }
+    if (!longEnough) {
+      setError(`New password must be at least ${MIN_PASSWORD_LEN} characters.`);
+      return;
+    }
+    if (!differs) {
+      setError('Your new password must be different from your current one.');
+      return;
+    }
+    if (!matches) {
+      setError('New password and confirmation do not match.');
+      return;
+    }
+
+    setSubmitting(true);
+    const r = await account.changePassword(tokens?.accessToken, current, next);
+    setSubmitting(false);
+
+    if (r.ok) {
+      reset();
+      toast.success('Password changed', {
+        description: 'Your other sessions have been signed out. This one stays active.',
+      });
+      return;
+    }
+    setError(r.error || 'Could not change password.');
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-base">
+          <KeyRound className="size-4 text-primary" />
+          Change password
+        </CardTitle>
+        <CardDescription>
+          Set a new password. For your security, changing it signs out your other sessions —
+          this one stays active.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-6 md:grid-cols-2">
+          {/* LEFT — inputs, strength meter, submit. */}
+          <form onSubmit={onSubmit} className="space-y-4" noValidate>
+            <div className="space-y-1.5">
+              <Label htmlFor="cp-current">Current password</Label>
+              <div className="relative">
+                <Input
+                  id="cp-current"
+                  type={show ? 'text' : 'password'}
+                  autoComplete="current-password"
+                  value={current}
+                  onChange={(e) => setCurrent(e.target.value)}
+                  className="pr-10"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShow((v) => !v)}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 rounded-md p-1 text-muted-foreground transition-colors hover:text-foreground"
+                  aria-label={show ? 'Hide passwords' : 'Show passwords'}
+                >
+                  {show ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+                </button>
+              </div>
+            </div>
+
+            <div className="space-y-1.5">
+              <Label htmlFor="cp-new">New password</Label>
+              <Input
+                id="cp-new"
+                type={show ? 'text' : 'password'}
+                autoComplete="new-password"
+                value={next}
+                onChange={(e) => setNext(e.target.value)}
+                placeholder={`At least ${MIN_PASSWORD_LEN} characters`}
+              />
+              {/* 4-segment strength meter. */}
+              <div className="pt-1">
+                <div className="flex gap-1.5">
+                  {[1, 2, 3, 4].map((seg) => (
+                    <span
+                      key={seg}
+                      className={cn(
+                        'h-1.5 flex-1 rounded-full transition-colors',
+                        next && seg <= score ? strength.bar : 'bg-muted',
+                      )}
+                    />
+                  ))}
+                </div>
+                {next && (
+                  <p className={cn('mt-1 text-xs font-medium', strength.text)}>
+                    {strength.label} password
+                  </p>
+                )}
+              </div>
+            </div>
+
+            <div className="space-y-1.5">
+              <Label htmlFor="cp-confirm">Confirm new password</Label>
+              <Input
+                id="cp-confirm"
+                type={show ? 'text' : 'password'}
+                autoComplete="new-password"
+                value={confirm}
+                onChange={(e) => setConfirm(e.target.value)}
+              />
+            </div>
+
+            {error && (
+              <div className="rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+                {error}
+              </div>
+            )}
+
+            <Button type="submit" className="w-full sm:w-auto" disabled={submitting}>
+              {submitting ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : (
+                <ShieldCheck className="size-4" />
+              )}
+              {submitting ? 'Changing…' : 'Change password'}
+            </Button>
+          </form>
+
+          {/* RIGHT — live requirements guide (border-separated on md+). */}
+          <div className="md:border-l md:pl-6">
+            <p className="text-sm font-medium text-foreground">Password requirements</p>
+            <p className="mt-0.5 text-xs text-muted-foreground">
+              Updates as you type. Length, difference, and match are required.
+            </p>
+            <ul className="mt-3 space-y-2">
+              <Rule met={longEnough}>At least {MIN_PASSWORD_LEN} characters</Rule>
+              <Rule met={mixedCase}>Upper and lower case letters (recommended)</Rule>
+              <Rule met={hasNumberOrSymbol}>A number or symbol (recommended)</Rule>
+              <Rule met={differs}>Different from your current password</Rule>
+              <Rule met={matches}>New password and confirmation match</Rule>
+            </ul>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/template/frontend/src/pages/account/ProfilePage.jsx

@@ -0,0 +1,122 @@
+/**
+ * ProfilePage — self-service edit of the signed-in user's own display name + email.
+ * Rendered inside <AccountLayout/>'s <Outlet/> (the layout owns AppShell + the header).
+ *
+ * Pre-fills from the /auth/me profile (via useAuth().profile); on save it PATCHes
+ * /account/profile through the shared accountService, then calls refreshProfile() so
+ * the header/sidebar user card reflects the new name/email at once. Only sends the
+ * fields that actually changed (partial edit). All display values are NAMES (never
+ * UUIDs) — the profile the server returns is UUID-free by contract. (Logic lifted
+ * verbatim from the former single-page Account.jsx ProfileCard.)
+ */
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { Loader2, ShieldCheck, UserRound } from 'lucide-react';
+import { useAuth } from '@/auth/AuthContext';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+export default function ProfilePage() {
+  const { tokens, account, profile, refreshProfile } = useAuth();
+  const [name, setName] = useState(profile?.name ?? '');
+  const [email, setEmail] = useState(profile?.email ?? '');
+  const [error, setError] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  const initialName = profile?.name ?? '';
+  const initialEmail = profile?.email ?? '';
+  const dirty = name.trim() !== initialName || email.trim() !== initialEmail;
+
+  // The profile may still be loading (null) when this first mounts (e.g. a hard page
+  // refresh). Seed the fields once it arrives / changes; a server-side refresh after
+  // save re-syncs the inputs to the new profile.
+  useEffect(() => {
+    setName(profile?.name ?? '');
+    setEmail(profile?.email ?? '');
+  }, [profile?.name, profile?.email]);
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+
+    if (!name.trim()) {
+      setError('Please enter your name.');
+      return;
+    }
+    const changes = {};
+    if (name.trim() !== initialName) changes.name = name.trim();
+    if (email.trim() !== initialEmail) changes.email = email.trim();
+    if (Object.keys(changes).length === 0) {
+      setError('Nothing to update.');
+      return;
+    }
+
+    setSubmitting(true);
+    const r = await account.updateProfile(tokens?.accessToken, changes);
+    setSubmitting(false);
+
+    if (r.ok) {
+      await refreshProfile();
+      toast.success('Profile updated');
+      return;
+    }
+    setError(r.error || 'Could not update your profile.');
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-base">
+          <UserRound className="size-4 text-primary" />
+          Profile
+        </CardTitle>
+        <CardDescription>
+          Update your display name and email. These appear across the app and in your account.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={onSubmit} className="max-w-xl space-y-4" noValidate>
+          <div className="space-y-1.5">
+            <Label htmlFor="pf-name">Name</Label>
+            <Input
+              id="pf-name"
+              type="text"
+              autoComplete="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="pf-email">Email</Label>
+            <Input
+              id="pf-email"
+              type="email"
+              autoComplete="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </div>
+
+          {error && (
+            <div className="rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {error}
+            </div>
+          )}
+
+          <div className="flex justify-end">
+            <Button type="submit" disabled={submitting || !dirty}>
+              {submitting ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : (
+                <ShieldCheck className="size-4" />
+              )}
+              {submitting ? 'Saving…' : 'Save changes'}
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}