https://web.croccha.com/_next/static/chunks/pages/users/[userId]/settings/mail-b5f379f26de7ced3.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8011],{70129:function(n,e,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/users/[userId]/settings/mail",function(){return t(25920)}])},88937:function(n,e,t){"use strict";var i=t(82729),r=t(85893);t(67294);var o=t(57833),a=t(41007);function s(){let n=(0,i._)(["\n  ",";\n  ",";\n"]);return s=function(){return n},n}let l=n=>{let{onClick:e,disabled:t=!1,children:i,type:o="button",color:a="primary",className:s}=n;return(0,r.jsx)(u,{onClick:e,disabled:t,type:o,color:a,className:s,children:i})};e.Z=l;let u=o.ZP.button.withConfig({displayName:"Button__Wrap",componentId:"sc-9d99eadf-0"})(s(),a.jh,n=>n.disabled?a.QZ.disabled:a.QZ[n.color])},81855:function(n,e,t){"use strict";var i=t(82729),r=t(85893);t(67294);var o=t(57833),a=t(59429);function s(){let n=(0,i._)(["\n  position: absolute;\n  bottom: 0;\n  right: 0.5rem;\n"]);return s=function(){return n},n}function l(){let n=(0,i._)(["\n  position: relative;\n  display: block;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    background-repeat: no-repeat;\n    background-size: contain;\n    display: block;\n    margin: auto;\n    width: 24px;\n    height: 24px;\n    background-image: url(",");\n  }\n"]);return l=function(){return n},n}let u=n=>{let{onClick:e,showPassword:t}=n;return(0,r.jsx)(c,{onClick:e,children:(0,r.jsx)(d,{showPassword:t})})};e.Z=u;let c=o.ZP.div.withConfig({displayName:"ShowPasswordButton__StyledButton",componentId:"sc-3a4ea5de-0"})(s()),d=o.ZP.span.withConfig({displayName:"ShowPasswordButton__IconSpan",componentId:"sc-3a4ea5de-1"})(l(),n=>n.showPassword?a.K3:a.dY)},75972:function(n,e,t){"use strict";t.d(e,{n:function(){return d}});var i=t(82729),r=t(85893),o=t(67294),a=t(57833),s=t(41007),l=t(64087);function u(){let n=(0,i._)([""]);return u=function(){return n},n}function c(){let n=(0,i._)(["\n  background-color: ",";\n  border: ",";\n  border-color: ",";\n  border-radius: 4px;\n  width: 100%;\n  padding: 10px;\n\n  /* placeholder */\n  ::placeholder {\n    color: ",";\n  }\n  :-ms-input-placeholder {\n    /* IE */\n    color: ",";\n  }\n  ::-ms-input-placeholder {\n    /* Edge */\n    color: ",";\n  }\n  /* autofill */\n  :-webkit-autofill,\n  -webkit-autofill:hover,\n  -webkit-autofill:focus {\n    -webkit-box-shadow: 0 0 0px 1000px "," inset;\n    box-shadow: 0 0 0px 1000px "," inset;\n  }\n"]);return c=function(){return n},n}let d=(0,o.forwardRef)((n,e)=>{let{hasBgColor:t=!0,placeholder:i,type:o="text",onChange:a,name:s,error:u,className:c}=n;return(0,r.jsxs)(f,{children:[null!=u&&(0,r.jsx)(l.Z,{children:u}),(0,r.jsx)(m,{ref:e,name:s,onChange:a,hasBgColor:t,placeholder:i,type:o,className:c})]})});d.displayName="TextField";let f=a.ZP.div.withConfig({displayName:"rhf__FieldWrap",componentId:"sc-33acdddf-0"})(u()),m=a.ZP.input.withConfig({displayName:"rhf__TextFieldInput",componentId:"sc-33acdddf-1"})(c(),n=>n.hasBgColor?s.Um:"#fff",n=>n.hasBgColor?"none":"1px solid",s.tv,s.sA,s.sA,s.sA,s.Um,s.Um)},41517:function(n,e,t){"use strict";t.d(e,{d:function(){return o}});var i=t(61929),r=t(67294);let o=()=>{let n=function(){let[n,e]=(0,r.useState)(window.navigator.onLine),t=()=>{e(window.navigator.onLine)};return(0,r.useEffect)(()=>{if(null!=window)return window.addEventListener("offline",t),window.addEventListener("online",t),()=>{window.removeEventListener("offline",t),window.removeEventListener("online",t)}}),n}(),{open:e}=(0,i.Z)();(0,r.useEffect)(()=>{n||e(["ネットワークに接続されていません"])},[n])}},56556:function(n,e,t){"use strict";t.d(e,{o9:function(){return w},kL:function(){return _},hU:function(){return b}});var i=t(30715),r=t(43271),o=t(22170),a=t(7881);async function s(n,e,t,a){try{await i.zB(e,a)}catch(n){throw Error("認証に失敗しました。パスワードをお確かめください")}await r.L1(t);try{await o.Rd(n,e,t)}catch(n){}}async function l(n,e,t){try{await r.FG(t)}catch(n){throw Error("コードを認証できませんでした")}try{await a.t(n,e)}catch(n){}}var u=t(88767),c=t(67294),d=t(45284),f=t(11163),m=t(27339),p=t(61929),h=t(88442),g=t(62463);let w=()=>{let{id:n,username:e}=(0,d.f)(),t=(0,f.useRouter)(),{open:i}=(0,h.k)(),{mutate:r}=(0,u.useMutation)(t=>{let{email:i,password:r}=t;return s(n,e,i,r)},{onSuccess:(e,r)=>{i({title:"認証コードを認証しました",messages:["".concat(r.email,"に認証コードを送信しました。"),"次の画面で認証を行ã

