This commit is contained in:
Milan Paunovic
2024-10-28 09:41:20 +01:00
parent 6fede24f89
commit 2c0a8a9392
4 changed files with 205 additions and 205 deletions

View File

@ -8,7 +8,7 @@ const Entry = () => {
const [tab, setTab] = useState<"register" | "login" | "reset-password">("login"); const [tab, setTab] = useState<"register" | "login" | "reset-password">("login");
return ( return (
<View> <View style={{height:"100%"}}>
{tab === "register" && <SignUpPage setTab={setTab}/>} {tab === "register" && <SignUpPage setTab={setTab}/>}
{tab === "login" && <SignInPage setTab={setTab}/>} {tab === "login" && <SignInPage setTab={setTab}/>}
{tab === "reset-password" && <ResetPasswordPage setTab={setTab}/>} {tab === "reset-password" && <ResetPasswordPage setTab={setTab}/>}

View File

@ -167,7 +167,7 @@ const SignInPage = ({
bottom bottom
width="100%" width="100%"
height="70%" height="70%"
containerStyle={{ padding: 0 }} containerStyle={{ padding: 15, backgroundColor:"white" }}
> >
{hasPermission === null ? ( {hasPermission === null ? (
<Text>Requesting camera permissions...</Text> <Text>Requesting camera permissions...</Text>
@ -175,7 +175,7 @@ const SignInPage = ({
<Text>No access to camera</Text> <Text>No access to camera</Text>
) : ( ) : (
<CameraView <CameraView
style={{ flex: 1 }} style={{ flex: 1, borderRadius: 15 }}
onBarcodeScanned={handleQrCodeScanned} onBarcodeScanned={handleQrCodeScanned}
barcodeScannerSettings={{ barcodeScannerSettings={{
barcodeTypes: ["qr"], barcodeTypes: ["qr"],
@ -186,7 +186,7 @@ const SignInPage = ({
label="Cancel" label="Cancel"
onPress={() => setShowCameraDialog(false)} onPress={() => setShowCameraDialog(false)}
backgroundColor="#fd1775" backgroundColor="#fd1775"
style={{ margin: 10 }} style={{ margin: 10, marginBottom: 30 }}
/> />
</Dialog> </Dialog>
</View> </View>

View File

@ -1,218 +1,218 @@
import React, { useRef, useState } from "react"; import React, {useRef, useState} from "react";
import { import {
Button, Button,
ButtonSize, ButtonSize,
Checkbox, Checkbox,
Text, Text,
TextField, TextField,
TextFieldRef, TextFieldRef,
TouchableOpacity, TouchableOpacity,
View, View,
} from "react-native-ui-lib"; } from "react-native-ui-lib";
import { useSignUp } from "@/hooks/firebase/useSignUp"; import {useSignUp} from "@/hooks/firebase/useSignUp";
import { ProfileType } from "@/contexts/AuthContext"; import {StyleSheet} from "react-native";
import { Dimensions, StyleSheet } from "react-native"; import {AntDesign} from "@expo/vector-icons";
import { AntDesign } from "@expo/vector-icons";
const SignUpPage = ({ const SignUpPage = ({
setTab, setTab,
}: { }: {
setTab: React.Dispatch< setTab: React.Dispatch<
React.SetStateAction<"register" | "login" | "reset-password"> React.SetStateAction<"register" | "login" | "reset-password">
>; >;
}) => { }) => {
const [email, setEmail] = useState<string>(""); const [email, setEmail] = useState<string>("");
const [firstName, setFirstName] = useState<string>(""); const [firstName, setFirstName] = useState<string>("");
const [lastName, setLastName] = useState<string>(""); const [lastName, setLastName] = useState<string>("");
const [password, setPassword] = useState<string>(""); const [password, setPassword] = useState<string>("");
const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false); const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false);
const [allowFaceID, setAllowFaceID] = useState<boolean>(false); const [allowFaceID, setAllowFaceID] = useState<boolean>(false);
const [acceptTerms, setAcceptTerms] = useState<boolean>(false); const [acceptTerms, setAcceptTerms] = useState<boolean>(false);
const { mutateAsync: signUp } = useSignUp(); const {mutateAsync: signUp} = useSignUp();
const lnameRef = useRef<TextFieldRef>(null); const lnameRef = useRef<TextFieldRef>(null);
const emailRef = useRef<TextFieldRef>(null); const emailRef = useRef<TextFieldRef>(null);
const passwordRef = useRef<TextFieldRef>(null); const passwordRef = useRef<TextFieldRef>(null);
const handleSignUp = async () => { const handleSignUp = async () => {
await signUp({ email, password, firstName, lastName }); await signUp({email, password, firstName, lastName});
}; };
return ( return (
<View padding-15 marginT-30 height={Dimensions.get("window").height} flexG> <View height={"100%"} padding-15 marginT-30>
<Text style={styles.title}>Get started with Cally</Text> <Text style={styles.title}>Get started with Cally</Text>
<Text style={styles.subtitle} marginT-15 color="#919191"> <Text style={styles.subtitle} marginT-15 color="#919191">
Please enter your details. 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}
/>
<TextField
ref={lnameRef}
placeholder="Last name"
value={lastName}
onChangeText={setLastName}
style={styles.textfield}
onSubmitEditing={() => {
emailRef.current?.focus();
}}
blurOnSubmit={false}
/>
<TextField
ref={emailRef}
placeholder="Email"
value={email}
onChangeText={setEmail}
style={styles.textfield}
onSubmitEditing={() => {
passwordRef.current?.focus();
}}
blurOnSubmit={false}
/>
<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
</Text> </Text>
<TouchableOpacity> <TextField
<Text text90 style={styles.jakartaMedium}> marginT-30
{" "} autoFocus
terms and conditions placeholder="First name"
</Text> value={firstName}
</TouchableOpacity> onChangeText={setFirstName}
<Text style={styles.jakartaLight}> and </Text> style={styles.textfield}
<TouchableOpacity> onSubmitEditing={() => {
<Text text90 style={styles.jakartaMedium}> lnameRef.current?.focus();
{" "} }}
privacy policy blurOnSubmit={false}
</Text> />
</TouchableOpacity> <TextField
</View> ref={lnameRef}
</View> placeholder="Last name"
</View> value={lastName}
<View style={styles.bottomView}> onChangeText={setLastName}
<Button style={styles.textfield}
label="Register" onSubmitEditing={() => {
labelStyle={{ emailRef.current?.focus();
fontFamily: "PlusJakartaSans_600SemiBold", }}
fontSize: 16, blurOnSubmit={false}
}} />
onPress={handleSignUp} <TextField
style={{ marginBottom: 0, backgroundColor: "#fd1775", height: 50 }} ref={emailRef}
/> placeholder="Email"
<View row centerH marginT-10 marginB-2 gap-5> value={email}
<Text style={[styles.jakartaLight, { fontSize: 16, color: "#484848" }]} center> onChangeText={setEmail}
Already have an account? style={styles.textfield}
</Text> onSubmitEditing={() => {
passwordRef.current?.focus();
}}
blurOnSubmit={false}
/>
<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
</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 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>
<Button <Button
label="Log in" label="Log in"
labelStyle={[ labelStyle={[
styles.jakartaMedium, styles.jakartaMedium,
{ fontSize: 16, textDecorationLine: "none", color: "#fd1775" }, {fontSize: 16, textDecorationLine: "none", color: "#fd1775"},
]} ]}
flexS flexS
margin-0 margin-0
link link
color="#fd1775" color="#fd1775"
size={ButtonSize.small} size={ButtonSize.small}
text70 text70
onPress={() => setTab("login")} onPress={() => setTab("login")}
/> />
</View>
</View>
</View> </View>
</View> );
</View>
);
}; };
export default SignUpPage; export default SignUpPage;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
textfield: { textfield: {
backgroundColor: "white", backgroundColor: "white",
marginVertical: 8, marginVertical: 8,
padding: 30, padding: 30,
height: 44, height: 44,
borderRadius: 50, borderRadius: 50,
fontFamily: "PlusJakartaSans_300Light", fontFamily: "PlusJakartaSans_300Light",
fontSize: 13, fontSize: 13,
color: "#919191", color: "#919191",
}, },
//mora da se izmeni kako treba //mora da se izmeni kako treba
bottomView: { marginTop: "auto", marginBottom: 30 }, bottomView: {marginTop: "auto", marginBottom: 30, marginTop: "auto"},
jakartaLight: { jakartaLight: {
fontFamily: "PlusJakartaSans_300Light", fontFamily: "PlusJakartaSans_300Light",
fontSize: 13, fontSize: 13,
color: "#919191", color: "#919191",
}, },
jakartaMedium: { jakartaMedium: {
fontFamily: "PlusJakartaSans_500Medium", fontFamily: "PlusJakartaSans_500Medium",
fontSize: 13, fontSize: 13,
color: "#919191", color: "#919191",
textDecorationLine: "underline", textDecorationLine: "underline",
}, },
title: { fontFamily: "Manrope_600SemiBold", fontSize: 34, marginTop: 50 }, title: {fontFamily: "Manrope_600SemiBold", fontSize: 34, marginTop: 50},
subtitle: { fontFamily: "PlusJakartaSans_400Regular", fontSize: 16 }, subtitle: {fontFamily: "PlusJakartaSans_400Regular", fontSize: 16},
check: { check: {
borderRadius: 3, borderRadius: 3,
aspectRatio: 1, aspectRatio: 1,
width: 18, width: 18,
color: "#919191", color: "#919191",
borderColor: "#919191", borderColor: "#919191",
borderWidth: 1, borderWidth: 1,
}, },
}); });

View File

@ -15,7 +15,7 @@ export const useCreateSubUser = () => {
return await functions().httpsCallable("createSubUser")({ return await functions().httpsCallable("createSubUser")({
...userProfile, ...userProfile,
email, email,
familyId: profileData?.familyId familyId: profileData?.familyId!
}) as HttpsCallableResult<{ userId: string }> }) as HttpsCallableResult<{ userId: string }>
} else { } else {
throw Error("Can't create sub-users as a non-parent.") throw Error("Can't create sub-users as a non-parent.")