first commit

common/resources/client/auth/ui/account-settings/access-token-panel/access-token-panel.tsx

@@ -0,0 +1,142 @@
+import {Link} from 'react-router-dom';
+import clsx from 'clsx';
+import {AccountSettingsPanel} from '../account-settings-panel';
+import {User} from '../../../user';
+import {IllustratedMessage} from '../../../../ui/images/illustrated-message';
+import {SvgImage} from '../../../../ui/images/svg-image/svg-image';
+import {Button} from '../../../../ui/buttons/button';
+import {FormattedDate} from '../../../../i18n/formatted-date';
+import {AccessToken} from '../../../access-token';
+import {DialogTrigger} from '../../../../ui/overlays/dialog/dialog-trigger';
+import {ConfirmationDialog} from '../../../../ui/overlays/dialog/confirmation-dialog';
+import {useDeleteAccessToken} from './delete-access-token';
+import {CreateNewTokenDialog} from './create-new-token-dialog';
+import {LinkStyle} from '../../../../ui/buttons/external-link';
+import {useAuth} from '../../../use-auth';
+import {Trans} from '../../../../i18n/trans';
+import secureFilesSvg from './secure-files.svg';
+import {useSettings} from '../../../../core/settings/use-settings';
+import {queryClient} from '@common/http/query-client';
+import {AccountSettingsId} from '@common/auth/ui/account-settings/account-settings-sidenav';
+
+interface Props {
+  user: User;
+}
+export function AccessTokenPanel({user}: Props) {
+  const tokens = user.tokens || [];
+  const {hasPermission} = useAuth();
+  const {api} = useSettings();
+  if (!api?.integrated || !hasPermission('api.access')) return null;
+  return (
+    <AccountSettingsPanel
+      id={AccountSettingsId.Developers}
+      title={<Trans message="API access tokens" />}
+      titleSuffix={
+        <Link className={LinkStyle} to="/api-docs" target="_blank">
+          <Trans message="Documentation" />
+        </Link>
+      }
+      actions={<CreateNewTokenButton />}
+    >
+      {!tokens.length ? (
+        <IllustratedMessage
+          className="py-40"
+          image={<SvgImage src={secureFilesSvg} />}
+          title={<Trans message="You have no personal access tokens yet" />}
+        />
+      ) : (
+        tokens.map((token, index) => (
+          <TokenLine
+            token={token}
+            key={token.id}
+            isLast={index === tokens.length - 1}
+          />
+        ))
+      )}
+    </AccountSettingsPanel>
+  );
+}
+
+interface TokenLineProps {
+  token: AccessToken;
+  isLast: boolean;
+}
+function TokenLine({token, isLast}: TokenLineProps) {
+  return (
+    <div
+      className={clsx(
+        'flex items-center gap-24',
+        !isLast && 'mb-12 pb-12 border-b',
+      )}
+    >
+      <div className="text-sm">
+        <div className="font-semibold">
+          <Trans message="Name" />
+        </div>
+        <div>{token.name}</div>
+        <div className="font-semibold mt-10">
+          <Trans message="Last used" />
+        </div>
+        <div>
+          {token.last_used_at ? (
+            <FormattedDate date={token.last_used_at} />
+          ) : (
+            <Trans message="Never" />
+          )}
+        </div>
+      </div>
+      <DeleteTokenButton token={token} />
+    </div>
+  );
+}
+
+function CreateNewTokenButton() {
+  return (
+    <DialogTrigger type="modal">
+      <Button variant="flat" color="primary">
+        <Trans message="Create token" />
+      </Button>
+      <CreateNewTokenDialog />
+    </DialogTrigger>
+  );
+}
+
+interface DeleteTokenButtonProps {
+  token: AccessToken;
+}
+function DeleteTokenButton({token}: DeleteTokenButtonProps) {
+  const deleteToken = useDeleteAccessToken();
+  return (
+    <DialogTrigger
+      type="modal"
+      onClose={isConfirmed => {
+        if (isConfirmed) {
+          deleteToken.mutate(
+            {id: token.id},
+            {
+              onSuccess: () =>
+                queryClient.invalidateQueries({queryKey: ['users']}),
+            },
+          );
+        }
+      }}
+    >
+      <Button
+        size="xs"
+        variant="outline"
+        color="danger"
+        className="flex-shrink-0 ml-auto"
+      >
+        <Trans message="Delete" />
+      </Button>
+      <ConfirmationDialog
+        isDanger
+        title={<Trans message="Delete token?" />}
+        body={
+          <Trans message="This token will be deleted immediately and permanently. Once deleted, it can no longer be used to make API requests." />
+        }
+        confirm={<Trans message="Delete" />}
+      />
+    </DialogTrigger>
+  );
+}

common/resources/client/auth/ui/account-settings/access-token-panel/create-new-token-dialog.tsx

