@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.65 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),r=require("@mui/icons-material"),i=require("@mui/material"),t=require("../../../utils/formValidation/email.js"),a=require("../../../utils/formValidation/misc.js"),o=require("../AuthContainerSurface/AuthContainerSurface.js"),n=require("../../WebCore/AuthFormHeader/AuthFormHeader.js"),s=require("../../WebCore/Button/Button.js"),l=require("../../WebCore/ColorBackgroundContainer/ColorBackgroundContainer.js"),u=require("../../WebCore/FormGenerator/FormGenerator.js"),d=require("../../WebCore/Link/Link.js"),m=require("../../WebCore/Typography/Typography.js");module.exports=()=>{const c=i.useTheme();return e.jsx(l,{sx:{display:"flex",justifyContent:"center",py:[2,5,5]},gradient:"tone4",children:e.jsxs(o,{variation:"overlay",headContent:e.jsx(s,{sizing:"sm",variation:"subtle",startIcon:e.jsx(r.ArrowBack,{}),children:"Back"}),children:[e.jsx(n,{logo:!1,headerText:"Enter your email address",subText:"We'll send you a reset password link"}),e.jsx(u.default,{formConfig:{reValidateMode:"onChange",styleOverrides:{sxStack:{gap:c.spacing(c.custom.margin.sm)},sxForm:{width:1},sxButtons:{mt:c.spacing(c.custom.margin.md)}},fields:[{fieldType:"textfield",name:"email",fullWidth:!0,placeholder:"Email address",validation:{...a.defaultInputValidation("email",!0),...t.emailValidation}}]},onFormSubmit:()=>console.warn("sibmitted"),submitButton:e.jsx(s,{fullWidth:!0,children:"Reset password"})}),e.jsx(i.Box,{mt:c.spacing(c.custom.margin.lg),width:"100%",children:e.jsxs(m,{align:"center",variation:"sm",component:"p",children:["Having trouble logging in? ",e.jsx(d,{children:"Contact support"}),"."]})})]})})};