{"version":3,"file":"PasswordInput.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/PasswordInput.tsx"],"sourcesContent":["import { useLingui } from '@lingui/react/macro';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { InputLabelProps } from '../../../utils/accessibility';\nimport Button from '../atoms/Button';\nimport Input from './Input';\n\nexport type PasswordInputProps = InputLabelProps & {\n  password: string;\n  setPassword: (email: string) => void;\n  type: 'new' | 'current';\n\n  // Passed through\n  hideLabel?: boolean;\n  error?: string;\n  minLength?: number;\n  passwordrules?: string;\n};\n\nexport const PasswordInput = ({ password, setPassword, type, ...additionalProps }: PasswordInputProps) => {\n  const { t } = useLingui();\n  const [visible, setVisible] = useState(false);\n\n  // https://technology.blog.gov.uk/2021/04/19/simple-things-are-complicated-making-a-show-password-option/\n  // Recommends setting the type back to password on submit\n  const inputRef = useRef<HTMLInputElement>(null);\n  useEffect(() => {\n    const form = inputRef.current?.form;\n    if (!form) return;\n\n    const controller = new AbortController();\n    form.addEventListener(\n      'submit',\n      () => {\n        // Don't know if this is fast enough, so we also update the DOM directly\n        if (inputRef.current) inputRef.current.type = 'password';\n        setVisible(false);\n      },\n      { signal: controller.signal },\n    );\n    return () => controller.abort();\n  }, []);\n\n  return (\n    <Input\n      id={`${type}-password`}\n      label={t({ id: 'formField.password.label', message: 'Password' })}\n      ref={inputRef}\n      autoComplete={`${type}-password`}\n      type={visible ? 'text' : 'password'}\n      value={password}\n      onChange={(e) => setPassword(e.target.value)}\n      required\n      action={\n        <Button variant=\"ghost\" onClick={() => setVisible(!visible)}>\n          {visible\n            ? t({ id: 'button.hidePassword', message: 'Hide' })\n            : t({ id: 'button.showPassword', message: 'Show' })}\n        </Button>\n      }\n      {...additionalProps}\n    />\n  );\n};\n"],"names":["PasswordInput","password","setPassword","type","additionalProps","useLingui","visible","setVisible","useState","inputRef","useRef","useEffect","form","current","controller","AbortController","addEventListener","signal","abort","React","Input","id","label","ref","autoComplete","value","onChange","e","target","required","action","Button","variant","onClick"],"mappings":";;;;;;AAmBO,MAAMA,aAAAA,GAAgB,CAAC,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,IAAI,EAAE,GAAGC,eAAAA,EAAqC,GAAA;AACnG,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AACd,IAAA,MAAM,CAACC,OAAAA,EAASC,UAAAA,CAAW,GAAGC,CAAAA,CAAS,KAAA,CAAA;;;AAIvC,IAAA,MAAMC,WAAWC,CAAAA,CAAyB,IAAA,CAAA;IAC1CC,CAAAA,CAAU,IAAA;QACR,MAAMC,IAAAA,GAAOH,QAAAA,CAASI,OAAO,EAAED,IAAAA;AAC/B,QAAA,IAAI,CAACA,IAAAA,EAAM;AAEX,QAAA,MAAME,aAAa,IAAIC,eAAAA,EAAAA;QACvBH,IAAAA,CAAKI,gBAAgB,CACnB,QAAA,EACA,IAAA;;AAEE,YAAA,IAAIP,SAASI,OAAO,EAAEJ,SAASI,OAAO,CAACV,IAAI,GAAG,UAAA;YAC9CI,UAAAA,CAAW,KAAA,CAAA;QACb,CAAA,EACA;AAAEU,YAAAA,MAAAA,EAAQH,WAAWG;AAAO,SAAA,CAAA;QAE9B,OAAO,IAAMH,WAAWI,KAAK,EAAA;AAC/B,IAAA,CAAA,EAAG,EAAE,CAAA;AAEL,IAAA,qBACEC,EAAA,CAAA,aAAA,CAACC,KAAAA,EAAAA;QACCC,EAAAA,EAAI,CAAA,EAAGlB,IAAAA,CAAK,SAAS,CAAC;QACtBmB,KAAK,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACLC,GAAAA,EAAKd,QAAAA;QACLe,YAAAA,EAAc,CAAA,EAAGrB,IAAAA,CAAK,SAAS,CAAC;AAChCA,QAAAA,IAAAA,EAAMG,UAAU,MAAA,GAAS,UAAA;QACzBmB,KAAAA,EAAOxB,QAAAA;AACPyB,QAAAA,QAAAA,EAAU,CAACC,CAAAA,GAAMzB,WAAAA,CAAYyB,CAAAA,CAAEC,MAAM,CAACH,KAAK,CAAA;QAC3CI,QAAAA,EAAAA,IAAAA;AACAC,QAAAA,MAAAA,gBACEX,EAAA,CAAA,aAAA,CAACY,MAAAA,EAAAA;YAAOC,OAAAA,EAAQ,OAAA;YAAQC,OAAAA,EAAS,IAAM1B,WAAW,CAACD,OAAAA;AAChDA,SAAAA,EAAAA,OAAAA,GAAAA,OAAAA,CAAAA,CAAAA,CAAAA;;;;;;;AAKJ,QAAA,GAAGF;;AAGV;;;;"}