[nobuild] tmp

README.md

@@ -30,9 +30,10 @@ This will create an apk but won't automatically install
 
 # TODO
 
-- [ ] Move same TextInput component to @/components to avoid typing the same styles over and over again
-- [ ] Create a password input with a button to show/hide the password
+- [ ] Change type for TextInput `type`
+- [x] Move same TextInput component to @/components to avoid typing the same styles over and over again
+- [x] Create a password input with a button to show/hide the password
+- [ ] Replace TextInputs with custom one
 - [ ] check for unused styles
 - [ ] Metrics page
-- [ ] App update checking + update button
-test tmp
+- [ ] App update checking + update button

app/(app)/settings.tsx

@@ -23,6 +23,7 @@ import * as db from "@/functions/database";
 import Popup from "@/components/Popup";
 import { clearTempFiles, clearZeroByteFiles, generateThumbnails, getZeroByteFiles, requeryFileSize } from "@/functions/zipline/serverActions";
 import { useRouter } from "expo-router";
+import CustomTextInput from "@/components/TextInput"
 
 export default function UserSettings() {
 	const router = useRouter()
@@ -434,7 +435,7 @@ export default function UserSettings() {
 								<Text style={styles.headerText}>User Info</Text>
                                 <Text style={styles.subHeaderText}>{user.id}</Text>
 
-								<Text style={styles.inputHeader}>Token:</Text>
+								{/*<Text style={styles.inputHeader}>Token:</Text>
 								<View style={styles.inputContainer}>
 									<Pressable style={styles.copyInputContainer} onPress={() => setTokenVisible(true)}>
 										<TextInput
@@ -454,15 +455,40 @@ export default function UserSettings() {
 									}}>
                                         <MaterialIcons name="content-copy" color="white" size={15} />
                                     </Pressable>
-                                </View>
+                                </View>*/}
+                                
+                                <Pressable onPress={() => {
+                                    setTokenVisible(true)
+                                }}>
+                                    <CustomTextInput
+    								    title="Token:"
+    								    showDisabledStyle={false}
+    								    disabled
+    								    disableContext
+    								    onValueChange={(content) => setUsername(content)}
+    								    value={tokenVisible ? token : "[Click to Reveal]"}
+    								    copy
+    								    onCopy={() => {
+    								        Clipboard.setStringAsync(token)
+    								    }}
+    								/>
+                                </Pressable>
 
-								<Text style={styles.inputHeader}>Username:</Text>
+								{/* <Text style={styles.inputHeader}>Username:</Text>
 								<TextInput
 									style={styles.textInput}
 									onChangeText={(content) => setUsername(content)}
 									value={username || ""}
 									placeholderTextColor="#222c47"
 									placeholder="My Cool Username"
+								/> */}
+								
+								<CustomTextInput
+								    title="Username:"
+								    onValueChange={(content) => setUsername(content)}
+								    placeholder="My Cool Username"
+								    value={username || ""}
+								    password
 								/>
 
 								<Text style={styles.inputHeader}>Password:</Text>

components/TextInput.tsx

@@ -13,11 +13,12 @@ import { MaterialIcons } from "@expo/vector-icons";
 interface Props {
 	value?: string;
 	title?: string;
-	onPasswordToggle: (visibile: boolean) => void | Promise<void>;
-	onCopy: () => void | Promise<void>;
-	onValueChange: (newValue: string) => void | Promise<void>;
+	onPasswordToggle?: (visibile: boolean) => void | Promise<void>;
+	onCopy?: () => void | Promise<void>;
+	onValueChange?: (newValue: string) => void | Promise<void>;
 	disabled?: boolean;
 	disableContext?: boolean;
+	showDisabledStyle?: boolean;
 	password?: boolean;
 	type?:
 		| "default"
@@ -45,12 +46,15 @@ interface Props {
 	>;
 }
 
+const sideButtonSize = 17
+
 export default function ZiplineTextInput({
 	value,
 	onValueChange = () => {},
 	onPasswordToggle = () => {},
 	onCopy = () => {},
 	disabled = false,
+	showDisabledStyle = true,
 	disableContext = false,
 	title,
 	password = false,
@@ -69,7 +73,7 @@ export default function ZiplineTextInput({
 					<Text
 						style={{
 							...styles.inputHeader,
-							...(disabled && styles.inputHeaderDisabled),
+							...((disabled && showDisabledStyle) && styles.inputHeaderDisabled),
 						}}
 					>
 						{title}
@@ -82,7 +86,7 @@ export default function ZiplineTextInput({
 						style={{
 							...styles.textInput,
 							...styles.textInputSideButton,
-							...(disabled && styles.textInputDisabled),
+							...((disabled && showDisabledStyle) && styles.textInputDisabled),
 						}}
 						editable={!disabled}
 						contextMenuHidden={disableContext}
@@ -103,9 +107,9 @@ export default function ZiplineTextInput({
 						}}
 					>
 						<MaterialIcons
-							name={displayPassword ? "visibility" : "visibility-off"}
+							name={displayPassword ? "visibility-off" : "visibility"}
 							color="white"
-							size={15}
+							size={sideButtonSize}
 						/>
 					</Pressable>
 				</View>
@@ -128,7 +132,6 @@ export default function ZiplineTextInput({
 				<View style={styles.inputContainer}>
 					<TextInput
 						{...props}
-						secureTextEntry={true}
 						style={{
 							...styles.textInput,
 							...styles.textInputSideButton,
@@ -152,9 +155,9 @@ export default function ZiplineTextInput({
 						}}
 					>
 						<MaterialIcons
-							name={displayPassword ? "visibility" : "visibility-off"}
+							name="content-copy"
 							color="white"
-							size={15}
+							size={sideButtonSize}
 						/>
 					</Pressable>
 				</View>
@@ -175,7 +178,6 @@ export default function ZiplineTextInput({
 			)}
 			<TextInput
 				{...props}
-				secureTextEntry={true}
 				style={{
 					...styles.textInput,
 					...(disabled && styles.textInputDisabled),

styles/components/textInput.ts

@@ -2,29 +2,31 @@ import { StyleSheet } from "react-native";
 
 export const styles = StyleSheet.create({
     inputContainer: {
-        flexDirection: "row"
+        flexDirection: "row",
+        height: 40,
     },
     textInput: {
 		width: "100%",
 		borderWidth: 2,
 		borderColor: "#222c47",
-		marginBottom: 5,
-		marginTop: 5,
+// 		marginBottom: 5,
+// 		marginTop: 5,
 		color: "white",
-		height: 40,
+// 		height: 40,
 		paddingHorizontal: 10,
 		fontSize: 15,
 		borderRadius: 6,
 	},
     textInputSideButton: {
-		width: "88%",
+		width: "86%",
 	},
     inputSideButton: {
         width: 40,
-        height: 40,
+        height: "auto"
     },
     inputHeader: {
 		marginTop: 5,
+		marginBottom: 5,
 		fontSize: 18,
 		fontWeight: "bold",
 		color: "white",
@@ -32,10 +34,12 @@ export const styles = StyleSheet.create({
     sideButton: {
         backgroundColor: "#323ea8",
         padding: 10,
-        marginTop: 10,
         marginLeft: 10,
+        height: "100%",
+        width: 40,
         borderRadius: 6,
-        justifyContent: "center"
+        justifyContent: "center",
+        alignItems: "center"
     },
     textInputDisabled: {
 		color: "gray"