From 4828ad14ad63373aae8ad44231162277ed07134c Mon Sep 17 00:00:00 2001
From: Mihon <75487015+MikhailKolomoitsev@users.noreply.github.com>
Date: Sun, 6 Mar 2022 17:54:18 +0000
Subject: [PATCH 1/3] done

---
 src/components/App.js            |  21 +++--
 src/components/Dashboard.js      |  42 ++++-----
 src/components/ForgotPassword.js |  94 ++++++++++----------
 src/components/Login.js          | 100 +++++++++++----------
 src/components/PrivateRoute.js   |  30 ++++---
 src/components/Signup.js         |  54 ++++++------
 src/components/UpdateProfile.js  | 144 ++++++++++++++-----------------
 src/contexts/AuthContext.js      | 112 ++++++++++++------------
 8 files changed, 288 insertions(+), 309 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index 1b6ec8d..6091d09 100644
--- a/src/components/App.js
+++ b/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='/' 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>
+
   )
 }
 
diff --git a/src/components/Dashboard.js b/src/components/Dashboard.js
index 96e120f..fb3d515 100644
--- a/src/components/Dashboard.js
+++ b/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('/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='/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
\ No newline at end of file
diff --git a/src/components/ForgotPassword.js b/src/components/ForgotPassword.js
index 4a55997..c02dc25 100644
--- a/src/components/ForgotPassword.js
+++ b/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='/login'>Log In</Link></div>
+                </Card.Body>
+            </Card>
+            <div className='w-100 text-center mt-2'>Need an account? <Link to='/signup'>Sign Up</Link></div>
+        </>
+    )
 }
+
+export default ForgotPassword
\ No newline at end of file
diff --git a/src/components/Login.js b/src/components/Login.js
index 53ec8b7..7f02498 100644
--- a/src/components/Login.js
+++ b/src/components/Login.js
@@ -1,58 +1,54 @@
-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 { Alert, Button, Card, Form } from 'react-bootstrap'
+import { Link, useHistory } from 'react-router-dom'
+import { useAuth } from '../contexts/AuthContext'
 
-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 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")
+    async function handleSubmit(e) {
+        e.preventDefault()
+        try {
+            setError('')
+            setLoading(true)
+            await login(emailRef.current.value, passwordRef.current.value)
+            history.push('/')
+        } catch (error) {
+            setError(error.message)
+        }
+        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>
 
-  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>
-    </>
-  )
+                        <Button type='submit' className='w-100' disabled={loading}>Log In</Button>
+                    </Form>
+                    <div className='w-100 text-center mt-2'><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>
+        </>
+    )
 }
+
+export default Login
\ No newline at end of file
diff --git a/src/components/PrivateRoute.js b/src/components/PrivateRoute.js
index 7207616..33aad52 100644
--- a/src/components/PrivateRoute.js
+++ b/src/components/PrivateRoute.js
@@ -1,16 +1,18 @@
-import React from "react"
-import { Route, Redirect } from "react-router-dom"
-import { useAuth } from "../contexts/AuthContext"
+import React from 'react'
+import { Redirect } from 'react-router-dom'
+import { Route } 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>
-  )
+const PrivateRoute = ({ component: Component, ...rest }) => {
+    const {currentUser}=useAuth()
+    return (
+        <Route
+            {...rest}
+            render={props => {
+               return  currentUser ? <Component {...props}/>:<Redirect to='/login'></Redirect>
+            }}
+        ></Route>
+    )
 }
+
+export default PrivateRoute
\ No newline at end of file
diff --git a/src/components/Signup.js b/src/components/Signup.js
index 546b77b..1884dd2 100644
--- a/src/components/Signup.js
+++ b/src/components/Signup.js
@@ -1,14 +1,14 @@
-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 { Alert, Button, Card, Form } from 'react-bootstrap'
+import { Link, useHistory } from 'react-router-dom'
+import { useAuth } from '../contexts/AuthContext'
 
