railbird/railbird-gql
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip, ui toggle mocked

Browse Source
This commit is contained in:
Loewy 2024-02-08 10:21:23 -08:00
parent f849780aac
commit e2bde3bd01
5 changed files with 118 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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"
},

10
src/auth/firebase-auth.tsx
View File

@ -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();
};

2
src/auth/index.ts
View File

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

151
src/screens/login.tsx
View File

@ -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,
},
});

5
yarn.lock
View File

@ -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"