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

React Native for my Gate SignUp Component

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