app-expo-cli 1.0.0

package/template/src/app/auth/opt_verify.tsx

@@ -0,0 +1,145 @@
+import { Image, Text, View } from "react-native";
+import { router, useGlobalSearchParams } from "expo-router";
+
+import AppBgWrapper from "@/src/components/common/AppBgWrapper";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { ImageAssets } from "@/assets/images/image";
+import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
+import { OtpInput } from "react-native-otp-entry";
+import React from "react";
+import TButton from "@/src/lib/buttons/TButton";
+import tw from "@/src/lib/tailwind";
+import { useEmailVerifyMutation } from "@/src/redux/apiSlices/authSlices";
+
+const Otp_verify = () => {
+  // Define validation schema using Yup
+
+  const [Otp, setOtp] = React.useState("");
+  const [email, setEmail] = React.useState("");
+
+  const [emailVerify, { isLoading }] = useEmailVerifyMutation();
+
+  const params = useGlobalSearchParams();
+
+  console.log(params);
+
+  const handleVerify = async (value: any) => {
+    try {
+      const verifyInfo = {
+        email: params?.email,
+        code: value,
+      };
+
+      console.log(verifyInfo);
+      const res = await emailVerify(verifyInfo).unwrap();
+      if (res?.success) {
+        if (params?.forgot) {
+          router?.push(`/auth/reset_pass?email=${params?.email}`);
+        } else if (params?.account) {
+          console.log(res);
+          await AsyncStorage.setItem("token", res?.data?.token);
+          router?.replace(`/auth/location_access`);
+        } else {
+          router?.push(`/auth`);
+        }
+      } else {
+        router.push(`/modals/toaster?content=${res?.message}`);
+      }
+    } catch (error: any) {
+      router.push(`/modals/toaster?content=${error?.message}`);
+    }
+  };
+
+  React.useLayoutEffect(() => {
+    if (params?.email) {
+      setEmail(params?.email as any);
+    }
+  }, [params?.email]);
+
+  return (
+    <AppBgWrapper>
+      <KeyboardAwareScrollView
+        style={tw`z-10 flex-1`}
+        contentContainerStyle={tw`items-center justify-center flex-1`}
+      >
+        <View style={tw`z-10 flex-1 items-center justify-center gap-8  p-5 `}>
+          <View style={tw`justify-center items-center  gap-2`}>
+            <Image
+              source={ImageAssets.logo}
+              style={tw`h-30 aspect-square mb-5`}
+              resizeMode="contain"
+            />
+            <View style={tw`items-center justify-center gap-2`}>
+              <Text
+                style={tw`text-white font-InterSemiBold text-2xl -tracking-[1px]`}
+              >
+                Enter OTP
+              </Text>
+              <Text
+                style={tw`text-white text-base text-center font-InterRegular -tracking-[1px]`}
+              >
+                We’ve sent you a 4 digit OTP to {`\n`}{" "}
+                {(email as any)?.split("@")[0]?.slice(0, 3) +
+                  "****@" +
+                  (email as any)?.split("@")[1]}
+              </Text>
+            </View>
+          </View>
+
+          <View style={tw` w-full items-center `}>
+            <View style={tw` w-full items-center`}>
+              {/* OTP Fields */}
+              <View style={tw` mb-4`}>
+                <OtpInput
+                  numberOfDigits={4}
+                  focusColor={tw.color("primary")}
+                  autoFocus={false}
+                  hideStick={true}
+                  placeholder="-"
+                  blurOnFilled={true}
+                  disabled={false}
+                  type="numeric"
+                  secureTextEntry={false}
+                  focusStickBlinkingDuration={500}
+                  onTextChange={async (text) => {
+                    // setValue(text);
+                    setOtp(text);
+                  }}
+                  // onFocus={() => console.log("Focused")}
+                  // onBlur={() => console.log("Blurred")}
+                  // onTextChange={(text) => console.log(text)}
+                  onFilled={async (text) => {
+                    console.log(`OTP is ${text}`);
+                    // router.push("/home/tabs");
+                    handleVerify(text);
+                  }}
+                  textInputProps={{
+                    accessibilityLabel: "One-Time Password",
+                  }}
+                  theme={{
+                    containerStyle: tw`rounded-full px-2 gap-2.5 mb-4`,
+                    pinCodeContainerStyle: tw`h-20 w-20 justify-center border-0 items-center bg-secondary rounded-2xl `,
+                    pinCodeTextStyle: tw`text-white text-2xl font-InterSemiBold `,
+                    placeholderTextStyle: tw`text-white text-2xl font-InterSemiBold `,
+                  }}
+                />
+              </View>
+              {/* Verify Button */}
+              <TButton
+                isLoading={isLoading}
+                title="Verify"
+                onPress={() => {
+                  // router.push("/auth/reset_pass");
+                  handleVerify(Otp);
+                }}
+                containerStyle={tw`w-full`}
+              />
+            </View>
+          </View>
+        </View>
+      </KeyboardAwareScrollView>
+    </AppBgWrapper>
+  );
+};
+
+export default Otp_verify;

