wip, ui toggle mocked
This commit is contained in:
parent
f849780aac
commit
e2bde3bd01
@ -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"
|
||||
},
|
||||
|
@ -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();
|
||||
};
|
||||
|
@ -1,6 +1,5 @@
|
||||
import {
|
||||
confirmCode,
|
||||
currentUser,
|
||||
handleSignInWithPhoneNumber,
|
||||
handleSignOut,
|
||||
onAuthStateChanged,
|
||||
@ -8,7 +7,6 @@ import {
|
||||
|
||||
export {
|
||||
confirmCode,
|
||||
currentUser,
|
||||
handleSignInWithPhoneNumber,
|
||||
handleSignOut,
|
||||
onAuthStateChanged,
|
||||
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user