@useloops/design-system/dist/systems/Platform/LoginForm/LoginForm.js

The official React based Loops design system

"use strict";var e=require("react/jsx-runtime"),r=require("@mui/icons-material/VisibilityOffOutlined"),i=require("@mui/icons-material/VisibilityOutlined"),o=require("@mui/material"),a=require("react"),t=require("../../../utils/formValidation/email.js"),s=require("../../../utils/formValidation/misc.js"),n=require("../../../utils/formValidation/password.js"),l=require("../../BrandCore/Icon/Icon.js"),u=require("../AuthContainerSurface/AuthContainerSurface.js"),d=require("../../WebCore/AuthFormHeader/AuthFormHeader.js"),c=require("../../WebCore/Button/Button.js"),m=require("../../WebCore/ColorBackgroundContainer/ColorBackgroundContainer.js"),p=require("../../WebCore/FormGenerator/FormGenerator.js"),f=require("../../WebCore/IconButton/IconButton.js");require("../../BrandCore/primitiveVariables.js");var x=require("../../WebCore/Link/Link.js"),j=require("../../WebCore/TextBarDivider/TextBarDivider.js"),h=require("../../WebCore/Typography/Typography.js");function g(e){return e&&e.__esModule?e:{default:e}}var y=g(r),C=g(i);module.exports=()=>{const r=o.useTheme(),[i,g]=a.useState(!1);return e.jsx(m,{sx:{display:"flex",justifyContent:"center",py:[2,5,5]},gradient:"tone4",children:e.jsxs(u,{variation:"overlay",children:[e.jsx(d,{headerText:"Log in to your account"}),e.jsxs(o.Stack,{gap:1,width:"100%",children:[e.jsx(c,{variation:"secondary",fullWidth:!0,startIcon:e.jsx(l.default,{name:"social-google-full-colour",size:20}),children:"Log in up using Google"}),e.jsx(c,{variation:"secondary",fullWidth:!0,startIcon:e.jsx(l.default,{name:"social-linkedin-full-colour",size:20}),children:"Log in using LinkedIn"}),e.jsx(c,{variation:"secondary",fullWidth:!0,children:"Single sign-on (SSO)"})]}),e.jsx(j,{text:"or"}),e.jsx(p.default,{formConfig:{reValidateMode:"onChange",styleOverrides:{sxStack:{gap:r.spacing(r.custom.margin.sm)},sxForm:{width:1},sxButtons:{mt:r.spacing(r.custom.margin.md)}},fields:[{fieldType:"textfield",name:"email",fullWidth:!0,placeholder:"Email",validation:{...s.defaultInputValidation("email",!0),...t.emailValidation}},{fieldType:"textfield",name:"password",type:i?"text":"password",fullWidth:!0,placeholder:"Password",endAdornment:e.jsx(f,{icon:i?e.jsx(C.default,{sx:{color:r.custom.palette.icon.primary}}):e.jsx(y.default,{sx:{color:r.custom.palette.icon.primary}}),onClick:()=>g(!i)}),validation:{...s.defaultInputValidation("password",!0),...n.passwordValidation(6),equal:{value:"password",message:"You cannot choose 'password' as your password"},score:{value:1,message:"Your password is too weak"}}}]},onFormSubmit:()=>console.warn("sibmitted"),submitButton:e.jsx(c,{fullWidth:!0,children:"Log in"})}),e.jsx(o.Box,{mt:r.spacing(r.custom.margin.sm),mb:r.spacing(r.custom.margin.lg),width:"100%",children:e.jsx(c,{variation:"subtle",fullWidth:!0,sizing:"md",children:"I forgot my password"})}),e.jsxs(h,{align:"center",variation:"sm",component:"p",children:["We will process your data as set forth in our ",e.jsx(x,{children:"Terms of use"})," and"," ",e.jsx(x,{children:"Privacy & Cookies Policy"}),"."]})]})})};