authentication component

2025-06-23 12:11:36 +08:00
parent ba2dc1211f
commit 8d9f52b85c
15 changed files with 261 additions and 197 deletions
--- a/app.json
+++ b/app.json
@@ -10,14 +10,18 @@
    "newArchEnabled": true,
    "ios": {
      "supportsTablet": true,
-      "bundleIdentifier": "com.anonymous.hipmi-mobile"
+      "bundleIdentifier": "com.anonymous.hipmi-mobile",
+      "infoPlist": {
+        "ITSAppUsesNonExemptEncryption": false
+      }
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
-      "edgeToEdgeEnabled": true
+      "edgeToEdgeEnabled": true,
+      "package": "com.bip.hipmimobileapp"
    },
    "web": {
      "bundler": "metro",
@@ -38,6 +42,12 @@
    ],
    "experiments": {
      "typedRoutes": true
+    },
+    "extra": {
+      "router": {},
+      "eas": {
+        "projectId": "5cf15964-4889-4755-b8ed-b99c61d614d1"
+      }
    }
  }
 }
--- a/app/header-button.tsx
+++ b/app/header-button.tsx
@@ -1,12 +1,12 @@
+import { globalStyles } from "@/constants/global-styles";
 import { Stack } from "expo-router";
-import { Button, Text, Image } from "react-native";
 import { useState } from "react";
