Mikhail test

package.json

@@ -1,5 +1,6 @@
 {
-  "name": "firebase-react-auth",
+  "name": "firebase",
+  "homepage": "https://MikhailKolomoitsev.github.io/firebase",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -8,13 +9,16 @@
     "@testing-library/user-event": "^7.2.1",
     "bootstrap": "^4.5.2",
     "firebase": "^7.20.0",
+    "gh-pages": "^3.2.3",
     "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": {
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

src/components/App.js

@@ -2,7 +2,7 @@ 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 { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
 import Dashboard from "./Dashboard"
 import Login from "./Login"
 import PrivateRoute from "./PrivateRoute"
@@ -11,24 +11,23 @@ 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" }}>
+
+    <Container className="d-flex align-items-center justify-content-center" style={{ minHeight: '100vh' }}>
+      <div className="w-100" style={{ maxWidth: 450 }}>
         <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} />
+              <PrivateRoute exact path='/React-Firebase-Auth' component={Dashboard}/>
+              <PrivateRoute path='/React-Firebase-Auth/update-profile' component={UpdateProfile}/>
+              <Route path='/React-Firebase-Auth/signup' component={Signup}/>
+              <Route path='/React-Firebase-Auth/login' component={Login}/>
+              <Route path='/React-Firebase-Auth/forgot-password' component={ForgotPassword}/>
             </Switch>
           </AuthProvider>
         </Router>
       </div>
     </Container>
+
   )
 }
 

src/components/Dashboard.js

@@ -1,41 +1,41 @@
-import React, { useState } from "react"
-import { Card, Button, Alert } from "react-bootstrap"
-import { useAuth } from "../contexts/AuthContext"
+import React,{useState} from 'react'
+import { Button, Card, 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 Dashboard = () => {
+  const [error, setError] = useState('')
   const { currentUser, logout } = useAuth()
   const history = useHistory()
 
   async function handleLogout() {
-    setError("")
+    setError('')
 
     try {
       await logout()
-      history.push("/login")
-    } catch {
-      setError("Failed to log out")
+      history.pushState('/React-Firebase-Auth/login')
+    } catch (error) {
+      setError(error.message)
     }
+
   }
-
   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>
+          <h2 className='text-center mb-4'>Profile</h2>
+          {error && <Alert variant='danger'>{error}</Alert>}
+          <strong>Email: </strong>{currentUser ? currentUser.email : 'not loggedin'}
+          <Link to='/React-Firebase-Auth/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>
+      </Card>
     </>
   )
 }
+
+export default Dashboard

src/components/ForgotPassword.js

@@ -1,55 +1,49 @@
-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"
+import React, { useRef, useState } from 'react'
+import { Alert, Button, Card, Form } from 'react-bootstrap'
+import { Link } from 'react-router-dom'
+import { useAuth } from '../contexts/AuthContext'
 
-export default function ForgotPassword() {
-  const emailRef = useRef()
-  const { resetPassword } = useAuth()
-  const [error, setError] = useState("")
-  const [message, setMessage] = useState("")
-  const [loading, setLoading] = useState(false)
+const ForgotPassword = () => {
+    const emailRef = useRef()
+    const { resetPassword } = useAuth()
+    const [error, setError] = useState('')
+    const [loading, setLoading] = useState(false)
+    const [message, setMessage] = useState('')
 
-  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")
+    async function handleSubmit(e) {
+        e.preventDefault()
+        try {
+            setMessage('')
+            setError('')
+            setLoading(true)
+            await resetPassword(emailRef.current.value)
+            setMessage('Check your email to follow instructions')
+        } catch (error) {
+            setError(error.message)
+        }
+        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 />
+                        </Form.Group>
+                        <Button type='submit' className='w-100' disabled={loading}>Reset Password</Button>
+                    </Form>
+                    <div className='w-100 text-center mt-2'><Link to='/React-Firebase-Auth/login'>Log In</Link></div>
+                </Card.Body>
+            </Card>
+            <div className='w-100 text-center mt-2'>Need an account? <Link to='/React-Firebase-Auth/signup'>Sign Up</Link></div>
+        </>
+    )
 }
+
+export default ForgotPassword