Use RevealablePasswordInput for server API keys

This commit is contained in:
Alejandro Celaya 2025-04-05 14:07:01 +02:00
parent 61cc6c8d26
commit 0a7a606541
4 changed files with 14 additions and 24 deletions

14
package-lock.json generated
View File

@ -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",
"resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.8.5.tgz",
"integrity": "sha512-drE8RNeGEXv5v1Ffiql4hUqSRDBfFhxMLvEqLElaCAYXZ2ViKh47/1yUmSe0EUGxjOmzIMtri2u4aI3xM0N8TA==",
"version": "0.8.7",
"resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.8.7.tgz",
"integrity": "sha512-9LqjPnOVNKlnmd6DVBeKl2PwPUreqhygenlpHGws9tOThWNX3IcJNNjMAMq75eigmy1brD1WJaxCD0vJQ2SN+g==",
"license": "MIT",
"dependencies": {
"clsx": "^2.1.1"
@ -13289,9 +13289,9 @@
"requires": {}
},
"@shlinkio/shlink-frontend-kit": {
"version": "0.8.5",
"resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.8.5.tgz",
"integrity": "sha512-drE8RNeGEXv5v1Ffiql4hUqSRDBfFhxMLvEqLElaCAYXZ2ViKh47/1yUmSe0EUGxjOmzIMtri2u4aI3xM0N8TA==",
"version": "0.8.7",
"resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.8.7.tgz",
"integrity": "sha512-9LqjPnOVNKlnmd6DVBeKl2PwPUreqhygenlpHGws9tOThWNX3IcJNNjMAMq75eigmy1brD1WJaxCD0vJQ2SN+g==",
"requires": {
"clsx": "^2.1.1"
}

View File

@ -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",

View File

@ -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

View File

@ -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;