mirror of
https://github.com/urosran/cally.git
synced 2025-11-26 00:24:53 +00:00
sign/login ui tweaks
This commit is contained in:
ivic00
@ -1,59 +1,72 @@
|
||||
import {Button, ButtonSize, Dialog, Text, TextField, View} from "react-native-ui-lib";
|
||||
import React, {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';
|
||||
import {
|
||||
Button,
|
||||
ButtonSize,
|
||||
Dialog,
|
||||
Text,
|
||||
TextField,
|
||||
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}: {
|
||||
setTab: React.Dispatch<React.SetStateAction<"register" | "login" | "reset-password">>
|
||||
const SignInPage = ({
|
||||
setTab,
|
||||
}: {
|
||||
setTab: React.Dispatch<
|
||||
React.SetStateAction<"register" | "login" | "reset-password">
|
||||
>;
|
||||
}) => {
|
||||
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} = useSignIn();
|
||||
const {mutateAsync: signInWithQrCode} = useLoginWithQrCode()
|
||||
const { mutateAsync: signIn, error, isError } = useSignIn();
|
||||
const { mutateAsync: signInWithQrCode } = useLoginWithQrCode();
|
||||
|
||||
const handleSignIn = async () => {
|
||||
await signIn({email, password});
|
||||
await signIn({ email, password });
|
||||
if (!isError) {
|
||||
Toast.show({
|
||||
type: "success",
|
||||
text1: "Login successful!"
|
||||
text1: "Login successful!",
|
||||
});
|
||||
} else {
|
||||
Toast.show({
|
||||
type: "error",
|
||||
text1: "Error logging in",
|
||||
text2: `${error}`
|
||||
text2: `${error}`,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleQrCodeScanned = async ({data}: { data: string }) => {
|
||||
const handleQrCodeScanned = async ({ data }: { data: string }) => {
|
||||
setShowCameraDialog(false);
|
||||
try {
|
||||
await signInWithQrCode({userId: data});
|
||||
await signInWithQrCode({ userId: data });
|
||||
Toast.show({
|
||||
type: "success",
|
||||
text1: "Login successful with QR code!"
|
||||
text1: "Login successful with QR code!",
|
||||
});
|
||||
} catch (err) {
|
||||
Toast.show({
|
||||
type: "error",
|
||||
text1: "Error logging in with QR code",
|
||||
text2: `${err}`
|
||||
text2: `${err}`,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const getCameraPermissions = async (callback: () => void) => {
|
||||
const {status} = await Camera.requestCameraPermissionsAsync();
|
||||
setHasPermission(status === 'granted');
|
||||
if (status === 'granted') {
|
||||
const { status } = await Camera.requestCameraPermissionsAsync();
|
||||
setHasPermission(status === "granted");
|
||||
if (status === "granted") {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
@ -63,10 +76,16 @@ const SignInPage = ({setTab}: {
|
||||
<TextField
|
||||
placeholder="Email"
|
||||
value={email}
|
||||
|
||||
onChangeText={setEmail}
|
||||
style={styles.textfield}
|
||||
onSubmitEditing={() => {
|
||||
// Move focus to the description field
|
||||
passwordRef.current?.focus();
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
ref={passwordRef}
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
@ -74,29 +93,43 @@ const SignInPage = ({setTab}: {
|
||||
style={styles.textfield}
|
||||
/>
|
||||
<Button
|
||||
label="Login"
|
||||
label="Log in"
|
||||
marginT-50
|
||||
labelStyle={{
|
||||
fontFamily: "PlusJakartaSans_600SemiBold",
|
||||
fontSize: 16,
|
||||
}}
|
||||
onPress={handleSignIn}
|
||||
style={{marginBottom: 20}}
|
||||
style={{ marginBottom: 20, height: 50 }}
|
||||
backgroundColor="#fd1775"
|
||||
/>
|
||||
<Button
|
||||
label="Login with a QR Code"
|
||||
label="Log in with a QR Code"
|
||||
labelStyle={{
|
||||
fontFamily: "PlusJakartaSans_600SemiBold",
|
||||
fontSize: 16,
|
||||
}}
|
||||
onPress={() => {
|
||||
getCameraPermissions(() => setShowCameraDialog(true));
|
||||
}
|
||||
}
|
||||
style={{marginBottom: 20}}
|
||||
}}
|
||||
style={{ marginBottom: 20, height: 50 }}
|
||||
backgroundColor="#fd1775"
|
||||
/>
|
||||
{isError && <Text center style={{marginBottom: 20}}>{`${error?.toString()?.split("]")?.[1]}`}</Text>}
|
||||
{isError && (
|
||||
<Text center style={{ marginBottom: 20 }}>{`${
|
||||
error?.toString()?.split("]")?.[1]
|
||||
}`}</Text>
|
||||
)}
|
||||
|
||||
<View row centerH marginB-5 gap-5>
|
||||
<Text text70>
|
||||
Don't have an account?
|
||||
</Text>
|
||||
<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
|
||||
@ -108,18 +141,21 @@ const SignInPage = ({setTab}: {
|
||||
</View>
|
||||
|
||||
<View row centerH marginB-5 gap-5>
|
||||
<Text text70>
|
||||
Forgot your password?
|
||||
</Text>
|
||||
<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>
|
||||
@ -131,7 +167,7 @@ const SignInPage = ({setTab}: {
|
||||
bottom
|
||||
width="100%"
|
||||
height="70%"
|
||||
containerStyle={{padding: 0}}
|
||||
containerStyle={{ padding: 0 }}
|
||||
>
|
||||
{hasPermission === null ? (
|
||||
<Text>Requesting camera permissions...</Text>
|
||||
@ -139,7 +175,7 @@ const SignInPage = ({setTab}: {
|
||||
<Text>No access to camera</Text>
|
||||
) : (
|
||||
<CameraView
|
||||
style={{flex: 1}}
|
||||
style={{ flex: 1 }}
|
||||
onBarcodeScanned={handleQrCodeScanned}
|
||||
barcodeScannerSettings={{
|
||||
barcodeTypes: ["qr"],
|
||||
@ -150,7 +186,7 @@ const SignInPage = ({setTab}: {
|
||||
label="Cancel"
|
||||
onPress={() => setShowCameraDialog(false)}
|
||||
backgroundColor="#fd1775"
|
||||
style={{margin: 10}}
|
||||
style={{ margin: 10 }}
|
||||
/>
|
||||
</Dialog>
|
||||
</View>
|
||||
@ -164,6 +200,18 @@ const styles = StyleSheet.create({
|
||||
padding: 30,
|
||||
height: 45,
|
||||
borderRadius: 50,
|
||||
fontFamily: "PlusJakartaSans_300Light",
|
||||
},
|
||||
jakartaLight: {
|
||||
fontFamily: "PlusJakartaSans_300Light",
|
||||
fontSize: 16,
|
||||
color: "#484848",
|
||||
},
|
||||
jakartaMedium: {
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 16,
|
||||
color: "#919191",
|
||||
textDecorationLine: "underline",
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ import {
|
||||
} from "react-native-ui-lib";
|
||||
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";
|
||||
|
||||
const SignUpPage = ({
|
||||
@ -40,19 +40,21 @@ const SignUpPage = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<View padding-10 height={"100%"} flexG>
|
||||
<Text text30 center>
|
||||
Get started with Cally
|
||||
<View padding-15 marginT-30 height={Dimensions.get("window").height} flexG>
|
||||
<Text style={styles.title}>Get started with Cally</Text>
|
||||
<Text style={styles.subtitle} marginT-15 color="#919191">
|
||||
Please enter your details.
|
||||
</Text>
|
||||
<Text center>Please enter your details.</Text>
|
||||
<TextField
|
||||
marginT-60
|
||||
marginT-30
|
||||
autoFocus
|
||||
placeholder="First name"
|
||||
value={firstName}
|
||||
onChangeText={setFirstName}
|
||||
style={styles.textfield}
|
||||
onSubmitEditing={() => {lnameRef.current?.focus()}}
|
||||
onSubmitEditing={() => {
|
||||
lnameRef.current?.focus();
|
||||
}}
|
||||
blurOnSubmit={false}
|
||||
/>
|
||||
<TextField
|
||||
@ -61,7 +63,9 @@ const SignUpPage = ({
|
||||
value={lastName}
|
||||
onChangeText={setLastName}
|
||||
style={styles.textfield}
|
||||
onSubmitEditing={() => {emailRef.current?.focus()}}
|
||||
onSubmitEditing={() => {
|
||||
emailRef.current?.focus();
|
||||
}}
|
||||
blurOnSubmit={false}
|
||||
/>
|
||||
<TextField
|
||||
@ -70,16 +74,22 @@ const SignUpPage = ({
|
||||
value={email}
|
||||
onChangeText={setEmail}
|
||||
style={styles.textfield}
|
||||
onSubmitEditing={() => {passwordRef.current?.focus()}}
|
||||
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}
|
||||
style={styles.textfield}
|
||||
trailingAccessory={
|
||||
<TouchableOpacity
|
||||
onPress={() => setIsPasswordVisible(!isPasswordVisible)}
|
||||
@ -92,36 +102,41 @@ const SignUpPage = ({
|
||||
</TouchableOpacity>
|
||||
}
|
||||
/>
|
||||
<View gap-10 marginH-10>
|
||||
</View>
|
||||
<View gap-5 marginT-15>
|
||||
<View row centerV>
|
||||
<Checkbox
|
||||
style={[styles.check]}
|
||||
color="#919191"
|
||||
value={allowFaceID}
|
||||
onValueChange={(value) => {
|
||||
setAllowFaceID(value);
|
||||
}}
|
||||
/>
|
||||
<Text text90R marginL-10>
|
||||
<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 text90R marginL-10>
|
||||
<Text style={styles.jakartaLight} marginL-10>
|
||||
I accept the
|
||||
</Text>
|
||||
<TouchableOpacity>
|
||||
<Text text90 style={{ textDecorationLine: "underline" }}>
|
||||
<Text text90 style={styles.jakartaMedium}>
|
||||
{" "}
|
||||
terms and conditions
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<Text text90R> and </Text>
|
||||
<Text style={styles.jakartaLight}> and </Text>
|
||||
<TouchableOpacity>
|
||||
<Text text90 style={{ textDecorationLine: "underline" }}>
|
||||
<Text text90 style={styles.jakartaMedium}>
|
||||
{" "}
|
||||
privacy policy
|
||||
</Text>
|
||||
@ -132,16 +147,24 @@ const SignUpPage = ({
|
||||
<View style={styles.bottomView}>
|
||||
<Button
|
||||
label="Register"
|
||||
labelStyle={{
|
||||
fontFamily: "PlusJakartaSans_600SemiBold",
|
||||
fontSize: 16,
|
||||
}}
|
||||
onPress={handleSignUp}
|
||||
style={{ marginBottom: 10, backgroundColor: "#fd1775" }}
|
||||
style={{ marginBottom: 0, backgroundColor: "#fd1775", height: 50 }}
|
||||
/>
|
||||
<View row centerH marginT-10 marginB-5 gap-5>
|
||||
<Text text70 center>
|
||||
<View row centerH marginT-10 marginB-2 gap-5>
|
||||
<Text style={[styles.jakartaLight, { fontSize: 16, color: "#484848" }]} center>
|
||||
Already have an account?
|
||||
</Text>
|
||||
|
||||
<Button
|
||||
label="Sign In"
|
||||
label="Log in"
|
||||
labelStyle={[
|
||||
styles.jakartaMedium,
|
||||
{ fontSize: 16, textDecorationLine: "none", color: "#fd1775" },
|
||||
]}
|
||||
flexS
|
||||
margin-0
|
||||
link
|
||||
@ -161,11 +184,35 @@ export default SignUpPage;
|
||||
const styles = StyleSheet.create({
|
||||
textfield: {
|
||||
backgroundColor: "white",
|
||||
marginVertical: 10,
|
||||
marginVertical: 8,
|
||||
padding: 30,
|
||||
height: 45,
|
||||
height: 44,
|
||||
borderRadius: 50,
|
||||
fontFamily: "PlusJakartaSans_300Light",
|
||||
fontSize: 13,
|
||||
color: "#919191",
|
||||
},
|
||||
//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,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user