@grafana/ui
Version:
Grafana Components Library
1 lines • 3.89 kB
Source Map (JSON)
{"version":3,"file":"SecretFormField.mjs","sources":["../../../../src/components/SecretFormField/SecretFormField.tsx"],"sourcesContent":["import { omit } from 'lodash';\nimport { InputHTMLAttributes } from 'react';\nimport * as React from 'react';\n\nimport { Trans } from '@grafana/i18n';\n\nimport { Button } from '../Button/Button';\nimport { FormField } from '../FormField/FormField';\nimport { Field } from '../Forms/Field';\nimport { SecretInput } from '../SecretInput';\nimport { PopoverContent } from '../Tooltip/types';\n\nexport interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onReset'> {\n // Function to use when reset is clicked. Means you have to reset the input value yourself as this is uncontrolled\n // component (or do something else if required).\n onReset: (event: React.SyntheticEvent<HTMLButtonElement>) => void;\n isConfigured: boolean;\n\n label?: string;\n tooltip?: PopoverContent;\n labelWidth?: number;\n inputWidth?: number;\n // Placeholder of the input field when in non configured state.\n placeholder?: string;\n interactive?: boolean;\n}\n\n/**\n * Form field that has 2 states configured and not configured. If configured it will not show its contents and adds\n * a reset button that will clear the input and makes it accessible. In non configured state it behaves like normal\n * form field. This is used for passwords or anything that is encrypted on the server and is later returned encrypted\n * to the user (like datasource passwords).\n *\n * @deprecated Please use the {@link SecretInput} component with a {@link Field} instead, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-secretinput--basic as seen in Storybook}\n */\nexport const SecretFormField = ({\n label = 'Password',\n labelWidth,\n inputWidth = 12,\n onReset,\n isConfigured,\n tooltip,\n placeholder = 'Password',\n interactive,\n ...inputProps\n}: Props) => {\n return (\n <FormField\n label={label!}\n tooltip={tooltip}\n interactive={interactive}\n labelWidth={labelWidth}\n inputEl={\n isConfigured ? (\n <>\n <input\n type=\"text\"\n className={`gf-form-input width-${inputWidth}`}\n disabled={true}\n value=\"configured\"\n {...omit(inputProps, 'value')}\n />\n <Button onClick={onReset} variant=\"secondary\" type=\"button\">\n <Trans i18nKey=\"grafana-ui.secret-form-field.reset\">Reset</Trans>\n </Button>\n </>\n ) : (\n <input\n type=\"password\"\n className={`gf-form-input width-${inputWidth}`}\n placeholder={placeholder}\n {...inputProps}\n />\n )\n }\n />\n );\n};\n\nSecretFormField.displayName = 'SecretFormField';\n"],"names":[],"mappings":";;;;;;AAmCO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,KAAQ,GAAA,UAAA;AAAA,EACR,UAAA;AAAA,EACA,UAAa,GAAA,EAAA;AAAA,EACb,OAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAc,GAAA,UAAA;AAAA,EACd,WAAA;AAAA,EACA,GAAG;AACL,CAAa,KAAA;AACX,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,OAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA,EACE,+BAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,IAAK,EAAA,MAAA;AAAA,YACL,SAAA,EAAW,uBAAuB,UAAU,CAAA,CAAA;AAAA,YAC5C,QAAU,EAAA,IAAA;AAAA,YACV,KAAM,EAAA,YAAA;AAAA,YACL,GAAG,IAAK,CAAA,UAAA,EAAY,OAAO;AAAA;AAAA,SAC9B;AAAA,wBACC,GAAA,CAAA,MAAA,EAAA,EAAO,OAAS,EAAA,OAAA,EAAS,OAAQ,EAAA,WAAA,EAAY,IAAK,EAAA,QAAA,EACjD,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAM,OAAQ,EAAA,oCAAA,EAAqC,mBAAK,CAC3D,EAAA;AAAA,OAAA,EACF,CAEA,mBAAA,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,UAAA;AAAA,UACL,SAAA,EAAW,uBAAuB,UAAU,CAAA,CAAA;AAAA,UAC5C,WAAA;AAAA,UACC,GAAG;AAAA;AAAA;AACN;AAAA,GAGN;AAEJ;AAEA,eAAA,CAAgB,WAAc,GAAA,iBAAA;;;;"}