app-expo-cli 1.0.0

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

@@ -0,0 +1,138 @@
+import * as Yup from "yup";
+
+import { ScrollView, View } from "react-native";
+
+import { Icon } from "@/assets/icons/Icon";
+import BackButton from "@/src/lib/backHeader/BackButton";
+import TButton from "@/src/lib/buttons/TButton";
+import InputText from "@/src/lib/inputs/InputText";
+import tw from "@/src/lib/tailwind";
+import { useChangePasswordMutation } from "@/src/redux/apiSlices/authSlices";
+import { router } from "expo-router";
+import { Formik } from "formik";
+import React from "react";
+
+// --- Icon Placeholders ---
+
+// --- Yup Validation Schema ---
+const ChangePasswordSchema = Yup.object().shape({
+  old_password: Yup.string().required("Current password is required"),
+  new_password: Yup.string()
+    .min(6, "Password must be at least 6 characters")
+    .required("New password is required")
+    .notOneOf(
+      [Yup.ref("old_password"), null],
+      "New password must be different from current password"
+    ),
+  c_password: Yup.string()
+    .oneOf([Yup.ref("new_password"), null], "Passwords must match")
+    .required("Please confirm your new password"),
+});
+
+// --- Reusable Password Input Component ---
+
+// --- Main Change Password Screen Component ---
+const ChangePasswordScreen = () => {
+  // const []
+
+  const [changePass, { isLoading }] = useChangePasswordMutation();
+
+  const handleSaveChanges = async (values: any) => {
+    try {
+      const res = await changePass(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"
+        );
+      } else {
+        router.push(`/modals/toaster?content=${res?.message}`);
+      }
+    } catch (error: any) {
+      router.push(`/modals/toaster?content=${error?.message}`);
+    }
+  };
+
+  return (
+    <Formik
+      initialValues={{
+        old_password: "",
+        new_password: "",
+        c_password: "",
+      }}
+      validationSchema={ChangePasswordSchema}
+      onSubmit={handleSaveChanges}
+    >
+      {({
+        handleChange,
+        handleBlur,
+        handleSubmit,
+        values,
+        errors,
+        touched,
+      }) => (
+        <View style={tw`flex-1 bg-[#121212]`}>
+          {/* Header */}
+          <BackButton
+            onPress={() => router.dismiss()}
+            title="Change Password"
+          />
+
+          <ScrollView contentContainerStyle={tw`p-5 mt-4 gap-5`}>
+            <InputText
+              textInputProps={{
+                placeholder: "Current Password",
+                placeholderTextColor: "#A9A9A9",
+              }}
+              variant="password"
+              svgFirstIcon={Icon.lock}
+              value={values.old_password}
+              errorText={errors.old_password}
+              touched={touched.old_password}
+              onChangeText={handleChange("old_password")}
+              onBlur={handleBlur("old_password")}
+            />
+
+            <InputText
+              textInputProps={{
+                placeholder: "New Password",
+                placeholderTextColor: "#A9A9A9",
+              }}
+              variant="password"
+              svgFirstIcon={Icon.lock}
+              value={values.new_password}
+              errorText={errors.new_password}
+              touched={touched.new_password}
+              onChangeText={handleChange("new_password")}
+              onBlur={handleBlur("new_password")}
+            />
+
+            <InputText
+              textInputProps={{
+                placeholder: "Confirm New Password",
+                placeholderTextColor: "#A9A9A9",
+              }}
+              variant="password"
+              svgFirstIcon={Icon.lock}
+              value={values.c_password}
+              errorText={errors.c_password}
+              touched={touched.c_password}
+              onChangeText={handleChange("c_password")}
+              onBlur={handleBlur("c_password")}
+            />
+          </ScrollView>
+
+          {/* Save Changes Button */}
+          <TButton
+            isLoading={isLoading}
+            onPress={handleSubmit}
+            containerStyle={tw`m-5`}
+            title="Save Changes"
+          />
+        </View>
+      )}
+    </Formik>
+  );
+};
+
+export default ChangePasswordScreen;

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

