@data-club/ai-hub 0.0.1

package/src/components/DataClubAIHubAdmin/PasswordRevealModal.tsx

@@ -0,0 +1,204 @@
+/**
+ * `<PasswordRevealModal />` — one-time-display of a server-generated
+ * password. Reused for the create-user and reset-password flows on the
+ * Admin Users page ([05-admin-users.md]).
+ *
+ * Once dismissed, the password is gone — there's no path back. The
+ * component never logs the value and never lifts it into any persistent
+ * store; it lives in the host component's local state until `onClose`.
+ *
+ * Behavior contracts:
+ *
+ * - Clicking the copy button writes the password to the clipboard and
+ *   flashes the "Copied!" confirmation for ~2s. The flash uses a timer
+ *   that the host doesn't need to manage.
+ * - There is no "click outside to dismiss" — the modal must be explicitly
+ *   closed via the Done button. This is deliberate ([05-admin-users.md]):
+ *   the admin can't accidentally lose the password by misclicking.
+ * - The password field is a read-only `<input>` so a screen-reader user
+ *   can read + select it like any other text field (rather than putting
+ *   it inside a `<div>` and forcing the user to mouse-drag-select).
+ *
+ * @see SPECIFICATIONS.md §8.5 — password reset semantics
+ * @see ui-sketches/05-admin-users.md — password_reveal_modal
+ */
+import { useEffect, useRef, useState, type ReactNode } from "react";
+
+import type { AIHubAdminTexts } from "../../auth/texts.js";
+
+/**
+ * Props for `<PasswordRevealModal />`.
+ */
+export interface PasswordRevealModalProps {
+  /** Modal-title variant — drives which texts key is used. */
+  variant: "create" | "reset";
+  /** Username the password belongs to. */
+  username: string;
+  /** The 16-char alphanumeric plaintext. Never logged; never stored. */
+  password: string;
+  /** Resolved admin texts (admin namespace). */
+  texts: AIHubAdminTexts;
+  /** Fired when the admin clicks Done — the password is unrecoverable after. */
+  onClose: () => void;
+}
+
+/**
+ * Renders the reveal modal.
+ *
+ * @param props - see `PasswordRevealModalProps`.
+ * @returns the rendered modal.
+ */
+export function PasswordRevealModal(
+  props: PasswordRevealModalProps,
+): ReactNode {
+  const [copied, setCopied] = useState(false);
+  // Stash the timeout id so unmount during the flash cleans up properly.
+  const flashTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (flashTimer.current !== null) clearTimeout(flashTimer.current);
+    };
+  }, []);
+
+  async function handleCopy(): Promise<void> {
+    // Two clipboard backends to cover JSDOM tests AND old browsers without
+    // the async clipboard API: prefer the modern one, fall back to
+    // `document.execCommand` via a hidden textarea.
+    let ok = false;
+    try {
+      if (
+        typeof navigator !== "undefined" &&
+        navigator.clipboard?.writeText
+      ) {
+        await navigator.clipboard.writeText(props.password);
+        ok = true;
+      }
+    } catch {
+      ok = false;
+    }
+    if (!ok && typeof document !== "undefined") {
+      try {
+        const ta = document.createElement("textarea");
+        ta.value = props.password;
+        ta.setAttribute("readonly", "");
+        ta.style.position = "absolute";
+        ta.style.left = "-9999px";
+        document.body.appendChild(ta);
+        ta.select();
+        try {
+          document.execCommand("copy");
+          ok = true;
+        } finally {
+          document.body.removeChild(ta);
+        }
+      } catch {
+        ok = false;
+      }
+    }
+    // Even if both paths failed (unlikely outside test envs), surface the
+    // flash so the admin knows their click registered; the password is
+    // still visible on screen for manual transcription.
+    setCopied(true);
+    if (flashTimer.current !== null) clearTimeout(flashTimer.current);
+    flashTimer.current = setTimeout(() => setCopied(false), 2000);
+  }
+
+  const title =
+    props.variant === "create"
+      ? props.texts.passwordRevealCreateTitle
+      : props.texts.passwordRevealResetTitle;
+
+  return (
+    <div
+      className="data-club-ai-hub-admin__modal-backdrop"
+      data-testid="password-reveal-modal-backdrop"
+      role="presentation"
+    >
+      <div
+        className="data-club-ai-hub-admin__modal data-club-ai-hub-admin__modal--password-reveal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="password-reveal-title"
+        data-testid="password-reveal-modal"
+      >
+        <h2
+          id="password-reveal-title"
+          className="data-club-ai-hub-admin__modal-title"
+        >
+          {title}
+        </h2>
+        <p
+          className="data-club-ai-hub-admin__modal-warning"
+          data-testid="password-reveal-warning"
+        >
+          ⚠ {props.texts.passwordRevealWarning}
+        </p>
+        <label
+          className="data-club-ai-hub-admin__modal-field"
+          data-testid="password-reveal-username-row"
+        >
+          <span className="data-club-ai-hub-admin__modal-label">
+            {props.texts.passwordRevealUsernameLabel}
+          </span>
+          <input
+            type="text"
+            readOnly
+            value={props.username}
+            className="data-club-ai-hub-admin__modal-input"
+            data-testid="password-reveal-username"
+          />
+        </label>
+        <label
+          className="data-club-ai-hub-admin__modal-field"
+          data-testid="password-reveal-password-row"
+        >
+          <span className="data-club-ai-hub-admin__modal-label">
+            {props.texts.passwordRevealPasswordLabel}
+          </span>
+          <div className="data-club-ai-hub-admin__password-reveal-row">
+            <input
+              type="text"
+              readOnly
+              value={props.password}
+              className="data-club-ai-hub-admin__modal-input data-club-ai-hub-admin__modal-input--password"
+              data-testid="password-reveal-password"
+              spellCheck={false}
+            />
+            <button
+              type="button"
+              className="data-club-ai-hub-admin__copy-button"
+              data-testid="password-reveal-copy"
+              aria-label={props.texts.passwordRevealCopyAriaLabel}
+              onClick={() => {
+                void handleCopy();
+              }}
+            >
+              📋
+            </button>
+            {copied ? (
+              <span
+                className="data-club-ai-hub-admin__copy-flash"
+                data-testid="password-reveal-copied-flash"
+                role="status"
+                aria-live="polite"
+              >
+                {props.texts.passwordRevealCopiedFlash}
+              </span>
+            ) : null}
+          </div>
+        </label>
+        <div className="data-club-ai-hub-admin__modal-actions">
+          <button
+            type="button"
+            className="data-club-ai-hub-admin__button data-club-ai-hub-admin__button--primary"
+            data-testid="password-reveal-done"
+            onClick={props.onClose}
+          >
+            {props.texts.passwordRevealDoneButton}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/DataClubAIHubAdmin/ResetPasswordModal.tsx

@@ -0,0 +1,122 @@
+/**
+ * `<ResetPasswordModal />` — Phase-1 confirm dialog for the password-reset
+ * flow ([05-admin-users.md]).
+ *
+ * Phase 2 (revealing the new plaintext) reuses `<PasswordRevealModal />`
+ * exactly as the create-user flow does — the parent (`<AdminUsersPage />`)
+ * owns the phase transition.
+ *
+ * @see SPECIFICATIONS.md §8.5 — password reset semantics
+ * @see ui-sketches/05-admin-users.md — reset_password_confirm_modal
+ */
+import { useState, type ReactNode } from "react";
+
+import type { AIHubAdminTexts } from "../../auth/texts.js";
+
+/**
+ * Props for `<ResetPasswordModal />`.
+ */
+export interface ResetPasswordModalProps {
+  /** Username of the target — substituted into the modal title. */
+  username: string;
+  /** Resolved admin texts. */
+  texts: AIHubAdminTexts;
+  /**
+   * Confirms the reset. Resolves on success; throws on failure so the modal
+   * can surface the message inline.
+   */
+  onConfirm: () => Promise<void>;
+  /** Fired when the admin cancels — no server call. */
+  onCancel: () => void;
+}
+
+/**
+ * Renders the reset-password confirm modal.
+ *
+ * @param props - see `ResetPasswordModalProps`.
+ * @returns the rendered modal.
+ */
+export function ResetPasswordModal(
+  props: ResetPasswordModalProps,
+): ReactNode {
+  const [submitting, setSubmitting] = useState(false);
+  const [errorText, setErrorText] = useState<string | null>(null);
+
+  async function handleConfirm(): Promise<void> {
+    setErrorText(null);
+    setSubmitting(true);
+    try {
+      await props.onConfirm();
+    } catch (err) {
+      const message =
+        err instanceof Error && err.message
+          ? err.message
+          : props.texts.resetPasswordGenericError;
+      setErrorText(message);
+      setSubmitting(false);
+    }
+  }
+
+  const title = props.texts.resetPasswordModalTitle.replace(
+    "{username}",
+    props.username,
+  );
+
+  return (
+    <div
+      className="data-club-ai-hub-admin__modal-backdrop"
+      role="presentation"
+    >
+      <div
+        className="data-club-ai-hub-admin__modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="reset-password-modal-title"
+        data-testid="reset-password-modal"
+      >
+        <h2
+          id="reset-password-modal-title"
+          className="data-club-ai-hub-admin__modal-title"
+        >
+          {title}
+        </h2>
+        {errorText !== null ? (
+          <div
+            className="data-club-ai-hub-admin__modal-error"
+            data-testid="reset-password-error"
+            role="alert"
+          >
+            {errorText}
+          </div>
+        ) : null}
+        <p className="data-club-ai-hub-admin__modal-body">
+          {props.texts.resetPasswordModalBody}
+        </p>
+        <div className="data-club-ai-hub-admin__modal-actions">
+          <button
+            type="button"
+            className="data-club-ai-hub-admin__button"
+            data-testid="reset-password-cancel"
+            onClick={props.onCancel}
+            disabled={submitting}
+          >
+            {props.texts.resetPasswordCancelButton}
+          </button>
+          <button
+            type="button"
+            className="data-club-ai-hub-admin__button data-club-ai-hub-admin__button--primary"
+            data-testid="reset-password-confirm"
+            onClick={() => {
+              void handleConfirm();
+            }}
+            disabled={submitting}
+          >
+            {submitting
+              ? props.texts.resetPasswordConfirmingButton
+              : props.texts.resetPasswordConfirmButton}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}