-export default function Signup() {
+const Signup = () => {
   const emailRef = useRef()
   const passwordRef = useRef()
   const passwordConfirmRef = useRef()
   const { signup } = useAuth()
-  const [error, setError] = useState("")
+  const [error, setError] = useState('')
   const [loading, setLoading] = useState(false)
   const history = useHistory()
 
@@ -18,16 +18,14 @@ export default function Signup() {
     if (passwordRef.current.value !== passwordConfirmRef.current.value) {
       return setError("Passwords do not match")
     }
-
     try {
-      setError("")
+      setError('')
       setLoading(true)
       await signup(emailRef.current.value, passwordRef.current.value)
-      history.push("/")
-    } catch {
-      setError("Failed to create an account")
+      history.push('/login')
+    } catch (error) {
+      setError(error.message)
     }
-
     setLoading(false)
   }
 
@@ -35,30 +33,32 @@ export default function Signup() {
     <>
       <Card>
         <Card.Body>
-          <h2 className="text-center mb-4">Sign Up</h2>
-          {error && <Alert variant="danger">{error}</Alert>}
+          <h2 className='text-center mb-4'>Sing Up</h2>
+          {error && <Alert variant='danger'>{error}</Alert>}
           <Form onSubmit={handleSubmit}>
-            <Form.Group id="email">
+            <Form.Group id='email'>
               <Form.Label>Email</Form.Label>
-              <Form.Control type="email" ref={emailRef} required />
+              <Form.Control type='email' ref={emailRef} required />
             </Form.Group>
-            <Form.Group id="password">
+
+            <Form.Group id='password'>
               <Form.Label>Password</Form.Label>
-              <Form.Control type="password" ref={passwordRef} required />
+              <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 id='password-confirm'>
+              <Form.Label>Password-confirm</Form.Label>
+              <Form.Control type='password' ref={passwordConfirmRef} required />
             </Form.Group>
-            <Button disabled={loading} className="w-100" type="submit">
-              Sign Up
-            </Button>
+
+            <Button type='submit' className='w-100' disabled={loading}>SignUp</Button>
+
           </Form>
         </Card.Body>
       </Card>
-      <div className="w-100 text-center mt-2">
-        Already have an account? <Link to="/login">Log In</Link>
-      </div>
+      <div className='w-100 text-center mt-2'>Already have an account? <Link to='/login'>Log In</Link></div>
     </>
   )
 }
+
+export default Signup
\ No newline at end of file
diff --git a/src/components/UpdateProfile.js b/src/components/UpdateProfile.js
index 67a8b39..ff92c46 100644
--- a/src/components/UpdateProfile.js
+++ b/src/components/UpdateProfile.js
@@ -1,87 +1,73 @@
-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 { Alert, Button, Card, Form } from 'react-bootstrap'
+import { Link, useHistory } from 'react-router-dom'
+import { useAuth } from '../contexts/AuthContext'
 
-export default function UpdateProfile() {
-  const emailRef = useRef()
-  const passwordRef = useRef()
-  const passwordConfirmRef = useRef()
-  const { currentUser, updatePassword, updateEmail } = useAuth()
-  const [error, setError] = useState("")
-  const [loading, setLoading] = useState(false)
-  const history = useHistory()
+const UpdateProfile = () => {
+    const emailRef = useRef()
+    const passwordRef = useRef()
+    const passwordConfirmRef = useRef()
+    const { currentUser, updatePassowrd, updateEmail } = useAuth()
+    const [error, setError] = useState('')
+    const [loading, setLoading] = useState(false)
+    const history = useHistory()
 
-  function handleSubmit(e) {
-    e.preventDefault()
-    if (passwordRef.current.value !== passwordConfirmRef.current.value) {
-      return setError("Passwords do not match")
-    }
+    function handleSubmit(e) {
+        e.preventDefault()
 
-    const promises = []
-    setLoading(true)
-    setError("")
+        if (passwordRef.current.value !== passwordConfirmRef.current.value) {
+            return setError("Passwords do not match")
+        }
 
-    if (emailRef.current.value !== currentUser.email) {
-      promises.push(updateEmail(emailRef.current.value))
-    }
-    if (passwordRef.current.value) {
-      promises.push(updatePassword(passwordRef.current.value))
+        const promises = []
+        setLoading(true)
+        setError('')
+
+        if (emailRef.current.value !== currentUser.email) {
+            promises.push(updateEmail(emailRef.current.value))
+        }
+        if (passwordRef.current.value !== currentUser.password) {
+            promises.push(updateEmail(passwordRef.current.value))
+        }
+        Promise.all(promises).then(() => {
+            history.push('/')
+        }).catch((e) => {
+            setError(e.message)
+        }).finally(() => {
+            setLoading(false)
+        })
     }
 
-    Promise.all(promises)
-      .then(() => {
-        history.push("/")
-      })
-      .catch(() => {
-        setError("Failed to update account")
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }
+    return (
+        <>
+            <Card>
+                <Card.Body>
+                    <h2 className='text-center mb-4'>Update Profile</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 defaultValue={currentUser.email} />
+                        </Form.Group>
+
+                        <Form.Group id='password'>
+                            <Form.Label>Password</Form.Label>
+                            <Form.Control type='password' ref={passwordRef} placeholder='Leave blank to keep the same' />
+                        </Form.Group>
 
-  return (
-    <>
-      <Card>
-        <Card.Body>
-          <h2 className="text-center mb-4">Update Profile</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
-                defaultValue={currentUser.email}
-              />
-            </Form.Group>
-            <Form.Group id="password">
-              <Form.Label>Password</Form.Label>
-              <Form.Control
-                type="password"
-                ref={passwordRef}
-                placeholder="Leave blank to keep the same"
-              />
-            </Form.Group>
-            <Form.Group id="password-confirm">
-              <Form.Label>Password Confirmation</Form.Label>
-              <Form.Control
-                type="password"
-                ref={passwordConfirmRef}
-                placeholder="Leave blank to keep the same"
-              />
-            </Form.Group>
-            <Button disabled={loading} className="w-100" type="submit">
-              Update
-            </Button>
-          </Form>
-        </Card.Body>
-      </Card>
-      <div className="w-100 text-center mt-2">
-        <Link to="/">Cancel</Link>
-      </div>
-    </>
-  )
+                        <Form.Group id='password-confirm'>
+                            <Form.Label>Password-confirm</Form.Label>
+                            <Form.Control type='password' ref={passwordConfirmRef} placeholder='Leave blank to keep the same' />
+                        </Form.Group>
+
+                        <Button type='submit' className='w-100' disabled={loading}>Update</Button>
+
+                    </Form>
+                </Card.Body>
+            </Card>
+            <div className='w-100 text-center mt-2'><Link to='/login'>Cancel</Link></div>
+        </>
+    )
 }
+
+export default UpdateProfile
\ No newline at end of file
diff --git a/src/contexts/AuthContext.js b/src/contexts/AuthContext.js
index c541957..e6089f9 100644
--- a/src/contexts/AuthContext.js
+++ b/src/contexts/AuthContext.js
@@ -1,62 +1,64 @@
-import React, { useContext, useState, useEffect } from "react"
-import { auth } from "../firebase"
+import React, { useContext, useState, useEffect } from 'react'
+import { auth } from '../firebase'
 
 const AuthContext = React.createContext()
 
 export function useAuth() {
-  return useContext(AuthContext)
+    return useContext(AuthContext)
 }
 
-export function AuthProvider({ children }) {
-  const [currentUser, setCurrentUser] = useState()
-  const [loading, setLoading] = useState(true)
-
-  function signup(email, password) {
-    return auth.createUserWithEmailAndPassword(email, password)
-  }
-
-  function login(email, password) {
-    return auth.signInWithEmailAndPassword(email, password)
-  }
-
-  function logout() {
-    return auth.signOut()
-  }
-
-  function resetPassword(email) {
-    return auth.sendPasswordResetEmail(email)
-  }
-
-  function updateEmail(email) {
-    return currentUser.updateEmail(email)
-  }
-
-  function updatePassword(password) {
-    return currentUser.updatePassword(password)
-  }
-
-  useEffect(() => {
-    const unsubscribe = auth.onAuthStateChanged(user => {
-      setCurrentUser(user)
-      setLoading(false)
-    })
-
-    return unsubscribe
-  }, [])
-
-  const value = {
-    currentUser,
-    login,
-    signup,
-    logout,
-    resetPassword,
-    updateEmail,
-    updatePassword
-  }
-
-  return (
-    <AuthContext.Provider value={value}>
-      {!loading && children}
-    </AuthContext.Provider>
-  )
+export const AuthProvider = ({ children }) => {
+    const [currentUser, setCurrentUser] = useState()
+    const [loading, setLoading] = useState(true)
+
+    function signup(email, password) {
+        return auth.createUserWithEmailAndPassword(email, password)
+    }
+
+    function login(email, password) {
+        return auth.signInWithEmailAndPassword(email, password)
+    }
+
+    function logout() {
+        return auth.signOut()
+    }
+
+    function resetPassword(email) {
+        return auth.sendPasswordResetEmail(email)
+    }
+
+    function updateEmail(email) {
+        return currentUser.updateEmail(email)
+    }
+
+
+    function updatePassowrd(password) {
+        return currentUser.updatePassowrd(password)
+    }
+
+    useEffect(() => {
+        const unsubscriber = auth.onAuthStateChanged(user => {
+            setLoading(false)
+            setCurrentUser(user)
+        })
+        return unsubscriber
+    }, [currentUser])
+
+
+
+    const value = {
+        currentUser,
+        signup,
+        login,
+        logout,
+        resetPassword,
+        updateEmail,
+        updatePassowrd
+    }
+    return (
+        <AuthContext.Provider value={value}>
+            {!loading && children}
+        </AuthContext.Provider>
+    )
 }
+

From 7090187828eadfde82f4c05ec40573f84b95fb61 Mon Sep 17 00:00:00 2001
From: Mihon <75487015+MikhailKolomoitsev@users.noreply.github.com>
Date: Mon, 7 Mar 2022 19:31:36 +0000
Subject: [PATCH 2/3] atuh with google+facebook(0.1)

---
 package-lock.json            | 125 +++++++++++++++++++++++++++++++++++
 package.json                 |   4 ++
 src/components/Login.js      |  31 ++++++++-
 src/config/authMethods.js    |   4 ++
 src/{ => config}/firebase.js |   0
 src/contexts/AuthContext.js  |   9 ++-
 6 files changed, 169 insertions(+), 4 deletions(-)
 create mode 100644 src/config/authMethods.js
 rename src/{ => config}/firebase.js (100%)

diff --git a/package-lock.json b/package-lock.json
index f85d728..df2254c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5290,6 +5290,11 @@
         }
       }
     },
+    "email-addresses": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz",
+      "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg=="
+    },
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -6364,6 +6369,21 @@
         "schema-utils": "^2.5.0"
       }
     },
