@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 2.29 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),r=require("@mui/icons-material/VisibilityOffOutlined"),o=require("@mui/icons-material/VisibilityOutlined"),s=require("@mui/material"),a=require("react"),t=require("../../../utils/formValidation/misc.js"),i=require("../../../utils/formValidation/password.js"),n=require("../AuthContainerSurface/AuthContainerSurface.js"),u=require("../../WebCore/AuthFormHeader/AuthFormHeader.js"),d=require("../../WebCore/Button/Button.js"),l=require("../../WebCore/ColorBackgroundContainer/ColorBackgroundContainer.js"),c=require("../../WebCore/FormGenerator/FormGenerator.js"),m=require("../../WebCore/IconButton/IconButton.js");function p(e){return e&&e.__esModule?e:{default:e}}require("../../BrandCore/primitiveVariables.js");var x=p(r),f=p(o);module.exports=()=>{const r=s.useTheme(),[o,p]=a.useState(!1);return e.jsx(l,{sx:{display:"flex",justifyContent:"center",py:[2,5,5]},gradient:"tone4",children:e.jsxs(n,{variation:"overlay",children:[e.jsx(u,{headerText:"Set a new password"}),e.jsx(c.default,{formConfig:{reValidateMode:"onChange",styleOverrides:{sxStack:{gap:r.spacing(r.custom.margin.sm)},sxForm:{width:"100%"},sxButtons:{mt:r.spacing(r.custom.margin.md)}},fields:[{fieldType:"textfield",name:"password",label:"Password",strengthIndicator:!0,type:o?"text":"password",helperText:"Create a strong password",endAdornment:e.jsx(m,{icon:o?e.jsx(f.default,{sx:{color:r.custom.palette.icon.primary}}):e.jsx(x.default,{sx:{color:r.custom.palette.icon.primary}}),onClick:()=>p(!o)}),validation:{...t.defaultInputValidation("password",!0),...i.passwordValidation(6),equal:{value:"password",message:"You cannot choose 'password' as your password"},score:{value:1,message:"Your password is too weak"}}},{fieldType:"textfield",name:"passwordConfirmation",type:o?"text":"password",label:"Confirm password",endAdornment:e.jsx(m,{icon:o?e.jsx(f.default,{sx:{color:r.custom.palette.icon.primary}}):e.jsx(x.default,{sx:{color:r.custom.palette.icon.primary}}),onClick:()=>p(!o)}),validation:{...t.defaultInputValidation("password",!0),...i.passwordValidation(6),equal:{value:"password",message:"You cannot choose 'password' as your password"},score:{value:1,message:"Your password is too weak"}}}]},submitButton:e.jsx(d,{fullWidth:!0,children:"Submit"})})]})})};