2 lines
10 KiB
JavaScript
2 lines
10 KiB
JavaScript
import{P as Y}from"./Page.e7b124c2.js";import{g as ee,a as te,c as I,j as t,s as S,P as re,b as _,d as V,l as H,_ as M,r as O,u as oe,e as ae,f as c,I as G,h as ne,i as ie,k as R,S as y,m as K,n as se,o as le,p as ce,O as de,q as w,F as B,t as ue,T as A,B as N,L as $,v as me,D as pe}from"./index.6e3d3f58.js";import{c as z,a as C,u as F,o as q,F as Z,R as J,L as Q,C as ge}from"./RHFTextField.522e64b8.js";import{G as T,C as he}from"./Grid.b6e46be2.js";import"./TextField.d5f4a1bd.js";function fe(e){return te("MuiAlert",e)}const ve=ee("MuiAlert",["root","action","icon","message","filled","filledSuccess","filledInfo","filledWarning","filledError","outlined","outlinedSuccess","outlinedInfo","outlinedWarning","outlinedError","standard","standardSuccess","standardInfo","standardWarning","standardError"]),W=ve,xe=I(t("path",{d:"M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2, 4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0, 0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"}),"SuccessOutlined"),ye=I(t("path",{d:"M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"}),"ReportProblemOutlined"),Ce=I(t("path",{d:"M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"}),"ErrorOutline"),Se=I(t("path",{d:"M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20, 12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10, 10 0 0,0 12,2M11,17H13V11H11V17Z"}),"InfoOutlined"),be=I(t("path",{d:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"}),"Close");var D;const ke=["action","children","className","closeText","color","icon","iconMapping","onClose","role","severity","variant"],Ae=e=>{const{variant:o,color:a,severity:i,classes:r}=e,l={root:["root",`${o}${_(a||i)}`,`${o}`],icon:["icon"],message:["message"],action:["action"]};return ie(l,fe,r)},Ie=S(re,{name:"MuiAlert",slot:"Root",overridesResolver:(e,o)=>{const{ownerState:a}=e;return[o.root,o[a.variant],o[`${a.variant}${_(a.color||a.severity)}`]]}})(({theme:e,ownerState:o})=>{const a=e.palette.mode==="light"?V:H,i=e.palette.mode==="light"?H:V,r=o.color||o.severity;return M({},e.typography.body2,{backgroundColor:"transparent",display:"flex",padding:"6px 16px"},r&&o.variant==="standard"&&{color:e.vars?e.vars.palette.Alert[`${r}Color`]:a(e.palette[r].light,.6),backgroundColor:e.vars?e.vars.palette.Alert[`${r}StandardBg`]:i(e.palette[r].light,.9),[`& .${W.icon}`]:e.vars?{color:e.vars.palette.Alert[`${r}IconColor`]}:{color:e.palette.mode==="dark"?e.palette[r].main:e.palette[r].light}},r&&o.variant==="outlined"&&{color:e.vars?e.vars.palette.Alert[`${r}Color`]:a(e.palette[r].light,.6),border:`1px solid ${(e.vars||e).palette[r].light}`,[`& .${W.icon}`]:e.vars?{color:e.vars.palette.Alert[`${r}IconColor`]}:{color:e.palette.mode==="dark"?e.palette[r].main:e.palette[r].light}},r&&o.variant==="filled"&&M({fontWeight:e.typography.fontWeightMedium},e.vars?{color:e.vars.palette.Alert[`${r}FilledColor`],backgroundColor:e.vars.palette.Alert[`${r}FilledBg`]}:{backgroundColor:e.palette.mode==="dark"?e.palette[r].dark:e.palette[r].main,color:e.palette.getContrastText(e.palette.mode==="dark"?e.palette[r].dark:e.palette[r].main)}))}),Le=S("div",{name:"MuiAlert",slot:"Icon",overridesResolver:(e,o)=>o.icon})({marginRight:12,padding:"7px 0",display:"flex",fontSize:22,opacity:.9}),Me=S("div",{name:"MuiAlert",slot:"Message",overridesResolver:(e,o)=>o.message})({padding:"8px 0",minWidth:0,overflow:"auto"}),j=S("div",{name:"MuiAlert",slot:"Action",overridesResolver:(e,o)=>o.action})({display:"flex",alignItems:"flex-start",padding:"4px 0 0 16px",marginLeft:"auto",marginRight:-8}),U={success:t(xe,{fontSize:"inherit"}),warning:t(ye,{fontSize:"inherit"}),error:t(Ce,{fontSize:"inherit"}),info:t(Se,{fontSize:"inherit"})},Oe=O.exports.forwardRef(function(o,a){const i=oe({props:o,name:"MuiAlert"}),{action:r,children:l,className:p,closeText:m="Close",color:f,icon:v,iconMapping:g=U,onClose:x,role:b="alert",severity:s="success",variant:n="standard"}=i,d=ae(i,ke),u=M({},i,{color:f,severity:s,variant:n}),h=Ae(u);return c(Ie,M({role:b,elevation:0,ownerState:u,className:ne(h.root,p),ref:a},d,{children:[v!==!1?t(Le,{ownerState:u,className:h.icon,children:v||g[s]||U[s]}):null,t(Me,{ownerState:u,className:h.message,children:l}),r!=null?t(j,{ownerState:u,className:h.action,children:r}):null,r==null&&x?t(j,{ownerState:u,className:h.action,children:t(G,{size:"small","aria-label":m,title:m,color:"inherit",onClick:x,children:D||(D=t(be,{fontSize:"small"}))})}):null]}))}),P=Oe;function X(){const e=O.exports.useRef(!0);return O.exports.useEffect(()=>()=>{e.current=!1},[]),e}function Pe({setEmailOrPhone:e,setLoginOrVerifyCode:o}){const{login:a}=R(),i=X(),r=z().shape({email:C().email("Email must be a valid email address").required("Email is required")}),l={email:""},p=F({resolver:q(r),defaultValues:l}),{reset:m,setError:f,handleSubmit:v,formState:{errors:g,isSubmitting:x}}=p;return c(Z,{methods:p,onSubmit:v(async s=>{try{await a(s.email),e(s.email),o(!0),m(),K("Kode OTP telah dikirim, silahkan cek email yang login",{variant:"success",autoHideDuration:2e3})}catch(n){m(),i.current&&f("afterSubmit",{...n,message:n.data.message})}}),children:[c(y,{spacing:3,children:[t(P,{severity:"info",children:"Masukkan akun yang telah terdaftar"}),!!g.afterSubmit&&t(P,{severity:"error",children:g.afterSubmit.message}),t(J,{name:"email",label:"Email address"})]}),t(Q,{fullWidth:!0,size:"large",type:"submit",variant:"contained",loading:x,sx:{marginTop:2},children:"Login"})]})}function we({setEmailOrPhone:e,setLoginOrVerifyCode:o}){const{login:a}=R(),i=X(),r=z().shape({phone:C().required("Phone is required")}),l={phone:""},p=F({resolver:q(r),defaultValues:l}),{reset:m,setError:f,handleSubmit:v,formState:{errors:g,isSubmitting:x}}=p;return c(Z,{methods:p,onSubmit:v(async s=>{try{await a(0+s.phone),e(0+s.phone),o(!0),m(),K("Kode OTP telah dikirim, silahkan cek pada nomor yang telah login",{variant:"success",autoHideDuration:2e3})}catch(n){m(),i.current&&f("afterSubmit",{...n,message:n.data.message})}}),children:[c(y,{spacing:3,children:[t(P,{severity:"info",children:"Masukkan akun yang telah terdaftar"}),!!g.afterSubmit&&t(P,{severity:"error",children:g.afterSubmit.message}),t(J,{name:"phone",label:"Phone Number",type:"number",InputProps:{startAdornment:t(se,{position:"start",children:"+62"})}})]}),t(Q,{fullWidth:!0,size:"large",type:"submit",variant:"contained",loading:x,sx:{marginTop:2},children:"Login"})]})}function $e({emailOrPhone:e}){const o=le(),{validateOtp:a}=R(),{enqueueSnackbar:i}=ce(),r=z().shape({code1:C().required("Code is required"),code2:C().required("Code is required"),code3:C().required("Code is required"),code4:C().required("Code is required")}),l={code1:"",code2:"",code3:"",code4:""},{watch:p,control:m,setValue:f,handleSubmit:v}=F({mode:"onBlur",resolver:q(r),defaultValues:l}),g=p();O.exports.useEffect(()=>{const s=n=>{var u;let d=((u=n==null?void 0:n.clipboardData)==null?void 0:u.getData("Text"))||"";d=d.split(""),[].forEach.call(document.querySelectorAll("#field-code"),(h,k)=>{h.value=d[k];const L=`code${k+1}`;f(L,d[k])})};document.addEventListener("paste",s)},[f]);const x=async s=>{const n=await a(e,Object.values(s).join(""));if(n.data.length===0)return i(n.message,{variant:"error",autoHideDuration:4e3,preventDuplicate:!0});i("Verify success!",{variant:"success",autoHideDuration:1e3}),await new Promise(d=>setTimeout(d,2e3)),o("/dashboard"),i("Login Berhasil!",{variant:"success"}),localStorage.removeItem("loginOrVerifyCode"),localStorage.removeItem("emailOrPhone"),localStorage.removeItem("emailOrPhoneForm")},b=(s,n)=>{const{maxLength:d,value:u,name:h}=s.target,k=h.replace("code",""),L=Number(k);if(u.length>=d&&L<6){const E=document.querySelector(`input[name=code${L+1}]`);E!==null&&E.focus()}n(s)};return t("form",{onChange:v(x),children:t(y,{direction:"row",spacing:2,justifyContent:"space-evenly",children:Object.keys(g).map((s,n)=>t(ge,{name:`code${n+1}`,control:m,render:({field:d})=>t(de,{...d,id:"field-code",autoFocus:n===0,placeholder:"",onChange:u=>b(u,d.onChange),inputProps:{maxLength:1,sx:{p:0,textAlign:"center",width:{xs:36,sm:56},height:{xs:36,sm:56}}}})},s))})})}const Te=S("div")(({theme:e})=>({[e.breakpoints.up("md")]:{display:"flex"},minHeight:"100vh",flexDirection:"column",justifyContent:"center",alignItems:"center"})),Re=S(he)(({theme:e})=>({[e.breakpoints.up("md")]:{maxHeight:"600px",maxWidth:"1000px"}}));function He(){const[e,o]=w("emailOrPhone",""),[a,i]=w("emailOrPhoneForm",!1),[r,l]=w("loginOrVerifyCode",!1);return t(Y,{title:"Login",children:t(Te,{children:t(Re,{children:c(T,{container:!0,children:[t(T,{item:!0,xs:6,children:c("video",{autoPlay:!0,loop:!0,muted:!0,playsInline:!0,style:{width:"100%"},children:[t("source",{src:"/images/login-image.webm",type:"video/webm"}),t("source",{src:"/images/login-image.mp4",type:"video/mp4"})]})}),c(T,{item:!0,xs:6,sx:{padding:3},children:[r&&e?c(B,{children:[c(y,{direction:"column",sx:{mb:5},children:[c(y,{direction:"row",alignItems:"center",children:[t(G,{onClick:()=>{localStorage.removeItem("emailOrPhone"),l(!1)},children:t(ue,{icon:"heroicons-outline:arrow-narrow-left",sx:{marginRight:"10px"}})}),t(A,{variant:"h4",gutterBottom:!0,children:"Verifikasi OTP"})]}),t(N,{sx:{flexGrow:1},children:t(A,{variant:"body1",sx:{color:"text.secondary",textAlign:"left"},children:"Masukkan kode OTP anda disini"})})]}),t($e,{emailOrPhone:e}),c(y,{sx:{marginTop:5},spacing:1,alignItems:"center",children:[t(A,{children:"Tidak mendapatkan kode?"}),t($,{sx:{cursor:"pointer"},children:"Kirim Ulang Kode OTP"})]})]}):c(B,{children:[c(y,{direction:"row",alignItems:"center",sx:{mb:5},children:[t(me,{sx:{width:90,height:90}}),c(N,{sx:{flexGrow:1},children:[t(A,{variant:"h4",gutterBottom:!0,children:"Sign in to LinkSehat"}),t(A,{variant:"body1",sx:{color:"text.secondary"},children:"Enter your details below."})]})]}),a?t(we,{setEmailOrPhone:o,setLoginOrVerifyCode:l}):t(Pe,{setEmailOrPhone:o,setLoginOrVerifyCode:l})]}),t(pe,{sx:{marginTop:5},children:"Atau"}),t(y,{sx:{marginTop:5},children:a?t($,{align:"center",underline:"hover",onClick:()=>{o(""),l(!1),i(!1)},sx:{cursor:"pointer"},children:"Masuk menggunakan email"}):t($,{align:"center",underline:"hover",onClick:()=>{o(""),l(!1),i(!0)},sx:{cursor:"pointer"},children:"Masuk menggunakan nomor handphone"})})]})]})})})})}export{He as default};
|