mirror of
https://github.com/urosran/cally.git
synced 2025-07-15 17:47:08 +00:00
New onboarding flow, calendar sync logic refactor
This commit is contained in:
Milan Paunovic
@ -3,6 +3,9 @@ import {
|
||||
Button,
|
||||
ButtonSize,
|
||||
Checkbox,
|
||||
Colors,
|
||||
KeyboardAwareScrollView,
|
||||
LoaderScreen,
|
||||
Text,
|
||||
TextField,
|
||||
TextFieldRef,
|
||||
@ -10,19 +13,15 @@ import {
|
||||
View,
|
||||
} from "react-native-ui-lib";
|
||||
import {useSignUp} from "@/hooks/firebase/useSignUp";
|
||||
import {StyleSheet} from "react-native";
|
||||
import {KeyboardAvoidingView, StyleSheet} from "react-native";
|
||||
import {AntDesign} from "@expo/vector-icons";
|
||||
import KeyboardManager from "react-native-keyboard-manager";
|
||||
import {SafeAreaView} from "react-native-safe-area-context";
|
||||
import {useRouter} from "expo-router";
|
||||
|
||||
KeyboardManager.setEnableAutoToolbar(true);
|
||||
|
||||
const SignUpPage = ({
|
||||
setTab,
|
||||
}: {
|
||||
setTab: React.Dispatch<
|
||||
React.SetStateAction<"register" | "login" | "reset-password">
|
||||
>;
|
||||
}) => {
|
||||
const SignUpPage = () => {
|
||||
const [email, setEmail] = useState<string>("");
|
||||
const [firstName, setFirstName] = useState<string>("");
|
||||
const [lastName, setLastName] = useState<string>("");
|
||||
@ -31,170 +30,196 @@ const SignUpPage = ({
|
||||
const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false);
|
||||
const [allowFaceID, setAllowFaceID] = useState<boolean>(false);
|
||||
const [acceptTerms, setAcceptTerms] = useState<boolean>(false);
|
||||
const {mutateAsync: signUp} = useSignUp();
|
||||
const {mutateAsync: signUp, isLoading} = useSignUp();
|
||||
|
||||
const lnameRef = useRef<TextFieldRef>(null);
|
||||
const emailRef = useRef<TextFieldRef>(null);
|
||||
const passwordRef = useRef<TextFieldRef>(null);
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const handleSignUp = async () => {
|
||||
await signUp({email, password, firstName, lastName});
|
||||
router.replace("/(unauth)/cal_sync")
|
||||
};
|
||||
|
||||
return (
|
||||
<View height={"100%"} padding-15 marginT-30>
|
||||
<Text style={styles.title}>Get started with Cally</Text>
|
||||
<Text style={styles.subtitle} marginT-15 color="#919191">
|
||||
Please enter your details.
|
||||
</Text>
|
||||
<TextField
|
||||
marginT-30
|
||||
autoFocus
|
||||
placeholder="First name"
|
||||
value={firstName}
|
||||
onChangeText={setFirstName}
|
||||
style={styles.textfield}
|
||||
onSubmitEditing={() => {
|
||||
lnameRef.current?.focus();
|
||||
}}
|
||||
blurOnSubmit={false}
|
||||
accessibilityLabel="First name input"
|
||||
accessibilityHint="Enter your first name"
|
||||
accessible
|
||||
returnKeyType="next"
|
||||
textContentType="givenName"
|
||||
importantForAccessibility="yes"
|
||||
/>
|
||||
<TextField
|
||||
ref={lnameRef}
|
||||
placeholder="Last name"
|
||||
value={lastName}
|
||||
onChangeText={setLastName}
|
||||
style={styles.textfield}
|
||||
onSubmitEditing={() => {
|
||||
emailRef.current?.focus();
|
||||
}}
|
||||
blurOnSubmit={false}
|
||||
accessibilityLabel="Last name input"
|
||||
accessibilityHint="Enter your last name"
|
||||
accessible
|
||||
returnKeyType="next"
|
||||
textContentType="familyName"
|
||||
importantForAccessibility="yes"
|
||||
/>
|
||||
<TextField
|
||||
placeholder="Email"
|
||||
keyboardType={"email-address"}
|
||||
returnKeyType={"next"}
|
||||
textContentType={"emailAddress"}
|
||||
defaultValue={email}
|
||||
onChangeText={setEmail}
|
||||
style={styles.textfield}
|
||||
autoComplete={"email"}
|
||||
autoCorrect={false}
|
||||
ref={emailRef}
|
||||
onSubmitEditing={() => {
|
||||
passwordRef.current?.focus();
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
centerV
|
||||
style={[styles.textfield, {padding: 0, paddingHorizontal: 30}]}
|
||||
>
|
||||
<TextField
|
||||
ref={passwordRef}
|
||||
placeholder="Password"
|
||||
style={styles.jakartaLight}
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
secureTextEntry={!isPasswordVisible}
|
||||
trailingAccessory={
|
||||
<TouchableOpacity
|
||||
onPress={() => setIsPasswordVisible(!isPasswordVisible)}
|
||||
>
|
||||
<AntDesign
|
||||
name={isPasswordVisible ? "eye" : "eyeo"}
|
||||
size={24}
|
||||
color="gray"
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
<View gap-5 marginT-15>
|
||||
<View row centerV>
|
||||
<Checkbox
|
||||
style={[styles.check]}
|
||||
color="#919191"
|
||||
value={allowFaceID}
|
||||
onValueChange={(value) => {
|
||||
setAllowFaceID(value);
|
||||
}}
|
||||
/>
|
||||
<Text style={styles.jakartaLight} marginL-10>
|
||||
Allow FaceID for login in future
|
||||
</Text>
|
||||
</View>
|
||||
<View row centerV>
|
||||
<Checkbox
|
||||
style={styles.check}
|
||||
color="#919191"
|
||||
value={acceptTerms}
|
||||
onValueChange={(value) => setAcceptTerms(value)}
|
||||
/>
|
||||
<View row>
|
||||
<Text style={styles.jakartaLight} marginL-10>
|
||||
I accept the
|
||||
<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'}}>
|
||||
Get started with Cally
|
||||
</Text>
|
||||
<TouchableOpacity>
|
||||
<Text text90 style={styles.jakartaMedium}>
|
||||
{" "}
|
||||
terms and conditions
|
||||
<Text color={"#919191"} style={{fontSize: 20}}>
|
||||
Please enter your details.
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<KeyboardAvoidingView style={{width: '100%'}}>
|
||||
<TextField
|
||||
marginT-30
|
||||
autoFocus
|
||||
placeholder="First name"
|
||||
value={firstName}
|
||||
onChangeText={setFirstName}
|
||||
style={styles.textfield}
|
||||
onSubmitEditing={() => {
|
||||
lnameRef.current?.focus();
|
||||
}}
|
||||
blurOnSubmit={false}
|
||||
accessibilityLabel="First name input"
|
||||
accessibilityHint="Enter your first name"
|
||||
accessible
|
||||
returnKeyType="next"
|
||||
textContentType="givenName"
|
||||
importantForAccessibility="yes"
|
||||
/>
|
||||
<TextField
|
||||
ref={lnameRef}
|
||||
placeholder="Last name"
|
||||
value={lastName}
|
||||
onChangeText={setLastName}
|
||||
style={styles.textfield}
|
||||
onSubmitEditing={() => {
|
||||
emailRef.current?.focus();
|
||||
}}
|
||||
blurOnSubmit={false}
|
||||
accessibilityLabel="Last name input"
|
||||
accessibilityHint="Enter your last name"
|
||||
accessible
|
||||
returnKeyType="next"
|
||||
textContentType="familyName"
|
||||
importantForAccessibility="yes"
|
||||
/>
|
||||
<TextField
|
||||
placeholder="Email"
|
||||
keyboardType={"email-address"}
|
||||
returnKeyType={"next"}
|
||||
textContentType={"emailAddress"}
|
||||
defaultValue={email}
|
||||
onChangeText={setEmail}
|
||||
style={styles.textfield}
|
||||
autoComplete={"email"}
|
||||
autoCorrect={false}
|
||||
ref={emailRef}
|
||||
onSubmitEditing={() => {
|
||||
passwordRef.current?.focus();
|
||||
}}
|
||||
/>
|
||||
|
||||
<View
|
||||
centerV
|
||||
style={[styles.textfield, {padding: 0, paddingHorizontal: 30}]}
|
||||
>
|
||||
<TextField
|
||||
ref={passwordRef}
|
||||
placeholder="Password"
|
||||
style={styles.jakartaLight}
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
secureTextEntry={!isPasswordVisible}
|
||||
trailingAccessory={
|
||||
<TouchableOpacity
|
||||
onPress={() => setIsPasswordVisible(!isPasswordVisible)}
|
||||
>
|
||||
<AntDesign
|
||||
name={isPasswordVisible ? "eye" : "eyeo"}
|
||||
size={24}
|
||||
color="gray"
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
|
||||
</KeyboardAvoidingView>
|
||||
|
||||
<View gap-5 marginT-15>
|
||||
<View row centerV>
|
||||
<Checkbox
|
||||
style={[styles.check]}
|
||||
color="#919191"
|
||||
value={allowFaceID}
|
||||
onValueChange={(value) => {
|
||||
setAllowFaceID(value);
|
||||
}}
|
||||
/>
|
||||
<Text style={styles.jakartaLight} marginL-10>
|
||||
Allow FaceID for login in future
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.jakartaLight}> and </Text>
|
||||
<TouchableOpacity>
|
||||
<Text text90 style={styles.jakartaMedium}>
|
||||
{" "}
|
||||
privacy policy
|
||||
</View>
|
||||
<View row centerV>
|
||||
<Checkbox
|
||||
style={styles.check}
|
||||
color="#919191"
|
||||
value={acceptTerms}
|
||||
onValueChange={(value) => setAcceptTerms(value)}
|
||||
/>
|
||||
<View row style={{flexWrap: "wrap", marginLeft: 10}}>
|
||||
<Text style={styles.jakartaLight}>
|
||||
I accept the
|
||||
</Text>
|
||||
<TouchableOpacity>
|
||||
<Text text90 style={styles.jakartaMedium}>
|
||||
{" "}
|
||||
terms and conditions
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.jakartaLight}> and </Text>
|
||||
<TouchableOpacity>
|
||||
<Text text90 style={styles.jakartaMedium}>
|
||||
{" "}
|
||||
privacy policy
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View flexG style={{minHeight: 50}}/>
|
||||
|
||||
<View>
|
||||
<Button
|
||||
label="Register"
|
||||
disabled={!acceptTerms}
|
||||
labelStyle={{
|
||||
fontFamily: "PlusJakartaSans_600SemiBold",
|
||||
fontSize: 16,
|
||||
}}
|
||||
onPress={handleSignUp}
|
||||
backgroundColor={"#fd1775"}
|
||||
style={{marginBottom: 0, height: 50}}
|
||||
/>
|
||||
<View row centerH marginT-10 marginB-2 gap-5>
|
||||
<Text style={[styles.jakartaLight, {fontSize: 16, color: "#484848"}]} center>
|
||||
Already have an account?
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<Button
|
||||
label="Log in"
|
||||
labelStyle={[
|
||||
styles.jakartaMedium,
|
||||
{fontSize: 16, textDecorationLine: "none", color: "#fd1775"},
|
||||
]}
|
||||
flexS
|
||||
margin-0
|
||||
link
|
||||
color="#fd1775"
|
||||
size={ButtonSize.small}
|
||||
text70
|
||||
onPress={() => router.replace("/(unauth)/sign_in")}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View flex-1/>
|
||||
<View style={styles.bottomView}>
|
||||
<Button
|
||||
label="Register"
|
||||
labelStyle={{
|
||||
fontFamily: "PlusJakartaSans_600SemiBold",
|
||||
fontSize: 16,
|
||||
}}
|
||||
onPress={handleSignUp}
|
||||
style={{marginBottom: 0, backgroundColor: "#fd1775", height: 50}}
|
||||
/>
|
||||
<View row centerH marginT-10 marginB-2 gap-5>
|
||||
<Text style={[styles.jakartaLight, {fontSize: 16, color: "#484848"}]} center>
|
||||
Already have an account?
|
||||
</Text>
|
||||
</KeyboardAwareScrollView>
|
||||
|
||||
<Button
|
||||
label="Log in"
|
||||
labelStyle={[
|
||||
styles.jakartaMedium,
|
||||
{fontSize: 16, textDecorationLine: "none", color: "#fd1775"},
|
||||
]}
|
||||
flexS
|
||||
margin-0
|
||||
link
|
||||
color="#fd1775"
|
||||
size={ButtonSize.small}
|
||||
text70
|
||||
onPress={() => setTab("login")}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
{isLoading && (
|
||||
<LoaderScreen overlay message={"Signing up..."} backgroundColor={Colors.white}
|
||||
color={Colors.grey40}/>
|
||||
)}
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
@ -211,8 +236,6 @@ const styles = StyleSheet.create({
|
||||
fontSize: 13,
|
||||
color: "#919191",
|
||||
},
|
||||
//mora da se izmeni kako treba
|
||||
bottomView: {marginTop: "auto", marginBottom: 30, marginTop: "auto"},
|
||||
jakartaLight: {
|
||||
fontFamily: "PlusJakartaSans_300Light",
|
||||
fontSize: 13,
|
||||
|
||||
Reference in New Issue
Block a user