+    "filename-reserved-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
+      "integrity": "sha1-q/c9+rc10EVECr/qLZHzieu/oik="
+    },
+    "filenamify": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz",
+      "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==",
+      "requires": {
+        "filename-reserved-regex": "^2.0.0",
+        "strip-outer": "^1.0.1",
+        "trim-repeated": "^1.0.0"
+      }
+    },
     "filesize": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.0.1.tgz",
@@ -6755,6 +6775,95 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "gh-pages": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-3.2.3.tgz",
+      "integrity": "sha512-jA1PbapQ1jqzacECfjUaO9gV8uBgU6XNMV0oXLtfCX3haGLe5Atq8BxlrADhbD6/UdG9j6tZLWAkAybndOXTJg==",
+      "requires": {
+        "async": "^2.6.1",
+        "commander": "^2.18.0",
+        "email-addresses": "^3.0.1",
+        "filenamify": "^4.3.0",
+        "find-cache-dir": "^3.3.1",
+        "fs-extra": "^8.1.0",
+        "globby": "^6.1.0"
+      },
+      "dependencies": {
+        "find-cache-dir": {
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+          "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
+          "requires": {
+            "commondir": "^1.0.1",
+            "make-dir": "^3.0.2",
+            "pkg-dir": "^4.1.0"
+          }
+        },
+        "find-up": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+          "requires": {
+            "locate-path": "^5.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "globby": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+          "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
+          "requires": {
+            "array-union": "^1.0.1",
+            "glob": "^7.0.3",
+            "object-assign": "^4.0.1",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+          "requires": {
+            "p-locate": "^4.1.0"
+          }
+        },
+        "make-dir": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+          "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+          "requires": {
+            "semver": "^6.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+          "requires": {
+            "p-limit": "^2.2.0"
+          }
+        },
+        "path-exists": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+        },
+        "pkg-dir": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+          "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+          "requires": {
+            "find-up": "^4.0.0"
+          }
+        }
+      }
+    },
     "glob": {
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
@@ -13242,6 +13351,14 @@
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
     },
