ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-26 00:24:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

sign/login ui tweaks

Browse Source
This commit is contained in:
ivic00
2024-10-27 20:51:38 +01:00
parent ca40008174
commit 33a5b5a595
2 changed files with 290 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,170 +1,218 @@
import {Button, ButtonSize, Dialog, Text, TextField, View} from "react-native-ui-lib"; import {
import React, {useState} from "react"; Button,
import {useSignIn} from "@/hooks/firebase/useSignIn"; ButtonSize,
import {StyleSheet} from "react-native"; Dialog,
import Toast from 'react-native-toast-message'; Text,
import {useLoginWithQrCode} from "@/hooks/firebase/useLoginWithQrCode"; TextField,
import {Camera, CameraView} from 'expo-camera'; TextFieldRef,
View,
} from "react-native-ui-lib";
import React, { useRef, useState } from "react";
import { useSignIn } from "@/hooks/firebase/useSignIn";
import { StyleSheet } from "react-native";
import Toast from "react-native-toast-message";
import { useLoginWithQrCode } from "@/hooks/firebase/useLoginWithQrCode";
import { Camera, CameraView } from "expo-camera";
const SignInPage = ({setTab}: { const SignInPage = ({
setTab: React.Dispatch<React.SetStateAction<"register" | "login" | "reset-password">> setTab,
}: {
setTab: React.Dispatch<
React.SetStateAction<"register" | "login" | "reset-password">
>;
}) => { }) => {
const [email, setEmail] = useState<string>(""); const [email, setEmail] = useState<string>("");
const [password, setPassword] = useState<string>(""); const [password, setPassword] = useState<string>("");
const [hasPermission, setHasPermission] = useState<boolean | null>(null); const [hasPermission, setHasPermission] = useState<boolean | null>(null);
const [showCameraDialog, setShowCameraDialog] = useState<boolean>(false); const [showCameraDialog, setShowCameraDialog] = useState<boolean>(false);
const passwordRef = useRef<TextFieldRef>(null);
const {mutateAsync: signIn, error, isError} = useSignIn(); const { mutateAsync: signIn, error, isError } = useSignIn();
const {mutateAsync: signInWithQrCode} = useLoginWithQrCode() const { mutateAsync: signInWithQrCode } = useLoginWithQrCode();
const handleSignIn = async () => { const handleSignIn = async () => {
await signIn({email, password}); await signIn({ email, password });
if (!isError) { if (!isError) {
Toast.show({ Toast.show({
type: "success", type: "success",
text1: "Login successful!" text1: "Login successful!",
}); });
} else { } else {
Toast.show({ Toast.show({
type: "error", type: "error",
text1: "Error logging in", text1: "Error logging in",
text2: `${error}` text2: `${error}`,
}); });
} }
}; };
const handleQrCodeScanned = async ({data}: { data: string }) => { const handleQrCodeScanned = async ({ data }: { data: string }) => {
setShowCameraDialog(false); setShowCameraDialog(false);
try { try {
await signInWithQrCode({userId: data}); await signInWithQrCode({ userId: data });
Toast.show({ Toast.show({
type: "success", type: "success",
text1: "Login successful with QR code!" text1: "Login successful with QR code!",
}); });
} catch (err) { } catch (err) {
Toast.show({ Toast.show({
type: "error", type: "error",
text1: "Error logging in with QR code", text1: "Error logging in with QR code",
text2: `${err}` text2: `${err}`,
}); });
} }
}; };
const getCameraPermissions = async (callback: () => void) => { const getCameraPermissions = async (callback: () => void) => {
const {status} = await Camera.requestCameraPermissionsAsync(); const { status } = await Camera.requestCameraPermissionsAsync();
setHasPermission(status === 'granted'); setHasPermission(status === "granted");
if (status === 'granted') { if (status === "granted") {
callback(); callback();
} }
}; };
return ( return (
<View padding-10 centerV height={"100%"}> <View padding-10 centerV height={"100%"}>
<TextField <TextField
placeholder="Email" placeholder="Email"
value={email} value={email}
onChangeText={setEmail}
style={styles.textfield} onChangeText={setEmail}
/> style={styles.textfield}
<TextField onSubmitEditing={() => {
placeholder="Password" // Move focus to the description field
value={password} passwordRef.current?.focus();
onChangeText={setPassword} }}
secureTextEntry />
style={styles.textfield} <TextField
/> ref={passwordRef}
<Button placeholder="Password"
label="Login" value={password}
onPress={handleSignIn} onChangeText={setPassword}
style={{marginBottom: 20}} secureTextEntry
backgroundColor="#fd1775" style={styles.textfield}
/> />
<Button <Button
label="Login with a QR Code" label="Log in"
onPress={() => { marginT-50
getCameraPermissions(() => setShowCameraDialog(true)); labelStyle={{
} fontFamily: "PlusJakartaSans_600SemiBold",
} fontSize: 16,
style={{marginBottom: 20}} }}
backgroundColor="#fd1775" onPress={handleSignIn}
/> style={{ marginBottom: 20, height: 50 }}
{isError && <Text center style={{marginBottom: 20}}>{`${error?.toString()?.split("]")?.[1]}`}</Text>} 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"
/>
{isError && (
<Text center style={{ marginBottom: 20 }}>{`${
error?.toString()?.split("]")?.[1]
}`}</Text>
)}
<View row centerH marginB-5 gap-5> <View row centerH marginB-5 gap-5>
<Text text70> <Text style={styles.jakartaLight}>Don't have an account?</Text>
Don't have an account? <Button
</Text> onPress={() => setTab("register")}
<Button label="Sign Up"
onPress={() => setTab("register")} labelStyle={[
label="Sign Up" styles.jakartaMedium,
link { textDecorationLine: "none", color: "#fd1575" },
size={ButtonSize.xSmall} ]}
padding-0 link
margin-0 size={ButtonSize.xSmall}
text70 padding-0
left margin-0
color="#fd1775" text70
/> left
</View> color="#fd1775"
/>
</View>
<View row centerH marginB-5 gap-5> <View row centerH marginB-5 gap-5>
<Text text70> <Text text70>Forgot your password?</Text>
Forgot your password? <Button
</Text> onPress={() => setTab("reset-password")}
<Button label="Reset password"
onPress={() => setTab("reset-password")} labelStyle={[
label="Reset password" styles.jakartaMedium,
link { textDecorationLine: "none", color: "#fd1575" },
size={ButtonSize.xSmall} ]}
padding-0 link
margin-0 size={ButtonSize.xSmall}
text70 padding-0
left margin-0
color="#fd1775" text70
/> left
</View> avoidInnerPadding
color="#fd1775"
/>
</View>
{/* Camera Dialog */} {/* Camera Dialog */}
<Dialog <Dialog
visible={showCameraDialog} visible={showCameraDialog}
onDismiss={() => setShowCameraDialog(false)} onDismiss={() => setShowCameraDialog(false)}
bottom bottom
width="100%" width="100%"
height="70%" height="70%"
containerStyle={{padding: 0}} containerStyle={{ padding: 0 }}
> >
{hasPermission === null ? ( {hasPermission === null ? (
<Text>Requesting camera permissions...</Text> <Text>Requesting camera permissions...</Text>
) : !hasPermission ? ( ) : !hasPermission ? (
<Text>No access to camera</Text> <Text>No access to camera</Text>
) : ( ) : (
<CameraView <CameraView
style={{flex: 1}} style={{ flex: 1 }}
onBarcodeScanned={handleQrCodeScanned} onBarcodeScanned={handleQrCodeScanned}
barcodeScannerSettings={{ barcodeScannerSettings={{
barcodeTypes: ["qr"], barcodeTypes: ["qr"],
}} }}
/> />
)} )}
<Button <Button
label="Cancel" label="Cancel"
onPress={() => setShowCameraDialog(false)} onPress={() => setShowCameraDialog(false)}
backgroundColor="#fd1775" backgroundColor="#fd1775"
style={{margin: 10}} style={{ margin: 10 }}
/> />
</Dialog> </Dialog>
</View> </View>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
textfield: { textfield: {
backgroundColor: "white", backgroundColor: "white",
marginVertical: 10, marginVertical: 10,
padding: 30, padding: 30,
height: 45, height: 45,
borderRadius: 50, borderRadius: 50,
}, fontFamily: "PlusJakartaSans_300Light",
},
jakartaLight: {
fontFamily: "PlusJakartaSans_300Light",
fontSize: 16,
color: "#484848",
},
jakartaMedium: {
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
color: "#919191",
textDecorationLine: "underline",
},
}); });
export default SignInPage; export default SignInPage;

