Merge branch 'dev'

# Conflicts:
#	app/(auth)/calendar/index.tsx
#	components/pages/calendar/ManuallyAddEventModal.tsx
#	components/pages/main/SignUpPage.tsx
#	package.json

components/pages/main/SignUpPage.tsx

@@ -1,145 +1,150 @@
-import React, {useState} from "react";
-import {Button, ButtonSize, Text, TextField, View,} from "react-native-ui-lib";
-import {useSignUp} from "@/hooks/firebase/useSignUp";
-import {ProfileType} from "@/contexts/AuthContext";
-import {StyleSheet} from "react-native";
-import {AntDesign} from "@expo/vector-icons";
+import React, { useState } from "react";
+import {
+  Button,
+  ButtonSize,
+  Checkbox,
+  Text,
+  TextField,
+  TouchableOpacity,
+  View,
+} from "react-native-ui-lib";
+import { useSignUp } from "@/hooks/firebase/useSignUp";
+import { ProfileType } from "@/contexts/AuthContext";
+import { StyleSheet } from "react-native";
+import { AntDesign } from "@expo/vector-icons";
 
 const SignUpPage = ({setTab}: { setTab:  React.Dispatch<React.SetStateAction<"register" | "login" | "reset-password">> }) => {
-    const [email, setEmail] = useState<string>("");
-    const [firstName, setFirstName] = useState<string>("");
-    const [lastName, setLastName] = useState<string>("");
-    const [password, setPassword] = useState<string>("");
-    const [isParent, setIsParent] = useState<boolean>(true);
-    const [isChild, setIsChild] = useState<boolean>(false);
-    const [isCaregiver, setIsCaregiver] = useState<boolean>(false);
-    const [profileType, setProfileType] = useState<ProfileType>(
-        ProfileType.PARENT
-    );
-    const {mutateAsync: signUp} = useSignUp();
+  const [email, setEmail] = useState<string>("");
+  const [firstName, setFirstName] = useState<string>("");
+  const [lastName, setLastName] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
 
-    const handleSignUp = async () => {
-        await signUp({email, password, firstName, lastName});
-    };
+  const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false);
+  const [allowFaceID, setAllowFaceID] = useState<boolean>(false);
+  const [acceptTerms, setAcceptTerms] = useState<boolean>(false);
+  const { mutateAsync: signUp } = useSignUp();
 
