Draft: Master

Lorem impsum dolor sit amet

screens/auth/Signup.js

@@ -2,31 +2,31 @@ import React, { useState } from "react";
 import { StyleSheet, Text, View, Button, TextInput, Image, SafeAreaView, TouchableOpacity, StatusBar, Alert } from "react-native";
 import { createUserWithEmailAndPassword } from "firebase/auth";
 import { auth } from "../../config/firebase";
+import RadioGroup from 'react-native-radio-buttons-group';
 const backImage = require("../../assets/backImage.png");
+import { collection, addDoc } from "firebase/firestore";
+import { database } from "../../config/firebase";
+
 
 export default function Signup({ navigation }) {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [name, setName] = useState("");
+  const [role, setRole] = useState("")
+  const [error, setError] = useState("")
 
   const onHandleSignup = () => {
+    if (!role) { setError("Please choose a role!"); return; }
     if (email !== "" && password !== "") {
       createUserWithEmailAndPassword(auth, email, password)
         .then((userCredential) => {
-          // Registered
-          const user = userCredential.user;
-          updateProfile(user, {
+          addDoc(collection(database, "profiles"), {
+            createdAt: new Date(),
+            userId: userCredential.user.uid,
+            role: role,
             displayName: name,
-            photoURL: avatar ? avatar : 'https://gravatar.com/avatar/94d45dbdba988afacf30d916e7aaad69?s=200&d=mp&r=x',
-          })
-            .then(() => {
-              alert('Registered, please login.');
-            })
-            .catch((error) => {
-              const errorCode = error.code;
-              const errorMessage = error.message;
-              alert(errorCode, errorMessage);
-            })
+            photoURL: 'https://gravatar.com/avatar/94d45dbdba988afacf30d916e7aaad69?s=200&d=mp&r=x',
+          });
         })
         .catch((err) => Alert.alert("Login error", err.message));
     }
@@ -67,6 +67,33 @@ export default function Signup({ navigation }) {
           value={password}
           onChangeText={(text) => setPassword(text)}
         />
+        <Text>Please choose one role to join us:</Text>
+        <RadioGroup
+          radioButtons={[
+            {
+              id: 'cat-owner', // acts as primary key, should be unique and non-empty string
+              label: 'Join as a cat owner',
+              value: 'cat-owner',
+              labelStyle: { color: "black" },
+              containerStyle: { width: "100%", marginLeft: 10 }
+            },
+            {
+              id: 'cat-sitter',
+              label: 'Join as a cat sitter',
+              value: 'cat-sitter',
+              labelStyle: { color: "black" },
+              containerStyle: { width: "100%", marginLeft: 10 }
+            }
+          ]}
+          onPress={setRole}
+          selectedId={role}
+        />
+        {
+          error.length <= 0 && (
+            <Text style={{ color: "red" }}>{error}</Text>
+          )
+        }
+        {/* TODO: Add a checkbox for role */}
         <TouchableOpacity style={styles.button} onPress={onHandleSignup}>
           <Text style={{ fontWeight: "bold", color: "#fff", fontSize: 18 }}> Sign Up</Text>
         </TouchableOpacity>