Implementing more functionalities to unregistered user on AccountScreen

src/app/assets/avatar/Avatar_1.svg

@@ -0,0 +1 @@
+<svg id="a0de9a38-0526-451e-a2a2-94f0d5106a7a" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"><rect width="300" height="300" fill="#283659"/><path d="M125,62.27c-.14-.05-.27.12-.23.26a64.07,64.07,0,0,1-8.08,54.12c-5.78,8.5-13.54,15.48-19.57,23.8-7.7,10.62-30.17,50.58,9.77,81.4,15.84,12.22,40.51,13,59.9,8.06,21.38-5.41,59.71-33.83,48.09-81.36C209.67,127.13,175.51,82.18,125,62.27Z" fill="#5eaeea"/><path d="M146.46,127.44c.29-1.64,1.51-2.79,2.73-2.57s2.13,1.8,1.83,3.43a2.78,2.78,0,0,1-2.89,2.5C146.91,130.58,146.16,129.08,146.46,127.44Z" fill="#152040"/><path d="M120.9,126.67c.29-1.64,1.52-2.79,2.74-2.58s2.12,1.8,1.83,3.44a2.78,2.78,0,0,1-2.89,2.5C121.36,129.81,120.61,128.3,120.9,126.67Z" fill="#152040"/><path d="M137.68,130.78a.58.58,0,0,0-.78-.21.93.93,0,0,0-.34.48,2.34,2.34,0,0,1-.14.27,1.78,1.78,0,0,1-.4.42,2,2,0,0,1-1.37.42,2.14,2.14,0,0,1-1.18-.43,2.39,2.39,0,0,1-.43-.48,1.84,1.84,0,0,1-.3-.57.51.51,0,0,0-.56-.37c-.23,0-.49.25-.45.51a2.78,2.78,0,0,0,.25,1,3,3,0,0,0,.62.76,3.37,3.37,0,0,0,2,.8,3.15,3.15,0,0,0,2.06-.61,3.31,3.31,0,0,0,.77-.77A1.2,1.2,0,0,0,137.68,130.78Z" fill="#152040"/></svg>

src/app/assets/avatar/Avatar_2.svg

@@ -0,0 +1 @@
+<svg id="f2602589-bf4a-446c-a1b7-7080d1ef1688" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300" viewBox="0 0 300 300"><defs><clipPath id="bc341db0-f7df-41ca-970f-b48dc64060ec"><rect x="0.14" y="0.07" width="299.86" height="299.86" fill="none"/></clipPath></defs><rect y="-2.58" width="299.86" height="305.15" fill="#cfd0d1"/><g clip-path="url(#bc341db0-f7df-41ca-970f-b48dc64060ec)"><path d="M244.85,116.93c-10.13-14.51-29.89-21.48-45.21-15.44C189.5,75.87,153.22,66.59,126,73.74,94.86,81.93,81,113,89.07,140.56a36.18,36.18,0,0,0-25.65,4C48,153.5,42.89,172.75,47.33,189.28c4.73,17.55,19.6,31.14,37.7,33.35,15.17,1.85,28.9-3.6,41-11.85,12.94,20.12,44.53,22,67.21,15.34,14.48-4.26,27.54-12.85,35.92-25.55,4.48-6.79,8.3-16,8.08-24.6C257.52,167.07,257.08,134.43,244.85,116.93Z" fill="#8c8c8c"/><ellipse cx="128.58" cy="166.18" rx="15.98" ry="15.39" transform="translate(-38.12 38.27) rotate(-14.77)" fill="#fff" opacity="0.33"/><ellipse cx="213.87" cy="143.7" rx="15.98" ry="15.39" transform="translate(-29.57 59.27) rotate(-14.77)" fill="#fff" opacity="0.33"/><path d="M185.18,125.67c-.26-3.17,1.44-5.9,3.81-6.1s4.81,2.3,5.06,5.48-1.77,5.84-4.13,6S185.43,128.85,185.18,125.67Z" fill="#222221"/><path d="M137.47,136.72c-.26-3.18,1.45-5.91,3.81-6.1s4.81,2.3,5.07,5.47-1.77,5.84-4.13,6S137.73,139.9,137.47,136.72Z" fill="#222221"/><path d="M170.54,136.14a1.1,1.1,0,0,0-1.53,0,1.8,1.8,0,0,0-.41,1.05,2,2,0,0,1-.11.57,3.67,3.67,0,0,1-.54,1,4,4,0,0,1-2.34,1.46,4.09,4.09,0,0,1-2.39-.24,3.57,3.57,0,0,1-1-.66,3.77,3.77,0,0,1-.83-.91,1,1,0,0,0-1.23-.41,1,1,0,0,0-.58,1.16,5.4,5.4,0,0,0,1,1.74A5.49,5.49,0,0,0,162,142a6.57,6.57,0,0,0,4.1.5,6.17,6.17,0,0,0,3.52-2.15,6.08,6.08,0,0,0,1.05-1.81A2.28,2.28,0,0,0,170.54,136.14Z" fill="#222221"/><polygon points="211.17 70.56 221.47 70.56 221.47 89.65 228.82 84.47 215.04 120.11 218.53 94.5 215.04 97.99 211.17 70.56" fill="#ffc200"/><polyline points="83.87 182.12 92.35 172.91 93.12 192.21 101.1 188.48 90.83 221.69 92.99 199.25 86.82 203.55" fill="#ffc200"/></g></svg>

