wip, ui toggle mocked

package.json

@@ -73,6 +73,7 @@
 		"@types/react-native-svg-charts": "^5.0.16",
 		"eslint-config-prettier": "^9.1.0",
 		"metro-react-native-babel-preset": "^0.77.0",
+		"prettier": "^3.2.5",
 		"prettier-plugin-organize-imports": "^3.2.4",
 		"typescript": "^5.3.3"
 	},

src/auth/firebase-auth.tsx

@@ -38,16 +38,6 @@ export const onAuthStateChanged = (
 	return auth().onAuthStateChanged(callback);
 };
 
-export const currentUser = () => auth().currentUser;
-
-export const getCurrentUserToken = async (): Promise<string | null> => {
-	const user = auth().currentUser;
-	if (user) {
-		return await user.getIdToken();
-	}
-	return null;
-};
-
 export const handleSignOut = (): Promise<void> => {
 	return auth().signOut();
 };

src/auth/index.ts

@@ -1,6 +1,5 @@
 import {
 	confirmCode,
-	currentUser,
 	handleSignInWithPhoneNumber,
 	handleSignOut,
 	onAuthStateChanged,
@@ -8,7 +7,6 @@ import {
 
 export {
 	confirmCode,
-	currentUser,
 	handleSignInWithPhoneNumber,
 	handleSignOut,
 	onAuthStateChanged,

src/screens/login.tsx

@@ -3,6 +3,9 @@ import React, { useState } from "react";
 import {
 	Button,
 	Keyboard,
+	StyleSheet,
+	Switch,
+	Text,
 	TextInput,
 	TouchableWithoutFeedback,
 	View,
@@ -10,48 +13,59 @@ import {
 import { confirmCode, handleSignInWithPhoneNumber } from "../auth";
 
 export default function Login() {
+	const [isEmailLogin, setIsEmailLogin] = useState(false);
 	const [phoneNumber, setPhoneNumber] = useState<string>("");
 	const [code, setCode] = useState<string>("");
+	const [email, setEmail] = useState<string>("");
+	const [password, setPassword] = useState<string>("");
 	const [confirm, setConfirm] =
 		useState<FirebaseAuthTypes.ConfirmationResult | null>(null);
 
+	const toggleSwitch = () => setIsEmailLogin((previousState) => !previousState);
+
+	// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+	const handleSignInWithEmail = (email: string, password: string) =>
+		console.log("signingInWithEmail");
+
 	return (
 		<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
-			<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+			<View style={styles.container}>
+				<View style={styles.toggleRow}>
+					<Text>Use email</Text>
+					<Switch
+						trackColor={{ false: "#767577", true: "#81b0ff" }}
+						thumbColor={isEmailLogin ? "#f5dd4b" : "#f4f3f4"}
+						onValueChange={toggleSwitch}
+						value={isEmailLogin}
+					/>
+				</View>
+
+				{!isEmailLogin ? (
+					<>
 						<TextInput
-					style={{
+							style={styles.input}
-						width: "50%",
-						height: 30,
-						borderWidth: 1,
-						borderColor: "black",
-						marginBottom: 20,
-					}}
 							placeholder="Phone"
 							textContentType="telephoneNumber"
 							keyboardType="phone-pad"
 							autoCapitalize="none"
 							value={phoneNumber}
-					onChangeText={(value) => setPhoneNumber(value)}
+							onChangeText={setPhoneNumber}
 						/>
 						{confirm && (
 							<TextInput
-						style={{
+								style={styles.input}
-							width: "50%",
-							height: 30,
-							borderWidth: 1,
-							borderColor: "black",
-							marginBottom: 20,
-						}}
 								placeholder="Code"
 								keyboardType="number-pad"
 								textContentType="oneTimeCode"
 								autoCapitalize="none"
 								value={code}
-						onChangeText={(value) => setCode(value)}
+								onChangeText={setCode}
 							/>
 						)}
+
+						<View style={styles.buttonContainer}>
 							<Button
-					title={!confirm ? "Receive code" : "Confirm code"}
+								title={!confirm ? "Send code" : "Confirm code"}
 								onPress={() =>
 									!confirm
 										? handleSignInWithPhoneNumber(phoneNumber).then(setConfirm)
@@ -59,6 +73,65 @@ export default function Login() {
 								}
 							/>
 						</View>
+					</>
+				) : (
+					<>
+						<TextInput
+							style={styles.input}
+							placeholder="Email"
+							textContentType="emailAddress"
+							keyboardType="email-address"
+							autoCapitalize="none"
+							value={email}
+							onChangeText={setEmail}
+						/>
+						<TextInput
+							style={styles.input}
+							placeholder="Password"
+							secureTextEntry
+							textContentType="password"
+							autoCapitalize="none"
+							value={password}
+							onChangeText={setPassword}
+						/>
+
+						<View style={styles.buttonContainer}>
+							<Button
+								title="Sign in"
+								onPress={() => handleSignInWithEmail(email, password)}
+							/>
+						</View>
+					</>
+				)}
+			</View>
 		</TouchableWithoutFeedback>
 	);
 }
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		alignItems: "center",
+		justifyContent: "center",
+		backgroundColor: "#fff",
+	},
+	input: {
+		width: "80%",
+		height: 50,
+		borderWidth: 1,
+		borderColor: "black",
+		borderRadius: 25,
+		marginBottom: 20,
+		padding: 15,
+		fontSize: 18,
+	},
+	toggleRow: {
+		flexDirection: "row",
+		alignItems: "center",
+		marginBottom: 20,
+	},
+	buttonContainer: {
+		width: "80%",
+		borderRadius: 25,
+	},
+});

yarn.lock

@@ -9509,6 +9509,11 @@ prettier-plugin-organize-imports@^3.2.4:
   resolved "https://registry.yarnpkg.com/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-3.2.4.tgz#77967f69d335e9c8e6e5d224074609309c62845e"
   integrity sha512-6m8WBhIp0dfwu0SkgfOxJqh+HpdyfqSSLfKKRZSFbDuEQXDDndb8fTpRWkUrX/uBenkex3MgnVk0J3b3Y5byog==
 
+prettier@^3.2.5:
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
+  integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
+
 pretty-bytes@5.6.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"