update login

app/(tabs)/index.tsx

@@ -6,6 +6,7 @@ import { RootStackParamList } from '../../types';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { DB } from '@/components/lib/db';
 import { GestureHandlerRootView, ScrollView } from 'react-native-gesture-handler';
+import config from '../../components/data/config.json';
 
 const LoginScreen = () => {
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
@@ -41,51 +42,49 @@ const LoginScreen = () => {
   return (
     <>
       <GestureHandlerRootView>
-        <ScrollView>
+        <ScrollView style={{backgroundColor:"white"}}>
-          <View style={{ flex: 1, backgroundColor:'#2563eb'}}>
+          <View style={{ flex: 1, backgroundColor:'white'}}>
             <View style={{
-                flexDirection:"column"
+              flexDirection: "row"
-                , height:300
+              , height: 140
-                , justifyContent:"center"
+              , alignItems: "flex-end"
-                , alignItems:"center"
+              , paddingHorizontal: 30
+              , marginBottom: 20
             }}>
+              <View style={{ flex: 1 }}>
+
+              </View>
               <View style={{
-                  width:"auto",
+                width: "auto",
-                  backgroundColor:"white",
+                backgroundColor: "white",
                 padding: 10,
                 borderRadius: 20
               }}>
                 <Image
-                    source={require('../../assets/images/logo.png')}
+                  source={require('../../assets/images/login/logo.png')}
                   style={{
-                      width: 75
+                    width: 60
-                      , height: 75  
+                    , height: 60
                   }}
                   resizeMode="contain"  // You can adjust this based on how you want the image to scale
                 />
               </View>
-                <Text style={{
-                  color:"white",
-                  paddingVertical: 10,
-                  fontWeight:"bold",
-                  fontSize: 30
-                }}>S.O.R.T</Text>
             </View>
             <View style={[styles.container]}>
+              <View style={{marginBottom:40}}>
                 <Text style={{
-                textAlign:"center"
+                  fontSize:20
-                , fontSize:50
                   , fontWeight:'bold'
-                , color:"#2563eb"
+                  , color:config.color.textbiru
-              }}>Login</Text>
+                }}>Hi !</Text> 
                 <Text style={{
-                textAlign:"center"
+                  fontSize:20
-                , fontSize:18
                   , fontWeight:'bold'
-                , color:"#777"
+                  , marginVertical:5
-                , marginVertical:20
+                  , color: config.color.textbiru
-              }}>Silahkan login ke akun anda</Text>
+                }}>Selamat datang kembali,</Text>
-              <Text style={{
+              </View>
+              {/* <Text style={{
                 textAlign:"left"
                 , fontSize:18
                 , fontWeight:'bold'
@@ -93,14 +92,14 @@ const LoginScreen = () => {
                 , marginTop:10
                 , marginBottom: 10
                 ,width:'100%'
-              }}>EMAIL</Text>
+              }}>EMAIL</Text> */}
               <TextInput
                 style={styles.input}
                 placeholder="youremail@gmail.com"
                 value={username}
                 onChangeText={setUsername}
               />
-            <Text style={{
+            {/* <Text style={{
               textAlign: "left"
               , fontSize: 18
               , fontWeight: 'bold'
@@ -108,7 +107,7 @@ const LoginScreen = () => {
               , marginBottom: 10
               , marginTop: 10
               , width: '100%'
-            }}>PASSWORD</Text>
+            }}>PASSWORD</Text> */}
               <TextInput
                 style={styles.input}
                 placeholder="******"
@@ -116,15 +115,27 @@ const LoginScreen = () => {
                 onChangeText={setPassword}
                 secureTextEntry
               />
-              <TouchableOpacity style={styles.button} onPress={handleLogin}>
+              <View style={{
-                <Text style={styles.buttonText}>Log In</Text>
+                flexDirection:"row",
-              </TouchableOpacity>
+                marginBottom:50
+              }}>
+                <View style={{flex:1}}>
+
+                </View>
                 <TouchableOpacity onPress={handleForgotPassword}>
                   <Text style={styles.forgotPasswordText}>Lupa Password?</Text>
                 </TouchableOpacity>
-              <View style={{flexDirection:"row"}}>
+              </View>
+              <TouchableOpacity style={styles.button} onPress={handleLogin}>
+                <Text style={styles.buttonText}>LOGIN</Text>
+              </TouchableOpacity>
+              <View style={{
+                flexDirection:"row"
+                , justifyContent:"center"
+                , marginTop: 30
+              }}>
                 <Text>Belum memiliki akun?</Text>
-              <TouchableOpacity onPress={handleSignUp} style={{marginHorizontal:5}}>
+                <TouchableOpacity onPress={handleSignUp} style={{marginHorizontal:10}}>
                   <Text style={{
                     color:"blue",
                     fontWeight:"bold"
@@ -146,11 +157,9 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     paddingVertical:50,
-    borderTopRightRadius:80,
     backgroundColor: 'white',
     justifyContent: 'center',
-    alignItems: 'center',
+    paddingHorizontal: 50
-    paddingHorizontal: 60
   },
   appName: {
     fontSize: 36,
@@ -165,8 +174,8 @@ const styles = StyleSheet.create({
   },
   input: {
     width: '100%',
-    borderWidth: 2,
+    borderBottomWidth: 2,
-    borderColor:"#333",
+    borderBottomColor: config.color.line,
     borderRadius: 10,
     padding: 15,
     shadowColor: "#000",
@@ -176,7 +185,7 @@ const styles = StyleSheet.create({
   button: {
     backgroundColor: '#2563eb',
     padding: 15,
-    borderRadius: 10,
+    borderRadius: 30,
     width: '100%',
     alignItems: 'center',
     marginBottom: 10,
@@ -186,14 +195,15 @@ const styles = StyleSheet.create({
     borderColor: '#fff',
   },
   buttonText: {
-    fontSize: 18,
+    fontSize: 20,
     color: 'white',
+    fontWeight:"bold"
   },
   buttonTextSecondary: {
     color: '#fff',
   },
   forgotPasswordText: {
-    color: '#777',
+    color: "#0f48a1",
     fontSize: 16,
     marginBottom: 20,
     textDecorationLine: 'underline',

app/(tabs)/signup.tsx

@@ -107,15 +107,18 @@ VALUES (
           <InfoLayer info={setInfo} navigation={navigation} />
         </>
        :
-        <View style={{ flex: 1, backgroundColor: config.color.primary }}>
+        <View style={{ flex: 1, backgroundColor: 'white'}}>
           <GestureHandlerRootView>
             <ScrollView>
               <View style={{
-                flexDirection: "column"
+                flexDirection: "row"
-                , height: 300
+                , height: 140
-                , justifyContent: "center"
+                , alignItems: "flex-end"
-                , alignItems: "center"
+                , paddingHorizontal: 30
               }}>
+                <View style={{ flex: 1 }}>
+
+                </View>
                 <View style={{
                   width: "auto",
                   backgroundColor: "white",
@@ -123,87 +126,49 @@ VALUES (
                   borderRadius: 20
                 }}>
                   <Image
-                    source={require('../../assets/images/logo.png')}
+                    source={require('../../assets/images/login/logo.png')}
                     style={{
-                      width: 75
+                      width: 60
-                      , height: 75
+                      , height: 60
                     }}
                     resizeMode="contain"  // You can adjust this based on how you want the image to scale
                   />
                 </View>
-                <Text style={{
-                  color: "white",
-                  paddingVertical: 10,
-                  fontWeight: "bold",
-                  fontSize: 30
-                }}>S.O.R.T</Text>
               </View>
               <View style={styles.container}>
-                <Text style={styles.title}>Register</Text>
+                <Text style={styles.title}>Buat Akun Baru</Text>
-                <Text style={{
-                  textAlign: "left"
-                  , fontSize: 18
-                  , fontWeight: 'bold'
-                  , color: "#777"
-                  , marginTop: 10
-                  , width: '100%'
-                }}>{(`nama lengkap`).toUpperCase()}</Text>
                 <TextInput
                   style={styles.input}
                   placeholder="Nama Anda"
                   value={fullname}
                   onChangeText={setFullname}
                 />
-                <Text style={{
+                
-                  textAlign: "left"
-                  , fontSize: 18
-                  , fontWeight: 'bold'
-                  , color: "#777"
-                  , width: '100%'
-                }}>{(`email`).toUpperCase()}</Text>
                 <TextInput
                   style={styles.input}
-                  placeholder="emailanda@gmail.com"
+                  placeholder="Email"
                   value={username}
                   onChangeText={setUsername}
                 />
-                <Text style={{
+                
-                  textAlign: "left"
-                  , fontSize: 18
-                  , fontWeight: 'bold'
-                  , color: "#777"
-                  , width: '100%'
-                }}>{(`no. telepon`).toUpperCase()}</Text>
                 <TextInput
                   style={styles.input}
                   placeholder="No. Telepon Anda"
                   value={phone}
                   onChangeText={setPhone}
                 />
-                <Text style={{
+                
-                  textAlign: "left"
-                  , fontSize: 18
-                  , fontWeight: 'bold'
-                  , color: "#777"
-                  , width: '100%'
-                }}>{(`PASSWORD`).toUpperCase()}</Text>
                 <TextInput
                   style={styles.input}
-                  placeholder="******"
+                  placeholder="Password"
                   value={password}
                   onChangeText={setPassword}
                   secureTextEntry
                 />
-                <Text style={{
+                
-                  textAlign: "left"
-                  , fontSize: 18
-                  , fontWeight: 'bold'
-                  , color: "#777"
-                  , width: '100%'
-                }}>{(`konfirmasi password`).toUpperCase()}</Text>
                 <TextInput
                   style={styles.input}
-                  placeholder="******"
+                  placeholder="Konfirmasi Password"
                   value={passwordRepeat}
                   onChangeText={setPasswordRepeat}
                   secureTextEntry
@@ -212,7 +177,9 @@ VALUES (
                   <Text style={styles.buttonText}>{(`Register`).toUpperCase()}</Text>
                 </TouchableOpacity>
                 <View style={{ marginBottom:30, marginTop:20, flexDirection: "row" }}>
+                  <View style={{ flex: 1 }}>
                     <Text>Sudah memiliki akun?</Text>
+                  </View>
                   <TouchableOpacity onPress={handleSignIn} style={{ marginHorizontal: 5 }}>
                     <Text style={{
                       color: "blue",
@@ -234,8 +201,7 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: 'white',
     justifyContent: 'center',
-    alignItems: 'center',
+    paddingVertical: 10,
-    paddingVertical: 20,
     paddingHorizontal:40,
     borderTopLeftRadius: 50
   },
@@ -246,27 +212,29 @@ const styles = StyleSheet.create({
     marginBottom: 10,
   },
   title: {
-    fontSize: 40,
+    fontSize: 20,
     color: config.color.primary,
-    marginBottom: 20,
+    fontWeight:"bold",
-    fontWeight:"bold"
+    marginBottom:30
   },
   input: {
     width: '100%',
-    backgroundColor: '#fff',
+    borderBottomWidth: 2,
-    borderWidth:1,
+    borderBottomColor: config.color.line,
     borderRadius: 10,
     padding: 15,
+    shadowColor: "#000",
     marginBottom: 20,
     fontSize: 16,
   },
   button: {
     backgroundColor: config.color.primary,
     padding: 15,
-    borderRadius: 10,
+    borderRadius: 50,
     width: '100%',
     alignItems: 'center',
-    marginBottom: 10,
+    marginBottom: 30,
+    marginTop: 30,
   },
   buttonSecondary: {
     backgroundColor: 'transparent',

components/data/config.json

@@ -1,6 +1,10 @@
 {
     "color":{
-        "primary": "#2563eb"
+        "primary": "#2563eb",
+        "line" : "#96aeda",
+        "textbiru" : "#2362e5",
+        "logohijau" : "#60e1f6",
+        "logobiru" : "#2563ea"
     },
     "api" : "http://193.203.167.219:8282/data/query/odoo"
     ,"api2" : "https://app.rumahjo.com/data/query/odoo"