@kiosinc/commons-rn 0.1.7

package/src/auth/screens/LoginScreen.tsx

@@ -0,0 +1,140 @@
+import {
+  ParentView,
+  Text,
+  View,
+  TextInput,
+  Button,
+  LinkButton,
+  KeyboardAvoidingView,
+  Snackbar,
+} from '../../components';
+import { type NavigationProp, useNavigation } from '@react-navigation/native';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import AppLogo from '../appLogo.svg';
+import { Controller, useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { loginValidationSchema } from './validators';
+import auth from '@react-native-firebase/auth';
+
+type FormData = {
+  email: string;
+  password: string;
+};
+
+export const LoginScreen = () => {
+  const { t } = useTranslation();
+  const navigation = useNavigation<NavigationProp<RootStackType>>();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm<FormData>({
+    resolver: yupResolver(loginValidationSchema),
+    defaultValues: {
+      email: '',
+      password: '',
+    },
+  });
+
+  const onSubmit = (data: FormData) => {
+    setIsLoading(true);
+    auth()
+      .signInWithEmailAndPassword(data.email, data.password)
+      .catch(() => {
+        Snackbar.show({ title: t('authentication.wrongCredentials') });
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  };
+
+  return (
+    <ParentView px="16">
+      <KeyboardAvoidingView flex={1} justifyContent="center">
+        <View alignItems="center">
+          <AppLogo />
+          <Text py="48" variant="titleLarge">
+            {t('authentication.logIn')}
+          </Text>
+        </View>
+        <Controller
+          control={control}
+          render={({ field: { onChange, onBlur, value } }) => {
+            return (
+              <TextInput
+                my="5"
+                keyboardType="email-address"
+                autoCapitalize="none"
+                mode="outlined"
+                autoComplete="email"
+                error={!!errors.email?.message}
+                errorMessage={errors.email?.message}
+                onBlur={onBlur}
+                onChangeText={onChange}
+                value={value}
+                label={t('authentication.email')}
+              />
+            );
+          }}
+          name="email"
+        />
+        <Controller
+          control={control}
+          render={({ field: { onChange, onBlur, value } }) => {
+            return (
+              <TextInput
+                my="5"
+                secureTextEntry={true}
+                mode="outlined"
+                autoComplete="current-password"
+                error={!!errors.password?.message}
+                errorMessage={errors.password?.message}
+                onBlur={onBlur}
+                onChangeText={onChange}
+                value={value}
+                label={t('authentication.password')}
+              />
+            );
+          }}
+          name="password"
+        />
+        <LinkButton
+          alignSelf="flex-end"
+          mode="text"
+          onPress={() => {
+            navigation.navigate('ResetPassword');
+          }}
+        >
+          {t('authentication.forgotPassword')}
+        </LinkButton>
+        <Button
+          loading={isLoading}
+          mt="38"
+          mode="contained"
+          onPress={handleSubmit(onSubmit)}
+        >
+          {t('authentication.logIn')}
+        </Button>
+        <View
+          alignItems="center"
+          justifyContent="center"
+          pt="8"
+          flexDirection="row"
+        >
+          <Text variant="labelLarge">{t('authentication.newToApp')}</Text>
+          <LinkButton
+            mode="text"
+            onPress={() => {
+              navigation.navigate('SignUp');
+            }}
+          >
+            {t('authentication.signUp')}
+          </LinkButton>
+        </View>
+      </KeyboardAvoidingView>
+    </ParentView>
+  );
+};

package/src/auth/screens/ResetPassword.tsx

@@ -0,0 +1,85 @@
+import {
+  ParentView,
+  Text,
+  View,
+  TextInput,
+  Button,
+  KeyboardAvoidingView,
+} from '../../components';
+import { type NavigationProp, useNavigation } from '@react-navigation/native';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Controller, useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { resetPasswordValidationSchema } from './validators';
+import { useAuthentication } from '../hooks/useAuthentication';
+
+type FormData = {
+  email: string;
+};
+
+export const ResetPasswordScreen = () => {
+  const { t } = useTranslation();
+  const navigation = useNavigation<NavigationProp<RootStackType>>();
+  const { useResetPassword } = useAuthentication();
+  const { mutate: resetPassword, isLoading } = useResetPassword();
+
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm<FormData>({
+    resolver: yupResolver(resetPasswordValidationSchema),
+    defaultValues: {
+      email: '',
+    },
+  });
+
+  const onSubmit = async (data: FormData) => {
+    resetPassword({ email: data.email });
+  };
+
+  return (
+    <ParentView justifyContent="center" px="16">
+      <KeyboardAvoidingView>
+        <View alignItems="center">
+          <Text py="48" textAlign="center" variant="titleLarge">
+            {t('authentication.enterYour')}
+          </Text>
+        </View>
+        <Controller
+          control={control}
+          render={({ field: { onChange, onBlur, value } }) => {
+            return (
+              <TextInput
+                keyboardType="email-address"
+                autoCapitalize="none"
+                mode="outlined"
+                autoComplete="email"
+                error={!!errors.email?.message}
+                errorMessage={errors.email?.message}
+                onBlur={onBlur}
+                onChangeText={onChange}
+                value={value}
+                label={t('authentication.email')}
+              />
+            );
+          }}
+          name="email"
+        />
+        <Button
+          loading={isLoading}
+          disabled={isLoading}
+          mt="16"
+          mode="contained"
+          onPress={handleSubmit(onSubmit)}
+        >
+          {t('authentication.resetPassword')}
+        </Button>
+        <Button mt="48" mode="outlined" onPress={navigation.goBack}>
+          {t('cancel')}
+        </Button>
+      </KeyboardAvoidingView>
+    </ParentView>
+  );
+};

package/src/auth/screens/ResetPasswordInstructionsSent.tsx

@@ -0,0 +1,32 @@
+import { ParentView, Text, Button } from '../../components';
+import {
+  type NavigationProp,
+  type RouteProp,
+  useNavigation,
+} from '@react-navigation/native';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+type ResetPasswordInstructionSentProps = {
+  route: RouteProp<RootStackType, 'ResetPasswordInstructionSent'>;
+};
+
+export const ResetPasswordInstructionSent: React.FC<
+  ResetPasswordInstructionSentProps
+> = ({ route }) => {
+  const { t } = useTranslation();
+  const navigation = useNavigation<NavigationProp<RootStackType>>();
+
+  return (
+    <ParentView justifyContent="center" px="16">
+      <Text py="48" textAlign="center" variant="titleLarge">
+        {t('authentication.resetPasswordInstructionSent', {
+          email: route.params?.email,
+        })}
+      </Text>
+      <Button mode="outlined" onPress={() => navigation.navigate('Login')}>
+        {t('authentication.backToLogin')}
+      </Button>
+    </ParentView>
+  );
+};

package/src/auth/screens/SignUp.tsx

@@ -0,0 +1,176 @@
+import {
+  ParentView,
+  Text,
+  View,
+  TextInput,
+  Button,
+  LinkButton,
+  KeyboardAvoidingView,
+} from '../../components';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { StyleSheet } from 'react-native';
+import { Controller, useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { signUpValidationSchema } from './validators';
+import { useAuthentication } from '../hooks/useAuthentication';
+
+export type TUserForm = {
+  displayName: string;
+  email: string;
+  phoneNumber: string;
+  name: string;
+};
+
+export const SignUpScreen = () => {
+  const { t } = useTranslation();
+  const { useIsCheckRegistered } = useAuthentication();
+  const { mutate: checkRegistration, isLoading: isCheckingIsRegistered } =
+    useIsCheckRegistered();
+
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm<TUserForm>({
+    criteriaMode: 'all',
+    resolver: yupResolver(signUpValidationSchema),
+    defaultValues: {
+      email: '',
+      name: '',
+      displayName: '',
+      phoneNumber: '',
+    },
+  });
+
+  const onSubmit = (data: TUserForm) => {
+    checkRegistration(data);
+  };
+
+  return (
+    <ParentView px="16">
+      <KeyboardAvoidingView flex={1} justifyContent="center">
+        <View alignItems="center">
+          <Text pb="40" variant="titleLarge">
+            {t('authentication.createAccountTitle')}
+          </Text>
+        </View>
+        <View justifyContent="center">
+          <Controller
+            control={control}
+            render={({ field: { onChange, onBlur, value } }) => {
+              return (
+                <TextInput
+                  my="5"
+                  mode="outlined"
+                  error={!!errors.displayName?.message}
+                  errorMessage={errors.displayName?.message}
+                  onBlur={onBlur}
+                  onChangeText={onChange}
+                  value={value}
+                  label={t('authentication.displayName')}
+                />
+              );
+            }}
+            name="displayName"
+          />
+          <Controller
+            control={control}
+            render={({ field: { onChange, onBlur, value } }) => {
+              return (
+                <TextInput
+                  my="5"
+                  mode="outlined"
+                  error={!!errors.name?.message}
+                  errorMessage={errors.name?.message}
+                  onBlur={onBlur}
+                  onChangeText={onChange}
+                  value={value}
+                  label={t('authentication.businessName')}
+                />
+              );
+            }}
+            name="name"
+          />
+          <Controller
+            control={control}
+            render={({ field: { onChange, onBlur, value } }) => {
+              return (
+                <TextInput
+                  my="5"
+                  autoCapitalize="none"
+                  keyboardType="email-address"
+                  mode="outlined"
+                  autoComplete="email"
+                  error={!!errors.email?.message}
+                  errorMessage={errors.email?.message}
+                  onBlur={onBlur}
+                  onChangeText={onChange}
+                  value={value}
+                  label={t('authentication.email')}
+                />
+              );
+            }}
+            name="email"
+          />
+          <Controller
+            control={control}
+            render={({ field: { onChange, onBlur, value } }) => {
+              return (
+                <TextInput
+                  my="5"
+                  mode="outlined"
+                  error={!!errors.phoneNumber?.message}
+                  errorMessage={errors.phoneNumber?.message}
+                  onBlur={onBlur}
+                  onChangeText={onChange}
+                  value={value}
+                  label={t('authentication.phoneNumber')}
+                />
+              );
+            }}
+            name="phoneNumber"
+          />
+        </View>
+        <Button
+          loading={isCheckingIsRegistered}
+          mt="48"
+          onPress={handleSubmit(onSubmit)}
+          mode="contained"
+        >
+          {t('authentication.createAccount')}
+        </Button>
+        <View flexDirection="row" flexWrap="wrap" pt="10">
+          <Text>{t('authentication.byContinue')}</Text>
+          <LinkButton
+            labelStyle={style.termsAndConditions}
+            mode="text"
+            onPress={() => {}}
+          >
+            {t('authentication.termsAndConditions')}
+          </LinkButton>
+          <Text>{t('authentication.and')}</Text>
+          <LinkButton
+            labelStyle={style.privacyPolicy}
+            mode="text"
+            onPress={() => {}}
+          >
+            {t('authentication.privacyPolicy')}
+          </LinkButton>
+        </View>
+      </KeyboardAvoidingView>
+    </ParentView>
+  );
+};
+
+const style = StyleSheet.create({
+  termsAndConditions: {
+    marginHorizontal: 0,
+    marginRight: 10,
+    marginVertical: 0,
+  },
+  privacyPolicy: {
+    marginHorizontal: 10,
+    marginVertical: 0,
+  },
+});

package/src/auth/screens/SignUpPassword.tsx

@@ -0,0 +1,124 @@
+import {
+  ParentView,
+  Text,
+  View,
+  Button,
+  KeyboardAvoidingView,
+  TextInput,
+} from '../../components';
+import type { RouteProp } from '@react-navigation/native';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Controller, useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { passwordVerificationSchema } from './validators';
+import { useAuthentication } from '../hooks/useAuthentication';
+
+type FormData = {
+  password: string;
+};
+
+type SignUpPasswordProps = {
+  route: RouteProp<RootStackType, 'SignUpPassword'>;
+};
+
+export const SignUpPassword: React.FC<SignUpPasswordProps> = ({ route }) => {
+  const params = route.params;
+  const { t } = useTranslation();
+  const { useVerifyPhoneNumber } = useAuthentication();
+  const { mutate: verifyPhoneNumber, isLoading: isVerifyingPhoneNumber } =
+    useVerifyPhoneNumber();
+  const passwordExpectations = [
+    t('authentication.minLength'),
+    t('authentication.1lowerChar'),
+    t('authentication.1upperChar'),
+    t('authentication.1number'),
+    t('authentication.1special'),
+  ];
+
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitted },
+  } = useForm<FormData>({
+    criteriaMode: 'all',
+    resolver: yupResolver(passwordVerificationSchema),
+    defaultValues: {
+      password: '',
+    },
+  });
+
+  const onSubmit = (data: FormData) => {
+    verifyPhoneNumber({
+      ...params,
+      password: data.password,
+    } as any);
+  };
+
+  return (
+    <ParentView justifyContent="center" px="16">
+      <KeyboardAvoidingView>
+        <View alignItems="center">
+          <Text textAlign="center" variant="titleLarge">
+            {t('authentication.createPassword')}
+          </Text>
+        </View>
+        <Controller
+          control={control}
+          render={({ field: { onChange, onBlur, value } }) => {
+            const passwordErrors = Object.values(
+              errors.password?.types ?? []
+            ).flat();
+
+            return (
+              <View mt="48">
+                <TextInput
+                  error={!!errors.password?.message}
+                  my="5"
+                  secureTextEntry={true}
+                  mode="outlined"
+                  autoComplete="new-password"
+                  onBlur={onBlur}
+                  onChangeText={onChange}
+                  value={value}
+                  label={t('authentication.password')}
+                />
+                <Text pt="4">{t('authentication.passwordMustContain')}</Text>
+                {passwordExpectations.map((expectation, index) => {
+                  const didExpectationFoundInErrors =
+                    passwordErrors?.includes(expectation) ?? false;
+
+                  return (
+                    <View flexDirection="row" alignItems="center" key={index}>
+                      <Text
+                        variant="bodySmall"
+                        color={
+                          isSubmitted
+                            ? didExpectationFoundInErrors
+                              ? 'error'
+                              : 'primary'
+                            : 'onBackground'
+                        }
+                      >
+                        {'•  ' + expectation}
+                      </Text>
+                    </View>
+                  );
+                })}
+              </View>
+            );
+          }}
+          name="password"
+        />
+        <Button
+          mt="48"
+          loading={isVerifyingPhoneNumber}
+          mode="contained"
+          onPress={handleSubmit(onSubmit)}
+        >
+          {t('continue')}
+        </Button>
+      </KeyboardAvoidingView>
+    </ParentView>
+  );
+};

package/src/auth/screens/VerifyPhoneNumber.tsx

@@ -0,0 +1,100 @@
+import {
+  ParentView,
+  Text,
+  View,
+  Button,
+  LinkButton,
+  OtpInputs,
+  KeyboardAvoidingView,
+} from '../../components';
+import type { RouteProp } from '@react-navigation/native';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Controller, useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { verificationValidationSchema } from './validators';
+import { useAuthentication } from '../hooks/useAuthentication';
+
+type FormData = {
+  code: string;
+};
+
+type VerifyPhoneNumberScreenProps = {
+  route: RouteProp<RootStackType, 'VerifyPhoneNumber'>;
+};
+
+export const VerifyPhoneNumberScreen: React.FC<
+  VerifyPhoneNumberScreenProps
+> = ({ route }) => {
+  const params = route.params;
+  const { t } = useTranslation();
+  const { useSignUp, useVerifyPhoneNumber } = useAuthentication();
+
+  const { mutate: signUp, isLoading: isSigningUp } = useSignUp();
+  const { mutate: resendCode, isLoading: isResendingCode } =
+    useVerifyPhoneNumber();
+
+  const { handleSubmit, control } = useForm<FormData>({
+    resolver: yupResolver(verificationValidationSchema),
+    defaultValues: {
+      code: '',
+    },
+  });
+
+  const onSubmit = (data: FormData) => {
+    signUp({ params, code: data.code } as any);
+  };
+
+  return (
+    <ParentView justifyContent="center" px="16">
+      <KeyboardAvoidingView>
+        <View alignItems="center">
+          <Text pb="8" textAlign="center" variant="titleLarge">
+            {t('authentication.verifyYourNumber')}
+          </Text>
+          <Text
+            color="onSurfaceVariant"
+            pb="48"
+            textAlign="center"
+            variant="bodyLarge"
+          >
+            {t('authentication.codeSent')}
+          </Text>
+        </View>
+        <Controller
+          control={control}
+          render={({ field: { onChange, value } }) => {
+            return (
+              <OtpInputs
+                handleChange={onChange}
+                code={value}
+                numberOfInputs={6}
+              />
+            );
+          }}
+          name="code"
+        />
+        <Button
+          mt="48"
+          disabled={isResendingCode}
+          loading={isSigningUp}
+          mode="contained"
+          onPress={handleSubmit(onSubmit)}
+        >
+          {t('continue')}
+        </Button>
+        <LinkButton
+          disabled={isSigningUp}
+          loading={isResendingCode}
+          mt="48"
+          mode="text"
+          onPress={() => {
+            resendCode(params as any);
+          }}
+        >
+          {t('authentication.resendCode')}
+        </LinkButton>
+      </KeyboardAvoidingView>
+    </ParentView>
+  );
+};

package/src/auth/screens/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { LoginScreen } from './LoginScreen';
+import { ResetPasswordScreen } from './ResetPassword';
+import { ResetPasswordInstructionSent } from './ResetPasswordInstructionsSent';
+import { SignUpScreen } from './SignUp';
+import { VerifyPhoneNumberScreen } from './VerifyPhoneNumber';
+import { SignUpPassword } from './SignUpPassword';
+
+export const renderAuthNavigator = (RootStack: any) => {
+  return (
+    <RootStack.Group>
+      <RootStack.Screen name="Login" component={LoginScreen} />
+      <RootStack.Screen name="ResetPassword" component={ResetPasswordScreen} />
+      <RootStack.Screen
+        name="ResetPasswordInstructionSent"
+        component={ResetPasswordInstructionSent}
+      />
+      <RootStack.Screen name="SignUp" component={SignUpScreen} />
+      <RootStack.Screen
+        name="VerifyPhoneNumber"
+        component={VerifyPhoneNumberScreen}
+      />
+      <RootStack.Screen name="SignUpPassword" component={SignUpPassword} />
+    </RootStack.Group>
+  );
+};