fixes and bug features

components/pages/main/SignInPage.tsx

@@ -7,6 +7,7 @@ import {
   Text,
   TextField,
   TextFieldRef,
+  TouchableOpacity,
   View,
 } from "react-native-ui-lib";
 import React, { useEffect, useRef, useState } from "react";
@@ -23,6 +24,7 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import { useRouter } from "expo-router";
 import * as Device from "expo-device";
 import { DeviceType } from "expo-device";
+import { AntDesign } from "@expo/vector-icons";
 
 if (Platform.OS === "ios") KeyboardManager.setEnableAutoToolbar(true);
 
@@ -44,6 +46,7 @@ const SignInPage = () => {
   const [email, setEmail] = useState<string>("");
   const [password, setPassword] = useState<string>("");
   const passwordRef = useRef<TextFieldRef>(null);
+  const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false);
 
   const isTablet: boolean = Device.deviceType === DeviceType.TABLET;
   const [isPortrait, setIsPortrait] = useState(() => {
@@ -130,7 +133,7 @@ const SignInPage = () => {
               textContentType={"emailAddress"}
               defaultValue={email}
               onChangeText={setEmail}
-              style={styles.textfield}
+              style={[styles.textfield, styles.jakartaLight, {fontSize: 13}]}
               autoComplete={"email"}
               autoCorrect={false}
               onSubmitEditing={() => {
@@ -138,16 +141,30 @@ const SignInPage = () => {
                 passwordRef.current?.focus();
               }}
             />
+            <View
+              centerV
+              style={[styles.textfield, { padding: 0, paddingHorizontal: 30 }]}
+            >
             <TextField
-              ref={passwordRef}
-              placeholder="Password"
-              textContentType={"oneTimeCode"}
-              value={password}
-              onChangeText={setPassword}
-              secureTextEntry
-              style={styles.textfield}
-              autoCorrect={false}
-            />
+                ref={passwordRef}
+                placeholder="Password"
+                style={[styles.jakartaLight, {fontSize: 13}]}
+                value={password}
+                onChangeText={setPassword}
+                secureTextEntry={!isPasswordVisible}
+                trailingAccessory={
+                  <TouchableOpacity
+                    onPress={() => setIsPasswordVisible(!isPasswordVisible)}
+                  >
+                    <AntDesign
+                      name={isPasswordVisible ? "eye" : "eyeo"}
+                      size={24}
+                      color="gray"
+                    />
+                  </TouchableOpacity>
+                }
+              />
+              </View>
           </KeyboardAvoidingView>
 
           {isTablet ? <View /> : <View flexG />}