@kiosinc/commons-rn 0.1.19 → 0.1.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/lib/commonjs/auth/screens/LoginScreen.js +4 -8
  2. package/lib/commonjs/auth/screens/LoginScreen.js.map +1 -1
  3. package/lib/commonjs/auth/screens/ResetPassword.js +4 -2
  4. package/lib/commonjs/auth/screens/ResetPassword.js.map +1 -1
  5. package/lib/commonjs/auth/screens/SignUp.js +4 -1
  6. package/lib/commonjs/auth/screens/SignUp.js.map +1 -1
  7. package/lib/commonjs/auth/screens/SignUpPassword.js +4 -1
  8. package/lib/commonjs/auth/screens/SignUpPassword.js.map +1 -1
  9. package/lib/commonjs/auth/screens/VerifyPhoneNumber.js +4 -1
  10. package/lib/commonjs/auth/screens/VerifyPhoneNumber.js.map +1 -1
  11. package/lib/commonjs/components/TextInput.js +4 -2
  12. package/lib/commonjs/components/TextInput.js.map +1 -1
  13. package/lib/module/auth/screens/LoginScreen.js +5 -9
  14. package/lib/module/auth/screens/LoginScreen.js.map +1 -1
  15. package/lib/module/auth/screens/ResetPassword.js +5 -3
  16. package/lib/module/auth/screens/ResetPassword.js.map +1 -1
  17. package/lib/module/auth/screens/SignUp.js +5 -2
  18. package/lib/module/auth/screens/SignUp.js.map +1 -1
  19. package/lib/module/auth/screens/SignUpPassword.js +5 -2
  20. package/lib/module/auth/screens/SignUpPassword.js.map +1 -1
  21. package/lib/module/auth/screens/VerifyPhoneNumber.js +5 -2
  22. package/lib/module/auth/screens/VerifyPhoneNumber.js.map +1 -1
  23. package/lib/module/components/TextInput.js +4 -2
  24. package/lib/module/components/TextInput.js.map +1 -1
  25. package/lib/typescript/src/auth/screens/LoginScreen.d.ts.map +1 -1
  26. package/lib/typescript/src/auth/screens/ResetPassword.d.ts.map +1 -1
  27. package/lib/typescript/src/auth/screens/SignUp.d.ts.map +1 -1
  28. package/lib/typescript/src/auth/screens/SignUpPassword.d.ts.map +1 -1
  29. package/lib/typescript/src/auth/screens/VerifyPhoneNumber.d.ts.map +1 -1
  30. package/lib/typescript/src/components/TextInput.d.ts +1 -0
  31. package/lib/typescript/src/components/TextInput.d.ts.map +1 -1
  32. package/package.json +1 -1
  33. package/src/auth/screens/LoginScreen.tsx +85 -91
  34. package/src/auth/screens/ResetPassword.tsx +46 -42
  35. package/src/auth/screens/SignUp.tsx +105 -101
  36. package/src/auth/screens/SignUpPassword.tsx +68 -64
  37. package/src/auth/screens/VerifyPhoneNumber.tsx +55 -51
  38. package/src/components/TextInput.tsx +11 -6
package/src/auth/screens/SignUpPassword.tsx CHANGED
@@ -5,6 +5,7 @@ import {
5
5
  Button,
6
6
  KeyboardAvoidingView,
7
7
  TextInput,
8
+ Header,
8
9
  } from '../../components';
9
10
  import type { RouteProp } from '@react-navigation/native';
10
11
  import React from 'react';
