@cpmech/gate-native/cjs/index.js

React Native for my Gate SignUp Component

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,o=require("react-native"),i=require("@cpmech/gate"),r=require("@cpmech/rncomps");const l=e=>n=>{const[o,r]=t.useState({...i.newBlankFlags(),...i.newBlankUser()});return t.useEffect(()=>{let t=!1;t||r({...e.flags,...e.user});const o=e.subscribe(()=>{t||r({...e.flags,...e.user})},n);return()=>{t=!0,o()}},[n]),o},a=o.StyleSheet.create({header:{flex:1.2,flexDirection:"column",justifyContent:"center",alignItems:"center"},inputContainer:{flex:1,justifyContent:"center",alignItems:"center"},inputErrorContainer:{flex:.5,justifyContent:"center",alignItems:"center"},controlContainer:{flex:2,flexDirection:"column",justifyContent:"space-evenly",alignItems:"center"},leftContainer:{flexDirection:"column",justifyContent:"center",alignItems:"center"},buttonLeft:{flex:1},buttonRight:{flex:1.2},buttonContainer:{flexDirection:"row",justifyContent:"center",alignItems:"center"},notifications:{justifyContent:"center",alignItems:"center"},notificationsText:{textAlign:"center"},footnote:{flex:.4,flexDirection:"row",justifyContent:"center",alignItems:"center"}}),s=o.StyleSheet.create({header:{flex:1.2,flexDirection:"column",justifyContent:"center",alignItems:"center"},inputContainer:{flex:1,justifyContent:"center",alignItems:"center"},inputErrorContainer:{flex:.5,justifyContent:"center",alignItems:"center"},controlContainer:{flex:2,flexDirection:"column",justifyContent:"space-evenly",alignItems:"center"},leftContainer:{flexDirection:"column",justifyContent:"center",alignItems:"center"},buttonLeft:{flex:1},buttonRight:{flex:1.2},buttonContainer:{flexDirection:"row",justifyContent:"center",alignItems:"center"},notifications:{justifyContent:"center",alignItems:"center"},notificationsText:{textAlign:"center"},footnote:{flex:.4,flexDirection:"row",justifyContent:"center",alignItems:"center"}});exports.GateSignUpView=({gate:e,iniEmail:s="",simplePassword:c=!0,marginTop:d=30,colorIcon:m=r.defaultStyleTypeA.mutedColor,colorText:u="#484848",colorLink:f="#484848",colorError:y="red",styleInput:p,styleButton:g,buttonHeight:w=45,buttonBorderRadius:E=1e3,buttonMinWidth:v,iconKind:C="line",fonts:x={size:{message:18,error:18,header:22,subHeader:20,footnote:16,smallFootnote:14},familiy:{message:"",error:"",header:"",subHeader:"",footnote:"",smallFootnote:"",link:""}}})=>{var b,S,T,h,V,z,F,I,j,P,U,k,A,B,L,O;const R=l(e),{error:D,needToConfirm:H,resetPasswordStep2:G,processing:q,doneSendCode:W,doneResetPassword:M}=R("@cpmech/gate-native/GateSignUpView"),[K,_]=t.useState(!0),[J,N]=t.useState(!1),[Q,X]=t.useState(!1),[Y,Z]=t.useState(!1),[$,ee]=t.useState(!1),[te,ne]=t.useState({email:s,password:"",code:""}),[oe,ie]=t.useState({email:"",password:"",code:""}),re=J||H,le=Q||G,ae=re||le,se=()=>{D&&e.notify({error:""}),W&&e.notify({doneSendCode:!1}),M&&e.notify({doneResetPassword:!1}),ee(!1),ie({email:"",password:"",code:""})},ce=e=>{const t=i.signUpValues2errors(te,e,c);return ie(t.errors),!t.hasError},de=(e,t)=>{const n={...te,[e]:t.trim()};if(ne(n),$){const t=i.signUpValues2errors(n,{},c);ie({...oe,[e]:t[e]})}},me=(null==p?void 0:p.fontSize)||r.defaultStyleTypeA.fontSize,ue=n.createElement(o.TouchableHighlight,{disabled:q,onPress:()=>Z(!Y),underlayColor:"transparent"},Y?n.createElement(r.BaseIcon,{name:"eye-off",kind:C,size:me,color:m}):n.createElement(r.BaseIcon,{name:"eye",kind:C,size:me,color:m})),fe={fontFamily:null===(b=null==x?void 0:x.familiy)||void 0===b?void 0:b.message,fontSize:null===(S=null==x?void 0:x.size)||void 0===S?void 0:S.message,color:u},ye={fontFamily:null===(T=null==x?void 0:x.familiy)||void 0===T?void 0:T.error,fontSize:null===(h=null==x?void 0:x.size)||void 0===h?void 0:h.error,color:y},pe={fontFamily:null===(V=null==x?void 0:x.familiy)||void 0===V?void 0:V.header,fontSize:null===(z=null==x?void 0:x.size)||void 0===z?void 0:z.header,color:u},ge={fontFamily:null===(F=null==x?void 0:x.familiy)||void 0===F?void 0:F.subHeader,fontSize:null===(I=null==x?void 0:x.size)||void 0===I?void 0:I.subHeader,color:u},we={fontFamily:null===(j=null==x?void 0:x.familiy)||void 0===j?void 0:j.footnote,fontSize:null===(P=null==x?void 0:x.size)||void 0===P?void 0:P.footnote,color:u},Ee={fontFamily:null===(U=null==x?void 0:x.familiy)||void 0===U?void 0:U.smallFootnote,fontSize:null===(k=null==x?void 0:x.size)||void 0===k?void 0:k.smallFootnote,color:u},ve={color:f,fontSize:null===(A=null==x?void 0:x.size)||void 0===A?void 0:A.footnote,fontFamily:null===(B=null==x?void 0:x.familiy)||void 0===B?void 0:B.link},Ce={color:f,fontSize:null===(L=null==x?void 0:x.size)||void 0===L?void 0:L.smallFootnote,fontFamily:null===(O=null==x?void 0:x.familiy)||void 0===O?void 0:O.link};return n.createElement(n.Fragment,null,n.createElement(o.View,{style:{marginTop:d}}),le&&n.createElement(o.View,{style:a.header},n.createElement(o.Text,{style:pe},i.t("resetPassword")),n.createElement(o.Text,{style:ge},Q?i.t("resetPassword1"):i.t("resetPassword2"))),!le&&n.createElement(o.View,{style:a.header},n.createElement(o.Text,{style:pe},re?i.t("confirmSignUp"):K?i.t("signIn"):i.t("createAccount"))),!G&&n.createElement(n.Fragment,null,n.createElement(o.View,{style:a.inputContainer},n.createElement(r.InputTypeA,Object.assign({disabled:q,label:"Email",value:te.email,onChangeText:e=>de("email",e),error:oe.email,autoCompleteType:"email",keyboardType:"email-address",textContentType:"emailAddress",autoCapitalize:"none",autoCorrect:!1},p))),n.createElement(o.View,{style:a.inputErrorContainer},n.createElement(r.FormErrorField,{error:oe.email,color:y}))),(re||G)&&n.createElement(n.Fragment,null,n.createElement(o.View,{style:a.inputContainer},n.createElement(r.InputTypeA,Object.assign({disabled:q,label:i.t("confirmationCode"),value:te.code,onChangeText:e=>de("code",e),error:oe.code,factorFontsize2width:.55,keyboardType:"numeric"},p))),n.createElement(o.View,{style:a.inputErrorContainer},n.createElement(r.FormErrorField,{error:oe.code,color:y}))),!(re||Q)&&n.createElement(n.Fragment,null,n.createElement(o.View,{style:a.inputContainer},n.createElement(r.InputTypeA,Object.assign({disabled:q,label:G?i.t("newPassword"):i.t("password"),value:te.password,suffix:ue,onChangeText:e=>de("password",e),error:oe.password,autoCorrect:!1,textContentType:"password",secureTextEntry:!Y},p))),n.createElement(o.View,{style:a.inputErrorContainer},n.createElement(r.FormErrorField,{error:oe.password,color:y}))),n.createElement(o.View,{style:a.controlContainer},n.createElement(o.View,{style:a.buttonContainer},ae&&n.createElement(o.View,{style:a.buttonLeft},n.createElement(o.View,{style:a.leftContainer},n.createElement(r.BaseLink,Object.assign({disabled:q,text:i.t("back"),onPress:()=>{se(),J&&N(!1),H&&e.notify({needToConfirm:!1}),Q&&X(!1),G&&e.notify({resetPasswordStep2:!1})}},ve)))),!ae&&n.createElement(o.View,{style:a.buttonLeft},n.createElement(o.View,{style:a.leftContainer},n.createElement(o.Text,{style:we},K?i.t("noAccount"):i.t("haveAnAccount")),n.createElement(r.BaseLink,Object.assign({disabled:q,text:K?i.t("signUp"):i.t("gotoSignIn"),onPress:()=>{se(),_(!K)}},ve)))),n.createElement(o.View,{style:{...a.buttonRight,minWidth:v}},n.createElement(r.BaseButton,Object.assign({spinning:q,onPress:async()=>await(async()=>{if(ee(!0),G){if(!ce())return;await e.forgotPasswordStep2(te.email,te.password,te.code)}else{if(Q){if(!ce({password:!0,code:!0}))return;return ne({...te,password:""}),X(!1),void await e.forgotPasswordStep1(te.email)}if(J){if(!ce({password:!0}))return;return await e.confirmSignUpOnly(te.email,te.code),ne({email:"",password:"",code:""}),se(),N(!1),void _(!0)}if(H){if(!ce())return;await e.confirmSignUpAndSignIn(te.email,te.password,te.code)}else if(K){if(!ce({code:!0}))return;await e.signIn(te.email,te.password)}else ce({code:!0})&&await e.signUp(te.email,te.password)}})(),borderRadius:E,height:w,text:re?i.t("confirm").toUpperCase():Q?i.t("sendCode").toUpperCase():G?i.t("submit").toUpperCase():K?i.t("enter").toUpperCase():i.t("signUp").toUpperCase()},g)))),n.createElement(o.View,{style:a.notifications},!!D&&n.createElement(o.Text,{style:[a.notificationsText,ye]},D),W&&n.createElement(o.Text,{style:[a.notificationsText,fe]},i.t("doneSendCode")),M&&n.createElement(o.Text,{style:[a.notificationsText,fe]},i.t("doneResetPassword")))),G&&n.createElement(o.View,{style:a.footnote},n.createElement(o.Text,{style:Ee},i.t("lostCode")," "),n.createElement(r.BaseLink,Object.assign({disabled:q,text:i.t("resendCode"),onPress:async()=>await(async()=>await e.forgotPasswordStep1(te.email))()},Ce))),K&&!ae&&n.createElement(o.View,{style:a.footnote},n.createElement(o.Text,{style:Ee},i.t("forgotPassword")," "),n.createElement(r.BaseLink,Object.assign({disabled:q,text:i.t("resetPassword"),onPress:()=>{se(),X(!0)}},Ce))),re&&n.createElement(o.View,{style:a.footnote},n.createElement(o.Text,{style:Ee},i.t("lostCode")," "),n.createElement(r.BaseLink,Object.assign({disabled:q,text:i.t("resendCode"),onPress:async()=>await(async()=>{ee(!0),ce({password:!0,code:!0})&&await e.resendCode(te.email)})()},Ce))),!ae&&n.createElement(o.View,{style:a.footnote},n.createElement(o.Text,{style:Ee},i.t("wantToConfirm")," "),n.createElement(r.BaseLink,Object.assign({disabled:q,text:i.t("gotoConfirm"),onPress:()=>{se(),N(!0)}},Ce))))},exports.LocalGateSignUpView=({gate:e,iniEmail:a="",marginTop:c=30,colorIcon:d=r.defaultStyleTypeA.mutedColor,colorText:m="#484848",colorLink:u="#484848",colorError:f="red",styleInput:y,styleButton:p,buttonHeight:g=45,buttonBorderRadius:w=1e3,buttonMinWidth:E,iconKind:v="line",fonts:C={size:{message:18,error:18,header:22,subHeader:20,footnote:16,smallFootnote:14}},ignoreErrors:x})=>{var b,S,T,h,V,z,F,I,j,P;const U=l(e),{error:k,processing:A}=U("@cpmech/gate-native/LocalGateSignUpView"),[B,L]=t.useState(!1),[O,R]=t.useState(!1),[D,H]=t.useState(!1),[G,q]=t.useState(!1),[W,M]=t.useState({email:a,password:"",code:""}),[K,_]=t.useState({email:"",password:"",code:""}),J=()=>{k&&e.notify({error:""}),q(!1),_({email:"",password:"",code:""})},N=e=>{if(x)return!0;const t=i.signUpValues2errors(W,e);return _(t.errors),!t.hasError},Q=(e,t)=>{const n={...W,[e]:t.trim()};if(M(n),G&&!x){const t=i.signUpValues2errors(n);_({...K,[e]:t[e]})}},X=(null==y?void 0:y.fontSize)||r.defaultStyleTypeA.fontSize,Y=n.createElement(o.TouchableHighlight,{disabled:A,onPress:()=>H(!D),underlayColor:"transparent"},D?n.createElement(r.BaseIcon,{name:"eye-off",kind:v,size:X,color:d}):n.createElement(r.BaseIcon,{name:"eye",kind:v,size:X,color:d})),Z={fontFamily:null===(b=null==C?void 0:C.familiy)||void 0===b?void 0:b.error,fontSize:null===(S=null==C?void 0:C.size)||void 0===S?void 0:S.error,color:f},$={fontFamily:null===(T=null==C?void 0:C.familiy)||void 0===T?void 0:T.header,fontSize:null===(h=null==C?void 0:C.size)||void 0===h?void 0:h.header,color:m},ee={fontFamily:null===(V=null==C?void 0:C.familiy)||void 0===V?void 0:V.footnote,fontSize:null===(z=null==C?void 0:C.size)||void 0===z?void 0:z.footnote,color:m},te={color:u,fontSize:null===(F=null==C?void 0:C.size)||void 0===F?void 0:F.footnote,fontFamily:null===(I=null==C?void 0:C.familiy)||void 0===I?void 0:I.link},ne={color:u,fontSize:null===(j=null==C?void 0:C.size)||void 0===j?void 0:j.smallFootnote,fontFamily:null===(P=null==C?void 0:C.familiy)||void 0===P?void 0:P.link};return n.createElement(n.Fragment,null,n.createElement(o.View,{style:{marginTop:c}}),n.createElement(o.View,{style:s.header},n.createElement(o.Text,{style:$},B?i.t("signIn"):i.t("createAccount"))),n.createElement(o.View,{style:s.inputContainer},n.createElement(r.InputTypeA,Object.assign({disabled:A,label:"Email",value:W.email,onChangeText:e=>Q("email",e),error:K.email,autoCompleteType:"email",keyboardType:"email-address",textContentType:"emailAddress",autoCapitalize:"none",autoCorrect:!1},y))),n.createElement(o.View,{style:s.inputErrorContainer},n.createElement(r.FormErrorField,{error:K.email,color:f})),n.createElement(o.View,{style:s.inputContainer},n.createElement(r.InputTypeA,Object.assign({disabled:A,label:i.t("password"),value:W.password,suffix:Y,onChangeText:e=>Q("password",e),error:K.password,autoCorrect:!1,textContentType:"password",secureTextEntry:!D},y))),n.createElement(o.View,{style:s.inputErrorContainer},n.createElement(r.FormErrorField,{error:K.password,color:f})),n.createElement(o.View,{style:s.controlContainer},n.createElement(o.View,{style:s.buttonContainer},n.createElement(o.View,{style:s.buttonLeft},n.createElement(o.View,{style:s.leftContainer},n.createElement(o.Text,{style:ee},B?i.t("noAccount"):i.t("haveAnAccount")),n.createElement(r.BaseLink,Object.assign({disabled:A,text:B?i.t("signUp"):i.t("gotoSignIn"),onPress:()=>{J(),L(!B)}},te)))),n.createElement(o.View,{style:{...s.buttonRight,minWidth:E}},n.createElement(r.BaseButton,Object.assign({spinning:A,onPress:async()=>await(async()=>{if(q(!0),O)return await e.clearStorage(),M({email:"",password:"",code:""}),J(),void R(!1);if(B){if(!N({code:!0}))return;await e.signIn(W.email,W.password)}else N({code:!0})&&await e.signUp(W.email,W.password)})(),borderRadius:w,height:g,text:B?i.t("enter").toUpperCase():i.t("signUp").toUpperCase()},p)))),n.createElement(o.View,{style:s.notifications},!!k&&n.createElement(o.Text,{style:[s.notificationsText,Z]},k))),n.createElement(o.View,{style:s.footnote},n.createElement(r.BaseLink,Object.assign({disabled:A,text:i.t("clearLocalStorage"),onPress:()=>{J(),R(!0)}},ne))))},exports.withUseGateObserver=l;