feat: 实装 passkey 改名功能

ncuhome · Oct 21, 2023 · 881a509 · 881a509
1 parent 24faa4e
commit 881a509
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/web/src/components/user/profile/Passkey.tsx b/web/src/components/user/profile/Passkey.tsx
@@ -30,6 +30,27 @@ export const Passkey: FC<Props> = ({ mfaEnabled }) => {
 
   const openMfaDialog = useMfaCode();
 
+  const onRename = async (id: number, name: string) => {
+    if (name.length === 0) {
+      toast.error("新名称不能为空");
+      return;
+    }
+    if (name.length > 15) {
+      toast.error("名称最高 15 字");
+      return;
+    }
+    try {
+      await apiV1User.patch("passkey/", {
+        id,
+        name,
+      });
+      const index = data!.findIndex((el) => el.id === id);
+      data![index].name = name;
+      mutate([...data!]);
+    } catch ({ msg }) {
+      if (msg) toast.error(msg as any);
+    }
+  };
   const onDelete = async (item: User.Passkey.Cred) => {
     const code = await openMfaDialog();
     try {
@@ -122,7 +143,11 @@ export const Passkey: FC<Props> = ({ mfaEnabled }) => {
             <TransitionGroup>
               {data.map((item, index) => (
                 <Collapse key={item.id}>
-                  <PasskeyItem item={item} onDelete={() => onDelete(item)} />
+                  <PasskeyItem
+                    item={item}
+                    onRename={(name) => onRename(item.id, name)}
+                    onDelete={() => onDelete(item)}
+                  />
                 </Collapse>
               ))}
             </TransitionGroup>

diff --git a/web/src/components/user/profile/PasskeyItem.tsx b/web/src/components/user/profile/PasskeyItem.tsx
@@ -14,10 +14,11 @@ import { DeleteOutline, ModeEditOutlineOutlined } from "@mui/icons-material";
 
 interface Props {
   item: User.Passkey.Cred;
+  onRename: (name: string) => Promise<void>;
   onDelete: () => void;
 }
 
-export const PasskeyItem: FC<Props> = ({ item, onDelete }) => {
+export const PasskeyItem: FC<Props> = ({ item, onRename, onDelete }) => {
   const name = useMemo(
     () => (item.name ? item.name : `Device${item.id}`),
     [item.name]
@@ -51,6 +52,10 @@ export const PasskeyItem: FC<Props> = ({ item, onDelete }) => {
                 sx={{
                   mr: 1,
                 }}
+                onClick={async () => {
+                  await onRename(newName);
+                  setIsEditing(false);
+                }}
               >
                 保存
               </Button>
@@ -60,6 +65,7 @@ export const PasskeyItem: FC<Props> = ({ item, onDelete }) => {
         >
           <TextField
             value={newName}
+            onChange={(e) => setNewName(e.target.value)}
             inputProps={{
               style: {
                 height: "0.8rem",