package/template/src/app/auth/register.tsx

@@ -0,0 +1,334 @@
+import * as Yup from "yup";
+
+import { Image, Text, TouchableOpacity, View } from "react-native";
+import {
+  useGoogleLoginMutation,
+  useSignUpMutation,
+} from "@/src/redux/apiSlices/authSlices";
+
+import AppBgWrapper from "@/src/components/common/AppBgWrapper";
+import BackButton from "@/src/lib/backHeader/BackButton";
+import CheckBox from "@/src/lib/inputs/CheckBox";
+import { Formik } from "formik";
+import { Icon } from "@/assets/icons/Icon";
+import { ImageAssets } from "@/assets/images/image";
+import InputText from "@/src/lib/inputs/InputText";
+import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
+import Or from "@/src/lib/buttons/Or";
+import React from "react";
+import { SvgXml } from "react-native-svg";
+import TButton from "@/src/lib/buttons/TButton";
+import { router } from "expo-router";
+import tw from "@/src/lib/tailwind";
+
+const Register = () => {
+  const [showPassword, setShowPassword] = React.useState(false);
+  const [showPasswordTwo, setShowPasswordTwo] = React.useState(false);
+
+  const [checked, setChecked] = React.useState(false);
+
+  const [register, { isLoading }] = useSignUpMutation();
+  const [loginWithGoogle, googleResults] = useGoogleLoginMutation();
+
+  const handleRegister = async (values: any) => {
+    try {
+      // delete values?.confirmPassword;
+      // create new data without confirm password
+      const sendData = {
+        email: values.email,
+        password: values.password,
+        confirmPassword: values.confirmPassword,
+        name: values.name,
+        display_name: values.display_name,
+        gender: values.gender,
+      };
+      const res = await register(sendData).unwrap();
+      if (res?.success) {
+        router.push(`/auth/opt_verify?email=${values.email}&account=true`);
+      }
+      console.log(res);
+    } catch (error: any) {
+      // console.log(error);
+      router.push(`/modals/toaster?content=${error?.message}&time=4000`);
+    }
+  };
+
+  const handleLoginWithGoogle = async () => {
+    try {
+      const response = await loginWithGoogle({}).unwrap();
+      // console.log(response);
+      if (response?.success) {
+        // router.push("/home/tabs");
+        router.replace(`/auth/google_login?url=${`${response?.data}`}`);
+      } else {
+        router.push(`/modals/toaster?content=${response?.message}`);
+      }
+    } catch (error: any) {
+      router.push(`/modals/toaster?content=${error?.message}`);
+    }
+  };
+
+  // Define validation schema using Yup
+  const loginValidationSchema = Yup.object().shape({
+    email: Yup.string()
+      .email("Please enter a valid email")
+      .required("Email is required"),
+    password: Yup.string()
+      .min(6, ({ min }) => `Password must be at least ${min} characters`)
+      .required("Password is required"),
+    confirmPassword: Yup.string()
+      .min(6, ({ min }) => `Password must be at least ${min} characters`)
+      .required("Password is required")
+      .oneOf([Yup.ref("password")], "Passwords do not match"),
+    //   show match password to confirm password
+
+    name: Yup.string().required("Fullname is required"),
+    display_name: Yup.string().required("Display name is required"),
+  });
+
+  return (
+    <AppBgWrapper>
+      <KeyboardAwareScrollView style={tw`z-10 `}>
+        <BackButton
+          onPress={() => router.dismiss()}
+          containerStyle={tw`absolute top-0`}
+        />
+        <View style={tw`flex-1 items-center justify-center p-5`}>
+          <View style={tw`justify-center items-center  gap-2`}>
+            <Image
+              source={ImageAssets.logo}
+              style={tw`h-28 aspect-square `}
+              resizeMode="contain"
+            />
+            <View style={tw`items-center justify-center gap-1`}>
+              <Text
+                style={tw`text-white font-InterSemiBold text-2xl -tracking-[1px]`}
+              >
+                Create a new account
+              </Text>
+              <Text
+                style={tw`text-white text-base font-InterRegular -tracking-[1px]`}
+              >
+                Please input your details to sign up
+              </Text>
+            </View>
+          </View>
+
+          {/* Formik Wrapper */}
+          <Formik
+            initialValues={{
+              email: "",
+              password: "",
+              confirmPassword: "",
+              name: "",
+              display_name: "",
+              gender: "male",
+            }}
+            validationSchema={loginValidationSchema}
+            onSubmit={handleRegister}
+          >
+            {({
+              handleChange,
+              handleBlur,
+              handleSubmit,
+              values,
+              errors,
+              touched,
+              isValid,
+              setFieldValue,
+            }) => (
+              <View style={tw`w-full py-8 gap-6`}>
+                <View style={tw`gap-3`}>
+                  <InputText
+                    svgFirstIcon={Icon.user}
+                    textInputProps={{
+                      placeholder: "Your Full Name",
+                      placeholderTextColor: "#A9A9A9",
+                    }}
+                    value={values.name}
+                    onChangeText={handleChange("name")}
+                    onBlur={handleBlur("name")}
+                    touched={touched.name}
+                    errorText={errors.name}
+                  />
+                  <InputText
+                    svgFirstIcon={Icon.display_name}
+                    textInputProps={{
+                      placeholder: "Enter your display name",
+                      placeholderTextColor: "#A9A9A9",
+                    }}
+                    value={values.display_name}
+                    onChangeText={handleChange("display_name")}
+                    onBlur={handleBlur("display_name")}
+                    touched={touched.display_name}
+                    errorText={errors.display_name}
+                  />
+                  <InputText
+                    svgFirstIcon={Icon.email}
+                    textInputProps={{
+                      placeholder: "Email",
+                      placeholderTextColor: "#A9A9A9",
+                    }}
+                    value={values.email}
+                    onChangeText={handleChange("email")}
+                    onBlur={handleBlur("email")}
+                    touched={touched.email}
+                    errorText={errors.email}
+                  />
+                  <View style={tw` px-4`}>
+                    <Text style={tw`text-white font-InterRegular mb-2 `}>
+                      Gender
+                    </Text>
+                    <View style={tw`flex-row items-center gap-3`}>
+                      <TouchableOpacity
+                        onPress={() => setFieldValue("gender", "male")}
+                        style={
+                          values.gender === "male"
+                            ? tw`px-4 py-2 rounded-full bg-blue-500`
+                            : tw`px-4 py-2 rounded-full bg-[#3D3D3D]`
+                        }
+                      >
+                        <Text style={tw`text-white`}>Male</Text>
+                      </TouchableOpacity>
+                      <TouchableOpacity
+                        onPress={() => setFieldValue("gender", "female")}
+                        style={
+                          values.gender === "female"
+                            ? tw`px-4 py-2 rounded-full bg-blue-500`
+                            : tw`px-4 py-2 rounded-full bg-[#3D3D3D]`
+                        }
+                      >
+                        <Text style={tw`text-white`}>Female</Text>
+                      </TouchableOpacity>
+                    </View>
+                  </View>
+                  <InputText
+                    svgFirstIcon={Icon.lock}
+                    textInputProps={{
+                      placeholder: "Password",
+                      placeholderTextColor: "#A9A9A9",
+                      secureTextEntry: !showPassword,
+                    }}
+                    svgSecondIcon={!showPassword ? Icon.eyeOff : Icon.eye}
+                    svgSecondOnPress={() => setShowPassword(!showPassword)}
+                    value={values.password}
+                    onChangeText={handleChange("password")}
+                    onBlur={handleBlur("password")}
+                    touched={touched.password}
+                    errorText={errors.password}
+                  />
+                  <InputText
+                    svgFirstIcon={Icon.lock}
+                    textInputProps={{
+                      placeholder: "Confirm Password",
+                      placeholderTextColor: "#A9A9A9",
+                      secureTextEntry: !showPasswordTwo,
+                    }}
+                    svgSecondIcon={!showPasswordTwo ? Icon.eyeOff : Icon.eye}
+                    svgSecondOnPress={() =>
+                      setShowPasswordTwo(!showPasswordTwo)
+                    }
+                    value={values.confirmPassword}
+                    onChangeText={handleChange("confirmPassword")}
+                    onBlur={handleBlur("confirmPassword")}
+                    touched={touched.confirmPassword}
+                    errorText={errors.confirmPassword}
+                  />
+                </View>
+
+                <View style={tw`flex-row justify-between items-center`}>
+                  <View style={tw`flex-row items-center`}>
+                    <CheckBox
+                      checked={checked}
+                      onPress={() => setChecked(!checked)}
+                      containerStyle={tw`items-center flex-1`}
+                      titleComponent={
+                        <View style={tw` flex-row items-center gap-1`}>
+                          <Text
+                            style={tw`text-white font-InterRegular text-[13px]`}
+                          >
+                            Agree to
+                          </Text>
+                          <Text
+                            onPress={() =>
+                              router.push("/settings/terms_and_conditions")
+                            }
+                            style={tw`text-blue-500 underline font-InterRegular text-[13px]`}
+                          >
+                            Terms & conditions
+                          </Text>
+                          <Text
+                            style={tw`text-white font-InterRegular text-[13px]`}
+                          >
+                            and
+                          </Text>
+                          <Text
+                            onPress={() =>
+                              router.push("/settings/privacy_policy")
+                            }
+                            style={tw` text-blue-500 underline font-InterRegular text-[13px]`}
+                          >
+                            Privacy policy
+                          </Text>
+                          <Text
+                            style={tw`text-white font-InterRegular text-[13px]`}
+                          >
+                            .
+                          </Text>
+                        </View>
+                      }
+                    />
+                  </View>
+                </View>
+
+                {/* Submit button calls handleSubmit from Formik */}
+                <TButton
+                  isLoading={isLoading}
+                  title="Sign Up"
+                  onPress={() => {
+                    handleSubmit();
+                    // router.push("/auth/opt_verify");
+                  }}
+                  disabled={!isValid || !checked}
+                />
+
+                <Or title="Or continue with" />
+                <View style={tw`flex-row justify-center items-center gap-5`}>
+                  <TouchableOpacity
+                    onPress={handleLoginWithGoogle}
+                    style={tw`w-16 h-16 rounded-full bg-[#3D3D3D] items-center justify-center`}
+                  >
+                    <SvgXml xml={Icon.google} />
+                  </TouchableOpacity>
+                  {/* <TouchableOpacity
+                    style={tw`w-16 h-16 rounded-full bg-[#3D3D3D] items-center justify-center`}
+                  >
+                    <SvgXml xml={Icon.apple} />
+                  </TouchableOpacity> */}
+                </View>
+
+                <View style={tw`flex-row justify-center mt-6`}>
+                  <Text style={tw`text-white`}>Already have an account?</Text>
+                  <TouchableOpacity
+                    onPress={() => {
+                      router.replace("/auth");
+                    }}
+                    style={tw`flex-row items-center gap-3`}
+                  >
+                    <Text style={tw`text-[#339DFF] underline ml-1`}>
+                      Sign In
+                    </Text>
+                    <SvgXml xml={Icon.play} />
+                  </TouchableOpacity>
+                </View>
+              </View>
+            )}
+          </Formik>
+          {/* End of Formik Wrapper */}
+        </View>
+      </KeyboardAwareScrollView>
+    </AppBgWrapper>
+  );
+};
+
+export default Register;