@@ -0,0 +1,114 @@
+import {useForm} from 'react-hook-form';
+import {useState} from 'react';
+import useClipboard from 'react-use-clipboard';
+import {Dialog} from '../../../../ui/overlays/dialog/dialog';
+import {DialogHeader} from '../../../../ui/overlays/dialog/dialog-header';
+import {DialogBody} from '../../../../ui/overlays/dialog/dialog-body';
+import {Form} from '../../../../ui/forms/form';
+import {
+  FormTextField,
+  TextField,
+} from '../../../../ui/forms/input-field/text-field/text-field';
+import {useDialogContext} from '../../../../ui/overlays/dialog/dialog-context';
+import {DialogFooter} from '../../../../ui/overlays/dialog/dialog-footer';
+import {Button} from '../../../../ui/buttons/button';
+import {
+  CreateAccessTokenPayload,
+  useCreateAccessToken,
+} from './create-new-token';
+import {ErrorIcon} from '../../../../icons/material/Error';
+import {Trans} from '../../../../i18n/trans';
+import {queryClient} from '@common/http/query-client';
+
+export function CreateNewTokenDialog() {
+  const form = useForm<CreateAccessTokenPayload>();
+  const {formId, close} = useDialogContext();
+  const createToken = useCreateAccessToken(form);
+
+  const [plainTextToken, setPlainTextToken] = useState<string>();
+
+  const formNode = (
+    <Form
+      form={form}
+      id={formId}
+      onSubmit={values => {
+        createToken.mutate(values, {
+          onSuccess: response => {
+            setPlainTextToken(response.plainTextToken);
+            queryClient.invalidateQueries({queryKey: ['users']});
+          },
+        });
+      }}
+    >
+      <FormTextField
+        name="tokenName"
+        label={<Trans message="Token name" />}
+        required
+        autoFocus
+      />
+    </Form>
+  );
+
+  return (
+    <Dialog>
+      <DialogHeader>
+        <Trans message="Create new token" />
+      </DialogHeader>
+      <DialogBody>
+        {plainTextToken ? (
+          <PlainTextPreview plainTextToken={plainTextToken} />
+        ) : (
+          formNode
+        )}
+      </DialogBody>
+      <DialogFooter>
+        <Button variant="text" onClick={close}>
+          <Trans message="Done" />
+        </Button>
+        {!plainTextToken && (
+          <Button
+            variant="flat"
+            color="primary"
+            type="submit"
+            form={formId}
+            disabled={createToken.isPending}
+          >
+            <Trans message="Create" />
+          </Button>
+        )}
+      </DialogFooter>
+    </Dialog>
+  );
+}
+
+interface PlainTextPreviewProps {
+  plainTextToken: string;
+}
+function PlainTextPreview({plainTextToken}: PlainTextPreviewProps) {
+  const [isCopied, copyToClipboard] = useClipboard(plainTextToken || '', {
+    successDuration: 1000,
+  });
+
+  return (
+    <>
+      <TextField
+        readOnly
+        value={plainTextToken}
+        autoFocus
+        onClick={e => {
+          e.currentTarget.focus();
+          e.currentTarget.select();
+        }}
+        endAppend={
+          <Button variant="flat" color="primary" onClick={copyToClipboard}>
+            {isCopied ? <Trans message="Copied!" /> : <Trans message="Copy" />}
+          </Button>
+        }
+      />
+      <div className="flex items-center gap-10 mt-14 text-sm">
+        <ErrorIcon size="sm" className="text-danger" />
+        <Trans message="Make sure to store the token in a safe place. After this dialog is closed, token will not be viewable anymore." />
+      </div>
+    </>
+  );
+}

common/resources/client/auth/ui/account-settings/access-token-panel/create-new-token.ts

@@ -0,0 +1,35 @@
+import {useMutation} from '@tanstack/react-query';
+import {UseFormReturn} from 'react-hook-form';
+import {BackendResponse} from '../../../../http/backend-response/backend-response';
+import {toast} from '../../../../ui/toast/toast';
+import {AccessToken} from '../../../access-token';
+import {onFormQueryError} from '../../../../errors/on-form-query-error';
+import {message} from '../../../../i18n/message';
+import {apiClient} from '../../../../http/query-client';
+
+interface Response extends BackendResponse {
+  token: AccessToken;
+  plainTextToken: string;
+}
+
+export interface CreateAccessTokenPayload {
+  tokenName: string;
+}
+
+function createAccessToken(
+  payload: CreateAccessTokenPayload,
+): Promise<Response> {
+  return apiClient.post(`access-tokens`, payload).then(r => r.data);
+}
+
+export function useCreateAccessToken(
+  form: UseFormReturn<CreateAccessTokenPayload>,
+) {
+  return useMutation({
+    mutationFn: (props: CreateAccessTokenPayload) => createAccessToken(props),
+    onSuccess: () => {
+      toast(message('Token create'));
+    },
+    onError: r => onFormQueryError(r, form),
+  });
+}

common/resources/client/auth/ui/account-settings/access-token-panel/delete-access-token.ts

@@ -0,0 +1,26 @@
+import {useMutation} from '@tanstack/react-query';
+import {BackendResponse} from '../../../../http/backend-response/backend-response';
+import {toast} from '../../../../ui/toast/toast';
+import {message} from '../../../../i18n/message';
+import {apiClient} from '../../../../http/query-client';
+import {showHttpErrorToast} from '../../../../utils/http/show-http-error-toast';
+
+interface Response extends BackendResponse {}
+
+interface Props {
+  id: number;
+}
+
+function deleteAccessToken({id}: Props): Promise<Response> {
+  return apiClient.delete(`access-tokens/${id}`).then(r => r.data);
+}
+
+export function useDeleteAccessToken() {
+  return useMutation({
+    mutationFn: (props: Props) => deleteAccessToken(props),
+    onSuccess: () => {
+      toast(message('Token deleted'));
+    },
+    onError: err => showHttpErrorToast(err),
+  });
+}