https://www.thekono.com/assets/index-BvFysozA.js

1import{s as r,j as s,R as l,aa as d,L as E,bt as p,ak as h,r as u,g as a,ao as c,dJ as w,bv as C,m as b,bo as V,bp as g,bj as L,dt as k,a1 as P,bl as M,bm as _,bn as A}from"./index-qhNauVgs.js";import{v as f}from"./index-DgopxPFo.js";import{w as j}from"./index-CO7h1bT3.js";const x=r.div`
2  width: 100%;
3  height: 1px;
4  background-image: repeating-linear-gradient(
5    to right,
6    #eee9e0,
7    #eee9e0 4px,
8    #ffffff 4px,
9    #ffffff 8px
10  );
11`,N=r.div`
12  width: calc(100% - 10px);
13  margin: 30px 5px 0;
14  font-size: 12px;
15  line-height: 1.42;
16  color: #656565;
17  white-space: pre-line;
18`;function S(e){const{note:t}=e;return t?s.jsxs(l.Fragment,{children:[s.jsx(x,{}),s.jsx(N,{children:t})]}):null}const U=r.div`
19  width: 100%;
20  display: flex;
21  flex-flow: row nowrap;
22  align-items: center;
23  justify-content: space-between;
24  margin-top: 28px;
25`,v=r.div`
26  width: 1px;
27  flex-grow: 1;
28  margin-left: 5px;
29  margin-right: 10px;
30`,m=r(E)`
31  font-size: 14px;
32  font-weight: 500;
33  color: #008159;
34
35  &:hover {
36    text-decoration: underline;
37  }
38`,y=r.div`
39  width: 108px;
40`,T=r.button`
41  width: 100%;
42  height: 48px;
43  color: #ffffff;
44  font-size: 16px;
45  font-weight: 500;
46  background-color: ${e=>e.backgroundColor||"#00a270"};
47  text-align: center;
48  border: none;
49  border-radius: 8px;
50  cursor: pointer;
51  outline: 0;
52
53  &:hover {
54    background-color: ${e=>e.backgroundColorHover||e.backgroundColor||"#00a270"};
55  }
56`;function D(e){return s.jsxs(U,{children:[s.jsx(v,{children:s.jsxs(p.Text,{fontSize:"13px",children:[e.t("I_AGREE"),s.jsx(m,{to:"/policy",target:"_blank",rel:"noopener noreferrer",children:e.t("POLICY_RULE")}),e.t("AND"),s.jsx(m,{to:"/privacy",target:"_blank",rel:"noopener noreferrer",children:e.t("PRIVACY_RULE")})]})}),s.jsx(y,{onClick:e.onSubmit,children:s.jsx(T,{backgroundColor:e.allFilled?"#008159":"#656565",backgroundColorHover:e.allFilled&&"#00a270",children:e.t("CONFIRM")})})]})}const I=d("K4lSign")(D),O=r.form`
57  width: 100%;
58  display: flex;
59  flex-flow: row wrap;
60  align-items: center;
61  padding: 30px 0;
62`,o=r.div`
63  width: 100%;
64  margin-top: 26px;
65
66  &:first-child {
67    margin-top: 0;
68  }
69`;class R extends u.Component{constructor(t){super(t),this.state={email:"",password:"",passwordChecksum:"",platform:"",isEmailValid:!0,isPasswordValid:!0,isPasswordChecksumValid:!0,isGeneralValid:!0,errorMessage:""},this.handleInputChange=this.handleInputChange.bind(this),this.onSubmit=this.onSubmit.bind(this)}componentDidMount(){this.props.onClearAuthenticationError()}componentDidUpdate(t){if(this.props.signUpError&&this.props.signUpError!==t.signUpError)switch(this.props.signUpError){case"USER_NOT_UNIQUE":this.setState({isEmailValid:!1});break;case"PLATFORM_NOT_EXIST":case"LOGIN_ONLY_ERROR":case"IP_EMAIL_VALIDATION_FAILED":this.setState({isGeneralValid:!1});break}}handleInputChange(t){this.setState({[t.target.name]:t.target.value})}validateEmail(){return f(this.state.email)?(this.setState({isEmailValid:!0}),!0):(this.setState({isEmailValid:!1,errorMessage:this.props.t("INVALID_EMAIL")}),!1)}validatePassword(){return this.state.password?this.state.password!==this.state.passwordChecksum?(this.setState({isPasswordValid:!0,isPasswordChecksumValid:!1,errorMessage:this.props.t("INVALID_PASSWORD_CHECKSUM")}),!1):(this.setState({isPasswordValid:!0,isPasswordChecksumValid:!0}),!0):(this.setState({isPasswordValid:!1,isPasswordChecksumValid:!0,errorMessage:this.props.t("INVALID_PASSWORD")}),!1)}get isValid(){return this.validateEmail()&&this.validatePassword()}onSubmit(t){this.props.onClearAuthenticationError(),this.setState({isEmailValid:!0,isPasswordValid:!0,isGeneralValid:!0,errorMessage:""},()=>{this.isValid&&this.props.onK4lSignUp({platform:this.props.k4lCurrentLibrary.get("platform"),account:this.state.email,validator:this.state.password})}),t.preventDefault()}get errorMessage(){return this.state.errorMessage||this.props.t(this.props.signUpError)}renderForm(){const t=this.props.k4lCurrentLibrary,i=this.state.email&&this.state.password&&this.state.passwordChecksum;return s.jsxs(O,{children:[s.jsx(o,{children:s.jsx(a.SquareInput,{id:"email",name:"email",word:this.props.t("ACCOUNT"),value:this.state.email,onChange:this.handleInputChange,placeholder:t.get("placeholderAccount"),error:!this.state.isEmailValid,errorMessage:this.errorMessage,showErrorMessage:!this.state.isEmailValid,autoFocus:!0,autoComplete:"email"})}),s.jsx(o,{children:s.jsx(a.SquareInput,{id:"password",name:"password",word:this.props.t("PASSWORD"),type:"password",onChange:this.handleInputChange,placeholder:t.get("placeholderPassword"),error:!this.state.isPasswordValid,errorMessage:this.errorMessage,showErrorMessage:!this.state.isPasswordValid,autoComplete:"new-password",eye:!0})}),s.jsx(o,{children:s.jsx(a.SquareInput,{id:"passwordCheck",name:"passwordChecksum",word:this.props.t("CONFIRM_PASSWORD"),type:"password",onChange:this.handleInputChange,placeholder:t.get("placeholderPassword2"),error:!this.state.isPasswordChecksumValid,errorMessage:this.errorMessage,showErrorMessage:!this.state.isPasswordChecksumValid||!this.state.isGeneralValid,autoComplete:"new-password",eye:!0})}),s.jsx(I,{onSubmit:this.onSubmit,allFilled:i})]})}render(){return s.jsxs(l.Fragment,{children:[s.jsx(p.Title,{titleText:this.props.t("SIGN_UP"),descText:this.props.t("GOT_ACCOUNT"),href:"/sign-in",linkText:this.props.t("SIGN_IN_ACCOUNT")}),this.renderForm(),s.jsx(S,{note:this.props.k4lCurrentLibrary.get("footnote")})]})}}const F=e=>({k4lCurrentLibrary:e.getIn(["k4lLibraries","current"]),signUpError:e.getIn(["authentication","error"])}),G=e=>c({onK4lSignUp:w,onClearAuthenticationError:C},e),W=h(F,G)(d("K4lSign")(R)),$=r.form`
70  width: 100%;
71  display: flex;
72  flex-flow: row wrap;
73  align-items: center;
74  padding: 30px 0;
75`,H=r.div`
76  width: 100%;
77  margin-bottom: 30px;
78`,n=r.div`
79  width: 100%;
80  margin-top: 26px;
81
82  &:first-child {
83    margin-top: 0;
84  }
85`;class K extends u.Component{constructor(t){super(t),this.state={card:"",email:"",password:"",passwordChecksum:"",isCardValid:!0,isEmailValid:!0,isPasswordValid:!0,isPasswordChecksumValid:!0,isGeneralValid:!0,errorMessage:""},this.handleInputChange=this.handleInputChange.bind(this),this.onSubmit=this.onSubmit.bind(this)}componentDidMount(){this.props.onClearAuthenticationError()}componentDidUpdate(t){if(this.props.signUpError&&this.props.signUpError!==t.signUpError)switch(this.props.signUpError){case"CARD_NOT_UNIQUE":case"CARD_NUM_EMAIL_VALIDATION_FAILED":this.setState({isCardValid:!1});break;case"USER_NOT_UNIQUE":this.setState({isEmailValid:!1});break;case"PLATFORM_NOT_EXIST":case"LOGIN_ONLY_ERROR":this.setState({isGeneralValid:!1});break}}handleInputChange(t){this.setState({[t.target.name]:t.target.value})}validateCard(){return this.state.card?(this.setState({isCardValid:!0}),!0):(this.setState({isCardValid:!1,errorMessage:this.props.t("INVALID_CARD")}),!1)}validateEmail(){return f(this.state.email)?(this.setState({isEmailValid:!0}),!0):(this.setState({isEmailValid:!1,errorMessage:this.props.t("INVALID_EMAIL")}),!1)}validatePassword(){return this.state.password?this.state.password!==this.state.passwordChecksum?(this.setState({isPasswordValid:!0,isPasswordChecksumValid:!1,errorMessage:this.props.t("INVALID_PASSWORD_CHECKSUM")}),!1):(this.setState({isPasswordValid:!0,isPasswordChecksumValid:!0}),!0):(this.setState({isPasswordValid:!1,isPasswordChecksumValid:!0,errorMessage:this.props.t("INVALID_PASSWORD")}),!1)}get isValid(){return this.validateCard()&&this.validateEmail()&&this.validatePassword()}onSubmit(t){this.props.onClearAuthenticationError(),this.setState({isEmailValid:!0,isPasswordValid:!0,isGeneralValid:!0,errorMessage:""},()=>{this.isValid&&this.props.onK4lSignUp({platform:this.props.k4lCurrentLibrary.get("platform"),account:this.state.email,validator:this.state.password,cardNumber:this.state.card})}),t.preventDefault()}get errorMessage(){return this.state.errorMessage||this.props.t(this.props.signUpError)}renderForm(){const t=this.props.k4lCurrentLibrary,i=this.state.card&&this.state.email&&this.state.password&&this.state.passwordChecksum;return s.jsxs($,{children:[s.jsx(H,{children:s.jsx(a.SquareInput,{id:"card",name:"card",word:this.props.t("CARD"),value:this.state.card,onChange:this.handleInputChange,placeholder:t.get("placeholderCardnumber"),error:!this.state.isCardValid,errorMessage:this.errorMessage,showErrorMessage:!this.state.isCardValid,autoFocus:!0,autoComplete:"username"})}),s.jsx(x,{}),s.jsx(n,{children:s.jsx(a.SquareInput,{id:"email",name:"email",word:this.props.t("ACCOUNT"),value:this.state.email,onChange:this.handleInputChange,placeholder:t.get("placeholderAccount"),error:!this.state.isEmailValid,errorMessage:this.errorMessage,showErrorMessage:!this.state.isEmailValid,autoComplete:"email"})}),s.jsx(n,{children:s.jsx(a.SquareInput,{id:"password",name:"password",word:this.props.t("PASSWORD"),type:"password",onChange:this.handleInputChange,placeholder:t.get("placeholderPassword"),error:!this.state.isPasswordValid,errorMessage:this.errorMessage,showErrorMessage:!this.state.isPasswordValid,autoComplete:"new-password",eye:!0})}),s.jsx(n,{children:s.jsx(a.SquareInput,{id:"passwordCheck",name:"passwordChecksum",word:this.props.t("CONFIRM_PASSWORD"),type:"password",onChange:this.handleInputChange,placeholder:t.get("placeholderPassword2"),error:!this.state.isPasswordChecksumValid,errorMessage:this.errorMessage,showErrorMessage:!this.state.isPasswordChecksumValid||!this.state.isGeneralValid,autoComplete:"new-password",eye:!0})}),s.jsx(I,{onSubmit:this.onSubmit,allFilled:i})]})}render(){return s.jsxs(l.Fragment,{children:[s.jsx(p.Title,{titleText:this.props.t("SIGN_UP"),descText:this.props.t("GOT_ACCOUNT"),href:"/sign-in",linkText:this.props.t("SIGN_IN_ACCOUNT")}),this.renderForm(),s.jsx(S,{note:this.props.k4lCurrentLibrary.get("footnote")})]})}}const q=e=>({k4lCurrentLibrary:e.getIn(["k4lLibraries","current"]),signUpError:e.getIn(["authentication","error"])}),z=e=>c({onK4lSignUp:w,onClearAuthenticationError:C},e),Y=h(q,z)(d("K4lSign")(K)),Q=r.div`
86  display: flex;
87  flex-flow: row wrap;
88  max-width: 380px;
89  width: calc(100% - 32px);
90  margin: 0 auto;
91  padding-top: 50px;
92  padding-bottom: 50px;
93
94  ${b.mobile`
95    padding-top: 20px;
96  `};
97`;class B extends u.Component{componentDidMount(){this.props.onChangeState(V,this.props.match.params,this.props.match.url),this.props.onEndLoading(g),this.props.hideLoading(),this.props.isLoggedIn&&this.props.history.replace("/")}componentDidUpdate(t){this.props.isLoggedIn&&this.props.history.push(L(this.props.stateHistory)),j(this.props.isLoading,t.isLoading,this.props.showLoading,this.props.hideLoading,g)}componentWillUnmount(){this.props.hideLoading()}renderSwitch(){if(!this.props.k4lCurrentLibrary)return null;switch(this.props.k4lCurrentLibrary.get("validatorType")){case"ip_email":return s.jsx(W,{});case"card_number_email":return s.jsx(Y,{});default:return s.jsx(k,{to:"/sign-in"})}}render(){return s.jsx(Q,{children:this.renderSwitch()})}}const X=e=>({k4lCurrentLibrary:e.getIn(["k4lLibraries","current"]),isLoggedIn:e.getIn(["authentication","isLoggedIn"]),isLoading:e.get("loading"),stateHistory:e.getIn(["state","history"])}),J=e=>c({onChangeState:P,onEndLoading:M,showLoading:_,hideLoading:A},e),ts=h(X,J)(B);export{ts as default};