https://web-static.linetv.tw/release-fargate/public/dist/ChildLock-a5e296b8-prod.js

1"use strict";(self.__LOADABLE_LOADED_CHUNKS__=self.__LOADABLE_LOADED_CHUNKS__||[]).push([[4526],{41313:(e,t,n)=>{n.d(t,{A:()=>r});var s=n(96540),a=n(40961),l=n(77286);const r=({isOpen:e})=>e?(0,a.createPortal)(s.createElement("div",{className:"fixed inset-0 z-10 flex items-center justify-center bg-linetv-black-700"},s.createElement(l.A,null)),document.body):null},42517:(e,t,n)=>{n.r(t),n.d(t,{default:()=>y});var s=n(96540),a=n(41313),l=n(89263),r=n(20312),i=n.n(r),c=n(46942),o=n.n(c),u=n(61225),d=n(86444),m=n(45759);const p="PIN 碼錯誤，請重新輸入",f=({isOpen:e,setIsOpen:t,setIsLoading:n,editType:a=l.z.VALIDATE})=>{const{enteredPinCountRef:r,pinValues:i,error:c,focusedIndex:f,inputRefs:x,handleKeyDown:v,handleFocus:y,handleBlur:E,handleClick:b,handleInputChange:h,handleSubmit:I}=(({editType:e=l.z.VALIDATE,isOpen:t,setIsOpen:n,setIsLoading:a})=>{const r=(0,u.wA)(),i=(0,u.d4)(e=>Boolean(e.deviceType.isMobile)),[c,o]=(0,s.useState)(["","","",""]),[f,x]=(0,s.useState)(""),[v,y]=(0,s.useState)(0),E=(0,s.useRef)(0),b=(0,s.useRef)([]);(0,s.useEffect)(()=>{t&&h()},[t]);const h=()=>{o(["","","",""]),x(""),y(0),a(!1),E.current=0,b.current[0]&&b.current[0].focus()},I=async t=>{/^\d{4}$/.test(t)?(a(!0),e===l.z.VALIDATE?await(async e=>{try{await(0,m.Hb)({pin:e}),n(!1)}catch(e){h(),x(p)}finally{a(!1)}})(t):e===l.z.SETUP&&await(async e=>{try{await(0,m.Tx)({pin:e}),r((0,d.vD)({title:{text:"設定完成",className:i?"text-center":""},description:{text:"PIN 碼已設定成功！",className:i?"text-center":""},actionButton:{primaryButton:{text:"確定",onClick:()=>r((0,d.Oo)())}}}))}catch(e){r((0,d.vD)({title:{text:"發生了一些問題",className:i?"text-center":""},description:{text:"請稍後再試。",className:i?"text-center":""},actionButton:{secondaryButton:{text:"我知道了",onClick:()=>r((0,d.Oo)())}}}))}finally{n(!1),a(!1),r((0,d.to)())}})(t)):x(p)};return{enteredPinCountRef:E,pinValues:c,error:f,focusedIndex:v,inputRefs:b,handleKeyDown:(e,t)=>{switch(null==t?void 0:t.key){case"Backspace":var n;c[e]&&o(t=>{const n=[...t];return n[e]="",E.current--,n}),e>0&&(y(e-1),null===(n=b.current[e-1])||void 0===n||n.focus());break;case"ArrowLeft":var s;e>0&&(y(e-1),null===(s=b.current[e-1])||void 0===s||s.focus());break;case"ArrowRight":var a;e<3&&(y(e+1),null===(a=b.current[e+1])||void 0===a||a.focus())}},handleFocus:e=>{y(e)},handleBlur:()=>{y(null)},handleClick:e=>{var t;y(e),null===(t=b.current[e])||void 0===t||t.focus()},handleInputChange:(t,n)=>{if(!n)return;if(!/^\d$/.test(n))return void x("PIN 碼僅能輸入數字");f&&x("");const s=[...c];var a;if(s[t]=n,o(s),E.current++,n&&t<3&&(y(t+1),null===(a=b.current[t+1])||void 0===a||a.focus()),e!==l.z.SETUP&&4===E.current){const e=s.join("");I(e)}},handleSubmit:I}})({editType:a,setIsLoading:n,isOpen:e,setIsOpen:t});return s.createElement(s.Fragment,null,a===l.z.SETUP&&s.createElement("button",{type:"button",className:"material-icons icon_web_close absolute right-0 top-0 m-2.5 text-linetv-grey-100",onClick:()=>t(!1)}),s.createElement("div",{className:o()("flex gap-4",{"mb-3":c,"mb-8":!c})},i.map((e,t)=>s.createElement("div",{key:t,className:o()("relative h-12 w-12 cursor-pointer rounded-px-md bg-linetv-grey-600 outline outline-2",{"outline-linetv-primary":f===t,"outline-none":f!==t}),onClick:()=>b(t)},s.createElement("input",{ref:e=>x.current[t]=e,type:"text",inputMode:"numeric",maxLength:1,value:e,onChange:e=>h(t,e.target.value),onKeyDown:e=>v(t,e),onFocus:()=>y(t),onBlur:()=>E(),className:"absolute inset-0 h-full w-full cursor-pointer bg-transparent text-center text-24 font-600 text-transparent focus:outline-none"}),s.createElement("div",{className:"pointer-events-none absolute inset-0 flex items-center justify-center"},e&&s.createElement("div",{className:"h-3 w-3 rounded-full bg-linetv-white"}))))),c&&s.createElement("p",{className:"mb-4 text-center text-14 font-400 text-linetv-negative"},c),a===l.z.VALIDATE?s.createElement("a",{className:"text-14 font-400 text-linetv-high-emphasis hover:text-linetv-primary",href:"/user/child-lock"},s.createElement("span",null,"忘記 PIN 碼？")):s.createElement("button",{className:"btn--secondary-sm disabled:cursor-not-allowed",onClick:()=>I(i.join("")),disabled:r.current<4},"確認"))},x=({isOpen:e,title:t,subtitle:n,setIsOpen:a,setIsLoading:l,editType:r})=>s.createElement(i(),{isOpen:e,className:o()("absolute left-1/2 top-1/2 w-full max-w-96 -translate-x-1/2 -translate-y-1/2 transform rounded-px-lg bg-linetv-grey-800 py-6 outline-none"),overlayClassName:"fixed inset-0 flex items-center justify-center bg-linetv-black-600"},s.createElement("div",{className:"flex flex-col items-center"},s.createElement("h1",{className:"mb-3 text-20 font-700 text-linetv-white-transparent-90"},t),s.createElement("p",{className:"mb-5 text-14 font-500 text-linetv-white-transparent-60"},n),s.createElement(f,{editType:r,isOpen:e,setIsOpen:a,setIsLoading:l}

1))),v=({title:e,subtitle:t,isOpen:n,setIsOpen:a,setIsLoading:l,editType:r})=>s.createElement("div",{className:"z-10 flex flex-col items-center"},s.createElement("h1",{className:"mb-3 text-16 font-700 text-linetv-white-transparent-90 md:text-20"},e),s.createElement("p",{className:"mb-3 text-14 font-500 text-linetv-white-transparent-60"},t),s.createElement(f,{editType:r,isOpen:n,setIsOpen:a,setIsLoading:l})),y=({isOpen:e,title:t="",subtitle:n="",setIsOpen:r,editType:i=l.z.VALIDATE,pageType:c=l._.DRAMA})=>{const[o,u]=(0,s.useState)(!1);return s.createElement(s.Fragment,null,c===l._.USER_CHILD_LOCK_SETTING?s.createElement(x,{title:t,subtitle:n,isOpen:e,setIsOpen:r,setIsLoading:u,editType:i}):s.createElement(v,{title:t,subtitle:n,isOpen:e,setIsOpen:r,setIsLoading:u,editType:i}),s.createElement(a.A,{isOpen:o}))}}}]);