Finish Video

Author: WebDevSimplified

package-lock.json

@@ -6,8 +6,12 @@
  "@testing-library/jest-dom": "^4.2.4",
  "@testing-library/react": "^9.5.0",
  "@testing-library/user-event": "^7.2.1",
+ "bootstrap": "^4.5.2",
+ "firebase": "^7.20.0",
  "react": "^16.13.1",
+ "react-bootstrap": "^1.3.0",
  "react-dom": "^16.13.1",
+ "react-router-dom": "^5.2.0",
  "react-scripts": "3.4.3"
  },
  "scripts": {

package.json

@@ -0,0 +1,35 @@
+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 Dashboard from "./Dashboard"
+import Login from "./Login"
+import PrivateRoute from "./PrivateRoute"
+import ForgotPassword from "./ForgotPassword"
+import UpdateProfile from "./UpdateProfile"
+
+function App() {
+ return (
+ <Container
+ className="d-flex align-items-center justify-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} />
+ <Route path="/signup" component={Signup} />
+ <Route path="/login" component={Login} />
+ <Route path="/forgot-password" component={ForgotPassword} />
+ </Switch>
+ </AuthProvider>
+ </Router>
+ </div>
+ </Container>
+ )
+}
+
+export default App

src/App.css

@@ -0,0 +1,41 @@
+import React, { useState } from "react"
+import { Card, Button, Alert } from "react-bootstrap"
+import { useAuth } from "../contexts/AuthContext"
+import { Link, useHistory } from "react-router-dom"
+
+export default function Dashboard() {
+ const [error, setError] = useState("")
+ const { currentUser, logout } = useAuth()
+ const history = useHistory()
+
+ async function handleLogout() {
+ setError("")
+
+ try {
+ await logout()
+ history.push("/login")
+ } catch {
+ setError("Failed to log out")
+ }
+ }
+
+ return (
+ <>
+ <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>
+ </Card.Body>
+ </Card>
+ <div className="w-100 text-center mt-2">
+ <Button variant="link" onClick={handleLogout}>
+ Log Out
+ </Button>
+ </div>
+ </>
+ )
+}

src/App.js

@@ -0,0 +1,55 @@
+import React, { useRef, useState } from "react"
+import { Form, Button, Card, Alert } from "react-bootstrap"
+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")
+ }
+
+ 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>
+ </>
+ )
+}

src/App.test.js

@@ -0,0 +1,58 @@
+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"
+
+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()
+
+ 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")
+ }
+
+ 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>
+ </>
+ )
+}

src/components/App.js

@@ -0,0 +1,16 @@
+import React from "react"
+import { Route, Redirect } from "react-router-dom"
+import { useAuth } from "../contexts/AuthContext"
+
+export default function PrivateRoute({ component: Component, ...rest }) {
+ const { currentUser } = useAuth()
+
+ return (
+ <Route
+ {...rest}
+ render={props => {
+ return currentUser ? <Component {...props} /> : <Redirect to="/login" />
+ }}
+ ></Route>
+ )
+}