src/app/assets/avatar/Avatar_3.svg

@@ -0,0 +1 @@
+<svg id="fc28f198-3d69-49fe-bc4c-6342fd97a74b" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"><path d="M231.71,220.7a12.44,12.44,0,0,1-1.18,7.14,41,41,0,0,0-2.65,6.84c-.53,2.39-.27,5.13,1.38,6.93a5.62,5.62,0,0,0,6.26,1.3,6.85,6.85,0,0,0,3.59-4.48,12.83,12.83,0,0,0,0-5.88,22.86,22.86,0,0,0-4.18-9.3A6.35,6.35,0,0,0,231.71,220.7Z" fill="#86d4ef"/><rect width="300" height="300" fill="#4f4f4f"/><path d="M252.05,114.38c-10.83-15.51-32-22.95-48.32-16.5C192.9,70.5,154.12,60.57,125,68.22,91.75,77,76.91,110.16,85.56,139.63a38.7,38.7,0,0,0-27.41,4.31C41.68,153.47,36.2,174,41,191.7c5,18.76,20.95,33.28,40.3,35.65,16.2,2,30.88-3.85,43.82-12.67,13.84,21.51,47.59,23.53,71.84,16.4,15.46-4.55,29.43-13.74,38.38-27.3,4.79-7.27,8.88-17.14,8.64-26.3C265.59,168,265.13,133.09,252.05,114.38Z" fill="#f2f3f4"/><path d="M143.4,145.34c-.47-2.5.66-4.81,2.52-5.16s4,1.42,4.47,3.92-.92,4.78-2.78,5.13S143.87,147.83,143.4,145.34Z" fill="#152040"/><path d="M169.59,142.13a.88.88,0,0,0-1.22.13,1.3,1.3,0,0,0-.23.86,1.85,1.85,0,0,1,0,.46,2.51,2.51,0,0,1-.35.82,3.14,3.14,0,0,1-1.73,1.35,3.27,3.27,0,0,1-1.91,0,3.73,3.73,0,0,1-1.61-1.09.79.79,0,0,0-1-.23.78.78,0,0,0-.37,1,4.23,4.23,0,0,0,.91,1.31,4.38,4.38,0,0,0,1.31.75,5.21,5.21,0,0,0,3.29.06,4.88,4.88,0,0,0,2.62-2,5,5,0,0,0,.68-1.52A1.82,1.82,0,0,0,169.59,142.13Z" fill="#152040"/><path d="M177,137.25a1.14,1.14,0,0,0,1.62-.17,1.74,1.74,0,0,0,.32-1.15,2.66,2.66,0,0,1,.06-.62,3.43,3.43,0,0,1,.47-1.09,4.2,4.2,0,0,1,2.31-1.81,4.38,4.38,0,0,1,2.56,0,3.9,3.9,0,0,1,1.17.59,3.72,3.72,0,0,1,1,.87,1.06,1.06,0,0,0,1.84-1,5.72,5.72,0,0,0-1.21-1.75,5.88,5.88,0,0,0-1.75-1A6.9,6.9,0,0,0,181,130a6.71,6.71,0,0,0-4.41,4.7A2.42,2.42,0,0,0,177,137.25Z" fill="#152040"/><path d="M115.24,232.17a12.44,12.44,0,0,1-1.18,7.14,41,41,0,0,0-2.65,6.84c-.53,2.39-.27,5.13,1.38,6.93a5.62,5.62,0,0,0,6.26,1.3,6.85,6.85,0,0,0,3.59-4.48,12.7,12.7,0,0,0,0-5.88,22.71,22.71,0,0,0-4.17-9.3A6.35,6.35,0,0,0,115.24,232.17Z" fill="#86d4ef"/><path d="M214.57,247.67c-.49,2.83.43,5.71,1.62,8.33s2.65,5.13,3.34,7.92.49,6-1.39,8.17a6.58,6.58,0,0,1-7.29,1.73,8,8,0,0,1-4.36-5.13,15.07,15.07,0,0,1-.22-6.88,26.92,26.92,0,0,1,4.58-11.05A7.38,7.38,0,0,1,214.57,247.67Z" fill="#86d4ef"/><path d="M101.63,256.49c-.49,2.83.43,5.71,1.61,8.33s2.66,5.14,3.35,7.92.49,6-1.39,8.18a6.58,6.58,0,0,1-7.29,1.73,8.08,8.08,0,0,1-4.36-5.13,15.12,15.12,0,0,1-.22-6.89,26.83,26.83,0,0,1,4.58-11A7.4,7.4,0,0,1,101.63,256.49Z" fill="#86d4ef"/></svg>

