Browse Source

Letting user uses some functionalities while not logged

master
GabrielTrettel 3 years ago
parent
commit
10c1828cdf
  1. 2
      src/App.js
  2. 8
      src/app/components/ConfirmationModal.js
  3. 24
      src/app/components/SvgLabeledButton.js
  4. 35
      src/app/screens/LoginScreen.js
  5. 36
      src/app/screens/SharingDataScreen.js

2
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])

8
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 }]}
>
@ -57,7 +57,7 @@ export default function ConfirmationModal({
style={{
flexDirection: "row",
justifyContent: "space-evenly",
marginTop: 24,
marginTop: 24,
}}
>
{onConfirm && confirmationLabel && <Btn
@ -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,

24
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,

35
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>

36
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>

Loading…
Cancel
Save