package/template/src/app/auth/reset_pass.tsx

@@ -0,0 +1,152 @@
+import * as Yup from "yup";
+
+import { Image, Text, View } from "react-native";
+import { router, useGlobalSearchParams } from "expo-router";
+
+import AppBgWrapper from "@/src/components/common/AppBgWrapper";
+import BackButton from "@/src/lib/backHeader/BackButton";
+import { Formik } from "formik";
+import { Icon } from "@/assets/icons/Icon";
+import { ImageAssets } from "@/assets/images/image";
+import InputText from "@/src/lib/inputs/InputText";
+import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
+import React from "react";
+import TButton from "@/src/lib/buttons/TButton";
+import tw from "@/src/lib/tailwind";
+import { useResetPasswordMutation } from "@/src/redux/apiSlices/authSlices";
+
+const Rest_pass = () => {
+  const [showPassword, setShowPassword] = React.useState(false);
+  const [showPasswordTwo, setShowPasswordTwo] = React.useState(false);
+  const [resetPassword, { isLoading }] = useResetPasswordMutation();
+  const { email } = useGlobalSearchParams();
+  const handleResetPassword = async (values: any) => {
+    try {
+      values.email = email;
+
+      const res = await resetPassword(values).unwrap();
+      if (res?.success) {
+        router.push(
+          "/auth/change_pass_modal?title=You’re All Set!&subtitle=Your password has been changed successfully!&buttonTitle=Back to login&route=/auth"
+        );
+      } else {
+        router.push(`/modals/toaster?content=${res?.message}`);
+      }
+    } catch (error: any) {
+      router.push(`/modals/toaster?content=${error?.message}`);
+    }
+  };
+
+  // Define validation schema using Yup
+  const loginValidationSchema = Yup.object().shape({
+    new_password: Yup.string()
+      .min(6, ({ min }) => `Password must be at least ${min} characters`)
+      .required("Password is required"),
+    c_password: Yup.string()
+      .min(6, ({ min }) => `Password must be at least ${min} characters`)
+      .required("Password is required")
+      .oneOf([Yup.ref("new_password")], "Passwords do not match"),
+    //   show match password to confirm password
+  });
+
+  return (
+    <AppBgWrapper>
+      <BackButton
+        onPress={() => router.dismiss()}
+        containerStyle={tw`absolute top-5`}
+      />
+      <KeyboardAwareScrollView
+        style={tw`z-10 flex-1`}
+        contentContainerStyle={tw`items-center justify-center flex-1`}
+      >
+        <View style={tw`z-10 flex-1 items-center justify-center  p-5`}>
+          <View style={tw`justify-center items-center  gap-2`}>
+            <Image
+              source={ImageAssets.logo}
+              style={tw`h-30 aspect-square mb-5`}
+              resizeMode="contain"
+            />
+            <View style={tw`items-center justify-center gap-2`}>
+              <Text
+                style={tw`text-white font-InterSemiBold text-2xl -tracking-[1px]`}
+              >
+                Reset Password
+              </Text>
+              <Text
+                style={tw`text-white text-base text-center font-InterRegular -tracking-[1px]`}
+              >
+                Enter a new password for your account
+              </Text>
+            </View>
+          </View>
+
+          {/* Formik Wrapper */}
+          <Formik
+            initialValues={{ new_password: "", c_password: "" }}
+            validationSchema={loginValidationSchema}
+            onSubmit={handleResetPassword}
+          >
+            {({
+              handleChange,
+              handleBlur,
+              handleSubmit,
+              values,
+              errors,
+              touched,
+              isValid,
+            }) => (
+              <View style={tw`w-full py-8 gap-6`}>
+                <View style={tw`gap-3`}>
+                  <InputText
+                    svgFirstIcon={Icon.lock}
+                    textInputProps={{
+                      placeholder: "New Password",
+                      placeholderTextColor: "#A9A9A9",
+                      secureTextEntry: !showPassword,
+                    }}
+                    svgSecondIcon={showPassword ? Icon.eye : Icon.eyeOff}
+                    svgSecondOnPress={() => setShowPassword(!showPassword)}
+                    value={values.new_password}
+                    onChangeText={handleChange("new_password")}
+                    onBlur={handleBlur("new_password")}
+                    touched={touched.new_password}
+                    errorText={errors.new_password}
+                  />
+                  <InputText
+                    svgFirstIcon={Icon.lock}
+                    textInputProps={{
+                      placeholder: "Confirm New Password",
+                      placeholderTextColor: "#A9A9A9",
+                      secureTextEntry: !showPasswordTwo,
+                    }}
+                    svgSecondIcon={showPasswordTwo ? Icon.eye : Icon.eyeOff}
+                    svgSecondOnPress={() =>
+                      setShowPasswordTwo(!showPasswordTwo)
+                    }
+                    value={values.c_password}
+                    onChangeText={handleChange("c_password")}
+                    onBlur={handleBlur("c_password")}
+                    touched={touched.c_password}
+                    errorText={errors.c_password}
+                  />
+                </View>
+
+                {/* Submit button calls handleSubmit from Formik */}
+                <TButton
+                  isLoading={isLoading}
+                  title="Change password"
+                  onPress={() => {
+                    handleSubmit();
+                  }}
+                  disabled={!isValid}
+                />
+              </View>
+            )}
+          </Formik>
+        </View>
+      </KeyboardAwareScrollView>
+    </AppBgWrapper>
+  );
+};
+
+export default Rest_pass;