diff --git a/checks.json b/checks.json
new file mode 100644
index 0000000..8b70b53
--- /dev/null
+++ b/checks.json
@@ -0,0 +1 @@
+{"enabled":true,"categories":{}}
\ No newline at end of file
diff --git a/src/components/App.js b/src/components/App.js
index 1b6ec8d..3ae4f49 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -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"
@@ -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;
diff --git a/src/components/Dashboard.js b/src/components/Dashboard.js
index 96e120f..6cbc511 100644
--- a/src/components/Dashboard.js
+++ b/src/components/Dashboard.js
@@ -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>
</>
- )
+ );
}
diff --git a/src/components/ForgotPassword.js b/src/components/ForgotPassword.js
index 4a55997..8e08a3a 100644
--- a/src/components/ForgotPassword.js
+++ b/src/components/ForgotPassword.js
@@ -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>
+ </>
+ )
+ }
\ No newline at end of file
diff --git a/src/components/Login.js b/src/components/Login.js
index 53ec8b7..8b7fd02 100644
--- a/src/components/Login.js
+++ b/src/components/Login.js
@@ -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>
</>
- )
+ );
}
diff --git a/src/components/Signup.js b/src/components/Signup.js
index 546b77b..f4ceebb 100644
--- a/src/components/Signup.js
+++ b/src/components/Signup.js
@@ -1,64 +1,63 @@
-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 Signup() {
- const emailRef = useRef()
- const passwordRef = useRef()
- const passwordConfirmRef = useRef()
- const { signup } = useAuth()
- const [error, setError] = useState("")
- const [loading, setLoading] = useState(false)
- const history = useHistory()
+ const emailRef = useRef()
+ const passwordRef = useRef()
+ const passwordConfirmRef = useRef()
+ const { signup } = useAuth()
+ const [error, setError] = useState("")
+ const [loading, setLoading] = useState(false)
+ const history = useNavigate()
- async function handleSubmit(e) {
- e.preventDefault()
+ async function handleSubmit(e){
+ e.preventDefault()
- if (passwordRef.current.value !== passwordConfirmRef.current.value) {
- return setError("Passwords do not match")
+ if(passwordRef.current.value === passwordConfirmRef.current.value){
+ return setError('Passwords do not match')
+ }//we dont want to continue to do the signup, we just want to exit out of the function immediately because there was an error.
+ try {
+ setError('')
+ setLoading(true)
+ await signup(emailRef.current.value, passwordRef.current.value)
+ history.push('/')
+ } catch{
+ setError('Failed to create an account')
+ }
+ setLoading(false)
}
-
- try {
- setError("")
- setLoading(true)
- await signup(emailRef.current.value, passwordRef.current.value)
- history.push("/")
- } catch {
- setError("Failed to create an account")
- }
-
- setLoading(false)
- }
-
return (
<>
- <Card>
- <Card.Body>
- <h2 className="text-center mb-4">Sign Up</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>
- <Form.Group id="password-confirm">
- <Form.Label>Password Confirmation</Form.Label>
- <Form.Control type="password" ref={passwordConfirmRef} required />
- </Form.Group>
- <Button disabled={loading} className="w-100" type="submit">
- Sign Up
- </Button>
- </Form>
- </Card.Body>
- </Card>
- <div className="w-100 text-center mt-2">
- Already have an account? <Link to="/login">Log In</Link>
- </div>
+ <Card>
+ <Card.Body>
+ <h2 className="text-center mb-4">Register</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>
+ <Form.Group id="password-confirm">
+ <Form.Label>Confirm Password</Form.Label>
+ <Form.Control type="password"
+ ref={passwordConfirmRef} placeholder="Confirm Password" required/>
+ </Form.Group>
+ <br/>
+ <Button disabled={loading} className='w-100' type="submit">Register</Button>
+ </Form>
+ </Card.Body>
+ </Card>
+ <div className='w-100 text-center mt-2'>
+ Already have an account? <Link to="/login">Login</Link>
+ </div>
</>
- )
-}
+ );
+}
\ No newline at end of file
diff --git a/src/components/UpdateProfile.js b/src/components/UpdateProfile.js
index 67a8b39..cdc41c2 100644
--- a/src/components/UpdateProfile.js
+++ b/src/components/UpdateProfile.js
@@ -1,7 +1,7 @@
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 { Link, useNavigate } from "react-router-dom"
export default function UpdateProfile() {
const emailRef = useRef()
@@ -10,9 +10,10 @@ export default function UpdateProfile() {
const { currentUser, updatePassword, updateEmail } = useAuth()
const [error, setError] = useState("")
const [loading, setLoading] = useState(false)
- const history = useHistory()
+ const history = useNavigate()
function handleSubmit(e) {
+ //if passwords are not same I set this error
e.preventDefault()
if (passwordRef.current.value !== passwordConfirmRef.current.value) {
return setError("Passwords do not match")
@@ -24,19 +25,21 @@ export default function UpdateProfile() {
if (emailRef.current.value !== currentUser.email) {
promises.push(updateEmail(emailRef.current.value))
+ //Check if our email is not equal to our current email
+ //if we've changed our email, I'll want to add that email by using (promises.push)
}
if (passwordRef.current.value) {
promises.push(updatePassword(passwordRef.current.value))
}
- Promise.all(promises)
- .then(() => {
- history.push("/")
+ Promise.all(promises) //Our array promises
+ .then(() => { //our .then will run everytime our promises execute
+ history.push("/") //redirecting to our home page
})
.catch(() => {
setError("Failed to update account")
})
- .finally(() => {
+ .finally(() => { //our .finally will set our loading back to false and it runs if we either succeed or fail
setLoading(false)
})
}
@@ -62,7 +65,7 @@ export default function UpdateProfile() {
<Form.Control
type="password"
ref={passwordRef}
- placeholder="Leave blank to keep the same"
+ placeholder="Leave it blank to keep them same"
/>
</Form.Group>
<Form.Group id="password-confirm">
@@ -70,7 +73,7 @@ export default function UpdateProfile() {
<Form.Control
type="password"
ref={passwordConfirmRef}
- placeholder="Leave blank to keep the same"
+ placeholder="Leave it blank to keep them same"
/>
</Form.Group>
<Button disabled={loading} className="w-100" type="submit">
@@ -84,4 +87,4 @@ export default function UpdateProfile() {
</div>
</>
)
-}
+}
\ No newline at end of file
diff --git a/src/firebase.js b/src/firebase.js
index aa2516c..d2d4df1 100644
--- a/src/firebase.js
+++ b/src/firebase.js
@@ -1,15 +1,19 @@
-import firebase from "firebase/app"
-import "firebase/auth"
+import firebase from 'firebase/compat/app';
+import 'firebase/compat/auth';
+import 'firebase/compat/firestore';
+import "firebase/compat/database";
+import "firebase/compat/storage";
const app = firebase.initializeApp({
- apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
- authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
- databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
- projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
- storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
- messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
- appId: process.env.REACT_APP_FIREBASE_APP_ID
+ apiKey: "process.env.REACT_APP_FIREBASE_API_KEY",
+ authDomain: "process.env.REACT_APP_FIREBASE_AUTH_DOMAIN",
+ databaseURL: "process.env.REACT_APP_FIREBASE_DATABASE_URL",
+ projectId: "process.env.REACT_APP_FIREBASE_PROJECT_ID",
+ storageBucket: "process.env.REACT_APP_FIREBASE_STORAGE_BUCKET",
+ messagingSenderId: "process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID",
+ appId: "process.env.1:842089015099:web:dbf2bb61d5a132b92e791e",
+ measurementId: "process.env.REACT_APP_FIREBASE_MEASUREMENT_ID"
})
export const auth = app.auth()
-export default app
+export default app
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index f4d1c4f..889a215 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,11 +1,11 @@
-import React from "react"
-import ReactDOM from "react-dom"
-import App from "./components/App"
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './components/App';
import "bootstrap/dist/css/bootstrap.min.css"
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
<React.StrictMode>
<App />
- </React.StrictMode>,
- document.getElementById("root")
-)
+ </React.StrictMode>
+);