Login Page

Login - Implementar tela de login

Implementação do front e back da tela de login.

Autores: Lourenço, Francisco, ?.

Checklist

Deixe um dos ícones de acordo com a sua resposta para cada pergunta. (legenda abaixo)

• ‍♀️ funciona em Android
• ‍♀️ (opcional) funciona em iOS
• ‍♀️ interface funciona nos tamanhos de tela suportados
• ‍♀️ interface segue especificação no Figma
• ‍♀️ passa nos testes funcionais definidos para a tarefa/story
• ‍♀️ documentação atualizada
• ‍♀️ código dentro dos padrões
• código sem warnings ou erros de linter (rode npm run lint -- --fix para ajustar e faça o commit)
• ‍♀️ adiciona dependências externas
• ‍♀️ dependências externas adicionadas foram aprovadas pelos AGES III

Legenda:

• : sim (funciona/builda/documentação atualizada/...)
• ️: parcialmente (partes não funcionam/apenas documentação pendente/...)
• : não (não builda/não funciona/não segue padrões/sem documentação/...)
• ‍♀️: não se aplica (não tenho como testar no iOS/não envolve interface/...)

Adicione um screenshot/gif da aplicação após último commit, que seja possível visualizar a alteração

Outras informações

src/components/DrawerContent/DrawerContent.tsx

@@ -9,7 +9,7 @@ import { colors, fonts } from '../../config/Theme';
 
 import * as s from './styles';
 
