plugin onboardingModal: add paste from clipboard button

This may be a workaround for #439, where we can paste into the form
without needing the input to be focussed.

Author: jamiebrynes7

docs/docs/translation-status.json

@@ -2,15 +2,15 @@
   {
     "name": "English",
     "code": "en",
-    "completed": 202,
+    "completed": 203,
     "missing": 0,
     "percent": 100
   },
   {
     "name": "Nederlands",
     "code": "nl",
     "completed": 146,
-    "missing": 56,
+    "missing": 57,
     "percent": 72
   }
 ]

plugin/src/i18n/langs/en.ts

@@ -209,6 +209,7 @@ export const en: Translations = {
     },
     tokenInputLabel: "API Token",
     submitButtonLabel: "Save",
+    pasteButtonLabel: "Paste from clipboard",
   },
   query: {
     displays: {

plugin/src/i18n/translation.ts

@@ -190,6 +190,7 @@ export type Translations = {
     };
     tokenInputLabel: string;
     submitButtonLabel: string;
+    pasteButtonLabel: string;
   };
   query: {
     displays: {

plugin/src/ui/onboardingModal/TokenInputForm.tsx

@@ -23,6 +23,15 @@ export const TokenInputForm: React.FC<Props> = ({ onTokenSubmit, tester }) => {
     setToken(newToken.trim());
   };
 
+  const pasteFromClipboard = async () => {
+    try {
+      const clipboardText = await navigator.clipboard.readText();
+      onTokenChange(clipboardText);
+    } catch (e) {
+      console.error("Failed to read from clipboard", e);
+    }
+  };
+
   // The epoch ensures that only the latest validation request is processed.
   // The debounce ensures that we don't fire off too many requests.
   const validationEpoch = useRef(0);
@@ -75,9 +84,20 @@ export const TokenInputForm: React.FC<Props> = ({ onTokenSubmit, tester }) => {
         </Group>
         <FieldError>{validationStatus.kind === "error" ? validationStatus.message : ""}</FieldError>
       </TextField>
-      <Button type="submit" isDisabled={!canSubmit} onPress={() => onTokenSubmit(token)}>
-        {i18n.submitButtonLabel}
-      </Button>
+      <div className="controls">
+        <Button type="button" onPress={pasteFromClipboard}>
+          Paste from clipboard
+          {i18n.pasteButtonLabel}
+        </Button>
+        <Button
+          type="submit"
+          isDisabled={!canSubmit}
+          onPress={() => onTokenSubmit(token)}
+          className="mod-cta"
+        >
+          {i18n.submitButtonLabel}
+        </Button>
+      </div>
     </div>
   );
 };

plugin/src/ui/onboardingModal/styles.scss

@@ -31,8 +31,10 @@
     }
   }
 
-  .react-aria-Button {
-    float: right;
+  .controls {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1em;
     margin-top: 1em;
   }