Skip to content

Commit 7c07e77

Browse files
pablo-marreropablo-marrero
committed
add login with google and login for firebase. Finished Project
1 parent 61b95e9 commit 7c07e77

File tree

17 files changed

+701
-18
lines changed

17 files changed

+701
-18
lines changed

‎package-lock.json‎

Lines changed: 349 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@
66
"@testing-library/jest-dom": "^5.16.4",
77
"@testing-library/react": "^13.3.0",
88
"@testing-library/user-event": "^13.5.0",
9+
"bootstrap": "^5.1.3",
910
"firebase": "^9.8.4",
1011
"leaflet": "^1.8.0",
1112
"react": "^18.2.0",
13+
"react-bootstrap": "^2.4.0",
1214
"react-dom": "^18.2.0",
1315
"react-leaflet": "^4.0.0",
1416
"react-router-dom": "^6.3.0",

‎src/App.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import { BrowserRouter as Router, Route, Navigate, Routes } from 'react-router-d
44
import { Header } from './Components/Header/Header';
55
import { LookData } from './Components/LookData/LookData';
66
import { SectionMap } from './Components/SectionMap/SectionMap';
7+
import { Register } from './Components/Loguin/Register';
8+
import { Login } from './Components/Loguin/Login';
9+
import { ProotectedRoute } from './Components/Loguin/ProtectedRoute';
710

