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", "@json2csv/plainjs": "^7.0.6",
"@reduxjs/toolkit": "^2.6.1", "@reduxjs/toolkit": "^2.6.1",
"@shlinkio/data-manipulation": "^1.0.3", "@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-js-sdk": "^2.0.0",
"@shlinkio/shlink-web-component": "^0.13.1", "@shlinkio/shlink-web-component": "^0.13.1",
"bootstrap": "5.2.3", "bootstrap": "5.2.3",
@@ -3392,9 +3392,9 @@
} }
}, },
"node_modules/@shlinkio/shlink-frontend-kit": { "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", "license": "MIT",
"dependencies": { "dependencies": {
"clsx": "^2.1.1" "clsx": "^2.1.1"
@@ -13289,9 +13289,9 @@
"requires": {} "requires": {}
}, },
"@shlinkio/shlink-frontend-kit": { "@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": { "requires": {
"clsx": "^2.1.1" "clsx": "^2.1.1"
} }

View File

@@ -29,7 +29,7 @@
"@json2csv/plainjs": "^7.0.6", "@json2csv/plainjs": "^7.0.6",
"@reduxjs/toolkit": "^2.6.1", "@reduxjs/toolkit": "^2.6.1",
"@shlinkio/data-manipulation": "^1.0.3", "@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-js-sdk": "^2.0.0",
"@shlinkio/shlink-web-component": "^0.13.1", "@shlinkio/shlink-web-component": "^0.13.1",
"bootstrap": "5.2.3", "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 type { FC, PropsWithChildren, ReactNode } from 'react';
import { useState } from 'react'; import { useState } from 'react';
import { handleEventPreventingDefault } from '../../utils/utils'; 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}> <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="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 label="URL" type="url" value={url} onChange={(e) => setUrl(e.target.value)} required />
<LabelledInput <LabelledRevealablePasswordInput
label="API key" label="API key"
type="password"
value={apiKey} value={apiKey}
onChange={(e) => setApiKey(e.target.value)} onChange={(e) => setApiKey(e.target.value)}
required required

View File

@@ -2,19 +2,6 @@
@source '../node_modules/@shlinkio/shlink-frontend-kit'; @source '../node_modules/@shlinkio/shlink-frontend-kit';
@import '@shlinkio/shlink-frontend-kit/tailwind.preset.css'; @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 { @layer base {
:root { :root {
--header-height: 56px; --header-height: 56px;