129
components/pages/main/SignUpPage.tsx
View File

@ -11,7 +11,7 @@ import {
} 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 { 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 = ({
@ -40,19 +40,21 @@ const SignUpPage = ({
}; };
return ( return (
<View padding-10 height={"100%"} flexG> <View padding-15 marginT-30 height={Dimensions.get("window").height} flexG>
<Text text30 center> <Text style={styles.title}>Get started with Cally</Text>
Get started with Cally <Text style={styles.subtitle} marginT-15 color="#919191">
Please enter your details.
</Text> </Text>
<Text center>Please enter your details.</Text>
<TextField <TextField
marginT-60 marginT-30
autoFocus autoFocus
placeholder="First name" placeholder="First name"
value={firstName} value={firstName}
onChangeText={setFirstName} onChangeText={setFirstName}
style={styles.textfield} style={styles.textfield}
onSubmitEditing={() => {lnameRef.current?.focus()}} onSubmitEditing={() => {
lnameRef.current?.focus();
}}
blurOnSubmit={false} blurOnSubmit={false}
/> />
<TextField <TextField
@ -61,7 +63,9 @@ const SignUpPage = ({
value={lastName} value={lastName}
onChangeText={setLastName} onChangeText={setLastName}
style={styles.textfield} style={styles.textfield}
onSubmitEditing={() => {emailRef.current?.focus()}} onSubmitEditing={() => {
emailRef.current?.focus();
}}
blurOnSubmit={false} blurOnSubmit={false}
/> />
<TextField <TextField
@ -70,58 +74,69 @@ const SignUpPage = ({
value={email} value={email}
onChangeText={setEmail} onChangeText={setEmail}
style={styles.textfield} style={styles.textfield}
onSubmitEditing={() => {passwordRef.current?.focus()}} onSubmitEditing={() => {
passwordRef.current?.focus();
}}
blurOnSubmit={false} blurOnSubmit={false}
/> />
<TextField <View
ref={passwordRef} centerV
placeholder="Password" style={[styles.textfield, { padding: 0, paddingHorizontal: 30 }]}
value={password} >
onChangeText={setPassword} <TextField
secureTextEntry={!isPasswordVisible} ref={passwordRef}
style={styles.textfield} placeholder="Password"
trailingAccessory={ style={styles.jakartaLight}
<TouchableOpacity value={password}
onPress={() => setIsPasswordVisible(!isPasswordVisible)} onChangeText={setPassword}
> secureTextEntry={!isPasswordVisible}
<AntDesign trailingAccessory={
name={isPasswordVisible ? "eye" : "eyeo"} <TouchableOpacity
size={24} onPress={() => setIsPasswordVisible(!isPasswordVisible)}
color="gray" >
/> <AntDesign
</TouchableOpacity> name={isPasswordVisible ? "eye" : "eyeo"}
} size={24}
/> color="gray"
<View gap-10 marginH-10> />
</TouchableOpacity>
}
/>
</View>
<View gap-5 marginT-15>
<View row centerV> <View row centerV>
<Checkbox <Checkbox
style={[styles.check]}
color="#919191"
value={allowFaceID} value={allowFaceID}
onValueChange={(value) => { onValueChange={(value) => {
setAllowFaceID(value); setAllowFaceID(value);
}} }}
/> />
<Text text90R marginL-10> <Text style={styles.jakartaLight} marginL-10>
Allow FaceID for login in future Allow FaceID for login in future
</Text> </Text>
</View> </View>
<View row centerV> <View row centerV>
<Checkbox <Checkbox
style={styles.check}
color="#919191"
value={acceptTerms} value={acceptTerms}
onValueChange={(value) => setAcceptTerms(value)} onValueChange={(value) => setAcceptTerms(value)}
/> />
<View row> <View row>
<Text text90R marginL-10> <Text style={styles.jakartaLight} marginL-10>
I accept the I accept the
</Text> </Text>
<TouchableOpacity> <TouchableOpacity>
<Text text90 style={{ textDecorationLine: "underline" }}> <Text text90 style={styles.jakartaMedium}>
{" "} {" "}
terms and conditions terms and conditions
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
<Text text90R> and </Text> <Text style={styles.jakartaLight}> and </Text>
<TouchableOpacity> <TouchableOpacity>
<Text text90 style={{ textDecorationLine: "underline" }}> <Text text90 style={styles.jakartaMedium}>
{" "} {" "}
privacy policy privacy policy
</Text> </Text>
@ -132,16 +147,24 @@ const SignUpPage = ({
<View style={styles.bottomView}> <View style={styles.bottomView}>
<Button <Button
label="Register" label="Register"
labelStyle={{
fontFamily: "PlusJakartaSans_600SemiBold",
fontSize: 16,
}}
onPress={handleSignUp} onPress={handleSignUp}
style={{ marginBottom: 10, backgroundColor: "#fd1775" }} style={{ marginBottom: 0, backgroundColor: "#fd1775", height: 50 }}
/> />
<View row centerH marginT-10 marginB-5 gap-5> <View row centerH marginT-10 marginB-2 gap-5>
<Text text70 center> <Text style={[styles.jakartaLight, { fontSize: 16, color: "#484848" }]} center>
Already have an account? Already have an account?
</Text> </Text>
<Button <Button
label="Sign In" label="Log in"
labelStyle={[
styles.jakartaMedium,
{ fontSize: 16, textDecorationLine: "none", color: "#fd1775" },
]}
flexS flexS
margin-0 margin-0
link link
@ -161,11 +184,35 @@ export default SignUpPage;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
textfield: { textfield: {
backgroundColor: "white", backgroundColor: "white",
marginVertical: 10, marginVertical: 8,
padding: 30, padding: 30,
height: 45, height: 44,
borderRadius: 50, borderRadius: 50,
fontFamily: "PlusJakartaSans_300Light",
fontSize: 13,
color: "#919191",
}, },
//mora da se izmeni kako treba //mora da se izmeni kako treba
bottomView: { marginTop: 150 }, bottomView: { marginTop: "auto", marginBottom: 30 },
jakartaLight: {
fontFamily: "PlusJakartaSans_300Light",
fontSize: 13,
color: "#919191",
},
jakartaMedium: {
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 13,
color: "#919191",
textDecorationLine: "underline",
},
title: { fontFamily: "Manrope_600SemiBold", fontSize: 34, marginTop: 50 },
subtitle: { fontFamily: "PlusJakartaSans_400Regular", fontSize: 16 },
check: {
borderRadius: 3,
aspectRatio: 1,
width: 18,
color: "#919191",
borderColor: "#919191",
borderWidth: 1,
},
}); });