1ªã£ã¦ãã ã•ã„"],onConfirm:{value:"OK",handle:()=>t.push({pathname:"/users/".concat(n,"/settings/mail/codeauth")})}})},onError:(n,e)=>{console.error(n),i({title:"認証コードを送信できませんでした",messages:["".concat(e.email,"に認証コードを送信できませんでした。"),n.message],onConfirm:{value:"OK"}})}}),o=(0,c.useCallback)((n,e)=>{r({email:n,password:e})},[r]);return{changeEmail:o}},b=()=>{let{id:n,username:e}=(0,d.f)(),{open:t,close:i}=(0,p.Z)(),r=(0,u.useQueryClient)(),{push:o}=(0,f.useRouter)(),{mutate:a}=(0,u.useMutation)(t=>{let{code:i}=t;return l(n,e,i)},{onSuccess:async(e,a)=>{let{redirect:s}=a;i(),o((0,g.dP)(s)),await r.invalidateQueries(m.a.email(n)),t(["コード認証が完了しました"])},onError:()=>{t(["コードを認証できませんでした","恐れ入りますがもう一度実行してください"])}}),s=(0,c.useCallback)((n,e)=>{t(["コードを認証しています..."]),a({code:n,redirect:e})},[a]);return{verifyEmail:s}},_=()=>{let{open:n}=(0,p.Z)(),{mutate:e}=(0,u.useMutation)(r.Te,{onSuccess:e=>{n(["認証コードを再送しました"])},onError:e=>{n([e.message])}});return{resendChangeCode:e}}},73674:function(n,e,t){"use strict";t.d(e,{Y:function(){return s}});var i=t(43271),r=t(88767),o=t(27339),a=t(45284);let s=()=>{let{id:n}=(0,a.f)(),{data:e}=(0,r.useQuery)(o.a.email(n),i.ND,{staleTime:1/0});return null==e?null:e}},57129:function(n,e,t){"use strict";t.d(e,{A:function(){return c}});var i=t(61929),r=t(38013),o=t(97384),a=t(11163),s=t(67294),l=t(88767),u=t(27339);let c=n=>{let{push:e,asPath:t}=(0,a.useRouter)(),{open:c}=(0,i.Z)(),{data:d}=(0,l.useQuery)(u.a.checkVisiblePage(t),r.rc,{staleTime:1/0,notifyOnChangeProps:"tracked"});(0,s.useEffect)(()=>{if(null!=d)switch(function(n,e){switch(n.kind){case"only":{let t=n.users;if(0===t.length)return"hidden";if(t.some(n=>n===e))return"visible";return"private"}case"login":{let n=e===o.U;return n?"private":"visible"}case"all":return"visible"}}(n,d)){case"visible":return;case"hidden":case"private":c(["恐れ入りますが、このページは現在非公開となっております"]),e("/")}},[d])}},25920:function(n,e,t){"use strict";t.r(e),t.d(e,{default:function(){return G}});var i=t(82729),r=t(85893),o=t(5152),a=t.n(o),s=t(67294),l=t(57833),u=t(11163),c=t(41007),d=t(6012),f=t(73674),m=t(57129),p=t(88937),h=t(75972),g=t(81855),w=t(28216),b=t(87536),_=t(47533),x=t(45284),v=t(56556),C=t(41517);function y(){let n=(0,i._)([""]);return y=function(){return n},n}function P(){let n=(0,i._)(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 2rem;\n"]);return P=function(){return n},n}function j(){let n=(0,i._)(["\n  display: inline-block;\n  margin-bottom: 0.5rem;\n  font-weight: bold;\n"]);return j=function(){return n},n}function Z(){let n=(0,i._)(["\n  position: relative;\n"]);return Z=function(){return n},n}function k(){let n=(0,i._)(["\n  margin: 4rem auto 2rem;\n"]);return k=function(){return n},n}function N(){let n=(0,i._)(["\n  padding-right: 50px;\n"]);return N=function(){return n},n}function E(){let n=(0,i._)(["\n  text-decoration: underline;\n"]);return E=function(){return n},n}function I(){let n=(0,i._)(["\n  text-align: center;\n"]);return I=function(){return n},n}let S=w.ZP.object().shape({newEmail:w.ZP.string().validEmail().uniqEmail(),password:w.ZP.string().password().required()}),F=n=>{var e,t;let{emailUnverified:i}=n;(0,C.d)();let o=(0,u.useRouter)(),{id:a}=(0,x.f)(),{changeEmail:l}=(0,v.o9)(),[c,d]=(0,s.useState)(!1),f=n=>{n.preventDefault(),d(!c)},{handleSubmit:m,formState:p,register:w}=(0,b.cI)({mode:"onChange",defaultValues:{},resolver:(0,_.X)(S)}),{errors:y,isValid:P}=p,j=()=>{o.push({pathname:"/users/".concat(a,"/settings/mail/codeauth"),query:o.query})},Z=n=>{l(n.newEmail,n.password)};return(0,r.jsxs)(B,{onSubmit:m(Z),children:[(0,r.jsxs)(U,{children:[(0,r.jsx)(M,{children:"新しいメールアドレス"}),(0,r.jsx)(h.n,{...w("newEmail"),placeholder:"例：[email protected]",hasBgColor:!0,error:null===(e=y.newEmail)||void 0===e?void 0:e.message})]}),(0,r.jsxs)(U,{children:[(0,r.jsx)(M,{children:"パスワード"}),(0,r.jsxs)(T,{children:[(0,r.jsx)(q,{...w("password"),type:c?"text":"password",placeholder:"パスワード",hasBgColor:!0,error:null===(t=y.password)||void 0===t?void 0:t.message}),(0,r.jsx)(g.Z,{onClick:f,showPassword:c})]})]}),(0,r.jsx)(L,{type:"submit",disabled:!P,onClick:()=>null,children:"メールアドレス変更"}),i&&(0,r.jsxs)(R,{children:[(0,r.jsx)("div",{children:"現在のメールアドレスを認証してください"}),(0,r.jsx)(A,{onClick:j,children:"今すぐ認証する"})]})]})}

