|
| 1 | +// Copyright 2025 New Vector Ltd. |
| 2 | +// |
| 3 | +// SPDX-License-Identifier: AGPL-3.0-only |
| 4 | +// Please see LICENSE in the repository root for full details. |
| 5 | + |
| 6 | +import { useMutation, useQueryClient } from "@tanstack/react-query"; |
| 7 | +import type { ReactNode } from "@tanstack/react-router"; |
| 8 | +import IconDelete from "@vector-im/compound-design-tokens/assets/web/icons/delete"; |
| 9 | +import { |
| 10 | + Button, |
| 11 | + EditInPlace, |
| 12 | + ErrorMessage, |
| 13 | + Form, |
| 14 | + IconButton, |
| 15 | + Tooltip, |
| 16 | +} from "@vector-im/compound-web"; |
| 17 | +import { parseISO } from "date-fns"; |
| 18 | +import { type ComponentProps, useState } from "react"; |
| 19 | +import { Translation, useTranslation } from "react-i18next"; |
| 20 | +import { type FragmentType, graphql, useFragment } from "../../gql"; |
| 21 | +import { graphqlRequest } from "../../graphql"; |
| 22 | +import { formatReadableDate } from "../DateTime"; |
| 23 | +import { Close, Description, Dialog, Title } from "../Dialog"; |
| 24 | +import styles from "./UserPasskey.module.css"; |
| 25 | + |
| 26 | +const FRAGMENT = graphql(/* GraphQL */ ` |
| 27 | + fragment UserPasskey_passkey on UserPasskey { |
| 28 | + id |
| 29 | + name |
| 30 | + lastUsedAt |
| 31 | + createdAt |
| 32 | + } |
| 33 | +`); |
| 34 | + |
| 35 | +const REMOVE_PASSKEY_MUTATION = graphql(/* GraphQL */ ` |
| 36 | + mutation RemovePasskey($id: ID!) { |
| 37 | + removePasskey(input: { id: $id }) { |
| 38 | + status |
| 39 | + } |
| 40 | + } |
| 41 | +`); |
| 42 | + |
| 43 | +const RENAME_PASSKEY_MUTATION = graphql(/* GraphQL */ ` |
| 44 | + mutation RenamePasskey($id: ID!, $name: String!) { |
| 45 | + renamePasskey(input: { id: $id, name: $name }) { |
| 46 | + status |
| 47 | + } |
| 48 | + } |
| 49 | +`); |
| 50 | + |
| 51 | +const DeleteButton: React.FC<{ disabled?: boolean; onClick?: () => void }> = ({ |
| 52 | + disabled, |
| 53 | + onClick, |
| 54 | +}) => ( |
| 55 | + <Translation> |
| 56 | + {(t): ReactNode => ( |
| 57 | + <Tooltip label={t("frontend.account.passkeys.delete_button_title")}> |
| 58 | + <IconButton |
| 59 | + type="button" |
| 60 | + disabled={disabled} |
| 61 | + className="m-2" |
| 62 | + onClick={onClick} |
| 63 | + size="var(--cpd-space-8x)" |
| 64 | + > |
| 65 | + <IconDelete className={styles.userPasskeyDeleteIcon} /> |
| 66 | + </IconButton> |
| 67 | + </Tooltip> |
| 68 | + )} |
| 69 | + </Translation> |
| 70 | +); |
| 71 | + |
| 72 | +const DeleteButtonWithConfirmation: React.FC< |
| 73 | + ComponentProps<typeof DeleteButton> & { name: string } |
| 74 | +> = ({ name, onClick, ...rest }) => { |
| 75 | + const { t } = useTranslation(); |
| 76 | + const onConfirm = (): void => { |
| 77 | + onClick?.(); |
| 78 | + }; |
| 79 | + |
| 80 | + // NOOP function, otherwise we dont render a cancel button |
| 81 | + const onDeny = (): void => {}; |
| 82 | + |
| 83 | + return ( |
| 84 | + <Dialog trigger={<DeleteButton {...rest} />}> |
| 85 | + <Title> |
| 86 | + {t("frontend.account.passkeys.delete_button_confirmation_modal.body")} |
| 87 | + </Title> |
| 88 | + <Description className={styles.passkeyModalBox}> |
| 89 | + <div>{name}</div> |
| 90 | + </Description> |
| 91 | + <div className="flex flex-col gap-4"> |
| 92 | + <Close asChild> |
| 93 | + <Button |
| 94 | + kind="primary" |
| 95 | + destructive |
| 96 | + onClick={onConfirm} |
| 97 | + Icon={IconDelete} |
| 98 | + > |
| 99 | + {t( |
| 100 | + "frontend.account.passkeys.delete_button_confirmation_modal.action", |
| 101 | + )} |
| 102 | + </Button> |
| 103 | + </Close> |
| 104 | + <Close asChild> |
| 105 | + <Button kind="tertiary" onClick={onDeny}> |
| 106 | + {t("action.cancel")} |
| 107 | + </Button> |
| 108 | + </Close> |
| 109 | + </div> |
| 110 | + </Dialog> |
| 111 | + ); |
| 112 | +}; |
| 113 | + |
| 114 | +const UserPasskey: React.FC<{ |
| 115 | + passkey: FragmentType<typeof FRAGMENT>; |
| 116 | + onRemove: () => void; |
| 117 | +}> = ({ passkey, onRemove }) => { |
| 118 | + const { t } = useTranslation(); |
| 119 | + const data = useFragment(FRAGMENT, passkey); |
| 120 | + const [value, setValue] = useState(data.name); |
| 121 | + const queryClient = useQueryClient(); |
| 122 | + |
| 123 | + const removePasskey = useMutation({ |
| 124 | + mutationFn: (id: string) => |
| 125 | + graphqlRequest({ query: REMOVE_PASSKEY_MUTATION, variables: { id } }), |
| 126 | + onSuccess: (_data) => { |
| 127 | + onRemove?.(); |
| 128 | + queryClient.invalidateQueries({ queryKey: ["userPasskeys"] }); |
| 129 | + }, |
| 130 | + }); |
| 131 | + const renamePasskey = useMutation({ |
| 132 | + mutationFn: ({ id, name }: { id: string; name: string }) => |
| 133 | + graphqlRequest({ |
| 134 | + query: RENAME_PASSKEY_MUTATION, |
| 135 | + variables: { id, name }, |
| 136 | + }), |
| 137 | + onSuccess: (data) => { |
| 138 | + if (data.renamePasskey.status !== "RENAMED") { |
| 139 | + return; |
| 140 | + } |
| 141 | + queryClient.invalidateQueries({ queryKey: ["userPasskeys"] }); |
| 142 | + }, |
| 143 | + }); |
| 144 | + |
| 145 | + const formattedLastUsed = data.lastUsedAt |
| 146 | + ? formatReadableDate(parseISO(data.lastUsedAt), new Date()) |
| 147 | + : ""; |
| 148 | + const formattedCreated = formatReadableDate( |
| 149 | + parseISO(data.createdAt), |
| 150 | + new Date(), |
| 151 | + ); |
| 152 | + const status = renamePasskey.data?.renamePasskey.status ?? null; |
| 153 | + |
| 154 | + const onRemoveClick = (): void => { |
| 155 | + removePasskey.mutate(data.id); |
| 156 | + }; |
| 157 | + |
| 158 | + const onInput = (e: React.ChangeEvent<HTMLInputElement>) => { |
| 159 | + setValue(e.target.value); |
| 160 | + }; |
| 161 | + const onCancel = () => { |
| 162 | + console.log("wee"); |
| 163 | + setValue(data.name); |
| 164 | + }; |
| 165 | + const handleSubmit = async ( |
| 166 | + e: React.FormEvent<HTMLFormElement>, |
| 167 | + ): Promise<void> => { |
| 168 | + e.preventDefault(); |
| 169 | + |
| 170 | + const formData = new FormData(e.currentTarget); |
| 171 | + const name = formData.get("input") as string; |
| 172 | + |
| 173 | + await renamePasskey.mutateAsync({ id: data.id, name }); |
| 174 | + }; |
| 175 | + |
| 176 | + return ( |
| 177 | + <div className="flex flex-col gap-2"> |
| 178 | + <div className="flex items-center gap-2"> |
| 179 | + <EditInPlace |
| 180 | + onSave={handleSubmit} |
| 181 | + type="text" |
| 182 | + value={value} |
| 183 | + onInput={onInput} |
| 184 | + onCancel={onCancel} |
| 185 | + serverInvalid={!!status && status !== "RENAMED"} |
| 186 | + className="flex-1" |
| 187 | + label="" |
| 188 | + saveButtonLabel={t("action.save")} |
| 189 | + savingLabel={t("common.saving")} |
| 190 | + savedLabel={t("common.saved")} |
| 191 | + cancelButtonLabel={t("action.cancel")} |
| 192 | + > |
| 193 | + <ErrorMessage match="typeMismatch" forceMatch={status === "INVALID"}> |
| 194 | + {t("frontend.account.passkeys.name_invalid_error")} |
| 195 | + </ErrorMessage> |
| 196 | + </EditInPlace> |
| 197 | + |
| 198 | + <DeleteButtonWithConfirmation |
| 199 | + name={data.name} |
| 200 | + disabled={removePasskey.isPending} |
| 201 | + onClick={onRemoveClick} |
| 202 | + /> |
| 203 | + </div> |
| 204 | + |
| 205 | + <Form.Root> |
| 206 | + <Form.Field name=""> |
| 207 | + <Form.HelpMessage> |
| 208 | + {data.lastUsedAt |
| 209 | + ? t("frontend.account.passkeys.last_used_message", { |
| 210 | + date: formattedLastUsed, |
| 211 | + }) |
| 212 | + : t("frontend.account.passkeys.never_used_message")} |
| 213 | + </Form.HelpMessage> |
| 214 | + <Form.HelpMessage> |
| 215 | + {t("frontend.account.passkeys.created_at_message", { |
| 216 | + date: formattedCreated, |
| 217 | + })} |
| 218 | + </Form.HelpMessage> |
| 219 | + </Form.Field> |
| 220 | + </Form.Root> |
| 221 | + </div> |
| 222 | + ); |
| 223 | +}; |
| 224 | + |
| 225 | +export default UserPasskey; |
0 commit comments