Merge pull request #1503 from acelaya-forks/feature/revealable-api-key

Use RevealablePasswordInput for server API keys

package-lock.json

@@ -16,7 +16,7 @@
         "@json2csv/plainjs": "^7.0.6",
         "@reduxjs/toolkit": "^2.6.1",
         "@shlinkio/data-manipulation": "^1.0.3",
-        "@shlinkio/shlink-frontend-kit": "^0.8.5",
+        "@shlinkio/shlink-frontend-kit": "^0.8.7",
         "@shlinkio/shlink-js-sdk": "^2.0.0",
         "@shlinkio/shlink-web-component": "^0.13.1",
         "bootstrap": "5.2.3",
@@ -3392,9 +3392,9 @@
       }
     },
     "node_modules/@shlinkio/shlink-frontend-kit": {
-      "version": "0.8.5",
+      "version": "0.8.7",
-      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.8.5.tgz",
+      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.8.7.tgz",
-      "integrity": "sha512-drE8RNeGEXv5v1Ffiql4hUqSRDBfFhxMLvEqLElaCAYXZ2ViKh47/1yUmSe0EUGxjOmzIMtri2u4aI3xM0N8TA==",
+      "integrity": "sha512-9LqjPnOVNKlnmd6DVBeKl2PwPUreqhygenlpHGws9tOThWNX3IcJNNjMAMq75eigmy1brD1WJaxCD0vJQ2SN+g==",
       "license": "MIT",
       "dependencies": {
         "clsx": "^2.1.1"
@@ -13289,9 +13289,9 @@
       "requires": {}
     },
     "@shlinkio/shlink-frontend-kit": {
-      "version": "0.8.5",
+      "version": "0.8.7",
-      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.8.5.tgz",
+      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.8.7.tgz",
-      "integrity": "sha512-drE8RNeGEXv5v1Ffiql4hUqSRDBfFhxMLvEqLElaCAYXZ2ViKh47/1yUmSe0EUGxjOmzIMtri2u4aI3xM0N8TA==",
+      "integrity": "sha512-9LqjPnOVNKlnmd6DVBeKl2PwPUreqhygenlpHGws9tOThWNX3IcJNNjMAMq75eigmy1brD1WJaxCD0vJQ2SN+g==",
       "requires": {
         "clsx": "^2.1.1"
       }

package.json

@@ -29,7 +29,7 @@
     "@json2csv/plainjs": "^7.0.6",
     "@reduxjs/toolkit": "^2.6.1",
     "@shlinkio/data-manipulation": "^1.0.3",
-    "@shlinkio/shlink-frontend-kit": "^0.8.5",
+    "@shlinkio/shlink-frontend-kit": "^0.8.7",
     "@shlinkio/shlink-js-sdk": "^2.0.0",
     "@shlinkio/shlink-web-component": "^0.13.1",
     "bootstrap": "5.2.3",

src/servers/CreateServer.tsx

@@ -73,7 +73,7 @@ const CreateServer: FCWithDeps<CreateServerProps, CreateServerDeps> = ({ servers
         {!hasServers && (
           <ImportServersBtn tooltipPlacement="top" onImport={setServersImported} onError={setErrorImporting} />
         )}
-        {hasServers && <Button type="button" variant="secondary" onClick={goBack}>Cancel</Button>}
+        {hasServers && <Button variant="secondary" onClick={goBack}>Cancel</Button>}
         <Button type="submit">Create server</Button>
       </ServerForm>
 

src/servers/EditServer.tsx

@@ -44,8 +44,8 @@ const EditServer: FCWithDeps<EditServerProps, EditServerDeps> = withSelectedServ
         initialValues={selectedServer}
         onSubmit={handleSubmit}
       >
-        <Button type="button" variant="secondary" onClick={goBack}>Cancel</Button>
+        <Button variant="secondary" onClick={goBack}>Cancel</Button>
-        <Button>Save</Button>
+        <Button type="submit">Save</Button>
       </ServerForm>
     </NoMenuLayout>
   );

src/servers/helpers/ImportServersBtn.tsx

@@ -84,13 +84,7 @@ const ImportServersBtn: FCWithDeps<ImportServersBtnConnectProps, ImportServersBt
 
   return (
     <>
-      <Button
+      <Button variant="secondary" id="importBtn" className={className} onClick={() => ref.current?.click()}>
-        type="button"
-        variant="secondary"
-        id="importBtn"
-        className={className}
-        onClick={() => ref.current?.click()}
-      >
         <FontAwesomeIcon icon={importIcon} fixedWidth /> {children ?? 'Import from file'}
       </Button>
       <UncontrolledTooltip placement={tooltipPlacement} target="importBtn">

src/servers/helpers/ServerForm.tsx

@@ -1,4 +1,8 @@
-import { LabelledInput, SimpleCard } from '@shlinkio/shlink-frontend-kit/tailwind';
+import {
+  LabelledInput,
+  LabelledRevealablePasswordInput,
+  SimpleCard,
+} from '@shlinkio/shlink-frontend-kit/tailwind';
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 import { useState } from 'react';
 import { handleEventPreventingDefault } from '../../utils/utils';
@@ -21,9 +25,8 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
       <SimpleCard className="tw:mb-4" bodyClassName="tw:flex tw:flex-col tw:gap-y-3" title={title}>
         <LabelledInput label="Name" value={name} onChange={(e) => setName(e.target.value)} required />
         <LabelledInput label="URL" type="url" value={url} onChange={(e) => setUrl(e.target.value)} required />
-        <LabelledInput
+        <LabelledRevealablePasswordInput
           label="API key"
-          type="password"
           value={apiKey}
           onChange={(e) => setApiKey(e.target.value)}
           required

src/tailwind.css

@@ -2,19 +2,6 @@
 @source '../node_modules/@shlinkio/shlink-frontend-kit';
 @import '@shlinkio/shlink-frontend-kit/tailwind.preset.css';
 
-@utility scroll-thin {
-    /* Standard. New browsers */
-    scrollbar-width: thin;
-
-    /* Fallback */
-    &::-webkit-scrollbar {
-        width: 6px;
-    }
-    &::-webkit-scrollbar-thumb {
-        border-radius: .5rem;
-    }
-}
-
 @layer base {
     :root {
         --header-height: 56px;