@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 2.86 kB
JavaScript
import{jsx as o,jsxs as r}from"react/jsx-runtime";import i from"@mui/icons-material/VisibilityOffOutlined";import e from"@mui/icons-material/VisibilityOutlined";import{useTheme as t,Stack as a,Box as n}from"@mui/material";import{useState as s}from"react";import{emailValidation as m}from"../../../utils/formValidation/email.js";import{defaultInputValidation as l}from"../../../utils/formValidation/misc.js";import{passwordValidation as d}from"../../../utils/formValidation/password.js";import c from"../../BrandCore/Icon/Icon.js";import u from"../AuthContainerSurface/AuthContainerSurface.js";import p from"../../WebCore/AuthFormHeader/AuthFormHeader.js";import f from"../../WebCore/Button/Button.js";import g from"../../WebCore/ColorBackgroundContainer/ColorBackgroundContainer.js";import h from"../../WebCore/FormGenerator/FormGenerator.js";import y from"../../WebCore/IconButton/IconButton.js";import"../../BrandCore/primitiveVariables.js";import C from"../../WebCore/Link/Link.js";import b from"../../WebCore/TextBarDivider/TextBarDivider.js";import j from"../../WebCore/Typography/Typography.js";const v=()=>{const v=t(),[w,W]=s(!1);return o(g,{sx:{display:"flex",justifyContent:"center",py:[2,5,5]},gradient:"tone4",children:r(u,{variation:"overlay",children:[o(p,{headerText:"Log in to your account"}),r(a,{gap:1,width:"100%",children:[o(f,{variation:"secondary",fullWidth:!0,startIcon:o(c,{name:"social-google-full-colour",size:20}),children:"Log in up using Google"}),o(f,{variation:"secondary",fullWidth:!0,startIcon:o(c,{name:"social-linkedin-full-colour",size:20}),children:"Log in using LinkedIn"}),o(f,{variation:"secondary",fullWidth:!0,children:"Single sign-on (SSO)"})]}),o(b,{text:"or"}),o(h,{formConfig:{reValidateMode:"onChange",styleOverrides:{sxStack:{gap:v.spacing(v.custom.margin.sm)},sxForm:{width:1},sxButtons:{mt:v.spacing(v.custom.margin.md)}},fields:[{fieldType:"textfield",name:"email",fullWidth:!0,placeholder:"Email",validation:{...l("email",!0),...m}},{fieldType:"textfield",name:"password",type:w?"text":"password",fullWidth:!0,placeholder:"Password",endAdornment:o(y,{icon:o(w?e:i,{sx:{color:v.custom.palette.icon.primary}}),onClick:()=>W(!w)}),validation:{...l("password",!0),...d(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:o(f,{fullWidth:!0,children:"Log in"})}),o(n,{mt:v.spacing(v.custom.margin.sm),mb:v.spacing(v.custom.margin.lg),width:"100%",children:o(f,{variation:"subtle",fullWidth:!0,sizing:"md",children:"I forgot my password"})}),r(j,{align:"center",variation:"sm",component:"p",children:["We will process your data as set forth in our ",o(C,{children:"Terms of use"})," and"," ",o(C,{children:"Privacy & Cookies Policy"}),"."]})]})})};export{v as default};