1,B=l.ZP.form.withConfig({displayName:"UserSettingsMailChangeForm__FormWrap",componentId:"sc-726b019c-0"})(y()),U=l.ZP.div.withConfig({displayName:"UserSettingsMailChangeForm__FieldWrap",componentId:"sc-726b019c-1"})(P()),M=l.ZP.label.withConfig({displayName:"UserSettingsMailChangeForm__InputLabel",componentId:"sc-726b019c-2"})(j()),T=l.ZP.div.withConfig({displayName:"UserSettingsMailChangeForm__ShowPasswordWrap",componentId:"sc-726b019c-3"})(Z()),L=(0,l.ZP)(p.Z).withConfig({displayName:"UserSettingsMailChangeForm__SubmitButton",componentId:"sc-726b019c-4"})(k()),q=(0,l.ZP)(h.n).withConfig({displayName:"UserSettingsMailChangeForm__PasswordField",componentId:"sc-726b019c-5"})(N()),A=l.ZP.button.withConfig({displayName:"UserSettingsMailChangeForm__StyledButton",componentId:"sc-726b019c-6"})(E()),R=l.ZP.div.withConfig({displayName:"UserSettingsMailChangeForm__Attention",componentId:"sc-726b019c-7"})(I());var Q=t(43042);function W(){let n=(0,i._)(["\n  @media "," {\n    margin: 1rem;\n  }\n\n  @media "," {\n    margin-bottom: 1rem;\n  }\n"]);return W=function(){return n},n}function O(){let n=(0,i._)(["\n  border-bottom: 1px solid ",";\n  padding: 0.75rem 0;\n"]);return O=function(){return n},n}function K(){let n=(0,i._)(["\n  display: flex;\n\n  @media "," {\n    flex-direction: column;\n  }\n"]);return K=function(){return n},n}function X(){let n=(0,i._)(["\n  display: flex;\n  flex-direction: column;\n\n  @media "," {\n    width: calc((100% - (100% / 3)) - 2rem);\n  }\n"]);return X=function(){return n},n}function Y(){let n=(0,i._)(["\n  margin: 2rem 0 0;\n\n  & > dt {\n    margin-bottom: 0.5rem;\n    font-weight: bold;\n  }\n\n  & > dd {\n    margin-bottom: 2rem;\n  }\n"]);return Y=function(){return n},n}let z=a()(()=>t.e(256).then(t.bind(t,40256)),{loadableGenerated:{webpack:()=>[40256]}}),D=()=>{var n;(0,m.A)({kind:"login"});let e=(0,u.useRouter)(),t=(0,f.Y)();return(0,r.jsxs)(d.ZA,{hasBgColor:!1,hasPadding:!0,headerType:"settings",footerType:"signup",children:[(0,r.jsx)(Q.J,{title:"設定一覧",noindex:!0}),(0,r.jsx)(V,{children:"設定一覧"}),(0,r.jsxs)(H,{children:[(0,r.jsx)(z,{router:e}),(0,r.jsxs)($,{children:[(0,r.jsx)(J,{children:"メールアドレス変更"}),(0,r.jsxs)(nn,{children:[(0,r.jsx)("dt",{children:"現在のメールアドレス"}),(0,r.jsx)("dd",{children:null!=t?t.email:"登録されていません"})]}),(0,r.jsx)(F,{emailUnverified:(null==t?void 0:t.verified)===!1})]})]})]})};var G=D;let V=l.ZP.h1.withConfig({displayName:"mail__Title",componentId:"sc-7f246105-0"})(W(),c.eq.tab,c.eq.sp),J=l.ZP.h2.withConfig({displayName:"mail__BorderTitle",componentId:"sc-7f246105-1"})(O(),c.tv),H=l.ZP.div.withConfig({displayName:"mail__SettingsWrap",componentId:"sc-7f246105-2"})(K(),c.eq.sp),$=l.ZP.div.withConfig({displayName:"mail__SettingsContent",componentId:"sc-7f246105-3"})(X(),c.eq.tab),nn=l.ZP.dl.withConfig({displayName:"mail__ContentList",componentId:"sc-7f246105-4"})(Y())}},function(n){n.O(0,[296,9660,5582,3631,6772,8251,9774,2888,179],function(){return n(n.s=70129)}),_N_E=n.O()}]);