@@ -0,0 +1,74 @@
+import { router, useGlobalSearchParams } from "expo-router";
+import { Platform, Pressable, Text, View } from "react-native";
+
+import { Icon } from "@/assets/icons/Icon";
+import TButton from "@/src/lib/buttons/TButton";
+import tw from "@/src/lib/tailwind";
+import { BlurView } from "expo-blur";
+import React from "react";
+import { SvgXml } from "react-native-svg";
+
+const Change_pass_modal = () => {
+  const params = useGlobalSearchParams();
+  // ?title='You’re All Set!'&subtitle='Your password has been changed successfully!'&buttonTitle='Back to login'&route='/auth
+  const { title, subtitle, buttonTitle, route }: any = params;
+  const CommonContent = () => {
+    return (
+      <View style={tw`items-center gap-5 w-full`}>
+        <SvgXml xml={Icon.check} />
+
+        <View style={tw`gap-2 w-full items-center`}>
+          <Text style={tw`text-white text-xl font-semibold text-center`}>
+            {title || "You’re All Set!"}
+          </Text>
+          <Text style={tw`text-gray-400 text-sm font-semibold text-center`}>
+            {subtitle || "Your password has been changed successfully!"}
+          </Text>
+        </View>
+
+        <TButton
+          containerStyle={tw`w-4/5  mt-3 self-center`}
+          onPress={() => {
+            router?.dismiss();
+            // router.push("/profile_setup");
+            if (route as string) {
+              router.push(route as any);
+            } else {
+              router?.dismiss();
+            }
+          }}
+          title={buttonTitle || "Back to login"}
+        />
+      </View>
+    );
+  };
+
+  return (
+    <Pressable
+      onPress={() => {
+        router.dismiss();
+      }}
+      style={tw`flex-1 bg-black/45 items-center justify-center`}
+    >
+      {Platform.OS === "ios" ? (
+        <BlurView
+          style={tw`w-[90%] h-[80]  rounded-xl overflow-hidden items-center justify-center p-4`}
+          tint="dark"
+          blurReductionFactor={5}
+          intensity={100}
+          experimentalBlurMethod="dimezisBlurView"
+        >
+          <CommonContent />
+        </BlurView>
+      ) : (
+        <View
+          style={tw`w-[90%] h-[80] bg-black/85 border border-secondary rounded-xl overflow-hidden items-center justify-center p-4`}
+        >
+          <CommonContent />
+        </View>
+      )}
+    </Pressable>
+  );
+};
+
+export default Change_pass_modal;

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

