UNPKG

@grafana/ui

Version:
1 lines 4.62 kB
{"version":3,"file":"SecretFormField.mjs","sources":["../../../../src/components/SecretFormField/SecretFormField.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { omit } from 'lodash';\nimport { InputHTMLAttributes } from 'react';\nimport * as React from 'react';\n\nimport { Trans } from '../../utils/i18n';\nimport { Button } from '../Button/Button';\nimport { FormField } from '../FormField/FormField';\nimport { Field } from '../Forms/Field';\nimport { SecretInput } from '../SecretInput';\nimport { PopoverContent } from '../Tooltip';\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\nconst getSecretFormFieldStyles = () => {\n return {\n noRadiusInput: css({\n borderBottomRightRadius: '0 !important',\n borderTopRightRadius: '0 !important',\n }),\n noRadiusButton: css({\n borderBottomLeftRadius: '0 !important',\n borderTopLeftRadius: '0 !important',\n }),\n };\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 const styles = getSecretFormFieldStyles();\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={cx(`gf-form-input width-${inputWidth}`, styles.noRadiusInput)}\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":";;;;;;;AA2BA,MAAM,2BAA2B,MAAM;AACrC,EAAO,OAAA;AAAA,IACL,eAAe,GAAI,CAAA;AAAA,MACjB,uBAAyB,EAAA,cAAA;AAAA,MACzB,oBAAsB,EAAA;AAAA,KACvB,CAAA;AAAA,IACD,gBAAgB,GAAI,CAAA;AAAA,MAClB,sBAAwB,EAAA,cAAA;AAAA,MACxB,mBAAqB,EAAA;AAAA,KACtB;AAAA,GACH;AACF,CAAA;AAUO,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,EAAA,MAAM,SAAS,wBAAyB,EAAA;AACxC,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,WAAW,EAAG,CAAA,CAAA,oBAAA,EAAuB,UAAU,CAAA,CAAA,EAAI,OAAO,aAAa,CAAA;AAAA,YACvE,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;;;;"}