npm - @solidxai/core-ui - Versions diffs - 0.1.8-beta.8 → 0.1.8-beta.9 - Mend

@solidxai/core-ui 0.1.8-beta.8 → 0.1.8-beta.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/dist/components/core/users/ApiKeysTab/ApiKeysTab.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useDispatch } from "react-redux";
 import { KeyRound, Plus } from "lucide-react";
 import "./ApiKeysTab.css";
@@ -33,33 +33,43 @@ function ApiKeysTable({
   keys,
   onToggleActive,
   isTogglingId,
+  onGenerateFirstKey,
+  canCreate,
 }: {
   keys: ApiKeyRecord[];
   onToggleActive: (key: ApiKeyRecord) => void;
   isTogglingId: string | null;
+  onGenerateFirstKey: () => void;
+  canCreate: boolean;
 }) {
   if (keys.length === 0) {
     return (
-      <div
-        className="flex flex-column align-items-center justify-content-center gap-3 py-6"
-        style={{ color: "var(--solid-text-secondary, #888)" }}
-      >
-        <KeyRound size={32} strokeWidth={1.5} />
+      <div className="solid-api-keys-empty">
+        <div className="solid-api-keys-empty-icon">
+          <KeyRound size={30} strokeWidth={1.6} />
+        </div>
         <div className="text-center">
-          <p className="m-0" style={{ fontSize: 14, fontWeight: 500 }}>
-            No API keys
-          </p>
-          <p className="m-0 mt-1" style={{ fontSize: 12 }}>
-            Generate a key to enable programmatic access.
+          <p className="solid-api-keys-empty-title m-0">No API keys yet</p>
+          <p className="solid-api-keys-empty-copy m-0">
+            {canCreate
+              ? "Generate a key to enable secure programmatic access for this user."
+              : "API key generation is disabled for this user account."}
           </p>
         </div>
+        {canCreate ? (
+          <SolidButton type="button" onClick={onGenerateFirstKey}>
+            <Plus size={14} />
+            Generate First Key
+          </SolidButton>
+        ) : null}
       </div>
     );
   }
   return (
-    <div style={{ overflowX: "auto" }}>
-      <table style={{ width: "100%", borderCollapse: "collapse", tableLayout: "fixed" }}>
+    <div className="solid-api-keys-table-shell">
+      <div className="solid-api-keys-table-wrap">
+        <table className="solid-api-keys-table">
         <colgroup>
           <col style={{ width: "18%" }} />
           <col style={{ width: "22%" }} />
@@ -75,7 +85,7 @@ function ApiKeysTable({
             <th className="solid-api-keys-th">Status</th>
             <th className="solid-api-keys-th">Expires</th>
             <th className="solid-api-keys-th">Last Used</th>
-            <th className="solid-api-keys-th" style={{ textAlign: "right" }}>Active</th>
+            <th className="solid-api-keys-th solid-api-keys-th--right">Active</th>
           </tr>
         </thead>
         <tbody>
@@ -86,21 +96,11 @@ function ApiKeysTable({
             return (
               <tr key={key.id} className={isExpired ? "solid-api-keys-row--expired" : undefined}>
                 <td className="solid-api-keys-td">
-                  <span style={{ fontWeight: 500 }}>{key.name}</span>
+                  <span className="solid-api-keys-name">{key.name}</span>
                 </td>
                 <td className="solid-api-keys-td">
-                  <code
-                    style={{
-                      fontFamily: "monospace",
-                      fontSize: 13,
-                      background: "var(--solid-surface-secondary, #f5f5f5)",
-                      padding: "2px 6px",
-                      borderRadius: 4,
-                    }}
-                  >
-                    {key.maskedKey}
-                  </code>
+                  <code className="solid-api-keys-code">{key.maskedKey}</code>
                 </td>
                 <td className="solid-api-keys-td">
@@ -115,29 +115,19 @@ function ApiKeysTable({
                   )}
                 </td>
-                <td
-                  className="solid-api-keys-td"
-                  style={{
-                    color:
-                      expiryStatus === "expired"
-                        ? "var(--solid-danger-color, #ef4444)"
-                        : expiryStatus === "expiring-soon"
-                        ? "var(--solid-warn-color, #f59e0b)"
-                        : undefined,
-                  }}
-                >
+                <td className={`solid-api-keys-td ${expiryStatus === "expired" ? "solid-api-keys-date--expired" : ""} ${expiryStatus === "expiring-soon" ? "solid-api-keys-date--warning" : ""}`}>
                   {expiryStatus === "never" ? (
-                    <span style={{ color: "var(--solid-text-secondary, #888)" }}>Never</span>
+                    <span className="solid-api-keys-muted">Never</span>
                   ) : (
                     formatDate(key.expiresAt)
                   )}
                 </td>
-                <td className="solid-api-keys-td" style={{ color: "var(--solid-text-secondary, #888)" }}>
+                <td className="solid-api-keys-td solid-api-keys-muted">
                   {formatDate(key.lastUsedAt)}
                 </td>
-                <td className="solid-api-keys-td" style={{ textAlign: "right" }}>
+                <td className="solid-api-keys-td solid-api-keys-td--right">
                   {isTogglingId === key.id ? (
                     <SolidSpinner />
                   ) : (
@@ -152,7 +142,8 @@ function ApiKeysTable({
             );
           })}
         </tbody>
-      </table>
+        </table>
+      </div>
     </div>
   );
 }
@@ -164,13 +155,18 @@ interface ApiKeysTabProps {
 export function ApiKeysTab({ userId, canCreate = false }: ApiKeysTabProps) {
   const dispatch = useDispatch();
-  const { data, isLoading, isError } = useGetUserApiKeysQuery(userId);
+  const { data, isLoading, isError, refetch } = useGetUserApiKeysQuery(userId);
   const [updateApiKey] = useUpdateApiKeyMutation();
   const [togglingId, setTogglingId] = useState<string | null>(null);
   const [showGenerate, setShowGenerate] = useState(false);
   const [revealKey, setRevealKey] = useState<{ apiKey: string; keyName: string } | null>(null);
+  const [optimisticKeys, setOptimisticKeys] = useState<ApiKeyRecord[]>([]);
-  const keys: ApiKeyRecord[] = data?.data?.apiKeys ?? [];
+  const keys = useMemo(() => {
+    const serverKeys = data?.data?.apiKeys ?? [];
+    const merged = [...optimisticKeys.filter((key) => !serverKeys.some((serverKey) => serverKey.id === key.id)), ...serverKeys];
+    return merged.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+  }, [data?.data?.apiKeys, optimisticKeys]);
   const handleToggle = async (key: ApiKeyRecord) => {
     setTogglingId(key.id);
@@ -199,37 +195,41 @@ export function ApiKeysTab({ userId, canCreate = false }: ApiKeysTabProps) {
   return (
     <>
       <div className="solid-api-keys-tab">
-        <div className="flex align-items-center justify-content-between mb-4">
-          <div>
-            <p className="m-0" style={{ fontWeight: 600, fontSize: 14 }}>
-              API Keys
-            </p>
-            <p className="m-0 mt-1" style={{ fontSize: 12, color: "var(--solid-text-secondary, #888)" }}>
+        <div className="solid-api-keys-hero">
+          <div className="solid-api-keys-copy">
+            <p className="solid-api-keys-title m-0">API Keys</p>
+            <p className="solid-api-keys-subtitle m-0">
               Keys grant programmatic access. Store them securely — they are shown only once.
             </p>
           </div>
-          {canCreate && (
-            <SolidButton size="small" type="button" onClick={() => setShowGenerate(true)}>
-              <Plus size={14} />
-              Generate Key
-            </SolidButton>
-          )}
+          <div className="solid-api-keys-actions">
+            <span className="solid-api-keys-count">{keys.length} key{keys.length === 1 ? "" : "s"}</span>
+            {canCreate ? (
+              <SolidButton size="small" type="button" onClick={() => setShowGenerate(true)}>
+                <Plus size={14} />
+                Generate Key
+              </SolidButton>
+            ) : null}
+          </div>
         </div>
         {isLoading ? (
-          <div className="flex justify-content-center py-5">
+          <div className="solid-api-keys-state">
             <SolidSpinner />
           </div>
         ) : isError && keys.length === 0 ? (
-          <div
-            className="flex flex-column align-items-center justify-content-center gap-2 py-5"
-            style={{ color: "var(--solid-text-secondary, #888)", fontSize: 13 }}
-          >
+          <div className="solid-api-keys-error">
             <p className="m-0">Something went wrong while loading API keys.</p>
             <p className="m-0">Please refresh the page and try again.</p>
           </div>
         ) : (
-          <ApiKeysTable keys={keys} onToggleActive={handleToggle} isTogglingId={togglingId} />
+          <ApiKeysTable
+            keys={keys}
+            onToggleActive={handleToggle}
+            isTogglingId={togglingId}
+            onGenerateFirstKey={() => setShowGenerate(true)}
+            canCreate={canCreate}
+          />
         )}
       </div>
@@ -237,8 +237,10 @@ export function ApiKeysTab({ userId, canCreate = false }: ApiKeysTabProps) {
         open={showGenerate}
         userId={Number(userId)}
         onClose={() => setShowGenerate(false)}
-        onCreated={(apiKey, keyName) => {
+        onCreated={(apiKey, keyName, record) => {
           setShowGenerate(false);
+          setOptimisticKeys((previous) => [record, ...previous.filter((existing) => existing.id !== record.id)]);
+          void refetch();
           setRevealKey({ apiKey, keyName });
         }}
       />

package/dist/components/core/users/ApiKeysTab/GenerateApiKeyModal.d.ts CHANGED Viewed

@@ -1,7 +1,8 @@
+import { type ApiKeyRecord } from "../../../../redux/api/apiKeyApi";
 interface GenerateApiKeyModalProps {
     open: boolean;
     onClose: () => void;
-    onCreated: (rawApiKey: string, keyName: string) => void;
+    onCreated: (rawApiKey: string, keyName: string, record: ApiKeyRecord) => void;
     userId?: number;
 }
 export declare function GenerateApiKeyModal({ open, onClose, onCreated, userId }: GenerateApiKeyModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/core/users/ApiKeysTab/GenerateApiKeyModal.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GenerateApiKeyModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/GenerateApiKeyModal.tsx"],"names":[],"mappings":"~~AAmDA~~,UAAU,wBAAwB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;~~IACxD~~,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,wBAAwB,~~2CA4HjG~~"}
1	+ {"version":3,"file":"GenerateApiKeyModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/GenerateApiKeyModal.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,KAAK,YAAY,EAAoC,MAAM,iCAAiC,CAAC;AAiCtG,UAAU,wBAAwB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9E,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,wBAAwB,2CAkIjG"}

package/dist/components/core/users/ApiKeysTab/GenerateApiKeyModal.js CHANGED Viewed

@@ -50,7 +50,7 @@ import { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import { useFormik } from "formik";
 import * as Yup from "yup";
-import { SolidButton, SolidDatePicker, SolidDialog, SolidDialogBody, SolidDialogFooter, SolidDialogHeader, SolidDialogSeparator, SolidDialogTitle, SolidInput, SolidMessage, SolidSelect, } from "../../../shad-cn-ui";
+import { SolidButton, SolidDatePicker, SolidDialog, SolidDialogBody, SolidDialogDescription, SolidDialogFooter, SolidDialogHeader, SolidDialogSeparator, SolidDialogTitle, SolidInput, SolidMessage, SolidSelect, } from "../../../shad-cn-ui";
 import { showToast } from "../../../../redux/features/toastSlice";
 import { useGenerateApiKeyForUserMutation } from "../../../../redux/api/apiKeyApi";
 var EXPIRY_OPTIONS = [
@@ -118,7 +118,7 @@ export function GenerateApiKeyModal(_a) {
                         return [4 /*yield*/, generateApiKeyForUser({ userId: userId, body: body }).unwrap()];
                     case 2:
                         response = _b.sent();
-                        onCreated(response.data.apiKey, values.name.trim());
+                        onCreated(response.data.apiKey, values.name.trim(), response.data.record);
                         handleClose();
                         return [3 /*break*/, 4];
                     case 3:
@@ -147,11 +147,11 @@ export function GenerateApiKeyModal(_a) {
     var expiryError = formik.touched.expiryOption && formik.errors.expiryOption
         ? String(formik.errors.expiryOption)
         : "";
-    return (_jsxs(SolidDialog, { open: open, onOpenChange: handleClose, style: { maxWidth: 480 }, children: [_jsx(SolidDialogHeader, { children: _jsx(SolidDialogTitle, { children: "Generate API Key" }) }), _jsx(SolidDialogSeparator, {}), _jsx(SolidDialogBody, { children: _jsx("form", { id: "generate-api-key-form", onSubmit: formik.handleSubmit, children: _jsxs("div", { className: "flex flex-column gap-3", children: [_jsxs("div", { className: "flex flex-column gap-2", children: [_jsxs("label", { htmlFor: "api-key-name", className: "form-field-label", children: ["Key Name ", _jsx("span", { style: { color: "var(--solid-danger-color, #ef4444)" }, children: "*" })] }), _jsx(SolidInput, { id: "api-key-name", name: "name", autoComplete: "off", placeholder: "e.g. CI/CD pipeline, Mobile app", value: formik.values.name, onChange: formik.handleChange, onBlur: formik.handleBlur }), nameError && _jsx(SolidMessage, { severity: "error", text: nameError })] }), _jsxs("div", { className: "flex flex-column gap-2", children: [_jsx("label", { htmlFor: "api-key-expiry", className: "form-field-label", children: "Expires" }), _jsx(SolidSelect, { value: formik.values.expiryOption, options: EXPIRY_OPTIONS, optionLabel: "label", optionValue: "value", onChange: function (_a) {
+    return (_jsxs(SolidDialog, { open: open, onOpenChange: handleClose, style: { maxWidth: 480 }, className: "solid-api-key-dialog", children: [_jsxs(SolidDialogHeader, { className: "solid-api-key-dialog-header", children: [_jsx(SolidDialogTitle, { children: "Generate API Key" }), _jsx(SolidDialogDescription, { children: "Create a named key for this user. The raw key will be shown only once after generation." })] }), _jsx(SolidDialogSeparator, {}), _jsx(SolidDialogBody, { className: "solid-api-key-dialog-body", children: _jsx("form", { id: "generate-api-key-form", onSubmit: formik.handleSubmit, children: _jsxs("div", { className: "solid-api-key-dialog-fields", children: [_jsxs("div", { className: "solid-api-key-dialog-field", children: [_jsxs("label", { htmlFor: "api-key-name", className: "form-field-label", children: ["Key Name ", _jsx("span", { style: { color: "var(--solid-danger-color, #ef4444)" }, children: "*" })] }), _jsx(SolidInput, { id: "api-key-name", name: "name", autoComplete: "off", placeholder: "e.g. CI/CD pipeline, Mobile app", value: formik.values.name, onChange: formik.handleChange, onBlur: formik.handleBlur }), nameError && _jsx(SolidMessage, { severity: "error", text: nameError })] }), _jsxs("div", { className: "solid-api-key-dialog-field", children: [_jsx("label", { htmlFor: "api-key-expiry", className: "form-field-label", children: "Expires" }), _jsx(SolidSelect, { value: formik.values.expiryOption, options: EXPIRY_OPTIONS, optionLabel: "label", optionValue: "value", onChange: function (_a) {
                                             var value = _a.value;
                                             formik.setFieldValue("expiryOption", value);
                                             if (value !== "custom")
                                                 setCustomDate(null);
-                                        } }), formik.values.expiryOption === "custom" && (_jsx(SolidDatePicker, { selected: customDate, onChange: function (date) { return setCustomDate(date); }, minDate: new Date(), placeholderText: "Select expiry date", dateFormat: "dd/MM/yyyy" })), expiryError && _jsx(SolidMessage, { severity: "error", text: expiryError })] })] }) }) }), _jsx(SolidDialogSeparator, {}), _jsxs(SolidDialogFooter, { children: [_jsx(SolidButton, { variant: "outline", type: "button", onClick: handleClose, disabled: isLoading, children: "Cancel" }), _jsx(SolidButton, { type: "submit", form: "generate-api-key-form", loading: isLoading, children: "Generate Key" })] })] }));
+                                        } }), formik.values.expiryOption === "custom" && (_jsx(SolidDatePicker, { selected: customDate, onChange: function (date) { return setCustomDate(date); }, minDate: new Date(), placeholderText: "Select expiry date", dateFormat: "dd/MM/yyyy" })), formik.values.expiryOption !== "custom" ? (_jsx("p", { className: "solid-api-key-dialog-hint m-0", children: "Choose how long this key should remain valid." })) : null, expiryError && _jsx(SolidMessage, { severity: "error", text: expiryError })] })] }) }) }), _jsx(SolidDialogSeparator, {}), _jsxs(SolidDialogFooter, { className: "solid-api-key-dialog-footer", children: [_jsx(SolidButton, { variant: "outline", type: "button", onClick: handleClose, disabled: isLoading, children: "Cancel" }), _jsx(SolidButton, { type: "submit", form: "generate-api-key-form", loading: isLoading, children: "Generate Key" })] })] }));
 }
 //# sourceMappingURL=GenerateApiKeyModal.js.map

package/dist/components/core/users/ApiKeysTab/GenerateApiKeyModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GenerateApiKeyModal.js","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/GenerateApiKeyModal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EACL,WAAW,EACX,eAAe,EACf,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,WAAW,GACZ,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,gCAAgC,EAAE,MAAM,iCAAiC,CAAC;AAEnF,IAAM,cAAc,GAAG;IACrB,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE;IAClC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE;IAClC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE;IAClC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE;CAC1C,CAAC;AAEF,SAAS,OAAO,CAAC,IAAY;IAC3B,IAAM,CAAC,GAAG,IAAI,IAAI,EAAE,CAAC;IACrB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,CAAC;IAC9B,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;AACzB,CAAC;AAED,SAAS,gBAAgB,CAAC,YAAoB,EAAE,UAAuB;IACrE,QAAQ,YAAY,EAAE;QACpB,KAAK,KAAK;YACR,OAAO,OAAO,CAAC,EAAE,CAAC,CAAC;QACrB,KAAK,KAAK;YACR,OAAO,OAAO,CAAC,EAAE,CAAC,CAAC;QACrB,KAAK,KAAK;YACR,OAAO,OAAO,CAAC,EAAE,CAAC,CAAC;QACrB,KAAK,OAAO;YACV,OAAO,SAAS,CAAC;QACnB,KAAK,QAAQ;YACX,OAAO,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;QAC3D;YACE,OAAO,SAAS,CAAC;KACpB;AACH,CAAC;AASD,MAAM,UAAU,mBAAmB,CAAC,EAA8D;IAAlG,iBA4HC;QA5HqC,IAAI,UAAA,EAAE,OAAO,aAAA,EAAE,SAAS,eAAA,EAAE,MAAM,YAAA;IACpE,IAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IACzB,IAAA,KAAyC,gCAAgC,EAAE,EAA1E,qBAAqB,QAAA,EAAI,SAAS,kBAAwC,CAAC;IAC5E,IAAA,KAA8B,QAAQ,CAAc,IAAI,CAAC,EAAxD,UAAU,QAAA,EAAE,aAAa,QAA+B,CAAC;IAEhE,IAAM,MAAM,GAAG,SAAS,CAAC;QACvB,aAAa,EAAE;YACb,IAAI,EAAE,EAAE;YACR,YAAY,EAAE,KAAK;SACpB;QACD,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC;YAC3B,IAAI,EAAE,GAAG,CAAC,MAAM,EAAE;iBACf,IAAI,EAAE;iBACN,GAAG,CAAC,CAAC,EAAE,oCAAoC,CAAC;iBAC5C,GAAG,CAAC,EAAE,EAAE,qCAAqC,CAAC;iBAC9C,QAAQ,CAAC,sBAAsB,CAAC;YACnC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,oBAAoB,CAAC;SAC1D,CAAC;QACF,QAAQ,EAAE,UAAO,MAAM,EAAE,OAAO;;;;;;wBAC9B,IAAI,MAAM,CAAC,YAAY,KAAK,QAAQ,IAAI,CAAC,UAAU,EAAE;4BACnD,OAAO,CAAC,aAAa,CAAC,cAAc,EAAE,oCAAoC,CAAC,CAAC;4BAC5E,sBAAO;yBACR;wBAEK,SAAS,GAAG,gBAAgB,CAAC,MAAM,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;;;;wBAG5D,IAAI,cAAK,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,WAAA,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAE,CAAC;wBAC9D,qBAAM,qBAAqB,CAAC,EAAE,MAAM,EAAE,MAAO,EAAE,IAAI,MAAA,EAAE,CAAC,CAAC,MAAM,EAAE,EAAA;;wBAA1E,QAAQ,GAAG,SAA+D;wBAEhF,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;wBACpD,WAAW,EAAE,CAAC;;;;wBAER,MAAM,GAAG,CAAA,MAAA,KAAG,aAAH,KAAG,uBAAH,KAAG,CAAE,IAAI,0CAAE,OAAO,KAAI,+CAA+C,CAAC;wBACrF,QAAQ,CAAC,SAAS,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,QAAA,EAAE,CAAC,CAAC,CAAC;;;;;aAExE;KACF,CAAC,CAAC;IAEH,IAAM,WAAW,GAAG;QAClB,MAAM,CAAC,SAAS,EAAE,CAAC;QACnB,aAAa,CAAC,IAAI,CAAC,CAAC;QACpB,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;IAEF,8BAA8B;IAC9B,SAAS,CAAC;QACR,IAAI,IAAI,EAAE;YACR,MAAM,CAAC,SAAS,EAAE,CAAC;YACnB,aAAa,CAAC,IAAI,CAAC,CAAC;SACrB;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,IAAM,SAAS,GACb,MAAM,CAAC,OAAO,CAAC,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9E,IAAM,WAAW,GACf,MAAM,CAAC,OAAO,CAAC,YAAY,IAAI,MAAM,CAAC,MAAM,CAAC,YAAY;QACvD,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC;QACpC,CAAC,CAAC,EAAE,CAAC;IAET,OAAO,CACL,MAAC,WAAW,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,aAC1E,KAAC,iBAAiB,cAChB,KAAC,gBAAgB,mCAAoC,GACnC,EACpB,KAAC,oBAAoB,KAAG,EACxB,KAAC,eAAe,cACd,eAAM,EAAE,EAAC,uBAAuB,EAAC,QAAQ,EAAE,MAAM,CAAC,YAAY,YAC5D,eAAK,SAAS,EAAC,wBAAwB,aACrC,eAAK,SAAS,EAAC,wBAAwB,aACrC,iBAAO,OAAO,EAAC,cAAc,EAAC,SAAS,EAAC,kBAAkB,0BAC/C,eAAM,KAAK,EAAE,EAAE,KAAK,EAAE,oCAAoC,EAAE,kBAAU,IACzE,EACR,KAAC,UAAU,IACT,EAAE,EAAC,cAAc,EACjB,IAAI,EAAC,MAAM,EACX,YAAY,EAAC,KAAK,EAClB,WAAW,EAAC,iCAAiC,EAC7C,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,EACzB,QAAQ,EAAE,MAAM,CAAC,YAAY,EAC7B,MAAM,EAAE,MAAM,CAAC,UAAU,GACzB,EACD,SAAS,IAAI,KAAC,YAAY,IAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAE,SAAS,GAAI,IAC5D,EAEN,eAAK,SAAS,EAAC,wBAAwB,aACrC,gBAAO,OAAO,EAAC,gBAAgB,EAAC,SAAS,EAAC,kBAAkB,wBAEpD,EACR,KAAC,WAAW,IACV,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,YAAY,EACjC,OAAO,EAAE,cAAc,EACvB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,OAAO,EACnB,QAAQ,EAAE,UAAC,EAAS;gDAAP,KAAK,WAAA;4CAChB,MAAM,CAAC,aAAa,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;4CAC5C,IAAI,KAAK,KAAK,QAAQ;gDAAE,aAAa,CAAC,IAAI,CAAC,CAAC;wCAC9C,CAAC,GACD,EACD,MAAM,CAAC,MAAM,CAAC,YAAY,KAAK,QAAQ,IAAI,CAC1C,KAAC,eAAe,IACd,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,UAAC,IAAiB,IAAK,OAAA,aAAa,CAAC,IAAI,CAAC,EAAnB,CAAmB,EACpD,OAAO,EAAE,IAAI,IAAI,EAAE,EACnB,eAAe,EAAC,oBAAoB,EACpC,UAAU,EAAC,YAAY,GACvB,CACH,EACA,WAAW,IAAI,KAAC,YAAY,IAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAE,WAAW,GAAI,IAChE,IACF,GACD,GACS,EAClB,KAAC,oBAAoB,KAAG,EACxB,MAAC,iBAAiB,eAChB,KAAC,WAAW,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,uBAExE,EACd,KAAC,WAAW,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,uBAAuB,EAAC,OAAO,EAAE,SAAS,6BAE5D,IACI,IACR,CACf,CAAC;AACJ,CAAC","sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport { useFormik } from \"formik\";\nimport * as Yup from \"yup\";\nimport {\n SolidButton,\n SolidDatePicker,\n SolidDialog,\n SolidDialogBody,\n SolidDialogFooter,\n SolidDialogHeader,\n SolidDialogSeparator,\n SolidDialogTitle,\n SolidInput,\n SolidMessage,\n SolidSelect,\n} from \"../../../shad-cn-ui\";\nimport { showToast } from \"../../../../redux/features/toastSlice\";\nimport { useGenerateApiKeyForUserMutation } from \"../../../../redux/api/apiKeyApi\";\n\nconst EXPIRY_OPTIONS = [\n { label: \"30 days\", value: \"30d\" },\n { label: \"60 days\", value: \"60d\" },\n { label: \"90 days\", value: \"90d\" },\n { label: \"Never\", value: \"never\" },\n { label: \"Custom date\", value: \"custom\" },\n];\n\nfunction addDays(days: number): string {\n const d = new Date();\n d.setDate(d.getDate() + days);\n return d.toISOString();\n}\n\nfunction resolveExpiresAt(expiryOption: string, customDate: Date \| null): string \| undefined {\n switch (expiryOption) {\n case \"30d\":\n return addDays(30);\n case \"60d\":\n return addDays(60);\n case \"90d\":\n return addDays(90);\n case \"never\":\n return undefined;\n case \"custom\":\n return customDate ? customDate.toISOString() : undefined;\n default:\n return undefined;\n }\n}\n\ninterface GenerateApiKeyModalProps {\n open: boolean;\n onClose: () => void;\n onCreated: (rawApiKey: string, keyName: string) => void;\n userId?: number;\n}\n\nexport function GenerateApiKeyModal({ open, onClose, onCreated, userId }: GenerateApiKeyModalProps) {\n const dispatch = useDispatch();\n const [generateApiKeyForUser, { isLoading }] = useGenerateApiKeyForUserMutation();\n const [customDate, setCustomDate] = useState<Date \| null>(null);\n\n const formik = useFormik({\n initialValues: {\n name: \"\",\n expiryOption: \"30d\",\n },\n validationSchema: Yup.object({\n name: Yup.string()\n .trim()\n .min(2, \"Name must be at least 2 characters\")\n .max(64, \"Name must be 64 characters or fewer\")\n .required(\"Key name is required\"),\n expiryOption: Yup.string().required(\"Expiry is required\"),\n }),\n onSubmit: async (values, helpers) => {\n if (values.expiryOption === \"custom\" && !customDate) {\n helpers.setFieldError(\"expiryOption\", \"Please select a custom expiry date\");\n return;\n }\n\n const expiresAt = resolveExpiresAt(values.expiryOption, customDate);\n\n try {\n const body = { name: values.name.trim(), ...(expiresAt ? { expiresAt } : {}) };\n const response = await generateApiKeyForUser({ userId: userId!, body }).unwrap();\n\n onCreated(response.data.apiKey, values.name.trim());\n handleClose();\n } catch (err: any) {\n const detail = err?.data?.message \|\| \"Failed to generate API key. Please try again.\";\n dispatch(showToast({ severity: \"error\", summary: \"Error\", detail }));\n }\n },\n });\n\n const handleClose = () => {\n formik.resetForm();\n setCustomDate(null);\n onClose();\n };\n\n // Reset form when modal opens\n useEffect(() => {\n if (open) {\n formik.resetForm();\n setCustomDate(null);\n }\n }, [open]);\n\n const nameError =\n formik.touched.name && formik.errors.name ? String(formik.errors.name) : \"\";\n const expiryError =\n formik.touched.expiryOption && formik.errors.expiryOption\n ? String(formik.errors.expiryOption)\n : \"\";\n\n return (\n <SolidDialog open={open} onOpenChange={handleClose} style={{ maxWidth: 480 }}>\n <SolidDialogHeader>\n <SolidDialogTitle>Generate API Key</SolidDialogTitle>\n </SolidDialogHeader>\n <SolidDialogSeparator />\n <SolidDialogBody>\n <form id=\"generate-api-key-form\" onSubmit={formik.handleSubmit}>\n <div className=\"flex flex-column gap-3\">\n <div className=\"flex flex-column gap-2\">\n <label htmlFor=\"api-key-name\" className=\"form-field-label\">\n Key Name <span style={{ color: \"var(--solid-danger-color, #ef4444)\" }}>*</span>\n </label>\n <SolidInput\n id=\"api-key-name\"\n name=\"name\"\n autoComplete=\"off\"\n placeholder=\"e.g. CI/CD pipeline, Mobile app\"\n value={formik.values.name}\n onChange={formik.handleChange}\n onBlur={formik.handleBlur}\n />\n {nameError && <SolidMessage severity=\"error\" text={nameError} />}\n </div>\n\n <div className=\"flex flex-column gap-2\">\n <label htmlFor=\"api-key-expiry\" className=\"form-field-label\">\n Expires\n </label>\n <SolidSelect\n value={formik.values.expiryOption}\n options={EXPIRY_OPTIONS}\n optionLabel=\"label\"\n optionValue=\"value\"\n onChange={({ value }) => {\n formik.setFieldValue(\"expiryOption\", value);\n if (value !== \"custom\") setCustomDate(null);\n }}\n />\n {formik.values.expiryOption === \"custom\" && (\n <SolidDatePicker\n selected={customDate}\n onChange={(date: Date \| null) => setCustomDate(date)}\n minDate={new Date()}\n placeholderText=\"Select expiry date\"\n dateFormat=\"dd/MM/yyyy\"\n />\n )}\n {expiryError && <SolidMessage severity=\"error\" text={expiryError} />}\n </div>\n </div>\n </form>\n </SolidDialogBody>\n <SolidDialogSeparator />\n <SolidDialogFooter>\n <SolidButton variant=\"outline\" type=\"button\" onClick={handleClose} disabled={isLoading}>\n Cancel\n </SolidButton>\n <SolidButton type=\"submit\" form=\"generate-api-key-form\" loading={isLoading}>\n Generate Key\n </SolidButton>\n </SolidDialogFooter>\n </SolidDialog>\n );\n}\n"]}
1	+ {"version":3,"file":"GenerateApiKeyModal.js","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/GenerateApiKeyModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport { useFormik } from \"formik\";\nimport * as Yup from \"yup\";\nimport {\n SolidButton,\n SolidDatePicker,\n SolidDialog,\n SolidDialogBody,\n SolidDialogDescription,\n SolidDialogFooter,\n SolidDialogHeader,\n SolidDialogSeparator,\n SolidDialogTitle,\n SolidInput,\n SolidMessage,\n SolidSelect,\n} from \"../../../shad-cn-ui\";\nimport { showToast } from \"../../../../redux/features/toastSlice\";\nimport { type ApiKeyRecord, useGenerateApiKeyForUserMutation } from \"../../../../redux/api/apiKeyApi\";\n\nconst EXPIRY_OPTIONS = [\n { label: \"30 days\", value: \"30d\" },\n { label: \"60 days\", value: \"60d\" },\n { label: \"90 days\", value: \"90d\" },\n { label: \"Never\", value: \"never\" },\n { label: \"Custom date\", value: \"custom\" },\n];\n\nfunction addDays(days: number): string {\n const d = new Date();\n d.setDate(d.getDate() + days);\n return d.toISOString();\n}\n\nfunction resolveExpiresAt(expiryOption: string, customDate: Date \| null): string \| undefined {\n switch (expiryOption) {\n case \"30d\":\n return addDays(30);\n case \"60d\":\n return addDays(60);\n case \"90d\":\n return addDays(90);\n case \"never\":\n return undefined;\n case \"custom\":\n return customDate ? customDate.toISOString() : undefined;\n default:\n return undefined;\n }\n}\n\ninterface GenerateApiKeyModalProps {\n open: boolean;\n onClose: () => void;\n onCreated: (rawApiKey: string, keyName: string, record: ApiKeyRecord) => void;\n userId?: number;\n}\n\nexport function GenerateApiKeyModal({ open, onClose, onCreated, userId }: GenerateApiKeyModalProps) {\n const dispatch = useDispatch();\n const [generateApiKeyForUser, { isLoading }] = useGenerateApiKeyForUserMutation();\n const [customDate, setCustomDate] = useState<Date \| null>(null);\n\n const formik = useFormik({\n initialValues: {\n name: \"\",\n expiryOption: \"30d\",\n },\n validationSchema: Yup.object({\n name: Yup.string()\n .trim()\n .min(2, \"Name must be at least 2 characters\")\n .max(64, \"Name must be 64 characters or fewer\")\n .required(\"Key name is required\"),\n expiryOption: Yup.string().required(\"Expiry is required\"),\n }),\n onSubmit: async (values, helpers) => {\n if (values.expiryOption === \"custom\" && !customDate) {\n helpers.setFieldError(\"expiryOption\", \"Please select a custom expiry date\");\n return;\n }\n\n const expiresAt = resolveExpiresAt(values.expiryOption, customDate);\n\n try {\n const body = { name: values.name.trim(), ...(expiresAt ? { expiresAt } : {}) };\n const response = await generateApiKeyForUser({ userId: userId!, body }).unwrap();\n\n onCreated(response.data.apiKey, values.name.trim(), response.data.record);\n handleClose();\n } catch (err: any) {\n const detail = err?.data?.message \|\| \"Failed to generate API key. Please try again.\";\n dispatch(showToast({ severity: \"error\", summary: \"Error\", detail }));\n }\n },\n });\n\n const handleClose = () => {\n formik.resetForm();\n setCustomDate(null);\n onClose();\n };\n\n // Reset form when modal opens\n useEffect(() => {\n if (open) {\n formik.resetForm();\n setCustomDate(null);\n }\n }, [open]);\n\n const nameError =\n formik.touched.name && formik.errors.name ? String(formik.errors.name) : \"\";\n const expiryError =\n formik.touched.expiryOption && formik.errors.expiryOption\n ? String(formik.errors.expiryOption)\n : \"\";\n\n return (\n <SolidDialog open={open} onOpenChange={handleClose} style={{ maxWidth: 480 }} className=\"solid-api-key-dialog\">\n <SolidDialogHeader className=\"solid-api-key-dialog-header\">\n <SolidDialogTitle>Generate API Key</SolidDialogTitle>\n <SolidDialogDescription>\n Create a named key for this user. The raw key will be shown only once after generation.\n </SolidDialogDescription>\n </SolidDialogHeader>\n <SolidDialogSeparator />\n <SolidDialogBody className=\"solid-api-key-dialog-body\">\n <form id=\"generate-api-key-form\" onSubmit={formik.handleSubmit}>\n <div className=\"solid-api-key-dialog-fields\">\n <div className=\"solid-api-key-dialog-field\">\n <label htmlFor=\"api-key-name\" className=\"form-field-label\">\n Key Name <span style={{ color: \"var(--solid-danger-color, #ef4444)\" }}>*</span>\n </label>\n <SolidInput\n id=\"api-key-name\"\n name=\"name\"\n autoComplete=\"off\"\n placeholder=\"e.g. CI/CD pipeline, Mobile app\"\n value={formik.values.name}\n onChange={formik.handleChange}\n onBlur={formik.handleBlur}\n />\n {nameError && <SolidMessage severity=\"error\" text={nameError} />}\n </div>\n\n <div className=\"solid-api-key-dialog-field\">\n <label htmlFor=\"api-key-expiry\" className=\"form-field-label\">\n Expires\n </label>\n <SolidSelect\n value={formik.values.expiryOption}\n options={EXPIRY_OPTIONS}\n optionLabel=\"label\"\n optionValue=\"value\"\n onChange={({ value }) => {\n formik.setFieldValue(\"expiryOption\", value);\n if (value !== \"custom\") setCustomDate(null);\n }}\n />\n {formik.values.expiryOption === \"custom\" && (\n <SolidDatePicker\n selected={customDate}\n onChange={(date: Date \| null) => setCustomDate(date)}\n minDate={new Date()}\n placeholderText=\"Select expiry date\"\n dateFormat=\"dd/MM/yyyy\"\n />\n )}\n {formik.values.expiryOption !== \"custom\" ? (\n <p className=\"solid-api-key-dialog-hint m-0\">Choose how long this key should remain valid.</p>\n ) : null}\n {expiryError && <SolidMessage severity=\"error\" text={expiryError} />}\n </div>\n </div>\n </form>\n </SolidDialogBody>\n <SolidDialogSeparator />\n <SolidDialogFooter className=\"solid-api-key-dialog-footer\">\n <SolidButton variant=\"outline\" type=\"button\" onClick={handleClose} disabled={isLoading}>\n Cancel\n </SolidButton>\n <SolidButton type=\"submit\" form=\"generate-api-key-form\" loading={isLoading}>\n Generate Key\n </SolidButton>\n </SolidDialogFooter>\n </SolidDialog>\n );\n}\n"]}

package/dist/components/core/users/ApiKeysTab/GenerateApiKeyModal.tsx CHANGED Viewed

@@ -7,6 +7,7 @@ import {
   SolidDatePicker,
   SolidDialog,
   SolidDialogBody,
+  SolidDialogDescription,
   SolidDialogFooter,
   SolidDialogHeader,
   SolidDialogSeparator,
@@ -16,7 +17,7 @@ import {
   SolidSelect,
 } from "../../../shad-cn-ui";
 import { showToast } from "../../../../redux/features/toastSlice";
-import { useGenerateApiKeyForUserMutation } from "../../../../redux/api/apiKeyApi";
+import { type ApiKeyRecord, useGenerateApiKeyForUserMutation } from "../../../../redux/api/apiKeyApi";
 const EXPIRY_OPTIONS = [
   { label: "30 days", value: "30d" },
@@ -52,7 +53,7 @@ function resolveExpiresAt(expiryOption: string, customDate: Date | null): string
 interface GenerateApiKeyModalProps {
   open: boolean;
   onClose: () => void;
-  onCreated: (rawApiKey: string, keyName: string) => void;
+  onCreated: (rawApiKey: string, keyName: string, record: ApiKeyRecord) => void;
   userId?: number;
 }
@@ -86,7 +87,7 @@ export function GenerateApiKeyModal({ open, onClose, onCreated, userId }: Genera
         const body = { name: values.name.trim(), ...(expiresAt ? { expiresAt } : {}) };
         const response = await generateApiKeyForUser({ userId: userId!, body }).unwrap();
-        onCreated(response.data.apiKey, values.name.trim());
+        onCreated(response.data.apiKey, values.name.trim(), response.data.record);
         handleClose();
       } catch (err: any) {
         const detail = err?.data?.message || "Failed to generate API key. Please try again.";
@@ -117,15 +118,18 @@ export function GenerateApiKeyModal({ open, onClose, onCreated, userId }: Genera
       : "";
   return (
-    <SolidDialog open={open} onOpenChange={handleClose} style={{ maxWidth: 480 }}>
-      <SolidDialogHeader>
+    <SolidDialog open={open} onOpenChange={handleClose} style={{ maxWidth: 480 }} className="solid-api-key-dialog">
+      <SolidDialogHeader className="solid-api-key-dialog-header">
         <SolidDialogTitle>Generate API Key</SolidDialogTitle>
+        <SolidDialogDescription>
+          Create a named key for this user. The raw key will be shown only once after generation.
+        </SolidDialogDescription>
       </SolidDialogHeader>
       <SolidDialogSeparator />
-      <SolidDialogBody>
+      <SolidDialogBody className="solid-api-key-dialog-body">
         <form id="generate-api-key-form" onSubmit={formik.handleSubmit}>
-          <div className="flex flex-column gap-3">
-            <div className="flex flex-column gap-2">
+          <div className="solid-api-key-dialog-fields">
+            <div className="solid-api-key-dialog-field">
               <label htmlFor="api-key-name" className="form-field-label">
                 Key Name <span style={{ color: "var(--solid-danger-color, #ef4444)" }}>*</span>
               </label>
@@ -141,7 +145,7 @@ export function GenerateApiKeyModal({ open, onClose, onCreated, userId }: Genera
               {nameError && <SolidMessage severity="error" text={nameError} />}
             </div>
-            <div className="flex flex-column gap-2">
+            <div className="solid-api-key-dialog-field">
               <label htmlFor="api-key-expiry" className="form-field-label">
                 Expires
               </label>
@@ -164,13 +168,16 @@ export function GenerateApiKeyModal({ open, onClose, onCreated, userId }: Genera
                   dateFormat="dd/MM/yyyy"
                 />
               )}
+              {formik.values.expiryOption !== "custom" ? (
+                <p className="solid-api-key-dialog-hint m-0">Choose how long this key should remain valid.</p>
+              ) : null}
               {expiryError && <SolidMessage severity="error" text={expiryError} />}
             </div>
           </div>
         </form>
       </SolidDialogBody>
       <SolidDialogSeparator />
-      <SolidDialogFooter>
+      <SolidDialogFooter className="solid-api-key-dialog-footer">
         <SolidButton variant="outline" type="button" onClick={handleClose} disabled={isLoading}>
           Cancel
         </SolidButton>

package/dist/components/core/users/ApiKeysTab/RevealApiKeyModal.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RevealApiKeyModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/RevealApiKeyModal.tsx"],"names":[],"mappings":"~~AAYA~~,UAAU,sBAAsB;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,sBAAsB,~~2CA2F3F~~"}
1	+ {"version":3,"file":"RevealApiKeyModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/RevealApiKeyModal.tsx"],"names":[],"mappings":"AAaA,UAAU,sBAAsB;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,sBAAsB,2CAuE3F"}

package/dist/components/core/users/ApiKeysTab/RevealApiKeyModal.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { AlertTriangle, CheckCircle, Copy } from "lucide-react";
-import { SolidButton, SolidDialog, SolidDialogBody, SolidDialogFooter, SolidDialogHeader, SolidDialogSeparator, SolidDialogTitle, } from "../../../shad-cn-ui";
+import { SolidButton, SolidDialog, SolidDialogBody, SolidDialogDescription, SolidDialogFooter, SolidDialogHeader, SolidDialogSeparator, SolidDialogTitle, } from "../../../shad-cn-ui";
 export function RevealApiKeyModal(_a) {
     var open = _a.open, apiKey = _a.apiKey, keyName = _a.keyName, onClose = _a.onClose;
     var _b = useState(false), copied = _b[0], setCopied = _b[1];
@@ -15,23 +15,6 @@ export function RevealApiKeyModal(_a) {
         setCopied(false);
         onClose();
     };
-    return (_jsxs(SolidDialog, { open: open, onOpenChange: handleClose, dismissible: false, style: { maxWidth: 520 }, children: [_jsx(SolidDialogHeader, { children: _jsx(SolidDialogTitle, { children: "API Key Created" }) }), _jsx(SolidDialogSeparator, {}), _jsxs(SolidDialogBody, { children: [_jsxs("div", { className: "solid-api-key-reveal-warning flex align-items-start gap-2 mb-4", children: [_jsx(AlertTriangle, { size: 16, className: "flex-shrink-0 mt-1" }), _jsxs("p", { className: "m-0", style: { fontSize: 13 }, children: [_jsx("strong", { children: "Copy this key now." }), " It will not be shown again once you close this dialog. Store it somewhere secure."] })] }), _jsx("p", { className: "form-field-label mb-2", children: keyName }), _jsxs("div", { className: "solid-api-key-reveal-box flex align-items-center gap-2 p-3", style: {
-                            background: "var(--solid-surface-secondary, #f5f5f5)",
-                            borderRadius: 6,
-                            border: "1px solid var(--solid-border-color, #e0e0e0)",
-                        }, children: [_jsx("code", { className: "flex-1", style: {
-                                    fontFamily: "monospace",
-                                    fontSize: 13,
-                                    wordBreak: "break-all",
-                                    userSelect: "all",
-                                }, children: apiKey }), _jsx("button", { type: "button", title: copied ? "Copied!" : "Copy to clipboard", onClick: handleCopy, style: {
-                                    background: "none",
-                                    border: "none",
-                                    cursor: "pointer",
-                                    padding: "4px",
-                                    display: "flex",
-                                    alignItems: "center",
-                                    flexShrink: 0,
-                                }, children: copied ? (_jsx(CheckCircle, { size: 16, style: { color: "var(--solid-success-color, #22c55e)" } })) : (_jsx(Copy, { size: 16 })) })] }), copied && (_jsx("p", { className: "m-0 mt-2", style: { fontSize: 12, color: "var(--solid-success-color, #22c55e)" }, children: "Copied to clipboard!" }))] }), _jsx(SolidDialogSeparator, {}), _jsxs(SolidDialogFooter, { children: [_jsx(SolidButton, { variant: "outline", onClick: handleClose, children: "Close" }), _jsx(SolidButton, { onClick: handleClose, children: "I've Saved This Key" })] })] }));
+    return (_jsxs(SolidDialog, { open: open, onOpenChange: handleClose, dismissible: false, style: { maxWidth: 520 }, className: "solid-api-key-dialog solid-api-key-dialog--reveal", children: [_jsxs(SolidDialogHeader, { className: "solid-api-key-dialog-header", children: [_jsx(SolidDialogTitle, { children: "API Key Created" }), _jsx(SolidDialogDescription, { children: "Copy this key now and store it in a secure place before closing this dialog." })] }), _jsx(SolidDialogSeparator, {}), _jsxs(SolidDialogBody, { className: "solid-api-key-dialog-body", children: [_jsxs("div", { className: "solid-api-key-reveal-warning", children: [_jsx(AlertTriangle, { size: 16, className: "solid-api-key-reveal-warning-icon" }), _jsxs("p", { className: "m-0", children: [_jsx("strong", { children: "Shown only once." }), " After this dialog closes, the raw key cannot be retrieved again."] })] }), _jsx("p", { className: "form-field-label mb-2", children: keyName }), _jsxs("div", { className: "solid-api-key-reveal-box", children: [_jsx("code", { className: "solid-api-key-reveal-code", children: apiKey }), _jsx("button", { type: "button", title: copied ? "Copied!" : "Copy to clipboard", onClick: handleCopy, className: "solid-api-key-reveal-copy", children: copied ? (_jsx(CheckCircle, { size: 16, className: "solid-api-key-reveal-copy-success" })) : (_jsx(Copy, { size: 16 })) })] }), copied && (_jsx("p", { className: "solid-api-key-reveal-copied m-0 mt-2", children: "Copied to clipboard." }))] }), _jsx(SolidDialogSeparator, {}), _jsxs(SolidDialogFooter, { className: "solid-api-key-dialog-footer", children: [_jsx(SolidButton, { variant: "outline", onClick: handleClose, children: "Close" }), _jsx(SolidButton, { onClick: handleClose, children: "I've Saved This Key" })] })] }));
 }
 //# sourceMappingURL=RevealApiKeyModal.js.map

package/dist/components/core/users/ApiKeysTab/RevealApiKeyModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RevealApiKeyModal.js","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/RevealApiKeyModal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EACL,WAAW,EACX,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,GACjB,MAAM,qBAAqB,CAAC;AAS7B,MAAM,UAAU,iBAAiB,CAAC,EAA0D;QAAxD,IAAI,UAAA,EAAE,MAAM,YAAA,EAAE,OAAO,aAAA,EAAE,OAAO,aAAA;IAC1D,IAAA,KAAsB,QAAQ,CAAC,KAAK,CAAC,EAApC,MAAM,QAAA,EAAE,SAAS,QAAmB,CAAC;IAE5C,IAAM,UAAU,GAAG;QACjB,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC;YACzC,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB,UAAU,CAAC,cAAM,OAAA,SAAS,CAAC,KAAK,CAAC,EAAhB,CAAgB,EAAE,IAAI,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,IAAM,WAAW,GAAG;QAClB,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,WAAW,~~IAAC~~,IAAI,EAAE,IAAI,~~EAAE~~,YAAY,EAAE,WAAW,~~EAAE~~,WAAW,EAAE,KAAK,~~EAAE~~,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,~~aAC9F~~,~~KAAC~~,iBAAiB,~~cAChB~~,KAAC,gBAAgB,kCAAmC,~~GAClC~~,EACpB,KAAC,oBAAoB,KAAG,EACxB,MAAC,eAAe,~~eACd~~,eAAK,SAAS,EAAC,~~gEAAgE~~,~~aAC7E~~,KAAC,aAAa,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,~~oBAAoB~~,GAAG,~~EAC1D~~,aAAG,SAAS,EAAC,KAAK,~~EAAC~~,~~KAAK~~,~~EAAE~~,~~EAAE,QAAQ,EAAE,EAAE,EAAE,aACxC,kDAAmC,0FACjC,~~IACA,EAEN,YAAG,SAAS,EAAC,uBAAuB,~~YACjC~~,OAAO,~~GACN~~,~~EAEJ~~,~~eACE~~,SAAS,EAAC,~~4DAA4D~~,~~EACtE~~,~~KAAK~~,~~EAAE;4BACL,UAAU,EAAE,yCAAyC;4BACrD,YAAY,EAAE,CAAC;4BACf,MAAM,EAAE,8CAA8C;yBACvD,aAED,eACE,~~SAAS,EAAC,~~QAAQ~~,~~EAClB~~,~~KAAK,EAAE;oCACL,UAAU,EAAE,WAAW;oCACvB,QAAQ,EAAE,EAAE;oCACZ,SAAS,EAAE,WAAW;oCACtB,UAAU,EAAE,KAAK;iCAClB,YAEA,~~MAAM,~~GACF~~,~~EACP~~,iBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,mBAAmB,EAC/C,OAAO,EAAE,UAAU,EACnB,~~KAAK,EAAE;oCACL,UAAU,EAAE,MAAM;oCAClB,MAAM,EAAE,MAAM;oCACd,MAAM,EAAE,~~SAAS~~;oCACjB~~,~~OAAO~~,~~EAAE~~,~~KAAK;oCACd~~,~~OAAO,EAAE,~~MAAM~~;oCACf~~,~~UAAU,EAAE,QAAQ;oCACpB,UAAU,EAAE,~~CAAC~~;iCACd~~,~~YAEA,MAAM,~~CAAC,CAAC,~~CAAC,~~CACR,KAAC,WAAW,IAAC,IAAI,EAAE,EAAE,EAAE,~~KAAK~~,~~EAAE~~,~~EAAE~~,~~KAAK~~,~~EAAE~~,~~qCAAqC,EAAE,GAAI,CACnF,~~CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,GAAI,CACnB,GACM,IACL,EAEL,MAAM,IAAI,CACT,YAAG,SAAS,EAAC,~~UAAU~~,~~EAAC~~,~~KAAK~~,~~EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,qCAAqC,EAAE,qCAEzF,CACL,~~IACe,EAClB,KAAC,oBAAoB,KAAG,EACxB,MAAC,iBAAiB,~~eAChB~~,KAAC,WAAW,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,WAAW,sBAErC,EACd,KAAC,WAAW,IAAC,OAAO,EAAE,WAAW,oCAEnB,IACI,IACR,CACf,CAAC;AACJ,CAAC","sourcesContent":["import { useState } from \"react\";\nimport { AlertTriangle, CheckCircle, Copy } from \"lucide-react\";\nimport {\n SolidButton,\n SolidDialog,\n SolidDialogBody,\n SolidDialogFooter,\n SolidDialogHeader,\n SolidDialogSeparator,\n SolidDialogTitle,\n} from \"../../../shad-cn-ui\";\n\ninterface RevealApiKeyModalProps {\n open: boolean;\n apiKey: string;\n keyName: string;\n onClose: () => void;\n}\n\nexport function RevealApiKeyModal({ open, apiKey, keyName, onClose }: RevealApiKeyModalProps) {\n const [copied, setCopied] = useState(false);\n\n const handleCopy = () => {\n navigator.clipboard.writeText(apiKey).then(() => {\n setCopied(true);\n setTimeout(() => setCopied(false), 3000);\n });\n };\n\n const handleClose = () => {\n setCopied(false);\n onClose();\n };\n\n return (\n <SolidDialog open={open} onOpenChange={handleClose} dismissible={false} style={{ maxWidth: 520 }}>\n <SolidDialogHeader>\n <SolidDialogTitle>API Key Created</SolidDialogTitle>\n </SolidDialogHeader>\n <SolidDialogSeparator />\n <SolidDialogBody>\n <div className=\"solid-api-key-reveal-warning ~~flex align-items-start gap-2 mb-4~~\">\n <AlertTriangle size={16} className=\"~~flex~~-~~shrink~~-~~0 mt~~-1\" />\n <p className=\"m-0\" ~~style={{ fontSize: 13 }}~~>\n <strong>~~Copy~~ ~~this~~ ~~key now~~.</strong> It ~~will~~ ~~not~~ be ~~shown~~ ~~again~~ ~~once~~ ~~you~~ ~~close~~ ~~this~~ ~~dialog. Store it somewhere secure~~.\n </p>\n </div>\n\n <p className=\"form-field-label mb-2\"~~>\n~~ {keyName}\n </p>\n\n <div\n className=\"solid-api-key-reveal-box ~~flex align-items-center gap-2 p-3~~\"\n ~~style={{\n background:~~ \"~~var(--~~solid-~~surface~~-~~secondary, #f5f5f5)\",\n borderRadius: 6,\n border: \"1px solid var(--solid~~-~~border~~-~~color, #e0e0e0)\",\n }}\n >\n <~~code\~~n className=\~~"~~flex-1\"\n style=~~{~~{\n fontFamily: \"monospace\",\n fontSize: 13,\n wordBreak: \"break-all\",\n userSelect: \"all\",\n }}\n >\n {~~apiKey}\n </code>\n <button\n type=\"button\"\n title={copied ? \"Copied!\" : \"Copy to clipboard\"}\n onClick={handleCopy}\n ~~style={{\n background: \~~"~~none~~\"~~,\n border:~~ \~~"none\",\~~n ~~cursor: \"pointer\",\n padding: \"4px\",\n display: \"flex\",\n alignItems: \"center\",\n flexShrink: 0,\n }}\n~~ >\n {copied ? (\n <CheckCircle size={16} ~~style={{ color: \~~"~~var(--~~solid-success~~-color, #22c55e)~~\" }} />\n ) : (\n <Copy size={16} />\n )}\n </button>\n </div>\n\n {copied && (\n <p className=\"m-0 mt-2\" ~~style={{ fontSize: 12, color: \"var(--solid-success-color, #22c55e)\" }}>\n~~ Copied to clipboard~~!\n </~~p>\n )}\n </SolidDialogBody>\n <SolidDialogSeparator />\n <SolidDialogFooter>\n <SolidButton variant=\"outline\" onClick={handleClose}>\n Close\n </SolidButton>\n <SolidButton onClick={handleClose}>\n I've Saved This Key\n </SolidButton>\n </SolidDialogFooter>\n </SolidDialog>\n );\n}\n"]}
1	+ {"version":3,"file":"RevealApiKeyModal.js","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/RevealApiKeyModal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EACL,WAAW,EACX,WAAW,EACX,eAAe,EACf,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,GACjB,MAAM,qBAAqB,CAAC;AAS7B,MAAM,UAAU,iBAAiB,CAAC,EAA0D;QAAxD,IAAI,UAAA,EAAE,MAAM,YAAA,EAAE,OAAO,aAAA,EAAE,OAAO,aAAA;IAC1D,IAAA,KAAsB,QAAQ,CAAC,KAAK,CAAC,EAApC,MAAM,QAAA,EAAE,SAAS,QAAmB,CAAC;IAE5C,IAAM,UAAU,GAAG;QACjB,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC;YACzC,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB,UAAU,CAAC,cAAM,OAAA,SAAS,CAAC,KAAK,CAAC,EAAhB,CAAgB,EAAE,IAAI,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,IAAM,WAAW,GAAG;QAClB,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,WAAW,IACV,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,WAAW,EACzB,WAAW,EAAE,KAAK,EAClB,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EACxB,SAAS,EAAC,mDAAmD,aAE7D,MAAC,iBAAiB,IAAC,SAAS,EAAC,6BAA6B,aACxD,KAAC,gBAAgB,kCAAmC,EACpD,KAAC,sBAAsB,+FAEE,IACP,EACpB,KAAC,oBAAoB,KAAG,EACxB,MAAC,eAAe,IAAC,SAAS,EAAC,2BAA2B,aACpD,eAAK,SAAS,EAAC,8BAA8B,aAC3C,KAAC,aAAa,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,mCAAmC,GAAG,EACzE,aAAG,SAAS,EAAC,KAAK,aAChB,gDAAiC,yEAC/B,IACA,EAEN,YAAG,SAAS,EAAC,uBAAuB,YAAE,OAAO,GAAK,EAElD,eAAK,SAAS,EAAC,0BAA0B,aACvC,eAAM,SAAS,EAAC,2BAA2B,YAAE,MAAM,GAAQ,EAC3D,iBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,mBAAmB,EAC/C,OAAO,EAAE,UAAU,EACnB,SAAS,EAAC,2BAA2B,YAEpC,MAAM,CAAC,CAAC,CAAC,CACR,KAAC,WAAW,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,mCAAmC,GAAG,CACxE,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,GAAI,CACnB,GACM,IACL,EAEL,MAAM,IAAI,CACT,YAAG,SAAS,EAAC,sCAAsC,qCAAyB,CAC7E,IACe,EAClB,KAAC,oBAAoB,KAAG,EACxB,MAAC,iBAAiB,IAAC,SAAS,EAAC,6BAA6B,aACxD,KAAC,WAAW,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,WAAW,sBAErC,EACd,KAAC,WAAW,IAAC,OAAO,EAAE,WAAW,oCAEnB,IACI,IACR,CACf,CAAC;AACJ,CAAC","sourcesContent":["import { useState } from \"react\";\nimport { AlertTriangle, CheckCircle, Copy } from \"lucide-react\";\nimport {\n SolidButton,\n SolidDialog,\n SolidDialogBody,\n SolidDialogDescription,\n SolidDialogFooter,\n SolidDialogHeader,\n SolidDialogSeparator,\n SolidDialogTitle,\n} from \"../../../shad-cn-ui\";\n\ninterface RevealApiKeyModalProps {\n open: boolean;\n apiKey: string;\n keyName: string;\n onClose: () => void;\n}\n\nexport function RevealApiKeyModal({ open, apiKey, keyName, onClose }: RevealApiKeyModalProps) {\n const [copied, setCopied] = useState(false);\n\n const handleCopy = () => {\n navigator.clipboard.writeText(apiKey).then(() => {\n setCopied(true);\n setTimeout(() => setCopied(false), 3000);\n });\n };\n\n const handleClose = () => {\n setCopied(false);\n onClose();\n };\n\n return (\n <SolidDialog\n open={open}\n onOpenChange={handleClose}\n dismissible={false}\n style={{ maxWidth: 520 }}\n className=\"solid-api-key-dialog solid-api-key-dialog--reveal\"\n >\n <SolidDialogHeader className=\"solid-api-key-dialog-header\">\n <SolidDialogTitle>API Key Created</SolidDialogTitle>\n <SolidDialogDescription>\n Copy this key now and store it in a secure place before closing this dialog.\n </SolidDialogDescription>\n </SolidDialogHeader>\n <SolidDialogSeparator />\n <SolidDialogBody className=\"solid-api-key-dialog-body\">\n <div className=\"solid-api-key-reveal-warning\">\n <AlertTriangle size={16} className=\"solid-api-key-reveal-warning-icon\" />\n <p className=\"m-0\">\n <strong>Shown only once.</strong> After this dialog closes, the raw key cannot be retrieved again.\n </p>\n </div>\n\n <p className=\"form-field-label mb-2\">{keyName}</p>\n\n <div className=\"solid-api-key-reveal-box\">\n <code className=\"solid-api-key-reveal-code\">{apiKey}</code>\n <button\n type=\"button\"\n title={copied ? \"Copied!\" : \"Copy to clipboard\"}\n onClick={handleCopy}\n className=\"solid-api-key-reveal-copy\"\n >\n {copied ? (\n <CheckCircle size={16} className=\"solid-api-key-reveal-copy-success\" />\n ) : (\n <Copy size={16} />\n )}\n </button>\n </div>\n\n {copied && (\n <p className=\"solid-api-key-reveal-copied m-0 mt-2\">Copied to clipboard.</p>\n )}\n </SolidDialogBody>\n <SolidDialogSeparator />\n <SolidDialogFooter className=\"solid-api-key-dialog-footer\">\n <SolidButton variant=\"outline\" onClick={handleClose}>\n Close\n </SolidButton>\n <SolidButton onClick={handleClose}>\n I've Saved This Key\n </SolidButton>\n </SolidDialogFooter>\n </SolidDialog>\n );\n}\n"]}

package/dist/components/core/users/ApiKeysTab/RevealApiKeyModal.tsx CHANGED Viewed

@@ -4,6 +4,7 @@ import {
   SolidButton,
   SolidDialog,
   SolidDialogBody,
+  SolidDialogDescription,
   SolidDialogFooter,
   SolidDialogHeader,
   SolidDialogSeparator,
@@ -33,58 +34,40 @@ export function RevealApiKeyModal({ open, apiKey, keyName, onClose }: RevealApiK
   };
   return (
-    <SolidDialog open={open} onOpenChange={handleClose} dismissible={false} style={{ maxWidth: 520 }}>
-      <SolidDialogHeader>
+    <SolidDialog
+      open={open}
+      onOpenChange={handleClose}
+      dismissible={false}
+      style={{ maxWidth: 520 }}
+      className="solid-api-key-dialog solid-api-key-dialog--reveal"
+    >
+      <SolidDialogHeader className="solid-api-key-dialog-header">
         <SolidDialogTitle>API Key Created</SolidDialogTitle>
+        <SolidDialogDescription>
+          Copy this key now and store it in a secure place before closing this dialog.
+        </SolidDialogDescription>
       </SolidDialogHeader>
       <SolidDialogSeparator />
-      <SolidDialogBody>
-        <div className="solid-api-key-reveal-warning flex align-items-start gap-2 mb-4">
-          <AlertTriangle size={16} className="flex-shrink-0 mt-1" />
-          <p className="m-0" style={{ fontSize: 13 }}>
-            <strong>Copy this key now.</strong> It will not be shown again once you close this dialog. Store it somewhere secure.
+      <SolidDialogBody className="solid-api-key-dialog-body">
+        <div className="solid-api-key-reveal-warning">
+          <AlertTriangle size={16} className="solid-api-key-reveal-warning-icon" />
+          <p className="m-0">
+            <strong>Shown only once.</strong> After this dialog closes, the raw key cannot be retrieved again.
           </p>
         </div>
-        <p className="form-field-label mb-2">
-          {keyName}
-        </p>
+        <p className="form-field-label mb-2">{keyName}</p>
-        <div
-          className="solid-api-key-reveal-box flex align-items-center gap-2 p-3"
-          style={{
-            background: "var(--solid-surface-secondary, #f5f5f5)",
-            borderRadius: 6,
-            border: "1px solid var(--solid-border-color, #e0e0e0)",
-          }}
-        >
-          <code
-            className="flex-1"
-            style={{
-              fontFamily: "monospace",
-              fontSize: 13,
-              wordBreak: "break-all",
-              userSelect: "all",
-            }}
-          >
-            {apiKey}
-          </code>
+        <div className="solid-api-key-reveal-box">
+          <code className="solid-api-key-reveal-code">{apiKey}</code>
           <button
             type="button"
             title={copied ? "Copied!" : "Copy to clipboard"}
             onClick={handleCopy}
-            style={{
-              background: "none",
-              border: "none",
-              cursor: "pointer",
-              padding: "4px",
-              display: "flex",
-              alignItems: "center",
-              flexShrink: 0,
-            }}
+            className="solid-api-key-reveal-copy"
           >
             {copied ? (
-              <CheckCircle size={16} style={{ color: "var(--solid-success-color, #22c55e)" }} />
+              <CheckCircle size={16} className="solid-api-key-reveal-copy-success" />
             ) : (
               <Copy size={16} />
             )}
@@ -92,13 +75,11 @@ export function RevealApiKeyModal({ open, apiKey, keyName, onClose }: RevealApiK
         </div>
         {copied && (
-          <p className="m-0 mt-2" style={{ fontSize: 12, color: "var(--solid-success-color, #22c55e)" }}>
-            Copied to clipboard!
-          </p>
+          <p className="solid-api-key-reveal-copied m-0 mt-2">Copied to clipboard.</p>
         )}
       </SolidDialogBody>
       <SolidDialogSeparator />
-      <SolidDialogFooter>
+      <SolidDialogFooter className="solid-api-key-dialog-footer">
         <SolidButton variant="outline" onClick={handleClose}>
           Close
         </SolidButton>