security headers, notifications, GDPR consent, masked fields

dist/globals/SiteIntegrations/components/MaskedField.js

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField } from '@payloadcms/ui';
+import { useState } from 'react';
+export const MaskedField = ({ field, path })=>{
+    const { setValue, value } = useField({
+        path
+    });
+    const [revealed, setRevealed] = useState(false);
+    const label = typeof field?.label === 'string' ? field.label : field?.name ?? path;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "field-type text",
+        children: [
+            /*#__PURE__*/ _jsx("label", {
+                className: "field-label",
+                children: label
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    gap: '.5rem'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("input", {
+                        autoComplete: "off",
+                        onChange: (e)=>setValue(e.target.value),
+                        style: {
+                            flex: 1
+                        },
+                        type: revealed ? 'text' : 'password',
+                        value: value ?? ''
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        onClick: ()=>setRevealed((r)=>!r),
+                        type: "button",
+                        children: revealed ? 'Hide' : 'Reveal'
+                    })
+                ]
+            })
+        ]
+    });
+};
+export default MaskedField;
+
+//# sourceMappingURL=MaskedField.js.map

dist/globals/SiteIntegrations/components/MaskedField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/globals/SiteIntegrations/components/MaskedField.tsx"],"sourcesContent":["'use client'\nimport type { TextFieldClientComponent } from 'payload'\n\nimport { useField } from '@payloadcms/ui'\nimport { useState } from 'react'\n\nexport const MaskedField: TextFieldClientComponent = ({ field, path }) => {\n  const { setValue, value } = useField<string>({ path })\n  const [revealed, setRevealed] = useState(false)\n  const label = typeof field?.label === 'string' ? field.label : (field?.name ?? path)\n\n  return (\n    <div className=\"field-type text\">\n      <label className=\"field-label\">{label}</label>\n      <div style={{ display: 'flex', gap: '.5rem' }}>\n        <input\n          autoComplete=\"off\"\n          onChange={(e) => setValue(e.target.value)}\n          style={{ flex: 1 }}\n          type={revealed ? 'text' : 'password'}\n          value={value ?? ''}\n        />\n        <button onClick={() => setRevealed((r) => !r)} type=\"button\">\n          {revealed ? 'Hide' : 'Reveal'}\n        </button>\n      </div>\n    </div>\n  )\n}\nexport default MaskedField\n"],"names":["useField","useState","MaskedField","field","path","setValue","value","revealed","setRevealed","label","name","div","className","style","display","gap","input","autoComplete","onChange","e","target","flex","type","button","onClick","r"],"mappings":"AAAA;;AAGA,SAASA,QAAQ,QAAQ,iBAAgB;AACzC,SAASC,QAAQ,QAAQ,QAAO;AAEhC,OAAO,MAAMC,cAAwC,CAAC,EAAEC,KAAK,EAAEC,IAAI,EAAE;IACnE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGN,SAAiB;QAAEI;IAAK;IACpD,MAAM,CAACG,UAAUC,YAAY,GAAGP,SAAS;IACzC,MAAMQ,QAAQ,OAAON,OAAOM,UAAU,WAAWN,MAAMM,KAAK,GAAIN,OAAOO,QAAQN;IAE/E,qBACE,MAACO;QAAIC,WAAU;;0BACb,KAACH;gBAAMG,WAAU;0BAAeH;;0BAChC,MAACE;gBAAIE,OAAO;oBAAEC,SAAS;oBAAQC,KAAK;gBAAQ;;kCAC1C,KAACC;wBACCC,cAAa;wBACbC,UAAU,CAACC,IAAMd,SAASc,EAAEC,MAAM,CAACd,KAAK;wBACxCO,OAAO;4BAAEQ,MAAM;wBAAE;wBACjBC,MAAMf,WAAW,SAAS;wBAC1BD,OAAOA,SAAS;;kCAElB,KAACiB;wBAAOC,SAAS,IAAMhB,YAAY,CAACiB,IAAM,CAACA;wBAAIH,MAAK;kCACjDf,WAAW,SAAS;;;;;;AAK/B,EAAC;AACD,eAAeL,YAAW"}