pad: clarify that read-only sharing selects a link

src/locales/en.json

@@ -364,7 +364,8 @@
   "pad.gritter.unacceptedCommit.text": "Your recent edit is still not saved. Reconnect and try again.",
 
   "pad.share": "Share this pad",
-  "pad.share.readonly": "Read only",
+  "pad.share.readonly": "Use read-only link",
+  "pad.share.readonly-explanation": "This only changes the link and embed code shown here. Keep the editable link to make changes; people with permission to edit can still use that link.",
   "pad.share.link": "Link",
   "pad.share.emebdcode": "Embed URL",
   "pad.chat": "Chat",

src/templates/pad.html

@@ -579,8 +579,9 @@ <h2 data-l10n-id="pad.modals.disconnected.explanation"></h2>
           <% e.begin_block("embedPopup"); %>
           <h1 id="embed-title" data-l10n-id="pad.share"></h1>
           <div id="embedreadonly" class="acl-write">
-              <input type="checkbox" id="readonlyinput">
+              <input type="checkbox" id="readonlyinput" aria-describedby="readonly-explanation">
               <label for="readonlyinput" data-l10n-id="pad.share.readonly"></label>
+              <p id="readonly-explanation" data-l10n-id="pad.share.readonly-explanation"></p>
           </div>
           <div id="linkcode">
               <h2 data-l10n-id="pad.share.link"></h2>

src/tests/frontend-new/specs/share_readonly.spec.ts

@@ -0,0 +1,55 @@
+import {expect, test} from '@playwright/test';
+import {getPadBody, goToNewPad} from '../helper/padHelper';
+
+test.use({locale: 'en-US'});
+
+test.beforeEach(async ({page}) => {
+  await goToNewPad(page);
+  await page.locator('.buttonicon-embed').click();
+  await expect(page.locator('#embed.popup-show')).toBeVisible();
+});
+
+test('explains that read-only sharing selects a link, not pad permissions', async ({page}) => {
+  const checkbox = page.getByRole('checkbox', {name: 'Use read-only link', exact: true});
+  const explanation = 'This only changes the link and embed code shown here. ' +
+    'Keep the editable link to make changes; people with permission to edit can still use that link.';
+  await expect(checkbox).toBeAttached();
+  await expect(page.locator('#readonly-explanation')).toHaveText(explanation);
+  await expect(page.locator('#readonly-explanation')).toBeVisible();
+  await expect(checkbox).toHaveAccessibleDescription(explanation);
+  await expect(page.locator('label[for="readonlyinput"]')).toBeVisible();
+});
+
+test('switches share links without changing access through either link', async ({page, context}) => {
+  const editableUrl = page.url();
+  const checkbox = page.locator('#readonlyinput');
+  const label = page.locator('label[for="readonlyinput"]');
+  await expect(page.locator('#linkinput')).toHaveValue(editableUrl);
+  await label.click();
+  await expect(checkbox).toBeChecked();
+  await expect(page.locator('#linkinput')).toHaveValue(/\/p\/r\./);
+  const readonlyUrl = await page.locator('#linkinput').inputValue();
+  expect(await page.locator('#embedinput').inputValue()).toContain(`src="${readonlyUrl}?`);
+  await expect(page.locator('#embedinput')).toHaveValue(/name="embed_readonly"/);
+  await expect(page).toHaveURL(editableUrl);
+  await expect(await getPadBody(page)).toHaveAttribute('contenteditable', 'true');
+
+  await label.click();
+  await expect(checkbox).not.toBeChecked();
+  await expect(page.locator('#linkinput')).toHaveValue(editableUrl);
+  await expect(page.locator('#embedinput')).toHaveValue(/name="embed_readwrite"/);
+
+  const reader = await context.newPage();
+  await reader.goto(readonlyUrl);
+  await reader.waitForSelector('#editorcontainer.initialized');
+  await expect(await getPadBody(reader)).toHaveAttribute('contenteditable', 'false');
+  await reader.locator('.buttonicon-embed').click();
+  await expect(reader.locator('#embed.popup-show')).toBeVisible();
+  await expect(reader.locator('#embedreadonly')).toBeHidden();
+  await expect(reader.locator('#linkinput')).toHaveValue(readonlyUrl);
+
+  await page.reload();
+  await page.waitForSelector('#editorcontainer.initialized');
+  await expect(await getPadBody(page)).toHaveAttribute('contenteditable', 'true');
+  await reader.close();
+});