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