feita página login

epps-labe-food7/src/Pages/LoginPage/LoginPage.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import axios from 'axios';
 import { useHistory } from 'react-router-dom';
-import { goToSignUp, goToProfile } from '../../Routes/Coordinator.js';
-import { Rectangle, LoginCard, LoginPageStyle } from './style';
+import { goToHome, goToProfile } from '../../Routes/Coordinator.js';
+import { Input, Label, Form, Header, ContainerContent, Button, ContainerInput } from './style';
 
 const LoginPage = () => {
 
@@ -32,9 +32,14 @@ const LoginPage = () => {
                 body
             )
             .then ((res) => {
-
                 localStorage.setItem("token", res.data.token);
-                history.push("/feed")
+                setToken(localStorage.getItem("token"))
+                console.log(`hasAdress: ${res.data.user.hasAddress}`)
+                if (!res.data.user.hasAddress) {
+                    goToHome(history);
+                } else {
+                    goToProfile(history);
+                }
             })
         } catch (error) {
             console.error(error);
@@ -43,31 +48,36 @@ const LoginPage = () => {
     }
 
     return (
-        <>
-            <LoginPageStyle>
-
-                <LoginCard>
-                    <img src='https://i.imgur.com/kAcITlq.png'/>
-                    <div>Entrar</div>
-                    <div>
-                        <input
-                            placeholder={'E-mail'}
-                            value={email}
-                            onChange={handleEmail}
-                        />
-                    </div>
-                    <div>
-                        <input
-                            placeholder={'Senha'}
-                            value={password}
-                            onChange={handlePassword}
-                        />
-                    </div>
-
-                    <button onClick={handleLogar}>Entrar</button>
-                </LoginCard>
-            </LoginPageStyle>
-        </>
+        <ContainerContent>
+            <Header>
+                <img src='https://i.imgur.com/kAcITlq.png'/>
+            </Header>
+            <Form>
+                <Label>E-mail*</Label>
+                <ContainerInput>
+                    <Input
+                        placeholder='email@gmail.com'
+                        required
+                        value={email}
+                        type={"email"}
+                        onChange={handleEmail}
+                    />
+                </ContainerInput>
+                <Label>Senha*</Label>
+                <ContainerInput>
+                    <Input
+                        placeholder='Mínimo 6 caracteres'
+                        required
+                        value={password}
+                        type={"password"}
+                        onChange={handlePassword}
+                    />
+                </ContainerInput>
+                <Button onClick={handleLogar}>Entrar</Button>
+            </Form>
+
+
+        </ContainerContent>
     )
 
 }

epps-labe-food7/src/Pages/LoginPage/style.js

@@ -1,20 +1,107 @@
 import styled from 'styled-components';
 
-export const LoginPageStyle = styled.div `
-    display: grid;
-    grid-template-columns: 1fr 2fr;
-    grid-template-rows: 1fr;
-`
+export const ContainerContent = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-direction: column;
+ max-width: 100vw;
+ max-height: 100vh;
+ `
+
+export const Form = styled.div`
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ `
+export const Input = styled.input`
+  ::-webkit-input-placeholder {
+    color: #b8b8b8;
+   }
+  margin-left: 13px;
+  border: none;
+  width: 73.4vw;
+  height: 18px;
+  font-family: Roboto;
+  font-size: 16px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: -0.19px;
+  &:focus, input:focus, select:focus {
+    box-shadow: 0 0 0 0;
+    border: 0 none;
+    outline: 0;
+} 
+ `
+export const Button = styled.button`
+margin: 8px 16px 20px;
+ width: 91.1vw;
+  height: 6.5vh;
+  font-family: Roboto;
+  font-size: 16px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: -0.39px;
+  text-align: center;
+  color: #000000;
+  background-color: #5cb646;
+  border: none;
+  border-radius: 2px;
+ `
 
-export const LoginCard = styled.div`
-    background-color: #fff;
-    text-align: center;
-    padding: 200px 0 0 70px;
+export const Label = styled.label`
+position: relative;
+width: 21.6vw;
+  height: 2.8vh;
+  background-color: #fff;
+  margin: 3px 4px 3px 16px;
+  font-family: Roboto;
+  font-size: 12px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: -0.29px;
+  border: 2px solid #FFF;
+  color: ${(props) => {
+    if (props.erro === false) {
+      return "#e02020"
+    } else {
+      return "#b8b8b8"
+
+    }
+  }};
 `
+export const ContainerInput = styled.div`
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ border-radius: 4px;
+ width: 91.1vw;
+ height: 8.7vh;
+ margin: 7.5px 16px;
+ border: ${(props) => {
+    if (props.erro === false) {
+      return "1px solid #e02020"
+    } else {
+      return "1px solid #b8b8b8"
 
-export const Rectangle = styled.div `
-    height: 640px;
-    padding: 288px 0 0 117px;
-    background-color: #000000;
-    color: white;
+    }
+  }};
+`
+export const Header = styled.div`
+ width: 93vw;
+ min-height: 6.4vh;
+ margin: 0 0 24px;  
+ padding: 0 0 0 20px; 
+ -webkit-backdrop-filter: blur(10px);
+ backdrop-filter: blur(10px);
+ box-shadow: 0 0.5px 0 0 black-25;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+ display: flex;  
+ align-items: center;
 `