-    return (
-        <View padding-10>
-            <Text text30 center>
-                Get started with Kali
-            </Text>
-            <Text center>Please enter your details.</Text>
-            <TextField
-                marginT-60
-                placeholder="First name"
-                value={firstName}
-                onChangeText={setFirstName}
-                style={styles.textfield}
-            />
-            <TextField
-                placeholder="Last name"
-                value={lastName}
-                onChangeText={setLastName}
-                style={styles.textfield}
-            />
-            <TextField
-                placeholder="Email"
-                value={email}
-                onChangeText={setEmail}
-                style={styles.textfield}
-            />
-            <TextField
-                placeholder="Password"
-                value={password}
-                onChangeText={setPassword}
-                secureTextEntry
-                style={styles.textfield}
-            />
-            <Button
-                label="Register"
-                onPress={handleSignUp}
-                style={{marginBottom: 10, backgroundColor: "#fd1775"}}
-            />
-            <Button
-                label="Sign up with Google"
-                backgroundColor="white"
-                color="black"
-                iconSource={() => (
-                    <AntDesign
-                        name="google"
-                        size={24}
-                        color="black"
-                        style={{marginRight: 15}}
-                    />
-                )}
-            />
-            {/*<Text style={{ marginBottom: 10 }}>Choose Profile Type:</Text>
-            <Checkbox
-                label="Parent"
-                value={isParent}
-                onValueChange={(value) => {
-                    setIsParent(value);
-                    setProfileType(ProfileType.PARENT);
-                    if (value) {
-                        setIsChild(false);
-                        setIsCaregiver(false);
-                    }
-                }}
-                style={{ marginBottom: 10 }}
-            />
-            <Checkbox
-                label="Child"
-                value={isChild}
-                onValueChange={(value) => {
-                    setIsChild(value);
-                    setProfileType(ProfileType.CHILD);
-                    if (value) {
-                        setIsParent(false);
-                        setIsCaregiver(false);
-                    }
-                }}
-                style={{ marginBottom: 10 }}
-            />
-            <Checkbox
-                label="Caregiver"
-                value={isCaregiver}
-                onValueChange={(value) => {
-                    setIsCaregiver(value);
-                    setProfileType(ProfileType.CAREGIVER);
-                    if (value) {
-                        setIsParent(false);
-                        setIsChild(false);
-                    }
-                }}
-            />*/}
-            <View row centerH marginT-10 marginB-5 gap-5>
-                <Text text70 center>
-                    Already have an account?
-                </Text>
+  const handleSignUp = async () => {
+    await signUp({ email, password, firstName, lastName });
+  };
 
-
-                <Button
-                    label="Sign In"
-                    flexS
-                    margin-0
-                    link
-                    color="#fd1775"
-                    size={ButtonSize.small}
-                    text70
-                    onPress={() => setTab("login")}
-                />
-            </View>
+  return (
+    <View padding-10 height={"100%"} flexG>
+      <Text text30 center>
+        Get started with Kali
+      </Text>
+      <Text center>Please enter your details.</Text>
+      <TextField
+        marginT-60
+        placeholder="First name"
+        value={firstName}
+        onChangeText={setFirstName}
+        style={styles.textfield}
+      />
+      <TextField
+        placeholder="Last name"
+        value={lastName}
+        onChangeText={setLastName}
+        style={styles.textfield}
+      />
+      <TextField
+        placeholder="Email"
+        value={email}
+        onChangeText={setEmail}
+        style={styles.textfield}
+      />
+      <TextField
+        placeholder="Password"
+        value={password}
+        onChangeText={setPassword}
+        secureTextEntry={!isPasswordVisible}
+        style={styles.textfield}
+        trailingAccessory={
+          <TouchableOpacity
+            onPress={() => setIsPasswordVisible(!isPasswordVisible)}
+          >
+            <AntDesign
+              name={isPasswordVisible ? "eye" : "eyeo"}
+              size={24}
+              color="gray"
+            />
+          </TouchableOpacity>
+        }
+      />
+      <View gap-10 marginH-10>
+        <View row centerV>
+          <Checkbox
+            value={allowFaceID}
+            onValueChange={(value) => {
+              setAllowFaceID(value);
+            }}
+          />
+          <Text text90R marginL-10>
+            Allow FaceID for login in future
+          </Text>
         </View>
-    );
+        <View row centerV>
+          <Checkbox
+            value={acceptTerms}
+            onValueChange={(value) => setAcceptTerms(value)}
+          />
+          <View row>
+            <Text text90R marginL-10>
+              I accept the
+            </Text>
+            <TouchableOpacity>
+              <Text text90 style={{ textDecorationLine: "underline" }}>
+                {" "}
+                terms and conditions
+              </Text>
+            </TouchableOpacity>
+            <Text text90R> and </Text>
+            <TouchableOpacity>
+              <Text text90 style={{ textDecorationLine: "underline" }}>
+                {" "}
+                privacy policy
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+      <View style={styles.bottomView}>
+        <Button
+          label="Register"
+          onPress={handleSignUp}
+          style={{ marginBottom: 10, backgroundColor: "#fd1775" }}
+        />
+        <View row centerH marginT-10 marginB-5 gap-5>
+          <Text text70 center>
+            Already have an account?
+          </Text>
+
+          <Button
+            label="Sign In"
+            flexS
+            margin-0
+            link
+            color="#fd1775"
+            size={ButtonSize.small}
+            text70
+            onPress={() => setTab("login")}
+          />
+        </View>
+      </View>
+    </View>
+  );
 };
 
 export default SignUpPage;
 
 const styles = StyleSheet.create({
-    textfield: {
-        backgroundColor: "white",
-        marginVertical: 10,
-        padding: 30,
-        height: 45,
-        borderRadius: 50,
-    },
+  textfield: {
+    backgroundColor: "white",
+    marginVertical: 10,
+    padding: 30,
+    height: 45,
+    borderRadius: 50,
+  },
+  //mora da se izmeni kako treba
+  bottomView: { marginTop: 150 },
 });