Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Firebase, usehistory, Redirect #29

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Firebase, usehistory, Redirect #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions checks.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"enabled":true,"categories":{}}
35 changes: 17 additions & 18 deletions src/components/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from "react"
import Signup from "./Signup"
import { Container } from "react-bootstrap"
import { AuthProvider } from "../contexts/AuthContext"
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
import { Container } from "react-bootstrap";
import { AuthProvider } from "../contexts/AuthContext";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
import Signup from "./Signup";
import Dashboard from "./Dashboard"
import Login from "./Login"
import PrivateRoute from "./PrivateRoute"
Expand All @@ -11,25 +11,24 @@ import UpdateProfile from "./UpdateProfile"

function App() {
return (
<Container
className="d-flex align-items-center justify-content-center"
style={{ minHeight: "100vh" }}
>
<Container className="d-flex align-items-center justif-content-center"
style={{ minHeight: "100vh" }}>
<div className="w-100" style={{ maxWidth: "400px" }}>
<Router>
<AuthProvider>
<Switch>
<PrivateRoute exact path="/" component={Dashboard} />
<PrivateRoute path="/update-profile" component={UpdateProfile} />
<Router>
<AuthProvider>
<Routes>
{/* this private route locks us to the official home page if not yet logged in, so we can't go to the dashboard*/ }
<Route exact path="*" element={<PrivateRoute/>} component={Dashboard} />
<Route path="/update-profile" component={UpdateProfile} />
<Route path="/signup" component={Signup} />
<Route path="/login" component={Login} />
<Route path="/forgot-password" component={ForgotPassword} />
</Switch>
</AuthProvider>
</Router>
</Routes>
</AuthProvider>
</Router>
</div>
</Container>
)
)
}

export default App
export default App;
51 changes: 24 additions & 27 deletions src/components/Dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,38 @@
import React, { useState } from "react"
import { Card, Button, Alert } from "react-bootstrap"
import React, { useState } from 'react';
import { Card, Button, Alert } from 'react-bootstrap'
import { useAuth } from "../contexts/AuthContext"
import { Link, useHistory } from "react-router-dom"
import { Link, useNavigate } from "react-router-dom"

