fixed editable text translation

stack-auth · Oct 9, 2024 · 4570fd3 · 4570fd3
1 parent 6564d46
commit 4570fd3
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 51 deletions.
diff --git a/packages/stack-ui/src/components/editable-text.tsx b/packages/stack-ui/src/components/editable-text.tsx
diff --git a/packages/stack-ui/src/index.ts b/packages/stack-ui/src/index.ts
@@ -4,7 +4,6 @@ export * from "./components/browser-frame";
 export * from "./components/copy-button";
 export * from "./components/copy-field";
 export * from "./components/data-table";
-export * from "./components/editable-text";
 export * from "./components/simple-tooltip";
 export * from "./components/ui/accordion";
 export * from "./components/ui/alert";

diff --git a/packages/stack/src/components-page/account-settings.tsx b/packages/stack/src/components-page/account-settings.tsx
@@ -7,8 +7,8 @@ import { yupObject, yupString } from '@stackframe/stack-shared/dist/schema-field
 import { generateRandomValues } from '@stackframe/stack-shared/dist/utils/crypto';
 import { throwErr } from '@stackframe/stack-shared/dist/utils/errors';
 import { runAsynchronously, runAsynchronouslyWithAlert } from '@stackframe/stack-shared/dist/utils/promises';
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, EditableText, Input, Label, PasswordInput, Separator, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from '@stackframe/stack-ui';
-import { CirclePlus, Contact, LucideIcon, Settings, ShieldCheck } from 'lucide-react';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Input, Label, PasswordInput, Separator, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from '@stackframe/stack-ui';
+import { CirclePlus, Contact, Edit, LucideIcon, Settings, ShieldCheck } from 'lucide-react';
 import { useRouter } from "next/navigation";
 import { TOTPController, createTOTPKeyURI } from "oslo/otp";
 import * as QRCode from 'qrcode';
@@ -814,4 +814,48 @@ export function useDeleteAccountSection() {
  </div>
  </Section>
  );
+}
+
+export function EditableText(props: { value: string, onSave?: (value: string) => void | Promise<void> }) {
+ const [editing, setEditing] = useState(false);
+ const [editingValue, setEditingValue] = useState(props.value);
+ const { t } = useTranslation();
+
+ return (
+ <div className='flex items-center gap-2'>
+ {editing ? (
+ <>
+ <Input
+ value={editingValue}
+ onChange={(e) => setEditingValue(e.target.value)}
+ />
+ <Button
+ size='sm'
+ onClick={async () => {
+ await props.onSave?.(editingValue);
+ setEditing(false);
+ }}
+ >
+ {t("Save")}
+ </Button>
+ <Button
+ size='sm'
+ variant='secondary'
+ onClick={() => {
+ setEditingValue(props.value);
+ setEditing(false);
+ }}>
+ {t("Cancel")}
+ </Button>
+ </>
+ ) : (
+ <>
+ <Typography>{props.value}</Typography>
+ <Button onClick={() => setEditing(true)} size='icon' variant='ghost'>
+ <Edit className="w-4 h-4"/>
+ </Button>
+ </>
+ )}
+ </div>
+ );
 }