fix: low-privilege user token creation (#11492)

* [bug] Users cannot create their own API tokens
Fixes #11486

* fix detection of metadata

* make easier to read

* add handler for IsAuthenticated

* use correct method

* fix style see #11487

* add frontend test

* make test more reliable?

src/frontend/src/tables/settings/ApiTokenTable.tsx

@@ -26,7 +26,8 @@ export function ApiTokenTable({
   const [opened, { open, close }] = useDisclosure(false);
 
   const generateToken = useCreateApiFormModal({
-    url: ApiEndpoints.user_tokens,
+    url: ApiEndpoints.user_token,
+    method: 'GET',
     title: t`Generate Token`,
     fields: { name: {} },
     successMessage: t`Token generated`,
@@ -178,6 +179,7 @@ export function ApiTokenTable({
             onClose={close}
             title={<StylishText size='xl'>{t`Token`}</StylishText>}
             centered
+            data-testid='generated-api-token'
           >
             <Text c='dimmed'>
               <Trans>

src/frontend/tests/pui_settings.spec.ts

@@ -543,3 +543,27 @@ async function testColorPicker(page, ref: string) {
   await page.mouse.click(box.x + box.width / 2, box.y + box.height + 25);
   await page.getByText('Color Mode').click();
 }
+
+test('Settings - Auth - Tokens', async ({ browser }) => {
+  const page = await doCachedLogin(browser, {
+    username: 'allaccess',
+    password: 'nolimits',
+    url: 'settings/user/'
+  });
+
+  await page.getByRole('tab', { name: 'Security' }).click();
+  await page.getByRole('button', { name: 'Access Tokens' }).click();
+  await page
+    .getByRole('button', { name: 'action-button-generate-token' })
+    .click();
+  await page
+    .getByRole('textbox', { name: 'text-field-name' })
+    .fill('testtoken');
+  await page.getByRole('button', { name: 'Submit', exact: true }).click();
+  await page.getByText('Tokens are only shown once').waitFor();
+  await page
+    .getByTestId('generated-api-token')
+    .locator('.mantine-CloseButton-root')
+    .click();
+  await page.getByRole('cell', { name: 'testtoken' }).waitFor();
+});