src/app/assets/avatar/Avatar_4.svg

@@ -0,0 +1 @@
+<svg id="e3350d9d-30da-4002-8b9f-74caf1467a51" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"><rect y="-2" width="300" height="300" fill="#dcf8ff"/><path d="M125,60.27c-.14-.05-.27.12-.23.26a64.07,64.07,0,0,1-8.08,54.12c-5.78,8.5-13.54,15.48-19.57,23.8-7.7,10.62-30.17,50.58,9.77,81.4,15.84,12.22,40.51,13,59.9,8.06,21.38-5.41,59.71-33.83,48.09-81.36C209.67,125.13,175.51,80.18,125,60.27Z" fill="#5eaeea"/><path d="M146.46,125.44c.29-1.64,1.51-2.79,2.73-2.57s2.13,1.8,1.83,3.43a2.78,2.78,0,0,1-2.89,2.5C146.91,128.58,146.16,127.08,146.46,125.44Z" fill="#152040"/><path d="M120.9,124.67c.29-1.64,1.52-2.79,2.74-2.58s2.12,1.8,1.83,3.44a2.78,2.78,0,0,1-2.89,2.5C121.36,127.81,120.61,126.3,120.9,124.67Z" fill="#152040"/><path d="M137.68,128.78a.58.58,0,0,0-.78-.21.93.93,0,0,0-.34.48,2.34,2.34,0,0,1-.14.27,1.78,1.78,0,0,1-.4.42,2,2,0,0,1-1.37.42,2.14,2.14,0,0,1-1.18-.43,2.39,2.39,0,0,1-.43-.48,1.84,1.84,0,0,1-.3-.57.51.51,0,0,0-.56-.37c-.23,0-.49.25-.45.51a2.78,2.78,0,0,0,.25,1,3,3,0,0,0,.62.76,3.37,3.37,0,0,0,2,.8,3.15,3.15,0,0,0,2.06-.61,3.31,3.31,0,0,0,.77-.77A1.2,1.2,0,0,0,137.68,128.78Z" fill="#152040"/></svg>