export default function Dashboard() {
const [error, setError] = useState("")
const { currentUser, logout } = useAuth()
const history = useHistory()

const [error, setError] = useState("")
const history = useNavigate()
async function handleLogout() {
setError("")
setError('')

try {
try{
await logout()
history.push("/login")
} catch {
setError("Failed to log out")
history.pushState('/login')
}
catch{
setError('Failed to logout')
}
}

return (
return (
<>
<Card>
<Card>
<Card.Body>
<h2 className="text-center mb-4">Profile</h2>
{error && <Alert variant="danger">{error}</Alert>}
<strong>Email:</strong> {currentUser.email}
<Link to="/update-profile" className="btn btn-primary w-100 mt-3">
Update Profile
</Link>
<h2 className='text-center mb-4'>
Profile
</h2>
{error && <Alert variant="danger">{error}</Alert>}
<strong>Email: </strong> {currentUser.email}
<Link to="/update-profile" className="btn btn-primary w-100 mt-3">Update Profile</Link>
</Card.Body>
</Card>
<div className="w-100 text-center mt-2">
<Button variant="link" onClick={handleLogout}>
Log Out
</Button>
</div>
</Card>
<div className='w-100 text-center mt-2'>
<Button variant="link" onClick={handleLogout}> Log Out</Button>
</div>
</>
)
);
}
96 changes: 48 additions & 48 deletions src/components/ForgotPassword.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,52 +4,52 @@ import { useAuth } from "../contexts/AuthContext"
import { Link } from "react-router-dom"

export default function ForgotPassword() {
const emailRef = useRef()
const { resetPassword } = useAuth()
const [error, setError] = useState("")
const [message, setMessage] = useState("")
const [loading, setLoading] = useState(false)

async function handleSubmit(e) {
e.preventDefault()

try {
setMessage("")
setError("")
setLoading(true)
await resetPassword(emailRef.current.value)
setMessage("Check your inbox for further instructions")
} catch {
setError("Failed to reset password")
const emailRef = useRef()
const { resetPassword } = useAuth()
const [error, setError] = useState("")
const [message, setMessage] = useState("")
const [loading, setLoading] = useState(false)

async function handleSubmit(e) {
e.preventDefault()

try {
setMessage("")
setError("")
setLoading(true)
await resetPassword(emailRef.current.value)
setMessage("Check your inbox for further instructions")
} catch {
setError("Failed to reset password")
}

setLoading(false)
}

setLoading(false)
}

return (
<>
<Card>
<Card.Body>
<h2 className="text-center mb-4">Password Reset</h2>
{error && <Alert variant="danger">{error}</Alert>}
{message && <Alert variant="success">{message}</Alert>}
<Form onSubmit={handleSubmit}>
<Form.Group id="email">
<Form.Label>Email</Form.Label>
<Form.Control type="email" ref={emailRef} required />
</Form.Group>
<Button disabled={loading} className="w-100" type="submit">
Reset Password
</Button>
</Form>
<div className="w-100 text-center mt-3">
<Link to="/login">Login</Link>
</div>
</Card.Body>
</Card>
<div className="w-100 text-center mt-2">
Need an account? <Link to="/signup">Sign Up</Link>
</div>
</>
)
}

return (
<>
<Card>
<Card.Body>
<h2 className="text-center mb-4">Password Reset</h2>
{error && <Alert variant="danger">{error}</Alert>}
{message && <Alert variant="success">{message}</Alert>}
<Form onSubmit={handleSubmit}>
<Form.Group id="email">
<Form.Label>Email</Form.Label>
<Form.Control type="email" ref={emailRef} required placeholder="Enter your Email"/>
</Form.Group>
<Button disabled={loading} className="w-100" type="submit">
Reset Password
</Button>
</Form>
<div className="w-100 text-center mt-3">
<Link to="/login">Login</Link>
</div>
</Card.Body>
</Card>
<div className="w-100 text-center mt-2">
Need an account? <Link to="/signup">Register</Link>
</div>
</>
)
}
98 changes: 48 additions & 50 deletions src/components/Login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,56 @@
import React, { useRef, useState } from "react"
import { Form, Button, Card, Alert } from "react-bootstrap"
import { useAuth } from "../contexts/AuthContext"
import { Link, useHistory } from "react-router-dom"
import React, { useRef, useState } from 'react';
import { Form, Button, Card, Alert } from 'react-bootstrap';
import { useAuth } from '../contexts/AuthContext'
import { Link, useNavigate } from "react-router-dom"

export default function Login() {
const emailRef = useRef()
const passwordRef = useRef()
const { login } = useAuth()
const [error, setError] = useState("")
const [loading, setLoading] = useState(false)
const history = useHistory()
const emailRef = useRef()
const passwordRef = useRef()
const { login } = useAuth()
const [error, setError] = useState("")
const [loading, setLoading] = useState(false)
const history = useNavigate()

async function handleSubmit(e) {
e.preventDefault()

try {
setError("")
setLoading(true)
await login(emailRef.current.value, passwordRef.current.value)
history.push("/")
} catch {
setError("Failed to log in")
async function handleSubmit(e){
e.preventDefault()
try {
setError('')
setLoading(true)
await login(emailRef.current.value, passwordRef.current.value)
history.push('/')
} catch{
setError('Failed to Login')
}
setLoading(false)
}

setLoading(false)
}

return (
<>
<Card>
<Card.Body>
<h2 className="text-center mb-4">Log In</h2>
{error && <Alert variant="danger">{error}</Alert>}
<Form onSubmit={handleSubmit}>
<Form.Group id="email">
<Form.Label>Email</Form.Label>
<Form.Control type="email" ref={emailRef} required />
</Form.Group>
<Form.Group id="password">
<Form.Label>Password</Form.Label>
<Form.Control type="password" ref={passwordRef} required />
</Form.Group>
<Button disabled={loading} className="w-100" type="submit">
Log In
</Button>
</Form>
<div className="w-100 text-center mt-3">
<Link to="/forgot-password">Forgot Password?</Link>
</div>
</Card.Body>
</Card>
<div className="w-100 text-center mt-2">
Need an account? <Link to="/signup">Sign Up</Link>
</div>
<Card>
<Card.Body>
<h2 className="text-center mb-4">Login</h2>
{error && <Alert variant="danger">{error}</Alert>}
<Form onSubmit={ handleSubmit }>
<Form.Group id="email">
<Form.Label>Email</Form.Label>
<Form.Control type="email"
ref={emailRef} placeholder="Enter your Email" required/>
</Form.Group>
<Form.Group id="password">
<Form.Label>Password</Form.Label>
<Form.Control type="password"
ref={passwordRef} placeholder="Enter your Password" required/>
</Form.Group>
<br/>
<Button disabled={loading} className='w-100' type="submit">Login</Button>
</Form>
<div className="w-100 text-center mt-3">
<Link to="/forgot-password">Forgot Password?</Link>
</div>
</Card.Body>
</Card>
<div className='w-100 text-center mt-2'>
Not yet Registered? <Link to="/signup">Register</Link>
</div>
</>
)
);
}
Loading