+    "strip-outer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
+      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
+      "requires": {
+        "escape-string-regexp": "^1.0.2"
+      }
+    },
     "style-loader": {
       "version": "0.23.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.23.1.tgz",
@@ -13639,6 +13756,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "trim-repeated": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+      "integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=",
+      "requires": {
+        "escape-string-regexp": "^1.0.2"
+      }
+    },
     "ts-pnp": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.6.tgz",
diff --git a/package.json b/package.json
index 18e57c1..3dc1074 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
   "name": "firebase-react-auth",
+  "homepage": "https://MikhailKolomoitsev.github.io/React-Firebase-Auth",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -8,6 +9,7 @@
     "@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",
@@ -15,6 +17,8 @@
     "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",
diff --git a/src/components/Login.js b/src/components/Login.js
index 7f02498..6785dad 100644
--- a/src/components/Login.js
+++ b/src/components/Login.js
@@ -1,12 +1,13 @@
 import React, { useRef, useState } from 'react'
 import { Alert, Button, Card, Form } from 'react-bootstrap'
 import { Link, useHistory } from 'react-router-dom'
+import { facebookProvider, githubProvider, googleProvider } from '../config/authMethods'
 import { useAuth } from '../contexts/AuthContext'
 
 const Login = () => {
     const emailRef = useRef()
     const passwordRef = useRef()
-    const { login } = useAuth()
+    const { login, socialMediaAuth } = useAuth()
     const [error, setError] = useState('')
     const [loading, setLoading] = useState(false)
     const history = useHistory()
@@ -24,6 +25,21 @@ const Login = () => {
         setLoading(false)
     }
 
+    async function handleSocials(provider) {
+        try {
+            setError('')
+            setLoading(true)
+            await socialMediaAuth(provider)
+            history.push('/')
+        } catch (error) {
+            setError(error.message)
+        }
+        setLoading(false)
+
+
+    }
+
+
     return (
         <>
             <Card>
@@ -43,7 +59,18 @@ const Login = () => {
 
                         <Button type='submit' className='w-100' disabled={loading}>Log In</Button>
                     </Form>
-                    <div className='w-100 text-center mt-2'><Link to='/forgot-password'>Forgot Password?</Link></div>
+                    <div className='w-100 text-center mt-2 mb-2'><Link to='/forgot-password'>Forgot Password?</Link></div>
+                    <Button
+                        variant="light"
+                        onClick={()=>handleSocials(facebookProvider)}
+                        type='submit' className='w-100 mb-3'
+                        disabled={loading}>Log In with Facebook</Button>
+                    <Button
+                        variant="light"
+                        onClick={() => handleSocials(googleProvider)}
+                        type='submit'
+                        className='w-100 mb-3'
+                        disabled={loading}>Log In with Google</Button>
                 </Card.Body>
             </Card>
             <div className='w-100 text-center mt-2'>Need an account? <Link to='/signup'>Sign Up</Link></div>
diff --git a/src/config/authMethods.js b/src/config/authMethods.js
new file mode 100644
index 0000000..f89875c
--- /dev/null
+++ b/src/config/authMethods.js
@@ -0,0 +1,4 @@
+import firebase from "firebase";
+
+export const facebookProvider = new firebase.auth.FacebookAuthProvider()
+export const googleProvider =new firebase.auth.GoogleAuthProvider()
\ No newline at end of file
diff --git a/src/firebase.js b/src/config/firebase.js
similarity index 100%
rename from src/firebase.js
rename to src/config/firebase.js
diff --git a/src/contexts/AuthContext.js b/src/contexts/AuthContext.js
index e6089f9..e55e61b 100644
--- a/src/contexts/AuthContext.js
+++ b/src/contexts/AuthContext.js
@@ -1,5 +1,5 @@
 import React, { useContext, useState, useEffect } from 'react'
-import { auth } from '../firebase'
+import { auth } from '../config/firebase'
 
 const AuthContext = React.createContext()
 
@@ -36,6 +36,10 @@ export const AuthProvider = ({ children }) => {
         return currentUser.updatePassowrd(password)
     }
 
+    function socialMediaAuth(provider) {
+        return auth.signInWithPopup(provider).then(res => res.user).catch(e => e.message)
+    }
+
     useEffect(() => {
         const unsubscriber = auth.onAuthStateChanged(user => {
             setLoading(false)
@@ -53,7 +57,8 @@ export const AuthProvider = ({ children }) => {
         logout,
         resetPassword,
         updateEmail,
-        updatePassowrd
+        updatePassowrd,
+        socialMediaAuth
     }
     return (
         <AuthContext.Provider value={value}>

From 2b5a9f1227444e05088d9229b18e14f2357aec36 Mon Sep 17 00:00:00 2001
From: Mihon <75487015+MikhailKolomoitsev@users.noreply.github.com>
Date: Tue, 8 Mar 2022 10:25:06 +0000
Subject: [PATCH 3/3] fixes router

---
 package.json                     |  4 ++--
 src/components/App.js            | 10 +++++-----
 src/components/Dashboard.js      |  4 ++--
 src/components/ForgotPassword.js |  4 ++--
 src/components/Login.js          |  8 ++++----
 src/components/PrivateRoute.js   |  2 +-
 src/components/Signup.js         |  4 ++--
 src/components/UpdateProfile.js  |  4 ++--
 8 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/package.json b/package.json
index 3dc1074..7839f1f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "firebase-react-auth",
-  "homepage": "https://MikhailKolomoitsev.github.io/React-Firebase-Auth",
+  "name": "firebase",
+  "homepage": "https://MikhailKolomoitsev.github.io/firebase",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
diff --git a/src/components/App.js b/src/components/App.js
index 6091d09..9c63c03 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -17,11 +17,11 @@ function App() {
         <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>
diff --git a/src/components/Dashboard.js b/src/components/Dashboard.js
index fb3d515..b9f0246 100644
--- a/src/components/Dashboard.js
+++ b/src/components/Dashboard.js
@@ -13,7 +13,7 @@ const Dashboard = () => {
 
     try {
       await logout()
-      history.pushState('/login')
+      history.pushState('/React-Firebase-Auth/login')
     } catch (error) {
       setError(error.message)
     }
@@ -26,7 +26,7 @@ const Dashboard = () => {
           <h2 className='text-center mb-4'>Profile</h2>
           {error && <Alert variant='danger'>{error}</Alert>}
           <strong>Email: </strong>{currentUser ? currentUser.email : 'not loggedin'}
-          <Link to='/update-profile' className='btn btn-primary w-100 mt-3'>Update Profile</Link>
+          <Link to='/React-Firebase-Auth/update-profile' className='btn btn-primary w-100 mt-3'>Update Profile</Link>
         </Card.Body>
       </Card>
       <Card>
diff --git a/src/components/ForgotPassword.js b/src/components/ForgotPassword.js
index c02dc25..7c8ef5a 100644
--- a/src/components/ForgotPassword.js
+++ b/src/components/ForgotPassword.js
@@ -38,10 +38,10 @@ const ForgotPassword = () => {
                         </Form.Group>
                         <Button type='submit' className='w-100' disabled={loading}>Reset Password</Button>
                     </Form>
-                    <div className='w-100 text-center mt-2'><Link to='/login'>Log In</Link></div>
+                    <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='/signup'>Sign Up</Link></div>
+            <div className='w-100 text-center mt-2'>Need an account? <Link to='/React-Firebase-Auth/signup'>Sign Up</Link></div>
         </>
     )
 }
diff --git a/src/components/Login.js b/src/components/Login.js
index 6785dad..45f50f9 100644
--- a/src/components/Login.js
+++ b/src/components/Login.js
@@ -18,7 +18,7 @@ const Login = () => {
             setError('')
             setLoading(true)
             await login(emailRef.current.value, passwordRef.current.value)
-            history.push('/')
+            history.push('/React-Firebase-Auth')
         } catch (error) {
             setError(error.message)
         }
@@ -30,7 +30,7 @@ const Login = () => {
             setError('')
             setLoading(true)
             await socialMediaAuth(provider)
-            history.push('/')
+            history.push('/firebase')
         } catch (error) {
             setError(error.message)
         }
@@ -59,7 +59,7 @@ const Login = () => {
 
                         <Button type='submit' className='w-100' disabled={loading}>Log In</Button>
                     </Form>
-                    <div className='w-100 text-center mt-2 mb-2'><Link to='/forgot-password'>Forgot Password?</Link></div>
+                    <div className='w-100 text-center mt-2 mb-2'><Link to='/React-Firebase-Auth/forgot-password'>Forgot Password?</Link></div>
                     <Button
                         variant="light"
                         onClick={()=>handleSocials(facebookProvider)}
@@ -73,7 +73,7 @@ const Login = () => {
                         disabled={loading}>Log In with Google</Button>
                 </Card.Body>
             </Card>
-            <div className='w-100 text-center mt-2'>Need an account? <Link to='/signup'>Sign Up</Link></div>
+            <div className='w-100 text-center mt-2'>Need an account? <Link to='/React-Firebase-Auth/signup'>Sign Up</Link></div>
         </>
     )
 }
diff --git a/src/components/PrivateRoute.js b/src/components/PrivateRoute.js
index 33aad52..c57138b 100644
--- a/src/components/PrivateRoute.js
+++ b/src/components/PrivateRoute.js
@@ -9,7 +9,7 @@ const PrivateRoute = ({ component: Component, ...rest }) => {
         <Route
             {...rest}
             render={props => {
-               return  currentUser ? <Component {...props}/>:<Redirect to='/login'></Redirect>
+                return currentUser ? <Component {...props} /> : <Redirect to='/React-Firebase-Auth/login'></Redirect>
             }}
         ></Route>
     )
diff --git a/src/components/Signup.js b/src/components/Signup.js
index 1884dd2..3b13f28 100644
--- a/src/components/Signup.js
+++ b/src/components/Signup.js
@@ -22,7 +22,7 @@ const Signup = () => {
       setError('')
       setLoading(true)
       await signup(emailRef.current.value, passwordRef.current.value)
-      history.push('/login')
+      history.push('/React-Firebase-Auth/login')
     } catch (error) {
       setError(error.message)
     }
@@ -56,7 +56,7 @@ const Signup = () => {
           </Form>
         </Card.Body>
       </Card>
-      <div className='w-100 text-center mt-2'>Already have an account? <Link to='/login'>Log In</Link></div>
+      <div className='w-100 text-center mt-2'>Already have an account? <Link to='/React-Firebase-Auth/login'>Log In</Link></div>
     </>
   )
 }
diff --git a/src/components/UpdateProfile.js b/src/components/UpdateProfile.js
index ff92c46..8bb99ce 100644
--- a/src/components/UpdateProfile.js
+++ b/src/components/UpdateProfile.js
@@ -30,7 +30,7 @@ const UpdateProfile = () => {
             promises.push(updateEmail(passwordRef.current.value))
         }
         Promise.all(promises).then(() => {
-            history.push('/')
+            history.push('/React-Firebase-Auth')
         }).catch((e) => {
             setError(e.message)
         }).finally(() => {
@@ -65,7 +65,7 @@ const UpdateProfile = () => {
                     </Form>
                 </Card.Body>
             </Card>
-            <div className='w-100 text-center mt-2'><Link to='/login'>Cancel</Link></div>
+            <div className='w-100 text-center mt-2'><Link to='/React-Firebase-Auth/login'>Cancel</Link></div>
         </>
     )
 }