https://safetyeat.com/assets/LoginDialog.22cad41d.js

1import{ah as e,d as o,ab as a,N as s,r as t,o as n,e as r,f as l,g as i,w as d,F as c,i as u,j as p,V as m,t as h,v as g,G as b,L as f,am as y,c as x,X as w}from"./vendor.ddbd020e.js";import{c as v,F as C,a as k,E as V}from"./vee-validate.esm.ac6fd158.js";import{_ as S,u as L}from"./Spinner.1ec0cc94.js";import{e as q,f as M,A as T,L as F}from"./index.441c06ad.js";import{T as U,e as O,f as P,g as E}from"./headlessui.esm.12a303ec.js";v({validateOnBlur:!1});const B={components:{Form:C,Field:k,ErrorMessage:V,Spinner:S},props:{showCheckoutButton:{type:Boolean,default:!1},showSubscribeText:{type:Boolean,default:!1}},emits:["login:success","login:dismiss"],setup(a,s){const t=q(),n=M(),{toCheckoutPage:r}=T(),{phone:l}=e(n),i=o("Login"),d=o(""),c=o(""),u=o(!1);return{page:i,phone:l,password:d,errorMessage:c,isLoading:u,toCheckoutPage:r,onSubmit:async()=>{u.value=!0;try{if(!(await t.login({phone:l.value,password:d.value})))throw new Error("登入失敗");s.emit("login:success")}catch(e){c.value=e.message}finally{u.value=!1}}}},data:()=>({schema:a({phone:s().matches(/^[0-9]{10}$/,"手機格式不正確").required("請輸入手機"),password:s().min(8,"至少 8 個字").max(32,"最多 32 個字").required("請輸入密碼")})}),methods:{async goToCheckoutPage(){this.$emit("login:dismiss"),await this.toCheckoutPage()}}},_=u("h2",{class:"text-center font-semibold text-3xl lg:text-4xl text-gray-800"}," 會員登入 ",-1),j={key:0,class:"text-center text-white bg-red-600 font-bold p-2 mt-2"},$=[b(" 您的購物車包含週期性商品"),u("br",null,null,-1),b("請註冊/登入會員以完成結帳。 ")],G={class:"space-y-3"},D=u("label",{for:"phone",class:"block text-xs font-semibold text-gray-600 uppercase"},"手機號碼",-1),R=u("label",{for:"password",class:"block text-xs font-semibold text-gray-600 uppercase"},"密碼",-1),I={class:"mt-10"},A={key:0,class:"text-red-500"},H=["disabled"],N={class:"flex items-center justify-center"},X=b(" 登入 ");B.render=function(e,o,a,s,b,f){const y=t("Field"),x=t("ErrorMessage"),w=t("Spinner"),v=t("Form");return n(),r(c,null,[_,a.showSubscribeText?(n(),r("h3",j,$)):l("",!0),i(v,{class:"mt-10","validation-schema":b.schema,onSubmit:s.onSubmit},{default:d((()=>[u("div",G,[u("div",null,[D,p(u("input",{id:"phone","onUpdate:modelValue":o[0]||(o[0]=e=>s.phone=e),type:"tel",name:"phone",inputmode:"tel",maxlength:"10",placeholder:"例如：0987654321",tabindex:"-1",class:"block w-full p-2 mt-2 text-gray-800 appearance-none border-b-2 border-gray-100 focus:text-gray-500 focus:outline-none focus:border-gray-200 rounded",required:""},null,512),[[m,s.phone,void 0,{trim:!0}]]),i(y,{modelValue:s.phone,"onUpdate:modelValue":o[1]||(o[1]=e=>s.phone=e),name:"phone",class:"hidden",required:""},null,8,["modelValue"]),i(x,{name:"phone",class:"text-red-500"})]),u("div",null,[R,i(y,{id:"password",modelValue:s.password,"onUpdate:modelValue":o[2]||(o[2]=e=>s.password=e),readonly:s.isLoading,type:"password",name:"password",tabindex:"-1",placeholder:"請輸入密碼",class:"block w-full p-2 mt-2 text-gray-800 appearance-none border-b-2 border-gray-100 focus:text-gray-500 focus:outline-none focus:border-gray-200 rounded",required:""},null,8,["modelValue","readonly"]),i(x,{name:"password",class:"text-red-500"})])]),u("div",I,[s.errorMessage?(n(),r("div",A,h(s.errorMessage),1)):l("",!0),u("button",{class:"w-full py-3 bg-gray-800 rounded-sm font-medium text-white uppercase focus:outline-none hover:bg-gray-700 hover:shadow-none",disabled:s.isLoading},[u("span",N,[p(i(w,{class:"mr-2"},null,512),[[g,s.isLoading]]),X])],8,H),a.showCheckoutButton?(n(),r("button",{key:1,class:"w-full py-3 mt-2 bg-red-600 rounded-sm font-medium text-white uppercase focus:outline-none hover:bg-gray-700 hover:shadow-none initiate-checkout-button",onClick:o[3]||(o[3]=(...e)=>f.goToCheckoutPage&&f.goToCheckoutPage(...e))}," 直接結帳 ")):l("",!0)])])),_:1},8,["validation-schema","onSubmit"])],64)},v({validateOnBlur:!1});const z={components:{Form:C,Field:k,ErrorMessage:V,Spinner:S},emits:["login:success"],setup(a,s){const{seconds:t,setSeconds:n}=L(),r=q(),l=M(),{phone:i}=e(l),d=o("Login"),c=o(""),u=o(""),p=o(""),m=o(""),h=o(!1);return{isLoading:h,errorMessage:m,page:d,phone:i,password:c,passwordConfirmation:u,validationCode:p,seconds:t,setSeconds:n,login:async()=>{h.value=!0;try{if(!(await r.login({phone:i.value,password:c.value})))throw new Error("登入失敗");s.emit("login:success")}catch(e){m.value=e.message}finally{h.value=!1}}}},data:()=>({schema:f().shape({phone:s().matches(/^[0-9]{10}$/,"手機格式不正確").required("請輸入手機"),password:s().min(8,"至少 8 個字").max(32,"最多 32 個字").required("請輸入密碼"),passwordConfirmation:s().required("請再次輸入密碼").oneOf([y("password")],"密碼要相同喔～"),validationCode:s().matches(/^[0-9]{4}$/,"驗證碼需為 4 位數字").required("請輸入驗證碼")}

1)}),methods:{async onSubmit(){this.isLoading=!0;try{if(!(await F.signUp(this.phone,this.password,this.validationCode)))throw new Error("註冊失敗～");return this.login()}catch(e){this.errorMessage=e.message}finally{this.isLoading=!1}},async sendValidationCode(e){const{valid:o=!1}=await e();if(o)try{this.setSeconds(30),await F.validatePhone(this.phone,!1)}catch(a){this.seconds=0,this.errorMessage=a.message}finally{this.isLoading=!1}}}},J=u("h2",{class:"text-center font-semibold text-3xl lg:text-4xl text-gray-800"}," 註冊 ",-1),K={class:"space-y-3"},Q=u("label",{for:"phone",class:"block text-xs font-semibold text-gray-600 uppercase"},"手機號碼",-1),W=u("label",{for:"password",class:"block text-xs font-semibold text-gray-600 uppercase"},"密碼",-1),Y=u("label",{for:"validationCode",class:"block text-xs font-semibold text-gray-600 uppercase"},"驗證碼",-1),Z={class:"flex"},ee=["disabled","onClick"],oe={key:0},ae={key:1},se={class:"mt-10"},te={key:0,class:"text-red-500"},ne=["disabled"],re={class:"flex items-center justify-center"},le=b("註冊 ");z.render=function(e,o,a,s,b,f){const y=t("Field"),x=t("ErrorMessage"),w=t("Spinner"),v=t("Form");return n(),r(c,null,[J,i(v,{class:"mt-10","validation-schema":b.schema,onSubmit:f.onSubmit},{default:d((()=>[u("div",K,[u("div",null,[Q,p(u("input",{id:"phone","onUpdate:modelValue":o[0]||(o[0]=e=>s.phone=e),type:"tel",name:"phone",inputmode:"tel",maxlength:"10",placeholder:"例如：0987654321",class:"block w-full p-2 mt-2 text-gray-800 appearance-none border-b-2 border-gray-100 focus:text-gray-500 focus:outline-none focus:border-gray-200 rounded",required:""},null,512),[[m,s.phone,void 0,{trim:!0}]]),i(y,{modelValue:s.phone,"onUpdate:modelValue":o[1]||(o[1]=e=>s.phone=e),name:"phone",class:"hidden",required:""},null,8,["modelValue"]),i(x,{name:"phone",class:"text-red-500"})]),u("div",null,[W,i(y,{id:"password",modelValue:s.password,"onUpdate:modelValue":o[2]||(o[2]=e=>s.password=e),type:"password",name:"password",placeholder:"請輸入密碼",maxlength:"32",class:"block w-full p-2 mt-2 text-gray-800 appearance-none border-b-2 border-gray-100 focus:text-gray-500 focus:outline-none focus:border-gray-200 rounded",required:""},null,8,["modelValue"]),i(x,{name:"password",class:"text-red-500"}),i(y,{modelValue:s.passwordConfirmation,"onUpdate:modelValue":o[3]||(o[3]=e=>s.passwordConfirmation=e),type:"password",name:"passwordConfirmation",placeholder:"再次輸入密碼",class:"block w-full p-2 mt-2 text-gray-800 appearance-none border-b-2 border-gray-100 focus:text-gray-500 focus:outline-none focus:border-gray-200 rounded",maxlength:"32",required:""},null,8,["modelValue"]),i(x,{name:"passwordConfirmation",class:"text-red-500"})]),u("div",null,[Y,u("div",Z,[i(y,{id:"validationCode",modelValue:s.validationCode,"onUpdate:modelValue":o[4]||(o[4]=e=>s.validationCode=e),type:"text",name:"validationCode",placeholder:"請輸入驗證碼",inputmode:"numeric",class:"block w-full p-2 text-gray-800 appearance-none border-b-2 border-gray-100 focus:text-gray-500 focus:outline-none focus:border-gray-200 rounded-l",required:"",maxlength:"4"},null,8,["modelValue"]),i(y,{modelValue:s.phone,"onUpdate:modelValue":o[5]||(o[5]=e=>s.phone=e),name:"phone"},{default:d((({validate:e})=>[u("button",{class:"w-full bg-gray-800 rounded-r font-medium text-white uppercase focus:outline-none hover:bg-gray-700 hover:shadow-none",type:"button",disabled:s.seconds>0,onClick:o=>f.sendValidationCode(e)},[s.seconds>0?(n(),r("span",oe,"倒數 "+h(s.seconds)+" 秒重新寄送",1)):(n(),r("span",ae,"寄送驗證碼"))],8,ee)])),_:1},8,["modelValue"])]),i(x,{name:"validationCode",class:"text-red-500"})])]),u("div",se,[s.errorMessage?(n(),r("div",te,h(s.errorMessage),1)):l("",!0),u("button",{class:"w-full py-3 bg-gray-800 rounded-sm font-medium text-white uppercase focus:outline-none hover:bg-gray-700 hover:shadow-none",disabled:s.isLoading},[u("span",re,[p(i(w,{class:"mr-2"},null,512),[[g,s.isLoading]]),le])],8,ne)])])),_:1},8,["validation-schema","onSubmit"])],64)},v({validateOnBlur:!1});const ie={components:{Form:C,Field:k,ErrorMessage:V,Spinner:S},emits:["login:success"],setup(a,s){const{seconds:t,setSeconds:n}=L(),r=q(),l=M(),{phone:i}=e(l),d=o("Login"),c=o(""),u=o(""),p=o(""),m=o(!1);return{isLoading:m,errorMessage:p,page:d,phone:i,password:c,validationCode:u,seconds:t,setSeconds:n,login:async()=>{m.value=!0;try{if(!(await r.login({phone:i.value,password:c.value})))throw new Error("登入失敗");s.emit("login:success")}catch(e){p.value=e.message}finally{m.value=!1}}}},data:()=>({schema:a({phone:s().matches(/^[0-9]{10}$/,"手機格式不正確").required("請輸入手機"),password:s().min(8,"至少 8 個字").max(32,"最多 32 個字").required("請輸入密碼"),validationCode:s().matches(/^[0-9]{4}$/,"驗證碼需為 4 位數字").required("請輸入驗證碼")}

1),hasSendValidationCode:!1}),methods:{async onSubmit(){this.isLoading=!0;try{if(!(await F.forgetPassword(this.phone,this.password,this.validationCode)))throw new Error("驗證失敗");return this.login()}catch(e){this.errorMessage=e.message}finally{this.isLoading=!1}},async sendValidationCode(e){const{valid:o=!1}=await e();if(o)try{this.setSeconds(30),this.hasSendValidationCode=!0,await F.validatePhone(this.phone,!1)}catch(a){this.seconds=0,this.errorMessage=a.message}finally{this.isLoading=!1}}}},de=u("h2",{class:"text-center font-semibold text-3xl lg:text-4xl text-gray-800"}," 忘記密碼 ",-1),ce={class:"space-y-3"},ue=u("label",{for:"phone",class:"block text-xs font-semibold text-gray-600 uppercase"},"手機號碼",-1),pe=u("label",{for:"validationCode",class:"block text-xs font-semibold text-gray-600 uppercase"},"驗證碼",-1),me={class:"flex"},he=["disabled","onClick"],ge={key:0},be={key:1},fe=u("label",{for:"password",class:"block text-xs font-semibold text-gray-600 uppercase"},"密碼",-1),ye={class:"mt-10"},xe={key:0,class:"text-red-500"},we=["disabled"],ve={class:"flex items-center justify-center"},Ce=b("重置密碼 ");ie.render=function(e,o,a,s,b,f){const y=t("Field"),x=t("ErrorMessage"),w=t("Spinner"),v=t("Form");return n(),r(c,null,[de,i(v,{class:"mt-10","validation-schema":b.schema,onSubmit:f.onSubmit},{default:d((()=>[u("div",ce,[u("div",null,[ue,p(u("input",{id:"phone","onUpdate:modelValue":o[0]||(o[0]=e=>s.phone=e),type:"tel",name:"phone",inputmode:"tel",maxlength:"10",placeholder:"例如：0987654321",class:"block w-full p-2 mt-2 text-gray-800 appearance-none border-b-2 border-gray-100 focus:text-gray-500 focus:outline-none focus:border-gray-200 rounded",required:""},null,512),[[m,s.phone,void 0,{trim:!0}]]),i(y,{modelValue:s.phone,"onUpdate:modelValue":o[1]||(o[1]=e=>s.phone=e),name:"phone",class:"hidden",required:""},null,8,["modelValue"]),i(x,{name:"phone",class:"text-red-500"})]),u("div",null,[pe,u("div",me,[i(y,{id:"validationCode",modelValue:s.validationCode,"onUpdate:modelValue":o[2]||(o[2]=e=>s.validationCode=e),type:"text",name:"validationCode",placeholder:"請輸入驗證碼",class:"block w-full p-2 text-gray-800 appearance-none border-b-2 border-gray-100 focus:text-gray-500 focus:outline-none focus:border-gray-200 rounded-l",inputmode:"numeric",maxlength:"4",required:""},null,8,["modelValue"]),i(y,{modelValue:s.phone,"onUpdate:modelValue":o[3]||(o[3]=e=>s.phone=e),name:"phone"},{default:d((({validate:e})=>[u("button",{class:"w-full bg-gray-800 rounded-r font-medium text-white uppercase focus:outline-none hover:bg-gray-700 hover:shadow-none",type:"button",disabled:s.seconds>0,onClick:o=>f.sendValidationCode(e)},[s.seconds>0?(n(),r("span",ge,"倒數 "+h(s.seconds)+" 秒重新寄送",1)):(n(),r("span",be,"寄送驗證碼"))],8,he)])),_:1},8,["modelValue"])]),i(x,{name:"validationCode",class:"text-red-500"})]),p(u("div",null,[fe,i(y,{id:"password",modelValue:s.password,"onUpdate:modelValue":o[4]||(o[4]=e=>s.password=e),type:"password",name:"password",placeholder:"請輸入密碼",class:"block w-full p-2 mt-2 text-gray-800 appearance-none border-b-2 border-gray-100 focus:text-gray-500 focus:outline-none focus:border-gray-200 rounded",required:""},null,8,["modelValue"]),i(x,{name:"password",class:"text-red-500"})],512),[[g,b.hasSendValidationCode]])]),u("div",ye,[s.errorMessage?(n(),r("div",xe,h(s.errorMessage),1)):l("",!0),u("button",{class:"w-full py-3 bg-gray-800 rounded-sm font-medium text-white uppercase focus:outline-none hover:bg-gray-700 hover:shadow-none",disabled:s.isLoading},[u("span",ve,[p(i(w,{class:"mr-2"},null,512),[[g,s.isLoading]]),Ce])],8,we)])])),_:1},8,["validation-schema","onSubmit"])],64)};const ke={components:{TransitionRoot:U,TransitionChild:O,Dialog:P,DialogOverlay:E,Login:B,Register:z,ForgetPassword:ie},setup(){const e=o(!1);return{isOpen:e,setIsOpen(o){e.value=o}}},data:()=>({currentComponent:"login",redirectTo:"/checkout",showGoBack:!0,showSubscribeText:!1}),mounted(){this.emitter.on("show:dialog.login",(({redirectTo:e="/checkout",currentComponent:o="login",showGoBack:a=!0,showHasSubscribeProduct:s=!1}={})=>{this.isOpen=!0,this.redirectTo=e,this.currentComponent=o,this.showGoBack=a,this.showSubscribeText=s}))},methods:{toCheckoutPage(){this.redirectTo&&this.$router.push(this.redirectTo),this.isOpen=!1}}},Ve={class:"fixed inset-0 overflow-y-auto"},Se={class:"min-h-screen px-4 text-center"},Le=u("span",{class:"inline-block h-screen align-middle","aria-hidden":"true"}," ​ ",-1),qe={class:"inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl"},Me={key:0,class:"flex sm:flex-wrap mt-8 sm:mb-4 text-sm text-center"},Te=u("p",{class:"flex-1 text-gray-500 text-md mx-4 my-1 sm:my-auto"}," or ",-1),Fe={key:1,class:"flex sm:flex-wrap mt-8 sm:mb-4 text-sm text-center"};ke.render=function(e,o,a,s,c,p){const m=t("DialogOverlay"),h=t("TransitionChild"),g=t("Dialog"),b=t("TransitionRoot");return n(),x(b,{appear:"",show:s.isOpen,as:"template"},{default:d((()=>[i(g,{as:"div",static:"",open:s.isOpen,onClose:s.setIsOpen},{default:d((()=>[u("div",Ve,[u("div",Se,[i(h,{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0","enter-to":"opacity-50",leave:"duration-200 ease-in","leave-from":"opacity-50","leave-to":"opacity-0"},{default:d((()=>[i(m,{class:"fixed inset-0 bg-gray-300 opacity-60"})])),_:1}),Le,i(h,{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0 scale-95","enter-to":"opacity-100 scale-100",leave:"duration-200 ease-in","leave-from":"opacity-100 scale-100","leave-to":"opacity-0 scale-95"},{default:d((()=>[u("div",qe,[(n(),x(w(c.currentComponent),{"show-checkout-button":!!c.redirectTo,"show-subscribe-text":c.showSubscribeText,"onLogin:success":p.toCheckoutPage,"onLogin:dismiss":o[0]||(o[0]=e=>s.isOpen=!1)},null,8,["show-checkout-button","show-subscribe-text","onLogin:success"])),"login"===c.currentComponent?(n(),r("div",Me,[u("button",{class:"flex-2 underline",onClick:o[1]||(o[1]=e=>c.currentComponent="forget-password")}," 忘記密碼? "),Te,u("button",{class:"flex-2 underline",onClick:o[2]||(o[2]=e=>c.currentComponent="register")}," 註冊帳號 ")])):l("",!0),"forget-password"===c.currentComponent||"register"===c.currentComponent?(n(),r("div",Fe,[c.showGoBack?(n(),r("button",{key:0,class:"underline w-full",onClick:o[3]||(o[3]=e=>c.currentComponent="login")}," 回到登入頁 ")):l("",!0)])):l("",!0)])])),_:1})])])])),_:1},8,["open","onClose"])])),_:1},8,["show"])};export{ke as _};