-export default function DrawerContent(props) {
+export default function DrawerContent(props : any) {
 	const isAuth = false;
 	const { navigation } = props;
 
@@ -45,7 +45,7 @@ export default function DrawerContent(props) {
 						Entre para ver seus <Text color="white" fontWeight="bold">favoritos, reservar um espaço e visualizar seus locais</Text>.
 					</Text>
 					<s.BlankLine/>
-					<s.ButtonLogin borderColor='white'>
+					<s.ButtonLogin borderColor='white' onPress={() => { navigation.navigate(routes.screens.loginPage) }}>
 						Entrar
 					</s.ButtonLogin>
 				</>

src/components/Text/Text.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Text } from "./styles";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 
-export default function ({ children, iconLeft, iconColor, ...props }) {
+export default function ({ children, iconLeft, iconColor, ...props } : any) {
 	return (
 		<Text {...props}>
 			{iconLeft && (

src/components/Title/styles.tsx

@@ -9,6 +9,6 @@ export const Title = styled(Text)<TitleProps>`
 	font-size: ${({ fontSize }) => fontSize || '24px'};
 	text-transform: ${({ textTransform }) => textTransform || 'none'};
 	text-align: ${({ textAlign }) => textAlign || 'left'};
-	margin-top: ${({ marginTop }) => marginTop || '0' }
-	margin-bottom: ${({ marginBottom }) => marginBottom || '0' }
+	margin-top: ${({ marginTop }) => marginTop || '0' };
+	margin-bottom: ${({ marginBottom }) => marginBottom || '0' };
 `;

src/config/Theme.tsx

-import { Platform, StatusBar } from "react-native";
-
-export const sizes = {
-	statusBarHeight: Platform.OS === "android" ? StatusBar.currentHeight : 0,
-}
-
-export const colors = {
-	primary: '#05BDDA',
-	secondary: '#5F5F60',
-	logoGradient: 'linear-gradient(to right, #00ffdc, #0890d9)',
-	white: '#FFFFFF',
-	midGray: '#5F5F60'
-}
-
-export const fonts = {
-	bold: 'PTSans-Bold',
-	regular: 'PTSans-Regular',
-	italic: 'PTSans-Italic'
-}
+import { Platform, StatusBar } from "react-native";
+
+export const sizes = {
+	statusBarHeight: Platform.OS === "android" ? StatusBar.currentHeight : 0,
+}
+
+export const colors = {
+	primary: '#05BDDA',
+	secondary: '#5F5F60',
+	logoGradient: 'linear-gradient(to right, #00ffdc, #0890d9)',
+	white: '#FFFFFF',
+	midGray: '#5F5F60',
+	lightGray: '#DDE6E8'
+}
+
+export const fonts = {
+	bold: 'PTSans-Bold',
+	regular: 'PTSans-Regular',
+	italic: 'PTSans-Italic'
+}

src/interfaces/LoginPageProps/LoginPageProps.interface.tsx

+import { StackNavigationProp } from "@react-navigation/stack";
+
+export interface LoginPageProps {
+    navigation: StackNavigationProp<any, any>;
+    route?: any;
+}
\ No newline at end of file

src/interfaces/RegisterUser/RegisterUser.interface.tsx

-export interface IRegisterUser {
+export interface RegisterUser {
 	name: string;
 	surname: string;
 	email: string;
@@ -8,7 +8,7 @@ export interface IRegisterUser {
 	term: string;
 }
 
-export const initialValues: IRegisterUser = {
+export const initialValues: RegisterUser = {
 	name: "",
 	surname: "",
 	email: "",

src/interfaces/UserModel/UserModel.interface.tsx

+export interface UserModel {
+    email: string;
+    familyName: string;
+    givenName: string;
+    nationalId: string;
+    phone: string;
+    terms: string;
+}
+
+export const InitialValues: UserModel = {
+    email: "",
+    familyName: "",
+    givenName: "",
+    nationalId: "",
+    phone: "",
+    terms: "",
+}
\ No newline at end of file

src/pages/LoginPage/LoginPage.tsx

+import React, { useState } from "react";
+import * as s from "./styles";
+import { Alert, Modal, ActivityIndicator } from "react-native";
+import UserService from "../../services/UsersService";
+import { LoginPageProps } from "../../interfaces/LoginPageProps/LoginPageProps.interface";
+import { routes } from "../../Navigation";
+import Button from "../../components/Button/Button";
+import Title from "../../components/Title/Title";
+import { AntDesign } from "@expo/vector-icons";
+
+const Login: React.FC<LoginPageProps> = ({ navigation }) => {
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [loading, setLoading] = useState(false);
+	const [errorText, setErrorText] = useState("");
+
+	const handleSubmitPress = async () => {
+		setErrorText("");
+		setLoading(false);
+
+		if (email === "") {
+			Alert.alert("Email não preenchido", "Por favor insira um email");
+			return;
+		}
+		if (password === "") {
+			Alert.alert("Senha não preenchida", "Por favor insira uma senha");
+			return;
+		}
+
+		setLoading(true);
+		if (await UserService.login(email, password)) {
+			UserService.loadUser();
+			setLoading(false);
+			navigation.navigate(routes.screens.home, { specs: null });
+		} else {
+			setLoading(false);
+			setErrorText("Seu email ou senha estão incorretos");
+		}
+	};
+
+	return (
+		<s.PageContainer>
+			<Modal
+				transparent={true}
+				animationType={"none"}
+				visible={loading}
+				onRequestClose={() => {
+					console.log("close loading modal");
+				}}
+			>
+				<s.ModalBackgroundContainer>
+					<s.activityIndicatorWrapperContainer>
+						<ActivityIndicator animating={loading} />
+					</s.activityIndicatorWrapperContainer>
+				</s.ModalBackgroundContainer>
+			</Modal>
+			<s.TownImage source={require("../../../assets/Login/town.png")} />
+			<s.LoginContainer>
+				<s.Header>
+					<Title
+						color="primary"
+						fontWeight="normal"
+						textTransform="uppercase"
+						textAlign="center"
+					>
+						{`O jeito prático de\n reservar espaços`}
+					</Title>
+				</s.Header>
+				<s.Body>
+					<s.InputContainer>
+						<s.InputStyle
+							placeholder="E-mail"
+							onChangeText={(value) => setEmail(value)}
+						/>
+						<s.InputStyle
+							placeholder="Senha"
+							secureTextEntry={true}
+							onChangeText={(value) => setPassword(value)}
+						/>
+					</s.InputContainer>
+					{errorText != "" ? <s.erroMessage>{errorText}</s.erroMessage> : null}
+					<s.ButtonContainer>
+						<Button onPress={() => handleSubmitPress()}>Entrar</Button>
+						<Button outlined borderColor="white" onPress={() => { navigation.navigate(routes.screens.registerUser) }}>
+							Criar uma conta
+						</Button>
+					</s.ButtonContainer>
+				</s.Body>
+				<s.Footer>
+					<s.Line />
+					<Button outlined>
+						<AntDesign name="google" size={16} /> Entrar com o google !
+					</Button>
+				</s.Footer>
+			</s.LoginContainer>
+		</s.PageContainer>
+	);
+};
+
+export default Login;

src/pages/LoginPage/styles.tsx

+import styled from 'styled-components';
+import { colors, fonts } from '../../config/Theme';
+import { View, ImageBackground, TextInput, Text } from 'react-native';
+import Button from '../../components/Button/Button';
+
+export const PageContainer = styled(View)`
+	flex: 1;
+	background: ${colors.white};
+`;
+
+export const LoginContainer = styled(View)`
+	flex: 1;
+	background: ${colors.white};
+	margin-top: -12px;
+	padding: 20px;
+	border-top-left-radius: 12px;
+	border-top-right-radius: 12px;
+`;
+
+export const Header = styled(View)`
+	flex: 1;
+`;
+
+export const Body = styled(View)`
+	flex: 4;
+`;
+
+export const InputContainer = styled(View)`
+	flex: 1;
+	align-self: center;
+	margin-top: 10px;
+	margin-bottom: 30px;
+`;
+
+export const ButtonContainer = styled(View)`
+	flex: 1;
+	flex-wrap: wrap;
+	margin-top: 30px;
+	width: 80%
+	margin-left: 10%;
+`;
+
+export const Footer = styled(View)`
+	flex: 1;
+	padding-bottom: 20px;
+`;
+
+export const TownImage = styled(ImageBackground)`
+	width: 100%;
+	height: 180px;
+`;
+
+export const Line = styled(View)`
+	width: 100%;
+	margin-top: 20px;
+	margin-bottom: 20px;
+	border: solid 1px ${colors.lightGray};
+`;
+
+export const InputStyle = styled(TextInput)`
+	border-width: 1px;
+	border-color: ${colors.midGray};
+	min-width: 250px;
+	width: 300px;
+	height: 48px;
+	border-radius: 4px;
+	padding: 8px 12px;
+	margin: 10px;
+	border-width: 1px;
+	border-color: ${colors.primary};
+	background: ${colors.white};
+	font-size: 18px;
+	color: ${colors.secondary};
+`;
+
+export const erroMessage = styled(Text)`
+	color: red;
+	text-align: center;
+	font-size: 14px;
+	margin-top: 5%;
+`;
+
+export const ModalBackgroundContainer = styled(View)`
+	flex: 1;
+    align-items: center;
+    flex-direction: column;
+    justify-content: space-around;
+    background-color: #00000040;
+`;
+
+export const activityIndicatorWrapperContainer = styled(View)`
+	background-color: #FFFFFF;
+    height: 100px;
+    width: 100px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+`; 
\ No newline at end of file

src/pages/PlaceDetails/PlaceDetails.tsx

@@ -6,6 +6,7 @@ import { colors } from "../../config/Theme";
 import {
 	ButtonContainer,
 	ButtonSelected,
+	ButtonNoSelected,
 	ContainerPhotoMap,
 	ContainerTextBody,
 	TextSpaceTitle,
@@ -14,7 +15,8 @@ import {
 	ButtonSendMessage,
 	TextSpaceMoreInformation,
 	Line,
-	ButtonText,
+	ButtonTextSelected,
+	ButtonTextNoSelected,
 	ButtonFavorite,
 	ButtonFrame,
 	ButtonInterest,
@@ -73,20 +75,19 @@ export default class PlaceDetails extends React.Component<PlaceDetailsProps> {
 					</ContainerPhotoMap>
 
 					<ButtonContainer>
+						{optionSelected === "Fotos" ?
+						<>
 						<ButtonSelected
-							outlined={optionSelected !== "Fotos"}
 							onPress={() => {
 								this.setState({ optionSelected: "Fotos" });
 							}}
 						>
 							<ButtonFrame>
-								<FontAwesome name="photo" size={16} color={'#05BDDA'} />
+								<FontAwesome name="photo" size={16} color={'#FFFFFF'} />
 							</ButtonFrame>
-							<ButtonText>Fotos</ButtonText>
+							<ButtonTextSelected>Fotos</ButtonTextSelected>
 						</ButtonSelected>
-
-						<ButtonSelected
-							outlined={optionSelected === "Fotos"}
+						<ButtonNoSelected
 							onPress={() => {
 								this.setState({ optionSelected: "Mapa" });
 							}}
@@ -94,8 +95,33 @@ export default class PlaceDetails extends React.Component&lt;PlaceDetailsProps&gt; {
 							<ButtonFrame>
 								<SimpleLineIcons name="map" size={16} color={'#05BDDA'} />
 							</ButtonFrame>
-							<ButtonText>Mapa</ButtonText>
+							<ButtonTextNoSelected>Mapa</ButtonTextNoSelected>
+						</ButtonNoSelected>
+						</>
+						:
+						<>
+						<ButtonNoSelected
+							onPress={() => {
+								this.setState({ optionSelected: "Fotos" });
+							}}
+						>
+							<ButtonFrame>
+								<FontAwesome name="photo" size={16} color={'#05BDDA'} />
+							</ButtonFrame>
+							<ButtonTextNoSelected>Fotos</ButtonTextNoSelected>
+						</ButtonNoSelected>
+						<ButtonSelected
+							onPress={() => {
+								this.setState({ optionSelected: "Mapa" });
+							}}
+						>
+							<ButtonFrame>
+								<SimpleLineIcons name="map" size={16} color={'#FFFFFF'} />
+							</ButtonFrame>
+							<ButtonTextSelected>Mapa</ButtonTextSelected>
 						</ButtonSelected>
+						</>
+						}
 					</ButtonContainer>
 
 					<ContainerTextBody>
@@ -118,8 +144,6 @@ export default class PlaceDetails extends React.Component&lt;PlaceDetailsProps&gt; {
 							onPress={() => {
 								const msg: string = 'Olá! Tenho interesse no espaço ' + this.props.route?.params?.specs.title + ' para o dia xx/yy/zzzz. Grato(a), aguardo confirmação de minha reserva!'
 								const params: ContactModel = { message: msg, fullName: "Fulado", email: "fulano@email.com", phoneNumber: "51912345678" };
-								//const data = new Date().toLocaleDateString()
-								//const technicalData = 'Id: ' + this.props.route?.params?.specs.spaceId + '\nData envio: ' + data
 								this.props.navigation.navigate(routes.screens.contact, { specs: params })
 							}}
 						>

src/pages/PlaceDetails/styles.tsx

 import { TouchableOpacity, View } from "react-native";
+import { color } from "react-native-reanimated";
 import styled from "styled-components";
 import Button from "../../components/Button/Button";
 import Text from "../../components/Text/Text";
@@ -41,18 +42,40 @@ export const ButtonSelected = styled(TouchableOpacity)`
 	border-radius: 6px;
 	border-color: #05BDDA;
 	padding: 10px;
+	background-color: ${colors.primary};
 `;
 
-export const ButtonFrame = styled(View)`
-	padding-left: 10px;
+export const ButtonTextSelected = styled(Text)`
+	flex-direction: row;
+	color:  ${colors.white};
+	padding-right: 20px;
 `;
 
-export const ButtonText = styled(Text)`
+export const ButtonNoSelected = styled(TouchableOpacity)`
+	max-width: 160px;
+	min-width: 120px;
+	margin-right: 10px;
+	margin-left: 10px;
+	justify-content: space-between;
+	align-items: center;
 	flex-direction: row;
-	color:  #05BDDA;
+	border-width: 2px;
+	border-radius: 6px;
+	border-color: #05BDDA;
+	padding: 10px;
+	background-color: ${colors.white};
+`;
+
+export const ButtonTextNoSelected = styled(Text)`
+	flex-direction: row;
+	color:  ${colors.primary};
 	padding-right: 20px;
 `;
 
+export const ButtonFrame = styled(View)`
+	padding-left: 10px;
+`;
+
 export const ContainerTextBody = styled(View)`
 	margin-left: 20px;
 	margin-right: 20px;