Letting user uses some functionalities while not logged

src/App.js

@@ -25,7 +25,7 @@ export default function App() {
   const netInfo = useNetInfo();
 
   useEffect(() => {
-    user && authStorage.setUser(user)
+    user?.username != null && authStorage.setUser(user)
   }, [user])
 
 

src/app/components/ConfirmationModal.js

@@ -45,7 +45,7 @@ export default function ConfirmationModal({
           }}
         >
           <View style={styles.container}>
-            <View style={{ flex: 1 }}>
+            <View style={{ flex: 1, marginBottom: title !== "" ? 40 : 0 }}>
               <Text
                 style={[styles.text, { fontSize: dimensions.text.secondary }]}
               >
@@ -83,14 +83,14 @@ export default function ConfirmationModal({
 const styles = StyleSheet.create({
   container: {
     width: "80%",
-    height: 150,
     justifyContent: "center",
     alignSelf: "center",
     backgroundColor: colors.lightestGray,
     borderColor: colors.primary,
     borderWidth: 2,
     borderRadius: 12,
-    padding: 12,
+    paddingVertical: 16,
+    paddingHorizontal: 12
   },
   text: {
     fontSize: dimensions.text.default,

src/app/components/SvgLabeledButton.js

@@ -1,5 +1,11 @@
 import React from "react";
-import { StyleSheet, View, Text, TouchableHighlight, TouchableNativeFeedback } from "react-native";
+import {
+  StyleSheet,
+  View,
+  Text,
+  TouchableHighlight,
+  TouchableNativeFeedback,
+} from "react-native";
 import colors from "../config/colors";
 import { scaleDimsFromWidth } from "../config/dimensions";
 import { Shadow } from "react-native-shadow-2";
@@ -14,6 +20,8 @@ export default function SvgLabeledButton({
   isToggle = false,
   normalBgcolor = colors.white,
   toggledBgColor = colors.toggle,
+  active = true,
+  inactiveOnPress = () => {},
 }) {
   const dims = scaleDimsFromWidth(width, height, 16);
   return (
@@ -25,8 +33,16 @@ export default function SvgLabeledButton({
       startColor="rgba(0, 0, 0, 0.15)"
       paintInside={true}
     >
-      <TouchableNativeFeedback onPress={onPress}>
-        <View style={styles.container}>
+      <TouchableNativeFeedback onPress={active ? onPress : inactiveOnPress}>
+        <View
+          style={[
+            styles.container,
+            {
+              borderColor: active ? colors.primary : colors.gray,
+              backgroundColor: active ? colors.primary : colors.gray,
+            },
+          ]}
+        >
           <View
             style={[
               styles.innerContainer,
@@ -49,8 +65,6 @@ export default function SvgLabeledButton({
 const styles = StyleSheet.create({
   container: {
     overflow: "hidden",
-    borderColor: colors.primary,
-    backgroundColor: colors.primary,
     borderWidth: 6,
     borderRadius: 6,
     width: 150,

src/app/screens/LoginScreen.js

@@ -137,17 +137,18 @@ export default function LoginScreen(props) {
 
           <SubmitButton title="entrar" backgroundColor={colors.primary} />
 
-          <TouchableNativeFeedback
-            onPress={() => {
-              props.navigation.navigate("ForgotPassword");
-            }}
-          >
-            <View flexDirection="row" alignSelf="center">
-              <Text style={{ color: colors.lightBlue, fontWeight: "bold" }}>
-                Esqueceu a senha?
-              </Text>
-            </View>
-          </TouchableNativeFeedback>
+          {/* FIXME: update this in future versions */} 
+          {/* <TouchableNativeFeedback */}
+          {/*   onPress={() => { */}
+          {/*     props.navigation.navigate("ForgotPassword"); */}
+          {/*   }} */}
+          {/* > */}
+          {/*   <View flexDirection="row" alignSelf="center"> */}
+          {/*     <Text style={{ color: colors.lightBlue, fontWeight: "bold" }}> */}
+          {/*       Esqueceu a senha? */}
+          {/*     </Text> */}
+          {/*   </View> */}
+          {/* </TouchableNativeFeedback> */}
 
           <DashedOrSeparator />
 
@@ -159,6 +160,18 @@ export default function LoginScreen(props) {
               props.navigation.navigate("Register");
             }}
           />
+
+          <TouchableNativeFeedback
+            onPress={() => {
+              authContext.setUser(true);
+            }}
+          >
+            <View flexDirection="row" alignSelf="center" marginTop={16}>
+              <Text style={{ color: colors.lightBlue, fontWeight: "bold" }}>
+                Ou continue sem uma conta
+              </Text>
+            </View>
+          </TouchableNativeFeedback>
         </View>
       </Form>
     </Screen>

src/app/screens/SharingDataScreen.js

@@ -1,15 +1,27 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
 import { StyleSheet, View } from "react-native";
-
+import ConfirmationModal from "../components/ConfirmationModal";
 import { ScrollView } from "react-native";
 import assets from "../config/assets";
 import { dimensions } from "../config/dimensions";
 import SvgLabeledButton from "../components/SvgLabeledButton";
+import { AuthContext } from "../auth/context";
 
 function SharingDataScreen({ navigation }) {
+  const authContext = useContext(AuthContext);
+  const [showLog, setShowLog] = useState(false);
+
+  const isRegistered = authContext.user?.username != null;
 
   return (
     <View style={styles.container}>
+      <ConfirmationModal
+        show={showLog}
+        description="Para enviar uma informação faça o login ou cadastre-se"
+        confirmationLabel="LOGIN"
+        onConfirm={() => authContext.setUser(false)}
+        onDecline={() => setShowLog(false)}
+      />
       <ScrollView>
         <View
           style={{
@@ -21,16 +33,19 @@ function SharingDataScreen({ navigation }) {
         >
           <SvgLabeledButton
             label={"ÁREA DE \nALAGAMENTO"}
-            style={{  marginRight: 24, }}
+            style={{ marginRight: 24 }}
             SvgImage={assets.floodZones.FloodZonesIcon}
             onPress={() => navigation.navigate("FloodSharingData")}
+            active={isRegistered}
+            inactiveOnPress={() => setShowLog(true)}
           />
 
-
           <SvgLabeledButton
             label={"CHUVA"}
             onPress={() => navigation.navigate("RainSharingData")}
             SvgImage={assets.rainLevel.Rain_1_5}
+            active={isRegistered}
+            inactiveOnPress={() => setShowLog(true)}
           />
         </View>
 
@@ -42,17 +57,22 @@ function SharingDataScreen({ navigation }) {
             marginVertical: 24,
           }}
         >
-
           <SvgLabeledButton
-            style={{ marginRight: 24, }}
+            style={{ marginRight: 24 }}
             label={"DIÁRIO DO\nPLUVIÔMETRO"}
             onPress={() => navigation.navigate("PluviometerSharingData")}
-            SvgImage={assets.PluviometerIcon}/>
+            SvgImage={assets.PluviometerIcon}
+            active={isRegistered}
+            inactiveOnPress={() => setShowLog(true)}
+          />
 
           <SvgLabeledButton
             label={"NÍVEL ÁGUA\nNO RIO"}
             onPress={() => navigation.navigate("RiverFloodData")}
-            SvgImage={assets.riverLevel.RiverIcon}/>
+            SvgImage={assets.riverLevel.RiverIcon}
+            active={isRegistered}
+            inactiveOnPress={() => setShowLog(true)}
+          />
         </View>
       </ScrollView>
     </View>