-import { styles } from "@/constants/styles";
+import { Button, Image, Text } from "react-native";

 function LogoTitle(props: { children?: React.ReactNode }) {
  return (
    <Image
-      style={styles.image}
+      style={globalStyles.image}
      source={{ uri: "https://reactnative.dev/img/tiny_logo.png" }}
    />
  );
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,24 +1,17 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
+import Spacing from "@/components/_ShareComponent/Spacing";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import ButtonCustom from "@/components/Button/ButtonCustom";
 import { TextInputCustom } from "@/components/TextInput/TextInputCustom";
 import { MainColor } from "@/constants/color-palet";
-import { styles } from "@/constants/styles";
-import { useNavigation } from "expo-router";
+import { globalStyles } from "@/constants/global-styles";
+import { useNavigation, useRouter } from "expo-router";
 import { useEffect, useState } from "react";
-import {
-  ImageBackground,
-  ScrollView,
-  StyleSheet,
-  Text,
-  View,
-} from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import { Text, View } from "react-native";

-export default function Home() {
+export default function Login() {
+  const router = useRouter();
  const navigation = useNavigation();
-  const assetBackground = require("../assets/images/main-background.png");
  const [phone, setPhone] = useState("");
-  const [price, setPrice] = useState("");

  useEffect(() => {
    navigation.setOptions({
@@ -27,100 +20,54 @@ export default function Home() {
  }, [navigation]);

  return (
-    <SafeAreaView
-      edges={[]}
-      style={{
-        flex: 1,
-        // paddingTop: StatusBar.currentHeight,
-      }}
-    >
-      <ScrollView contentContainerStyle={{ flexGrow: 2 }}>
-        <ImageBackground
-          source={assetBackground}
-          resizeMode="cover"
-          style={styles.imageBackground}
-        >
-          <View style={styles.container}>
-            <View
-              style={{
-                flex: 1,
-                justifyContent: "center",
-                height: "100%",
-              }}
-            >
-              <View>
-                <View style={stylesHome.container}>
-                  {/* Teks "WELCOME TO" */}
-                  <Text style={stylesHome.welcomeTo}>WELCOME TO</Text>
-
-                  {/* Spacing antara "WELCOME TO" dan "HIPMI BADUNG APPS" */}
-                  <View style={stylesHome.spacing} />
-
-                  {/* Teks "HIPMI BADUNG APPS" */}
-                  <Text style={stylesHome.hipmiBadungApps}>
-                    HIPMI BADUNG APPS
-                  </Text>
-
-                  {/* Spacing antara "HIPMI BADUNG APPS" dan "powered by muku.id" */}
-                  <View style={stylesHome.spacing} />
-                </View>
-                {/* Teks "powered by muku.id" */}
-                <Text style={stylesHome.poweredBy}>powered by muku.id</Text>
-              </View>
-
-              {/* Input dengan prefix teks */}
-              <TextInputCustom
-                label="Nomor Telepon"
-                placeholder="Masukkan nomor"
-                value={phone}
-                onChangeText={setPhone}
-                iconLeft="+62"
-                keyboardType="phone-pad"
-              />
-
-              <ButtonCustom
-                title="Login"
-                backgroundColor={MainColor.yellow}
-                textColor={MainColor.black}
-                radius={10}
-                onPress={() => alert("Pressed!")}
-                // iconLeft={<MaterialIcons name="login" size={20} color="#000" />}
-              />
-            </View>
+    <ViewWrapper>
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          height: "100%",
+        }}
+      >
+        <View>
+          <View style={globalStyles.authContainer}>
+            <Text style={globalStyles.authSubTitle}>WELCOME TO</Text>
+            <Spacing height={5} />
+            <Text style={globalStyles.authTitle}>HIPMI BADUNG APPS</Text>
+            <Spacing height={5} />
          </View>
-        </ImageBackground>
-      </ScrollView>
-    </SafeAreaView>
+          <Text
+            style={{
+              position: "absolute",
+              bottom: 30,
+              right: 20,
+              fontSize: 10,
+              fontWeight: "thin",
+              fontStyle: "italic",
+              color: MainColor.white,
+            }}
+          >
+            powered by muku.id
+          </Text>
+        </View>
+
+        {/* Input dengan prefix teks */}
+        <TextInputCustom
+          label="Nomor Telepon"
+          placeholder="Masukkan nomor"
+          value={phone}
+          onChangeText={setPhone}
+          iconLeft="+62"
+          keyboardType="phone-pad"
+        />
+
+        <ButtonCustom
+          title="Login"
+          backgroundColor={MainColor.yellow}
+          textColor={MainColor.black}
+          radius={10}
+          onPress={() => router.push("/verification")}
+        />
+      </View>
+    </ViewWrapper>
  );
 }
-
-const stylesHome = StyleSheet.create({
-  container: {
-    // backgroundColor: "#0A192F", // Warna latar belakang biru tua
-    justifyContent: "center",
-    alignItems: "center",
-    marginBottom: 50,
-  },
-  welcomeTo: {
-    fontSize: 22,
-    color: MainColor.yellow, // Warna kuning
-    fontWeight: "bold",
-  },
-  hipmiBadungApps: {
-    fontSize: 27,
-    color: MainColor.yellow, // Warna kuning
-    fontWeight: "bold",
-  },
-  spacing: {
-    height: 5, // Jarak antar teks
-  },
-  poweredBy: {
-    position: "absolute",
-    bottom: 30, // sesuaikan jarak dari bawah
-    right: 20, // sesuaikan jarak dari kanan
-    fontSize: 10,
-    fontWeight: "thin",
-    fontStyle: "italic",
-    color: MainColor.white, // Warna putih
-  },
-});
--- a/app/new-detail.tsx
+++ b/app/new-detail.tsx
@@ -1,5 +1,5 @@
-import { styles } from "@/constants/styles";
-import { useRouter, useLocalSearchParams, Stack } from "expo-router";
+import { globalStyles } from "@/constants/global-styles";
+import { Stack, useLocalSearchParams, useRouter } from "expo-router";
 import { Text, View } from "react-native";

 export default function NewDetail() {
@@ -7,7 +7,7 @@ export default function NewDetail() {
  const params = useLocalSearchParams();

  return (
-    <View style={styles.container}>
+    <View style={globalStyles.container}>
      <Stack.Screen
        options={{
          title: params.name as string,
--- a/app/set-screen-dynamic.tsx
+++ b/app/set-screen-dynamic.tsx
@@ -1,13 +1,13 @@
-import { styles } from "@/constants/styles";
+import { globalStyles } from "@/constants/global-styles";
 import { Stack, useLocalSearchParams, useRouter } from "expo-router";
-import { View, Text } from "react-native";
+import { Text, View } from "react-native";

 export default function Details() {
  const router = useRouter();
  const params = useLocalSearchParams();

  return (
-    <View style={styles.container}>
+    <View style={globalStyles.container}>
      <Stack.Screen
        options={{
          title: params.name as string,
--- a/app/verification.tsx
+++ b/app/verification.tsx
@@ -0,0 +1,74 @@
+import ButtonCustom from "@/components/Button/ButtonCustom";
+import Spacing from "@/components/_ShareComponent/Spacing";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { MainColor } from "@/constants/color-palet";
+import { globalStyles } from "@/constants/global-styles";
+import { useNavigation, useRouter } from "expo-router";
+import { useEffect } from "react";
+import { Text, View } from "react-native";
+import { OtpInput } from "react-native-otp-entry";
+
+export default function Validasi() {
+  const router = useRouter();
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
+
+  return (
+    <ViewWrapper>
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          height: "100%",
+        }}
+      >
+        <View>
+          <View style={globalStyles.authContainer}>
+            <Text style={globalStyles.authTitle}>Verifikasi KOde OTP</Text>
+            <Spacing height={30} />
+            <Text style={globalStyles.textLabel}>Masukan 4 digit kode otp</Text>
+            <Text style={globalStyles.textLabel}>
+              Yang di kirim ke +6282xxxxxxxxx
+            </Text>
+            <Spacing height={30} />
+            <OtpInput
+              numberOfDigits={4}
+              theme={{
+                pinCodeContainerStyle: {
+                  backgroundColor: MainColor.login,
+                  borderRadius: 10,
+                  borderWidth: 1,
+                  borderColor: MainColor.yellow,
+                  width: 60,
+                  height: 60,
+                },
+                containerStyle: {
+                  paddingLeft: 10,
+                  paddingRight: 10,
+                },
+              }}
+            />
+            <Spacing height={30} />
+            <Text style={globalStyles.textLabel}>
+              Tidak menerima kode ?{" "}
+              <Text style={{ ...globalStyles.textLabel }}>Kirim Ulang</Text>
+            </Text>
+          </View>
+        </View>
+
+        <ButtonCustom
+          title="Verifikasi"
+          backgroundColor={MainColor.yellow}
+          textColor={MainColor.black}
+          radius={10}
+          onPress={() => router.push("/")}
+        />
+      </View>
+    </ViewWrapper>
+  );
+}
--- a/bun.lock
+++ b/bun.lock
@@ -25,6 +25,7 @@
        "react-dom": "19.0.0",
        "react-native": "0.79.4",
        "react-native-gesture-handler": "~2.24.0",
+        "react-native-otp-entry": "^1.8.5",
        "react-native-reanimated": "~3.17.4",
        "react-native-safe-area-context": "5.4.0",
        "react-native-screens": "~4.11.1",
@@ -1346,6 +1347,8 @@

    "react-native-is-edge-to-edge": ["react-native-is-edge-to-edge@1.1.7", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-EH6i7E8epJGIcu7KpfXYXiV2JFIYITtq+rVS8uEb+92naMRBdxhTuS8Wn2Q7j9sqyO0B+Xbaaf9VdipIAmGW4w=="],

+    "react-native-otp-entry": ["react-native-otp-entry@1.8.5", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-TZNkIuUzZKAAWrC8X/A22ZHJdycLysxUNysrGf0yTmDLRUyf4zLXwVFcDYUcRNe763Hjaf5qvtKGILb6lDGzoA=="],
+
    "react-native-reanimated": ["react-native-reanimated@3.17.5", "", { "dependencies": { "@babel/plugin-transform-arrow-functions": "^7.0.0-0", "@babel/plugin-transform-class-properties": "^7.0.0-0", "@babel/plugin-transform-classes": "^7.0.0-0", "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0", "@babel/plugin-transform-optional-chaining": "^7.0.0-0", "@babel/plugin-transform-shorthand-properties": "^7.0.0-0", "@babel/plugin-transform-template-literals": "^7.0.0-0", "@babel/plugin-transform-unicode-regex": "^7.0.0-0", "@babel/preset-typescript": "^7.16.7", "convert-source-map": "^2.0.0", "invariant": "^2.2.4", "react-native-is-edge-to-edge": "1.1.7" }, "peerDependencies": { "@babel/core": "^7.0.0-0", "react": "*", "react-native": "*" } }, "sha512-SxBK7wQfJ4UoWoJqQnmIC7ZjuNgVb9rcY5Xc67upXAFKftWg0rnkknTw6vgwnjRcvYThrjzUVti66XoZdDJGtw=="],

    "react-native-safe-area-context": ["react-native-safe-area-context@5.4.0", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-JaEThVyJcLhA+vU0NU8bZ0a1ih6GiF4faZ+ArZLqpYbL6j7R3caRqj+mE3lEtKCuHgwjLg3bCxLL1GPUJZVqUA=="],
@@ -1746,16 +1749,12 @@

    "@istanbuljs/load-nyc-config/js-yaml": ["js-yaml@3.14.1", "", { "dependencies": { "argparse": "^1.0.7", "esprima": "^4.0.0" }, "bin": "bin/js-yaml.js" }, "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g=="],

-    "@react-native/codegen/glob": ["glob@7.2.3", "", { "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", "inherits": "2", "minimatch": "^3.1.1", "once": "^1.3.0", "path-is-absolute": "^1.0.0" } }, "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q=="],
-
    "@react-native/community-cli-plugin/debug": ["debug@2.6.9", "", { "dependencies": { "ms": "2.0.0" } }, "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="],

    "@react-native/community-cli-plugin/semver": ["semver@7.7.2", "", { "bin": "bin/semver.js" }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],

    "@react-native/dev-middleware/debug": ["debug@2.6.9", "", { "dependencies": { "ms": "2.0.0" } }, "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="],

-    "@react-native/dev-middleware/ws": ["ws@6.2.3", "", { "dependencies": { "async-limiter": "~1.0.0" } }, "sha512-jmTjYU0j60B+vHey6TfR3Z7RD61z/hmxBS3VMSGIrroOWXQEneK1zNuotOUrGyBHQj0yrpsLHPWtigEFd13ndA=="],
-
    "@typescript-eslint/eslint-plugin/ignore": ["ignore@7.0.5", "", {}, "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg=="],

    "@typescript-eslint/typescript-estree/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
@@ -1776,8 +1775,6 @@

    "chromium-edge-launcher/mkdirp": ["mkdirp@1.0.4", "", { "bin": "bin/cmd.js" }, "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="],

-    "cliui/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
-
    "cliui/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],

    "compressible/mime-db": ["mime-db@1.54.0", "", {}, "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ=="],
@@ -1824,8 +1821,6 @@

    "hosted-git-info/lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],

-    "http-errors/statuses": ["statuses@2.0.1", "", {}, "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="],
-
    "import-fresh/resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],

    "is-bun-module/semver": ["semver@7.7.2", "", { "bin": "bin/semver.js" }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],
@@ -1878,14 +1873,10 @@

    "restore-cursor/signal-exit": ["signal-exit@3.0.7", "", {}, "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="],

-    "rimraf/glob": ["glob@7.2.3", "", { "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", "inherits": "2", "minimatch": "^3.1.1", "once": "^1.3.0", "path-is-absolute": "^1.0.0" } }, "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q=="],
-
    "schema-utils/ajv": ["ajv@8.17.1", "", { "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", "json-schema-traverse": "^1.0.0", "require-from-string": "^2.0.2" } }, "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g=="],

    "send/debug": ["debug@2.6.9", "", { "dependencies": { "ms": "2.0.0" } }, "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="],

-    "serve-static/encodeurl": ["encodeurl@2.0.0", "", {}, "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg=="],
-
    "serve-static/send": ["send@0.19.0", "", { "dependencies": { "debug": "2.6.9", "depd": "2.0.0", "destroy": "1.2.0", "encodeurl": "~1.0.2", "escape-html": "~1.0.3", "etag": "~1.8.1", "fresh": "0.5.2", "http-errors": "2.0.0", "mime": "1.6.0", "ms": "2.1.3", "on-finished": "2.4.1", "range-parser": "~1.2.1", "statuses": "2.0.1" } }, "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw=="],

    "simple-plist/bplist-parser": ["bplist-parser@0.3.1", "", { "dependencies": { "big-integer": "1.6.x" } }, "sha512-PyJxiNtA5T2PlLIeBot4lbp7rj4OadzjnMZD/G5zuBNt8ei/yCU7+wW0h2bag9vr8c+/WuRWmSxbqAl9hL1rBA=="],
@@ -1896,8 +1887,6 @@

    "string-width/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],

-    "string-width-cjs/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
-
    "string-width-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],

    "strip-ansi/ansi-regex": ["ansi-regex@4.1.1", "", {}, "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g=="],
@@ -1910,20 +1899,14 @@

    "terser/commander": ["commander@2.20.3", "", {}, "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="],

-    "test-exclude/glob": ["glob@7.2.3", "", { "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", "inherits": "2", "minimatch": "^3.1.1", "once": "^1.3.0", "path-is-absolute": "^1.0.0" } }, "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q=="],
-
    "tinyglobby/picomatch": ["picomatch@4.0.2", "", {}, "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg=="],

    "tsconfig-paths/json5": ["json5@1.0.2", "", { "dependencies": { "minimist": "^1.2.0" }, "bin": "lib/cli.js" }, "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA=="],

    "whatwg-url/webidl-conversions": ["webidl-conversions@3.0.1", "", {}, "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="],

-    "wrap-ansi/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
-
    "wrap-ansi/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],

-    "wrap-ansi-cjs/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
-
    "wrap-ansi-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],

    "write-file-atomic/signal-exit": ["signal-exit@3.0.7", "", {}, "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="],
@@ -1936,8 +1919,6 @@

    "@babel/highlight/chalk/supports-color": ["supports-color@5.5.0", "", { "dependencies": { "has-flag": "^3.0.0" } }, "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow=="],

-    "@expo/cli/glob/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
-
    "@expo/cli/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],

    "@expo/config-plugins/glob/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
@@ -1946,12 +1927,8 @@

    "@expo/devcert/glob/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],

-    "@expo/fingerprint/glob/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
-
    "@expo/fingerprint/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],

-    "@expo/metro-config/glob/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
-
    "@expo/metro-config/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],

    "@isaacs/cliui/string-width/emoji-regex": ["emoji-regex@9.2.2", "", {}, "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="],
@@ -1974,8 +1951,6 @@

    "ajv-keywords/ajv/json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="],

-    "cliui/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
-
    "compression/debug/ms": ["ms@2.0.0", "", {}, "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="],

    "connect/debug/ms": ["ms@2.0.0", "", {}, "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="],
@@ -2008,8 +1983,6 @@

    "react-native-vector-icons/yargs/cliui": ["cliui@7.0.4", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.0", "wrap-ansi": "^7.0.0" } }, "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ=="],

-    "react-native-vector-icons/yargs/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
-
    "react-native-vector-icons/yargs/yargs-parser": ["yargs-parser@20.2.9", "", {}, "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="],

    "schema-utils/ajv/json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="],
@@ -2020,32 +1993,18 @@

    "serve-static/send/encodeurl": ["encodeurl@1.0.2", "", {}, "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w=="],

-    "serve-static/send/on-finished": ["on-finished@2.4.1", "", { "dependencies": { "ee-first": "1.1.1" } }, "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg=="],
-
-    "serve-static/send/statuses": ["statuses@2.0.1", "", {}, "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="],
-
    "sucrase/glob/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],

-    "wrap-ansi-cjs/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
-
-    "wrap-ansi/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
-
    "@babel/highlight/chalk/ansi-styles/color-convert": ["color-convert@1.9.3", "", { "dependencies": { "color-name": "1.1.3" } }, "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg=="],

    "@babel/highlight/chalk/supports-color/has-flag": ["has-flag@3.0.0", "", {}, "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="],

-    "@expo/cli/glob/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],
-
    "@expo/config-plugins/glob/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],

    "@expo/config/glob/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],

    "@expo/devcert/glob/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],

-    "@expo/fingerprint/glob/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],
-
-    "@expo/metro-config/glob/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],
-
    "@istanbuljs/load-nyc-config/find-up/locate-path/p-locate": ["p-locate@4.1.0", "", { "dependencies": { "p-limit": "^2.2.0" } }, "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A=="],

    "expo-modules-autolinking/glob/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],
@@ -2060,10 +2019,6 @@

    "react-native-vector-icons/yargs/cliui/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],

-    "react-native-vector-icons/yargs/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
-
-    "react-native-vector-icons/yargs/string-width/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
-
    "serve-static/send/debug/ms": ["ms@2.0.0", "", {}, "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="],

    "sucrase/glob/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],
--- a/components/Button/buttonStyles.ts
+++ b/components/Button/buttonStyles.ts
@@ -1,5 +1,6 @@
 // components/Button/buttonStyles.js

+import { MainColor } from "@/constants/color-palet";
 import { StyleSheet } from "react-native";

 export default function buttonStyles({
@@ -24,7 +25,7 @@ export default function buttonStyles({
      fontWeight: "600",
    },
    disabled: {
-      opacity: 0.5,
+      backgroundColor: MainColor.disabled,
    },
  });
 }
--- a/components/_ShareComponent/Spacing.tsx
+++ b/components/_ShareComponent/Spacing.tsx
@@ -0,0 +1,14 @@
+// src/components/Spacing.tsx
+import React from "react";
+import { View } from "react-native";
+
+interface SpacingProps {
+  width?: number;
+  height?: number;
+}
+
+const Spacing: React.FC<SpacingProps> = ({ width = 20, height = 20 }) => {
+  return <View style={{ height, width }} />;
+};
+
+export default Spacing;
--- a/components/_ShareComponent/ViewWrapper.tsx
+++ b/components/_ShareComponent/ViewWrapper.tsx
@@ -0,0 +1,33 @@
+import { globalStyles } from "@/constants/global-styles";
+import { ImageBackground, ScrollView, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+interface ViewWrapperProps {
+  children: React.ReactNode;
+}
+
+const ViewWrapper = ({ children }: ViewWrapperProps) => {
+  const assetBackground = require("../../assets/images/main-background.png");
+
+  return (
+    <SafeAreaView
+      edges={[]}
+      style={{
+        flex: 1,
+        // paddingTop: StatusBar.currentHeight,
+      }}
+    >
+      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+        <ImageBackground
+          source={assetBackground}
+          resizeMode="cover"
+          style={globalStyles.imageBackground}
+        >
+          <View style={globalStyles.container}>{children}</View>
+        </ImageBackground>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+export default ViewWrapper;
--- a/constants/color-palet.ts
+++ b/constants/color-palet.ts
@@ -8,6 +8,7 @@ export const MainColor = {
  orange: "#FF7043",
  green: "#4CAF4F",
  login: "#EDEBEBFF",
+  disabled: "#606360",
 };

 export const AccentColor = {
--- a/constants/global-styles.ts
+++ b/constants/global-styles.ts
@@ -0,0 +1,36 @@
+import { StyleSheet } from "react-native";
+import { MainColor } from "./color-palet";
+
+export const globalStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingInline: 30,
+    paddingBlock: 20,
+  },
+  imageBackground: {
+    height: "100%",
+    width: "100%",
+  },
+
+  // AUTHENTICATION
+  authContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    marginBottom: 50,
+  },
+  authTitle: {
+    fontSize: 27,
+    color: MainColor.yellow,
+    fontWeight: "bold",
+  },
+  authSubTitle: {
+    fontSize: 22,
+    color: MainColor.yellow,
+    fontWeight: "bold",
+  },
+  textLabel: {
+    fontSize: 16,
+    color: MainColor.white,
+    fontWeight: "normal",
+  },
+});
--- a/constants/styles.ts
+++ b/constants/styles.ts
@@ -1,29 +0,0 @@
-import { StyleSheet } from "react-native";
-
-export const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingInline: 30,
-    paddingBlock: 20,
-  },
-  imageBackground: {
-    height: "100%",
-    width: "100%",
-    // justifyContent: "center",
-    // alignItems: "center",
-  },
-    
-  input: {
-    backgroundColor: "#fff",
-    borderWidth: 1,
-    borderColor: "#ccc",
-    padding: 10,
-    marginBottom: 10,
-    borderRadius: 5,
-    width: "80%",
-  },
-  image: {
-    width: 30,
-    height: 30,
-  },
-});
--- a/eas.json
+++ b/eas.json
@@ -0,0 +1,21 @@
+{
+  "cli": {
+    "version": ">= 16.12.0",
+    "appVersionSource": "remote"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {
+      "autoIncrement": true
+    }
+  },
+  "submit": {
+    "production": {}
+  }
+}
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
    "react-dom": "19.0.0",
    "react-native": "0.79.4",
    "react-native-gesture-handler": "~2.24.0",
+    "react-native-otp-entry": "^1.8.5",
    "react-native-reanimated": "~3.17.4",
    "react-native-safe-area-context": "5.4.0",
    "react-native-screens": "~4.11.1",