@@ -0,0 +1,124 @@
+import * as Yup from "yup";
+
+import { Image, Text, View } from "react-native";
+
+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 { router } from "expo-router";
+import tw from "@/src/lib/tailwind";
+import { useForgotMutation } from "@/src/redux/apiSlices/authSlices";
+
+const Forgot = () => {
+  const [forgot, { isLoading }] = useForgotMutation();
+
+  const handleForgot = async (values: any) => {
+    try {
+      const res = await forgot(values).unwrap();
+      if (res?.success) {
+        router.push(`/modals/toaster?content=${res?.message}`);
+        router.replace(`/auth/opt_verify?email=${values.email}&forgot=true`);
+      } 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({
+    email: Yup.string()
+      .email("Please enter a valid email")
+      .required("Email is required"),
+  });
+
+  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]`}
+              >
+                Forgot password ?
+              </Text>
+              <Text
+                style={tw`text-white text-base text-center font-InterRegular -tracking-[1px]`}
+              >
+                Enter the email address that you used to create your account. We
+                will send an OTP to reset your password.
+              </Text>
+            </View>
+          </View>
+
+          {/* Formik Wrapper */}
+          <Formik
+            initialValues={{ email: "" }}
+            validationSchema={loginValidationSchema}
+            onSubmit={handleForgot}
+          >
+            {({
+              handleChange,
+              handleBlur,
+              handleSubmit,
+              values,
+              errors,
+              touched,
+              isValid,
+            }) => (
+              <View style={tw`w-full py-8 gap-6`}>
+                <View style={tw`gap-3`}>
+                  <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>
+
+                {/* Submit button calls handleSubmit from Formik */}
+                <TButton
+                  title="Get OTP"
+                  isLoading={isLoading}
+                  onPress={() => {
+                    handleSubmit();
+                    // router.push("/auth/opt_verify");
+                  }}
+                  disabled={!isValid}
+                />
+              </View>
+            )}
+          </Formik>
+        </View>
+      </KeyboardAwareScrollView>
+    </AppBgWrapper>
+  );
+};
+
+export default Forgot;

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

@@ -0,0 +1,274 @@
+import * as Yup from "yup";
+
+import {
+  useGoogleLoginMutation,
+  useLoginMutation,
+} from "@/src/redux/apiSlices/authSlices";
+import { Image, Text, TouchableOpacity, View } from "react-native";
+
+import { Icon } from "@/assets/icons/Icon";
+import { ImageAssets } from "@/assets/images/image";
+import AppBgWrapper from "@/src/components/common/AppBgWrapper";
+import IButton from "@/src/lib/buttons/IButton";
+import Or from "@/src/lib/buttons/Or";
+import TButton from "@/src/lib/buttons/TButton";
+import CheckBox from "@/src/lib/inputs/CheckBox";
+import InputText from "@/src/lib/inputs/InputText";
+import tw from "@/src/lib/tailwind";
+import { support } from "@/src/utils/utils";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { router } from "expo-router";
+import { Formik } from "formik";
+import React from "react";
+import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
+import { SvgXml } from "react-native-svg";
+
+const Login = () => {
+  const [loginInfo, setLoginInfo] = React.useState<null | {
+    email: string;
+    password: string;
+  }>(null);
+  const [check, setCheck] = React.useState(false);
+  const [passShow, setPassShow] = React.useState(false);
+
+  const [login, results] = useLoginMutation();
+  const [loginWithGoogle, googleResults] = useGoogleLoginMutation();
+
+  const handleLogin = async (values: any) => {
+    try {
+      if (check) {
+        AsyncStorage.setItem("check", "true");
+        AsyncStorage.setItem("loginInfo", JSON.stringify(values));
+      } else {
+        AsyncStorage.removeItem("check");
+        AsyncStorage.removeItem("loginInfo");
+      }
+      const response = await login(values).unwrap();
+      if (response?.success) {
+        // console.log(response?.data);
+
+        await AsyncStorage.setItem("token", response?.data?.token);
+        router.replace("/auth/location_access");
+      } else {
+        router.push(`/modals/toaster?content=${response?.message}`);
+      }
+    } catch (error: any) {
+      console.log(error);
+      router.push(`/modals/toaster?content=${error?.message}`);
+    }
+  };
+
+  const handleLoginWithGoogle = async () => {
+    try {
+      const response = await loginWithGoogle({}).unwrap();
+      // console.log(response);
+      if (response?.success) {
+        // router.push("/home/tabs");
+        router.push(`/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"),
+  });
+
+  React.useEffect(() => {
+    AsyncStorage.getItem("check").then((value) => {
+      if (value === "true") {
+        // console.log(value);
+        setCheck(true);
+      }
+    });
+    AsyncStorage.getItem("loginInfo").then((value) => {
+      if (value) {
+        // console.log(value);
+        setLoginInfo(JSON.parse(value));
+      }
+    });
+  }, []);
+
+  return (
+    <AppBgWrapper>
+      <KeyboardAwareScrollView style={tw`z-10 `}>
+        <View style={tw`flex-1 items-center justify-center p-5`}>
+          <View style={tw`justify-center items-center mt-10 gap-2`}>
+            <Image
+              source={ImageAssets.logo}
+              style={tw`h-18 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]`}
+              >
+                Welcome Back
+              </Text>
+              <Text
+                style={tw`text-white text-base font-InterRegular -tracking-[1px]`}
+              >
+                Please use your credentials to sign in
+              </Text>
+            </View>
+          </View>
+
+          {/* Formik Wrapper */}
+          <Formik
+            initialValues={{
+              email: loginInfo?.email || "",
+              password: loginInfo?.password || "",
+            }}
+            enableReinitialize
+            validationSchema={loginValidationSchema}
+            onSubmit={handleLogin}
+          >
+            {({
+              handleChange,
+              handleBlur,
+              handleSubmit,
+              values,
+              errors,
+              touched,
+              isValid,
+            }) => (
+              <View style={tw`w-full py-8 gap-6`}>
+                <View style={tw`gap-3`}>
+                  <InputText
+                    svgFirstIcon={Icon.email}
+                    textInputProps={{
+                      placeholder: "Email",
+                      placeholderTextColor: "#A9A9A9",
+                    }}
+                    value={values.email}
+                    onChangeText={handleChange("email")}
+                    onBlur={handleBlur("email")}
+                    touched={touched.email}
+                    errorText={errors.email}
+                  />
+
+                  <InputText
+                    svgFirstIcon={Icon.lock}
+                    textInputProps={{
+                      placeholder: "Password",
+                      placeholderTextColor: "#A9A9A9",
+                      secureTextEntry: !passShow,
+                    }}
+                    value={values.password}
+                    onChangeText={handleChange("password")}
+                    onBlur={handleBlur("password")}
+                    touched={touched.password}
+                    errorText={errors.password}
+                    svgSecondIcon={passShow ? Icon.eye : Icon.eyeOff}
+                    svgSecondOnPress={() => setPassShow(!passShow)}
+                  />
+                </View>
+
+                <View style={tw`flex-row justify-between items-center`}>
+                  <View style={tw`flex-row items-center`}>
+                    <CheckBox
+                      checked={check}
+                      onPress={() => setCheck(!check)}
+                      title="Remember me"
+                    />
+                  </View>
+                  <TouchableOpacity
+                    onPress={() => {
+                      router.push("/auth/forgot");
+                    }}
+                  >
+                    <Text style={tw`text-[#339DFF] underline`}>
+                      Forgot Password?
+                    </Text>
+                  </TouchableOpacity>
+                </View>
+
+                {/* Submit button calls handleSubmit from Formik */}
+                <TButton
+                  isLoading={results.isLoading}
+                  title="Sign In"
+                  onPress={() => {
+                    handleSubmit();
+                    // router.push("/home");
+                  }}
+                  disabled={!isValid}
+                />
+
+                <Or title="Or continue with" />
+                <View style={tw`flex-row justify-center items-center gap-4`}>
+                  <IButton
+                    isLoading={googleResults.isLoading}
+                    containerStyle={tw`w-16 h-16 bg-transparent  `}
+                    svg={Icon.google}
+                    onPress={handleLoginWithGoogle}
+                  />
+                  {/* <IButton
+                    containerStyle={tw`w-16 h-16 bg-transparent  `}
+                    svg={Icon.apple}
+                    onPress={handleLoginWithGoogle}
+                  /> */}
+                </View>
+
+                <View style={tw`gap-2`}>
+                  <View style={tw`flex-row justify-center `}>
+                    <Text style={tw`text-white`}>Dont have an account?</Text>
+                    <TouchableOpacity
+                      onPress={() => {
+                        router.push("/auth/register");
+                      }}
+                      style={tw`flex-row items-center gap-3`}
+                    >
+                      <Text style={tw`text-[#339DFF] underline ml-1`}>
+                        Sign up
+                      </Text>
+                      <SvgXml xml={Icon.play} />
+                    </TouchableOpacity>
+                  </View>
+                  <View>
+                    <Text style={tw`text-white text-center leading-6`}>
+                      Please read our{" "}
+                      <Text
+                        onPress={() =>
+                          router.push("/settings/terms_and_conditions")
+                        }
+                        style={tw`text-[#339DFF] underline`}
+                      >
+                        Terms
+                      </Text>{" "}
+                      and{" "}
+                      <Text
+                        onPress={() => router.push("/settings/privacy_policy")}
+                        style={tw`text-[#339DFF] underline`}
+                      >
+                        Privacy Policy
+                      </Text>{" "}
+                      and if you have any problems please contact our{" "}
+                      <Text
+                        onPress={() => support()}
+                        style={tw`text-[#339DFF] underline`}
+                      >
+                        Support
+                      </Text>
+                    </Text>
+                  </View>
+                </View>
+              </View>
+            )}
+          </Formik>
+          {/* End of Formik Wrapper */}
+        </View>
+      </KeyboardAwareScrollView>
+    </AppBgWrapper>
+  );
+};
+
+export default Login;