@@ -57,72 +58,75 @@ export const SignUpPassword: React.FC<SignUpPasswordProps> = ({ route }) => {
57
58
 
58
59
  return (
59
60
  <ParentView justifyContent="center" px="16">
60
- <KeyboardAvoidingView
61
- alignSelf="center"
62
- justifyContent={'center'}
63
- width={{ phone: '100%', tablet: 372 }}
64
- >
65
- <View alignItems="center">
66
- <Text textAlign="center" variant="titleLarge">
67
- {t('authentication.createPassword')}
68
- </Text>
69
- </View>
70
- <Controller
71
- control={control}
72
- render={({ field: { onChange, onBlur, value } }) => {
73
- const passwordErrors = Object.values(
74
- errors.password?.types ?? []
75
- ).flat();
61
+ <Header />
62
+ <View flex={1} justifyContent={'center'}>
63
+ <KeyboardAvoidingView
64
+ alignSelf="center"
65
+ justifyContent={'center'}
66
+ width={{ phone: '100%', tablet: 372 }}
67
+ >
68
+ <View alignItems="center">
69
+ <Text textAlign="center" variant="titleLarge">
70
+ {t('authentication.createPassword')}
71
+ </Text>
72
+ </View>
73
+ <Controller
74
+ control={control}
75
+ render={({ field: { onChange, onBlur, value } }) => {
76
+ const passwordErrors = Object.values(
77
+ errors.password?.types ?? []
78
+ ).flat();
76
79
 
77
- return (
78
- <View mt="48">
79
- <TextInput
80
- error={!!errors.password?.message}
81
- my="5"
82
- secureTextEntry={true}
83
- mode="outlined"
84
- autoComplete="new-password"
85
- onBlur={onBlur}
86
- onChangeText={onChange}
87
- value={value}
88
- label={t('authentication.password')}
89
- />
90
- <Text pt="4">{t('authentication.passwordMustContain')}</Text>
91
- {passwordExpectations.map((expectation, index) => {
92
- const didExpectationFoundInErrors =
93
- passwordErrors?.includes(expectation) ?? false;
80
+ return (
81
+ <View mt="48">
82
+ <TextInput
83
+ error={!!errors.password?.message}
84
+ my="5"
85
+ secureTextEntry={true}
86
+ mode="outlined"
87
+ autoComplete="new-password"
88
+ onBlur={onBlur}
89
+ onChangeText={onChange}
90
+ value={value}
91
+ label={t('authentication.password')}
92
+ />
93
+ <Text pt="4">{t('authentication.passwordMustContain')}</Text>
94
+ {passwordExpectations.map((expectation, index) => {
95
+ const didExpectationFoundInErrors =
96
+ passwordErrors?.includes(expectation) ?? false;
94
97
 
95
- return (
96
- <View flexDirection="row" alignItems="center" key={index}>
97
- <Text
98
- variant="bodySmall"
99
- color={
100
- isSubmitted
101
- ? didExpectationFoundInErrors
102
- ? 'error'
103
- : 'primary'
104
- : 'onBackground'
105
- }
106
- >
107
- {'• ' + expectation}
108
- </Text>
109
- </View>
110
- );
111
- })}
112
- </View>
113
- );
114
- }}
115
- name="password"
116
- />
117
- <Button
118
- mt="48"
119
- loading={isVerifyingPhoneNumber}
120
- mode="contained"
121
- onPress={handleSubmit(onSubmit)}
122
- >
123
- {t('continue')}
124
- </Button>
125
- </KeyboardAvoidingView>
98
+ return (
99
+ <View flexDirection="row" alignItems="center" key={index}>
100
+ <Text
101
+ variant="bodySmall"
102
+ color={
103
+ isSubmitted
104
+ ? didExpectationFoundInErrors
105
+ ? 'error'
106
+ : 'primary'
107
+ : 'onBackground'
108
+ }
109
+ >
110
+ {'• ' + expectation}
111
+ </Text>
112
+ </View>
113
+ );
114
+ })}
115
+ </View>
116
+ );
117
+ }}
118
+ name="password"
119
+ />
120
+ <Button
121
+ mt="48"
122
+ loading={isVerifyingPhoneNumber}
123
+ mode="contained"
124
+ onPress={handleSubmit(onSubmit)}
125
+ >
126
+ {t('continue')}
127
+ </Button>
128
+ </KeyboardAvoidingView>
129
+ </View>
126
130
  </ParentView>
127
131
  );
128
132
  };
package/src/auth/screens/VerifyPhoneNumber.tsx CHANGED
@@ -6,6 +6,7 @@ import {
6
6
  LinkButton,
7
7
  OtpInputs,
8
8
  KeyboardAvoidingView,
9
+ Header,
9
10
  } from '../../components';
10
11
  import type { RouteProp } from '@react-navigation/native';
11
12
  import React from 'react';
@@ -47,58 +48,61 @@ export const VerifyPhoneNumberScreen: React.FC<
47
48
 