src/app/assets/avatar/Avatar_5.svg

@@ -0,0 +1 @@
+<svg id="f8762e5e-f451-4e94-834b-206143e8901c" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300" viewBox="0 0 300 300"><defs><clipPath id="aa12b75e-b2b4-401b-9305-9fbc7a562c71"><rect width="300" height="300" fill="none"/></clipPath></defs><rect width="300" height="300" fill="#c1e3f4"/><g clip-path="url(#aa12b75e-b2b4-401b-9305-9fbc7a562c71)"><path d="M254,146.22c-7.46-11.11-21.27-15.44-33.85-13.19.67-28.89-22.44-56-53.62-56.73-33.58-.81-59.86,24.94-64.35,55.67-18.85-15.5-49.8-12.16-60.59,14.37-11.81,29,13.13,55,40.39,52.53,3.4,14.81,20.22,23.94,35.91,24.86,20.06,1.18,39.73-5.76,55.75-17.51,20.5,18.21,53.82,12.83,67.58-11.78C257.49,185,265.25,163,254,146.22Z" fill="#fff"/><path d="M175.2,146.6c.41-2.31,2.14-3.94,3.86-3.63s3,2.54,2.59,4.86-2.36,3.83-4.08,3.52S174.78,148.92,175.2,146.6Z" fill="#222221"/><path d="M139.08,145.51c.41-2.31,2.15-3.94,3.87-3.63s3,2.54,2.58,4.85-2.36,3.84-4.08,3.53S138.67,147.83,139.08,145.51Z" fill="#222221"/><path d="M162.79,151.32a.82.82,0,0,0-1.1-.29,1.25,1.25,0,0,0-.48.67,2.78,2.78,0,0,1-.19.39,2.67,2.67,0,0,1-.57.59,3,3,0,0,1-1.94.6,2.91,2.91,0,0,1-2.28-1.29,2.79,2.79,0,0,1-.42-.8.73.73,0,0,0-1.43.19,3.31,3.31,0,0,0,1.24,2.51,4.82,4.82,0,0,0,2.83,1.13,4.56,4.56,0,0,0,2.92-.87,4.7,4.7,0,0,0,1.09-1.09A1.7,1.7,0,0,0,162.79,151.32Z" fill="#222221"/></g></svg>

src/app/config/assets.js

@@ -1,6 +1,6 @@
 import Pluviometer from "../assets/pluviometer/pluviometer-logo.svg";
-import OfficialPluviometer from "../assets/pluviometer/PluviometroOficial.svg"
-import SusceptibilityAreas from "../assets/dataMenu/suceptibilitiesAreas.svg"
+import OfficialPluviometer from "../assets/pluviometer/PluviometroOficial.svg";
+import SusceptibilityAreas from "../assets/dataMenu/suceptibilitiesAreas.svg";
 import RainIcon from "../assets/rain/rain-icon.svg";
 import RiverIcon from "../assets/river/river-logo.svg";
 import FloodZones from "../assets/floodZonesAssets/floodZones-logo.svg";
@@ -38,6 +38,12 @@ import FloodNotPassable from "../assets/floodZonesAssets/not_passable.svg";
 import PinPluviometerOfficial from "../assets/pluviometer/PinPluviometerOfficial";
 import AboutScreenLogos from "../assets/logos/AboutScreenLogos";
 
