ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-07-14 09:17:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

New onboarding flow, calendar sync logic refactor

Browse Source
This commit is contained in:
Milan Paunovic
2024-11-01 03:18:50 +01:00
parent 539cbd9f10
commit 7f68f3acf8
18 changed files with 1153 additions and 671 deletions
Download Patch File Download Diff File Expand all files Collapse all files

277
components/pages/main/SignInPage.tsx
View File

@ -2,7 +2,7 @@ import {
Button,
ButtonSize,
Colors,
Dialog,
KeyboardAwareScrollView,
LoaderScreen,
Text,
TextField,
@ -13,29 +13,20 @@ import React, {useRef, useState} from "react";
import {useSignIn} from "@/hooks/firebase/useSignIn";
import {KeyboardAvoidingView, Platform, StyleSheet} from "react-native";
import Toast from "react-native-toast-message";
import {useLoginWithQrCode} from "@/hooks/firebase/useLoginWithQrCode";
import {Camera, CameraView} from "expo-camera";
import KeyboardManager from "react-native-keyboard-manager";
import {SafeAreaView} from "react-native-safe-area-context";
import {useRouter} from "expo-router";
KeyboardManager.setEnableAutoToolbar(true);
const SignInPage = ({
setTab,
}: {
setTab: React.Dispatch<
React.SetStateAction<"register" | "login" | "reset-password">
>;
}) => {
const SignInPage = () => {
const [email, setEmail] = useState<string>("");
const [password, setPassword] = useState<string>("");
const [hasPermission, setHasPermission] = useState<boolean | null>(null);
const [showCameraDialog, setShowCameraDialog] = useState<boolean>(false);
const passwordRef = useRef<TextFieldRef>(null);
const {mutateAsync: signIn, error, isError, isLoading: isSigninIn} = useSignIn();
const {mutateAsync: signInWithQrCode, isLoading: isQRCodeLoggingIn} = useLoginWithQrCode();
const {mutateAsync: signIn, error, isError, isLoading} = useSignIn();
const isLoading = isSigninIn || isQRCodeLoggingIn
const router = useRouter()
const handleSignIn = async () => {
await signIn({email, password});
@ -53,169 +44,117 @@ const SignInPage = ({
}
};
const handleQrCodeScanned = async ({data}: { data: string }) => {
setShowCameraDialog(false);
try {
await signInWithQrCode({userId: data});
Toast.show({
type: "success",
text1: "Login successful with QR code!",
});
} catch (err) {
Toast.show({
type: "error",
text1: "Error logging in with QR code",
text2: `${err}`,
});
}
};
const getCameraPermissions = async (callback: () => void) => {
const {status} = await Camera.requestCameraPermissionsAsync();
setHasPermission(status === "granted");
if (status === "granted") {
callback();
}
};
return (
<View padding-10 centerV height={"100%%"} style={{justifyContent: "center"}}>
<KeyboardAvoidingView
contentContainerStyle={{justifyContent: "center"}}
keyboardVerticalOffset={50}
behavior={Platform.OS === "ios" ? "padding" : "height"}
>
<TextField
placeholder="Email"
keyboardType={"email-address"}
returnKeyType={"next"}
textContentType={"emailAddress"}
defaultValue={email}
onChangeText={setEmail}
style={styles.textfield}
autoComplete={"email"}
autoCorrect={false}
onSubmitEditing={() => {
// Move focus to the description field
passwordRef.current?.focus();
}}
/>
<TextField
ref={passwordRef}
placeholder="Password"
textContentType={"oneTimeCode"}
value={password}
onChangeText={setPassword}
secureTextEntry
style={styles.textfield}
autoCorrect={false}
/>
<Button
label="Log in"
marginT-50
labelStyle={{
fontFamily: "PlusJakartaSans_600SemiBold",
fontSize: 16,
}}
onPress={handleSignIn}
style={{marginBottom: 20, height: 50}}
backgroundColor="#fd1775"
/>
<Button
label="Log in with a QR Code"
labelStyle={{
fontFamily: "PlusJakartaSans_600SemiBold",
fontSize: 16,
}}
onPress={() => {
getCameraPermissions(() => setShowCameraDialog(true));
}}
style={{marginBottom: 20, height: 50}}
backgroundColor="#fd1775"
/>
<SafeAreaView style={{flex: 1}}>
<KeyboardAwareScrollView contentContainerStyle={{flexGrow: 1}} enableOnAndroid>
<View style={{flex: 1, padding: 21, paddingBottom: 45, paddingTop: "20%"}}>
<View gap-13 width={"100%"} marginB-20>
<Text style={{fontSize: 40, fontFamily: 'Manrope_600SemiBold'}}>
Jump back into Cally
</Text>
<Text color={"#919191"} style={{fontSize: 20}}>
Please enter your details.
</Text>
</View>
{isError && (
<Text center style={{marginBottom: 20}}>{`${
error?.toString()?.split("]")?.[1]
}`}</Text>
)}
<KeyboardAvoidingView style={{width: "100%"}}
contentContainerStyle={{justifyContent: "center"}}
keyboardVerticalOffset={50}
behavior={Platform.OS === "ios" ? "padding" : "height"}
>
<TextField
placeholder="Email"
keyboardType={"email-address"}
returnKeyType={"next"}
textContentType={"emailAddress"}
defaultValue={email}
onChangeText={setEmail}
style={styles.textfield}
autoComplete={"email"}
autoCorrect={false}
onSubmitEditing={() => {
// Move focus to the description field
passwordRef.current?.focus();
}}
/>
<TextField
ref={passwordRef}
placeholder="Password"
textContentType={"oneTimeCode"}
value={password}
onChangeText={setPassword}
secureTextEntry
style={styles.textfield}
autoCorrect={false}
/>
</KeyboardAvoidingView>
<View flexG/>
<View row centerH marginB-5 gap-5>
<Text style={styles.jakartaLight}>Don't have an account?</Text>
<Button
onPress={() => setTab("register")}
label="Sign Up"
labelStyle={[
styles.jakartaMedium,
{textDecorationLine: "none", color: "#fd1575"},
]}
link
size={ButtonSize.xSmall}
padding-0
margin-0
text70
left
color="#fd1775"
/>
</View>
<View row centerH marginB-5 gap-5>
<Text text70>Forgot your password?</Text>
<Button
onPress={() => setTab("reset-password")}
label="Reset password"
labelStyle={[
styles.jakartaMedium,
{textDecorationLine: "none", color: "#fd1575"},
]}
link
size={ButtonSize.xSmall}
padding-0
margin-0
text70
left
avoidInnerPadding
color="#fd1775"
/>
</View>
</KeyboardAvoidingView>
{/* Camera Dialog */}
<Dialog
visible={showCameraDialog}
onDismiss={() => setShowCameraDialog(false)}
bottom
width="100%"
height="70%"
containerStyle={{padding: 15, backgroundColor: "white"}}
>
{hasPermission === null ? (
<Text>Requesting camera permissions...</Text>
) : !hasPermission ? (
<Text>No access to camera</Text>
) : (
<CameraView
style={{flex: 1, borderRadius: 15}}
onBarcodeScanned={handleQrCodeScanned}
barcodeScannerSettings={{
barcodeTypes: ["qr"],
label="Log in"
marginT-50
labelStyle={{
fontFamily: "PlusJakartaSans_600SemiBold",
fontSize: 16,
}}
onPress={handleSignIn}
style={{marginBottom: 20, height: 50}}
backgroundColor="#fd1775"
/>
)}
<Button
label="Cancel"
onPress={() => setShowCameraDialog(false)}
backgroundColor="#fd1775"
style={{margin: 10, marginBottom: 30}}
/>
</Dialog>
{isError && (
<Text center style={{marginBottom: 20}}>{`${
error?.toString()?.split("]")?.[1]
}`}</Text>
)}
{isLoading && (
<LoaderScreen overlay message={"Signing in..."} backgroundColor={Colors.white} color={Colors.grey40}/>
)}
<View row centerH marginB-5 gap-5>
<Text style={styles.jakartaLight}>Don't have an account?</Text>
<Button
onPress={() => router.replace("/(unauth)/sign_up")}
label="Sign Up"
labelStyle={[
styles.jakartaMedium,
{textDecorationLine: "none", color: "#fd1575"},
]}
link
size={ButtonSize.xSmall}
padding-0
margin-0
text70
left
color="#fd1775"
/>
</View>
</View>
{/*<View row centerH marginB-5 gap-5>*/}
{/* <Text text70>Forgot your password?</Text>*/}
{/* <Button*/}
{/* onPress={() => router.replace("/(unauth)/sign_up")}*/}
{/* label="Reset password"*/}
{/* labelStyle={[*/}
{/* styles.jakartaMedium,*/}
{/* {textDecorationLine: "none", color: "#fd1575"},*/}
{/* ]}*/}
{/* link*/}
{/* size={ButtonSize.xSmall}*/}
{/* padding-0*/}
{/* margin-0*/}
{/* text70*/}
{/* left*/}
{/* avoidInnerPadding*/}
{/* color="#fd1775"*/}
{/* />*/}
{/*</View>*/}
{isLoading && (
<LoaderScreen overlay message={"Signing in..."} backgroundColor={Colors.white}
color={Colors.grey40}/>
)}
</View>
</KeyboardAwareScrollView>
</SafeAreaView>
);
};