48
49
  return (
49
50
  <ParentView justifyContent="center" px="16">
50
- <KeyboardAvoidingView
51
- alignSelf="center"
52
- justifyContent={'center'}
53
- width={{ phone: '100%', tablet: 372 }}
54
- >
55
- <View alignItems="center">
56
- <Text pb="8" textAlign="center" variant="titleLarge">
57
- {t('authentication.verifyYourNumber')}
58
- </Text>
59
- <Text
60
- color="onSurfaceVariant"
61
- pb="48"
62
- textAlign="center"
63
- variant="bodyLarge"
64
- >
65
- {t('authentication.codeSent')}
66
- </Text>
67
- </View>
68
- <Controller
69
- control={control}
70
- render={({ field: { onChange, value } }) => {
71
- return (
72
- <OtpInputs
73
- handleChange={onChange}
74
- code={value}
75
- numberOfInputs={6}
76
- />
77
- );
78
- }}
79
- name="code"
80
- />
81
- <Button
82
- mt="48"
83
- disabled={isResendingCode || isSigningUp}
84
- loading={isSigningUp}
85
- mode="contained"
86
- onPress={handleSubmit(onSubmit)}
87
- >
88
- {t('continue')}
89
- </Button>
90
- <LinkButton
91
- disabled={isResendingCode || isSigningUp}
92
- loading={isResendingCode}
93
- mt="48"
94
- mode="text"
95
- onPress={() => {
96
- resendCode(params as any);
97
- }}
51
+ <Header />
52
+ <View flex={1} justifyContent={'center'}>
53
+ <KeyboardAvoidingView
54
+ alignSelf="center"
55
+ justifyContent={'center'}
56
+ width={{ phone: '100%', tablet: 372 }}
98
57
  >
99
- {t('authentication.resendCode')}
100
- </LinkButton>
101
- </KeyboardAvoidingView>
58
+ <View alignItems="center">
59
+ <Text pb="8" textAlign="center" variant="titleLarge">
60
+ {t('authentication.verifyYourNumber')}
61
+ </Text>
62
+ <Text
63
+ color="onSurfaceVariant"
64
+ pb="48"
65
+ textAlign="center"
66
+ variant="bodyLarge"
67
+ >
68
+ {t('authentication.codeSent')}
69
+ </Text>
70
+ </View>
71
+ <Controller
72
+ control={control}
73
+ render={({ field: { onChange, value } }) => {
74
+ return (
75
+ <OtpInputs
76
+ handleChange={onChange}
77
+ code={value}
78
+ numberOfInputs={6}
79
+ />
80
+ );
81
+ }}
82
+ name="code"
83
+ />
84
+ <Button
85
+ mt="48"
86
+ disabled={isResendingCode || isSigningUp}
87
+ loading={isSigningUp}
88
+ mode="contained"
89
+ onPress={handleSubmit(onSubmit)}
90
+ >
91
+ {t('continue')}
92
+ </Button>
93
+ <LinkButton
94
+ disabled={isResendingCode || isSigningUp}
95
+ loading={isResendingCode}
96
+ mt="48"
97
+ mode="text"
98
+ onPress={() => {
99
+ resendCode(params as any);
100
+ }}
101
+ >
102
+ {t('authentication.resendCode')}
103
+ </LinkButton>
104
+ </KeyboardAvoidingView>
105
+ </View>
102
106
  </ParentView>
103
107
  );
104
108
  };
package/src/components/TextInput.tsx CHANGED
@@ -49,6 +49,7 @@ const restyleFunctions = composeRestyleFunctions<ThemeType, RestyleProps>([
49
49
  type Props = RestyleProps &
50
50
  TextInputProps & {
51
51
  errorMessage?: string;
52
+ rightIcon?: React.ReactNode;
52
53
  };
53
54
 
54
55
  export const TextInputStyled = ({ ...rest }: Props) => {
@@ -60,6 +61,7 @@ export const TextInputStyled = ({ ...rest }: Props) => {
60
61
  export const TextInput: React.FC<Props> = ({
61
62
  errorMessage,
62
63
  secureTextEntry,
64
+ rightIcon,
63
65
  ...rest
64
66
  }) => {
65
67
  const [status, setStatus] = React.useState('checked');
@@ -78,7 +80,7 @@ export const TextInput: React.FC<Props> = ({
78
80
  secureTextEntry={shouldShowPassword && secureTextEntry}
79
81
  {...rest}
80
82
  />
81
- {secureTextEntry && (
83
+ {(secureTextEntry || rightIcon) && (
82
84
  <View
83
85
  pt="4"
84
86
  justifyContent="center"
@@ -86,11 +88,13 @@ export const TextInput: React.FC<Props> = ({
86
88
  position="absolute"
87
89
  width={48}
88
90
  >
89
- <ToggleButton
90
- icon={shouldShowPassword ? 'eye' : 'eye-off'}
91
- size={20}
92
- onPress={onButtonToggle}
93
- />
91
+ {rightIcon ?? (
92
+ <ToggleButton
93
+ icon={shouldShowPassword ? 'eye' : 'eye-off'}
94
+ size={20}
95
+ onPress={onButtonToggle}
96
+ />
97
+ )}
94
98
  </View>
95
99
  )}
96
100
  </View>
@@ -103,6 +107,7 @@ export const TextInput: React.FC<Props> = ({
103
107
  size={14}
104
108
  width={20}
105
109
  margin="0"
110
+ bg={'background'}
106
111
  iconColor={theme.colors.error}
107
112
  />
108
113
  <Text variant="bodySmall" color="error">