wip, ui toggle mocked

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,55 +13,125 @@ 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" }}>
-				<TextInput
-					style={{
-						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)}
-				/>
-				{confirm && (
-					<TextInput
-						style={{
-							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)}
+			<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={styles.input}
+							placeholder="Phone"
+							textContentType="telephoneNumber"
+							keyboardType="phone-pad"
+							autoCapitalize="none"
+							value={phoneNumber}
+							onChangeText={setPhoneNumber}
+						/>
+						{confirm && (
+							<TextInput
+								style={styles.input}
+								placeholder="Code"
+								keyboardType="number-pad"
+								textContentType="oneTimeCode"
+								autoCapitalize="none"
+								value={code}
+								onChangeText={setCode}
+							/>
+						)}
+
+						<View style={styles.buttonContainer}>
+							<Button
+								title={!confirm ? "Send code" : "Confirm code"}
+								onPress={() =>
+									!confirm
+										? handleSignInWithPhoneNumber(phoneNumber).then(setConfirm)
+										: confirm && confirmCode(confirm, code)
+								}
+							/>
+						</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>
+					</>
 				)}
-				<Button
-					title={!confirm ? "Receive code" : "Confirm code"}
-					onPress={() =>
-						!confirm
-							? handleSignInWithPhoneNumber(phoneNumber).then(setConfirm)
-							: confirm && confirmCode(confirm, code)
-					}
-				/>
 			</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,
+	},
+});