+import Avatar0 from "../assets/avatar/Avatar_1.svg";
+import Avatar1 from "../assets/avatar/Avatar_2.svg";
+import Avatar2 from "../assets/avatar/Avatar_3.svg";
+import Avatar3 from "../assets/avatar/Avatar_4.svg";
+import Avatar4 from "../assets/avatar/Avatar_5.svg";
+
 export default {
   floodZones: {
     FloodZonesIcon: FloodZones,
@@ -93,6 +99,7 @@ export default {
     Weather_4_cloudy,
     Weather_5_clean,
   ],
+  avatar: [Avatar0, Avatar1, Avatar2, Avatar3, Avatar4],
   pluviometer: require("../assets/pluviometer/diario_pluviometrico.png"),
   pluviometer_pin: PinPluviometroArt,
   officialPluviometer: require("../assets/pluviometer/pluviometroOficial.png"),

src/app/config/utils.js

@@ -0,0 +1,18 @@
+// https://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript
+function hashPhoneNumber(phone) {
+  if (!phone) return undefined
+
+  var hash = 0,
+    i,
+    chr;
+  if (phone.length === 0) return hash;
+
+  for (i = 0; i < phone.length; i++) {
+    chr = phone.charCodeAt(i);
+    hash = (hash << 5) - hash + chr;
+    hash |= 0; // Convert to 32bit integer
+  }
+  return Math.abs(hash);
+}
+
+export default { hashPhoneNumber };

src/app/screens/AccountScreen.js

@@ -1,22 +1,23 @@
 import React, { useContext, useState } from "react";
-import { Text, Image, View, StyleSheet, ScrollView } from "react-native";
+import { Text, View, StyleSheet, ScrollView } from "react-native";
 import Screen from "../components/Screen";
 import { AuthContext } from "../auth/context";
 import authStorage from "../auth/storage";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import assets from "../config/assets";
-import { MaterialCommunityIcons, FontAwesome } from "@expo/vector-icons";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 import colors from "../config/colors";
 import ConfirmationModal from "../components/ConfirmationModal";
+import utils from "../config/utils";
 
 function UserHeader({ name, fone }) {
+  const index  = utils.hashPhoneNumber(fone) % assets.avatar.length || 2
+  const Avatar = assets.avatar[index];
+
   return (
-    <View style={{ flexDirection: "row", alignItems: "center" }}>
-      <Image
-        style={{ width: 70, height: 70 }}
-        source={require("../assets/rain/chuva_peq.png")}
-      />
-      <View style={{ marginLeft: 16 }}>
+    <View style={{ flexDirection: "row", alignItems: "center", justifyContent: name ? "flex-start" : "center" }}>
+      <Avatar width={60} height={60}/>
+      <View style={{ marginLeft: 16 }}> 
         <Text style={[styles.text, { fontWeight: "bold" }]}>{name}</Text>
         <Text style={styles.text}>{fone}</Text>
       </View>
@@ -73,6 +74,7 @@ function ProfileItensList({ icon, IconProvider, title, onPress }) {
 
 function AccountScreen(props) {
   const { user, setUser } = useContext(AuthContext);
+  const isRegistered = user?.username != null;
   const [showLog, setShowLog] = useState(false);
 
   console.log(user);
@@ -90,7 +92,9 @@ function AccountScreen(props) {
   };
 
   const showActivation = () => {
-    if (user.role === "ROLE_CLIENT")
+    if (!isRegistered)
+      return false
+    else if (user.role === "ROLE_CLIENT")
       return !user.active
     else
       return true
@@ -99,13 +103,22 @@ function AccountScreen(props) {
   const profileItems = [
     {
       icon: "account",
-      show: true,
+      show: isRegistered,
       IconProvider: MaterialCommunityIcons,
       title: "Cadastrar pluviômetro",
       onPress: () => {
         props.navigation.navigate("PluviometerRegister");
       },
     },
+    {
+      icon: "account",
+      show: !isRegistered,
+      IconProvider: MaterialCommunityIcons,
+      title: "Cadastra-se",
+      onPress: () => {
+        setUser(false);
+      },
+    },
     {
       icon: "bank",
       show: showActivation(),
@@ -126,7 +139,7 @@ function AccountScreen(props) {
     },
     {
       icon: "logout",
-      show: true,
+      show: isRegistered,
       IconProvider: MaterialCommunityIcons,
       title: "sair",
       onPress: () => {
@@ -151,7 +164,7 @@ function AccountScreen(props) {
             padding: 16,
           }}
         >
-          <UserHeader name={user.nickname} fone={user.username} image={"1"} />
+          <UserHeader name={user.nickname} fone={user.username}/>
 
           <View style={{ marginTop: 24 }}>
             {profileItems.map(