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

Small fixes

Browse Source
This commit is contained in:
Milan Paunovic
2024-10-31 21:28:23 +01:00
parent fda1287011
commit ca5df87f3d
5 changed files with 244 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,16 @@
import {Button, ButtonSize, Dialog, Text, TextField, TextFieldRef, View,} from "react-native-ui-lib";
import {
Button,
ButtonSize, Colors,
Dialog,
KeyboardAwareScrollView, LoaderScreen, Modal,
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 {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";
@ -19,8 +28,10 @@ const SignInPage = ({
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, isLoading: isSigninIn} = useSignIn();
const {mutateAsync: signInWithQrCode, isLoading: isQRCodeLoggingIn} = useLoginWithQrCode();
const isLoading = isSigninIn || isQRCodeLoggingIn
const handleSignIn = async () => {
await signIn({email, password});
@ -64,8 +75,13 @@ const SignInPage = ({
};
return (
<View padding-10 centerV height={"100%"}>
<TextField
<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"}
@ -73,6 +89,8 @@ const SignInPage = ({
defaultValue={email}
onChangeText={setEmail}
style={styles.textfield}
autoComplete={"email"}
autoCorrect={false}
onSubmitEditing={() => {
// Move focus to the description field
passwordRef.current?.focus();
@ -99,62 +117,64 @@ const SignInPage = ({
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"
/>
{isError && (
<Text center style={{marginBottom: 20}}>{`${
error?.toString()?.split("]")?.[1]
}`}</Text>
)}
<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"
label="Log in with a QR Code"
labelStyle={{
fontFamily: "PlusJakartaSans_600SemiBold",
fontSize: 16,
}}
onPress={() => {
getCameraPermissions(() => setShowCameraDialog(true));
}}
style={{marginBottom: 20, height: 50}}
backgroundColor="#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>
{isError && (
<Text center style={{marginBottom: 20}}>{`${
error?.toString()?.split("]")?.[1]
}`}</Text>
)}
<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
@ -185,6 +205,12 @@ const SignInPage = ({
style={{margin: 10, marginBottom: 30}}
/>
</Dialog>
{isLoading && (
<LoaderScreen overlay message={"Signing in..."} backgroundColor={Colors.white} color={Colors.grey40}/>
)}
</View>
);
};