811
function App() {
912
//Listo la configuracion del store. Se puede comenzar el proyecto :D
@@ -12,11 +15,17 @@ function App() {
1215
<>
1316
<Router>
1417
<Routes>
15-
<Route exact path="/" element={<Navigate to="/home"/>}>
16-
</Route>
18+
<Route exact path="/" element={<Navigate to="/home"/>}/>
1719

18-
<Route path="/home" element={[<Header key={"header"}/>,<LookData key={"lookData"}/>,<SectionMap key={"sectionMap"}/>]}/>
20+
<Route path="/home" element={[
21+
<ProotectedRoute key={"ProotectedRoute"}>
22+
<Header key={"header"}/><LookData key={"lookData"}/><SectionMap key={"sectionMap"}/>
23+
</ProotectedRoute>
24+
]}/>
1925

26+
<Route exact path='/register' element={<Register/>}/>
27+
28+
<Route exact path='/Login' element={<Login/>}/>
2029
</Routes>
2130
</Router>
2231
</>

‎src/Components/Header/Header.css‎

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,58 @@
88
background-size: cover;
99
}
1010

11-
.container-header>h1{
11+
.container-header>div{
12+
display: flex;
13+
position: relative;
14+
}
15+
16+
.container-header>div>h1{
1217
width: fit-content;
1318
margin: auto;
1419
margin-bottom: 2%;
1520
font-weight: 500;
1621
color: white;
1722
}
23+
.container-header>div>div{
24+
position: absolute;
25+
right: 5%
26+
}
27+
28+
.dropdown:focus{
29+
background-color: transparent;
30+
border: none;
31+
}
32+
33+
.dropdown>button{
34+
width: 60px;
35+
height: 60px;
36+
background-color: transparent;
37+
border: none;
38+
}
39+
40+
.dropdown>button:hover{
41+
background-color: transparent;
42+
border: none;
43+
}
44+
45+
46+
.dropdown>button:focus{
47+
background-color: transparent;
48+
border: none;
49+
}
50+
51+
.dropdown>button>img{
52+
width: 100%;
53+
}
54+
55+
/* .container-header>div>div>ul{
56+
position: relative;
57+
height: auto; */
58+
/* }
59+
.container-header>div>div>ul>li{
60+
position: absolute;
61+
line-height: 25px;
62+
} */
1863

1964
@media (max-width:425px){
2065

‎src/Components/Header/Header.jsx‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,41 @@
11
import React from 'react'
22
import { Nav } from '../Nav/Nav'
33
import "./Header.css"
4+
import 'bootstrap/dist/css/bootstrap.min.css';
5+
import Dropdown from 'react-bootstrap/Dropdown';
6+
import imgUser from "../Nav/img/icon-user.png"
7+
import { useAuth } from '../../Context/AuthContext';
48

59
export const Header = () => {
10+
11+
const { logout,user } = useAuth()
12+
let myUser = JSON.parse(localStorage.getItem("myUser"));
13+
14+
const handelLogout = async (e)=>{
15+
e.preventDefault()
16+
await logout()
17+
}
18+
19+
const lookUser = (e)=>{
20+
e.preventDefault()
21+
console.log(myUser.email)
22+
}
623
return (
724
<header className='container-header'>
8-
<h1>IP Address Tracker</h1>
25+
<div>
26+
<h1 className='text-center'>IP Address Tracker</h1>
27+
<Dropdown>
28+
<Dropdown.Toggle variant="success" id="dropdown-basic">
29+
<img src={imgUser} alt="icon.png" />
30+
</Dropdown.Toggle>
31+
32+
<Dropdown.Menu>
33+
<Dropdown.Item href="#/action-1" onClick={lookUser}>Search History</Dropdown.Item>
34+
<Dropdown.Item href="#/action-2" onClick={handelLogout}>Logout</Dropdown.Item>
35+
</Dropdown.Menu>
36+
</Dropdown>
37+
</div>
938
<Nav/>
1039
</header>
11-
1240
)
1341
}

‎src/Components/Loguin/Form.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.container-form{
2+
width: 100vw;
3+
height: 100vh;
4+
}
5+
.formu{
6+
width:50%;
7+
height:auto;
8+
margin: auto;
9+
}

‎src/Components/Loguin/Login.jsx‎

Lines changed: 81 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,86 @@
1-
import React from 'react'
1+
import React, { useState } from 'react'
2+
import { useAuth } from '../../Context/AuthContext'
3+
import { useNavigate } from "react-router-dom"
4+
import { auth } from '../../firebase'
5+
import Button from 'react-bootstrap/Button';
6+
import Form from 'react-bootstrap/Form';
7+
import "./Form.css"
8+
import 'bootstrap/dist/css/bootstrap.min.css';
29

310
export const Login = () => {
11+
const [user, setUser] = useState({
12+
email:"",
13+
password:""
14+
})
15+
const navigate = useNavigate()
16+
const { login, loginWithGoogle } = useAuth()
17+
18+
const handelChange = (e)=>{
19+
setUser({
20+
...user,
21+
[e.target.name] : e.target.value
22+
})
23+
}
24+
25+
const handelSubmit = async (e)=>{
26+
e.preventDefault()
27+
try {
28+
await login(user.email, user.password)
29+
navigate("/")
30+
} catch (error) {
31+
console.log(error)
32+
}
33+
}
34+
35+
const createAccount = (e)=>{
36+
e.preventDefault()
37+
navigate("/register")
38+
}
39+
40+
const handelLoguinGoogle = async (e)=>{
41+
e.preventDefault()
42+
try {
43+
await loginWithGoogle()
44+
navigate("/")
45+
} catch (error) {
46+
console.log(error)
47+
}
48+
49+
}
50+
451
return (
5-
<div>Login</div>
52+
<div className='container-form d-flex flex-column justify-content-center align-content-center'>
53+
<Form className="formu border p-4" onSubmit={handelSubmit}>
54+
<h3>Enter for make your searches</h3>
55+
<Form.Group className="mb-3" controlId="formBasicEmail">
56+
<Form.Label>Email address</Form.Label>
57+
<Form.Control type="email" name='email' placeholder="Enter email" onChange={handelChange}/>
58+
<Form.Text className="text-muted">
59+
We'll never share your email with anyone else.
60+
</Form.Text>
61+
</Form.Group>
62+
63+
<Form.Group className="mb-3" controlId="formBasicPassword">
64+
<Form.Label>Password</Form.Label>
65+
<Form.Control type="password" name='password' placeholder="Password" onChange={handelChange}/>
66+
</Form.Group>
67+
{/* <Form.Group className="mb-3" controlId="formBasicCheckbox">
68+
<Form.Check type="checkbox" label="Check me out" />
69+
</Form.Group> */}
70+
<div className='d-flex justify-content-between'>
71+
<Button variant="primary" type="submit">
72+
Login
73+
</Button>
74+
<Button variant="" onClick={createAccount}>
75+
Create Account
76+
</Button>
77+
</div>
78+
<div className='d-flex justify-content-center mt-4'>
79+
<Button variant="primary" type="submit" onClick={handelLoguinGoogle}>
80+
Loguin with Google
81+
</Button>
82+
</div>
83+
</Form>
84+
</div>
685
)
786
}

‎src/Components/Loguin/ProtectedRoute.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Navigate } from "react-router-dom"
2+
import { useAuth } from "../../Context/AuthContext"
3+
4+
export function ProotectedRoute({children}){
5+
const { user, loading } = useAuth()
6+
if(loading) return <h1>Loading</h1>
7+
8+
if(!user) return <Navigate to="/login"/>
9+
10+
return <>{children}</>
11+
}

‎src/Components/Loguin/Register.jsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React, { useState } from 'react'
2+
import { useAuth } from '../../Context/AuthContext'
3+
import { useNavigate } from "react-router-dom"
4+
import Button from 'react-bootstrap/Button';
5+
import Form from 'react-bootstrap/Form';
6+
import "./Form.css"
7+
import 'bootstrap/dist/css/bootstrap.min.css';
8+
9+
export const Register = () => {
10+
const [register, setRegister] = useState({
11+
email:"",
12+
password:""
13+
})
14+
const navigate = useNavigate()
15+
const { signup } = useAuth()
16+
17+
const handelChange = (e)=>{
18+
setRegister({
19+
...register,
20+
[e.target.name] : e.target.value
21+
})
22+
}
23+
24+
const handelSubmit = async (e)=>{
25+
e.preventDefault()
26+
try {
27+
await signup(register.email, register.password)
28+
navigate("/")
29+
} catch (error) {
30+
console.log(error)
31+
}
32+
}
33+
34+
const goLogin = (e)=>{
35+
e.preventDefault()
36+
navigate("/login")
37+
}
38+
39+
return (
40+
<div className='container-form d-flex flex-column justify-content-center align-content-center'>
41+
<Form className="formu border p-4" onSubmit={handelSubmit}>
42+
<h3>Register to use our service</h3>
43+
<Form.Group className="mb-3" controlId="formBasicEmail">
44+
<Form.Label>Email address</Form.Label>
45+
<Form.Control type="email" name='email' placeholder="Enter email" onChange={handelChange}/>
46+
<Form.Text className="text-muted">
47+
We'll never share your email with anyone else.
48+
</Form.Text>
49+
</Form.Group>
50+
51+
<Form.Group className="mb-3" controlId="formBasicPassword">
52+
<Form.Label>Password</Form.Label>
53+
<Form.Control type="password" name='password' placeholder="Password" onChange={handelChange}/>
54+
</Form.Group>
55+
<div className="d-flex justify-content-between">
56+
<Button variant="primary" type="submit">
57+
Create
58+
</Button>
59+
<Button variant="" onClick={goLogin}>
60+
I have account
61+
</Button>
62+
</div>
63+
</Form>
64+
</div>
65+
)
66+
}

‎src/Components/Nav/Nav.jsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
import React, { useState, useEffect } from 'react'
22
import { clearDataIp, getData } from '../../ContentReducer/Action/Action'
33
import { useStore } from "../../Context/store.js"
4+
import { useAuth } from '../../Context/AuthContext'
45
import "./Nav.css"
56

67
export const Nav = () => {
78
//Example : https://geo.ipify.org/api/v2/country,city?apiKey=apiKey&ipAddress=8.8.8.8
89

910
const [state,dispatch] = useStore()
10-
const apiKey = "at_FJYOK3G2qxGCwPj2nzvrwFSwZCfFD"
11+
const apiKey = "at_XFilr7eiAJJP12CMGdWWV3D0X7OCA"
1112
const [ipAddress, setIpAddress] = useState("")
1213
const [error, setError] = useState("")
14+
const {user} = useAuth()
1315

1416
const handleChange = (e)=>{
1517
e.preventDefault()
@@ -23,7 +25,7 @@ export const Nav = () => {
2325
){
2426
try {
2527
clearDataIp(dispatch)
26-
getData(dispatch,`https://geo.ipify.org/api/v2/country,city?apiKey=${apiKey}&ipAddress=${ipAddress}`)
28+
getData(dispatch,ipAddress)
2729
} catch (error) {
2830
console.log(error)
2931
}
@@ -33,11 +35,12 @@ export const Nav = () => {
3335
}
3436
}
3537

38+
39+
3640
useEffect(()=>{
3741
getData(dispatch,`https://geo.ipify.org/api/v2/country,city?apiKey=${apiKey}&ipAddress=${ipAddress}`)
3842
},[])
3943

40-
4144
return (
4245
<nav className='container-nav'>
4346
<form>
@@ -49,6 +52,9 @@ export const Nav = () => {
4952
</form>
5053
{state.msgError && <p>{state.msgError}</p>}
5154
{error && <p>{error}</p>}
55+
56+
{/* <button >Logout</button>
57+
<button onClick={lookUser}>mostrar User</button> */}
5258
</nav>
5359
)
5460
}

0 commit comments

Comments
 (0)