added oauths

jasbindar-singh · May 20, 2020 · 4026521 · 4026521
1 parent 63a0dee
commit 4026521
Show file tree

Hide file tree

Showing 6 changed files with 243 additions and 73 deletions.
diff --git a/src/Login/FacebookLogin.jsx b/src/Login/FacebookLogin.jsx
@@ -1,11 +1,36 @@
-import React from 'react';
+import React, {useState} from 'react';
 import { Icon } from '@iconify/react';
 import bxlFacebookSquare from '@iconify/icons-bx/bxl-facebook-square';
+import firebase, { auth } from '../configs/firebase'
+import Loader from '../Loader/Loader';
 
 function FacebookLogin() {
+
+    const [isLoading, setIsLoading] = useState(false)
+
+    async function handleLogin(){
+        setIsLoading(true)
+
+        var provider = new firebase.auth.FacebookAuthProvider();
+
+        await auth.signInWithRedirect(provider).catch(err => alert(err.message));
+
+        await auth.getRedirectResult().then(function(result) {
+            // var user = result.user;
+            setIsLoading(false)
+          }).catch(function(error) {
+            setIsLoading(false)
+            alert(error.message)
+          });
+    }
+
     return (
-        <div className="w-full px-8 py-2 rounded text-white flex my-8 cursor-pointer" style={{backgroundColor: "#3b5998"}}>
-            <div className="mr-4"><Icon icon={bxlFacebookSquare} style={{color: '#fff', fontSize: '25px'}} /></div>
+        <div className="w-full px-8 py-2 rounded text-white flex my-8 cursor-pointer" style={{backgroundColor: "#3b5998"}} onClick={handleLogin}>
+            <div className="mr-4">
+                {
+                    isLoading ? <Loader size="25"/> : <Icon icon={bxlFacebookSquare} style={{color: '#fff', fontSize: '25px'}} />
+                }
+            </div>
             <p>Facebook</p>
         </div>
     )

diff --git a/src/Login/GithubLogin.jsx b/src/Login/GithubLogin.jsx
@@ -1,11 +1,36 @@
-import React from 'react';
+import React, {useState} from 'react';
 import { Icon } from '@iconify/react';
 import bxlGithub from '@iconify/icons-bx/bxl-github';
+import firebase, { auth } from '../configs/firebase'
+import Loader from '../Loader/Loader';
 
 function GithubLogin() {
+
+    const [isLoading, setIsLoading] = useState(false)
+
+    async function handleLogin(){
+        setIsLoading(true)
+
+        var provider = new firebase.auth.GithubAuthProvider();
+
+        await auth.signInWithRedirect(provider).catch(err => alert(err.message));
+
+        await auth.getRedirectResult().then(function(result) {
+            // var user = result.user;
+            setIsLoading(false)
+          }).catch(function(error) {
+            setIsLoading(false)
+            alert(error.message)
+          });
+    }
+
     return (
-        <div className="w-full px-8 py-2 rounded text-white flex my-8 cursor-pointer" style={{backgroundColor: "#211F1F"}}>
-            <div className="mr-4"><Icon icon={bxlGithub} style={{color: '#fff', fontSize: '25px'}} /></div>
+        <div className="w-full px-8 py-2 rounded text-white flex my-8 cursor-pointer" style={{backgroundColor: "#211F1F"}} onClick={handleLogin}>
+            <div className="mr-4">
+                {
+                    isLoading ? <Loader size="25"/> : <Icon icon={bxlGithub} style={{color: '#fff', fontSize: '25px'}} />
+                }
+            </div>
             <p>Github</p>
         </div>
     )

diff --git a/src/Login/GoogleLogin.jsx b/src/Login/GoogleLogin.jsx
@@ -4,7 +4,7 @@ import bxlGoogle from '@iconify/icons-bx/bxl-google';
 import firebase, { auth } from '../configs/firebase'
 import Loader from '../Loader/Loader';
 
-function GoogleLogin(props) {
+function GoogleLogin() {
 
     const [isLoading, setIsLoading] = useState(false)
 

diff --git a/src/Login/Login.jsx b/src/Login/Login.jsx
@@ -1,9 +1,9 @@
 import React, {useContext} from 'react'
-import AppleLogin from './AppleLogin'
+// import AppleLogin from './AppleLogin'
 import GithubLogin from './GithubLogin'
 import GoogleLogin from './GoogleLogin'
 import FacebookLogin from './FacebookLogin'
-import TwitterLogin from './TwitterLogin'
+// import TwitterLogin from './TwitterLogin'
 import AnonymousLogin from './AnonymousLogin'
 import { AuthContext } from '../App'
 import { Redirect } from 'react-router-dom'
@@ -22,12 +22,10 @@ function Login() {
             <div className="bg-cgray-light px-16 py-8 login">
                 <p className="text-white text-4xl mb-2">Login</p>
                 <div className="h-1 bg-white"></div>
-                <div className="my-12 font-medium">                                                                                                          
-                    <AppleLogin/>
-                    <GithubLogin/>
+                <div className="my-12 font-medium">
                     <GoogleLogin/>
                     <FacebookLogin/>
-                    <TwitterLogin/>
+                    <GithubLogin/>
                     <AnonymousLogin/>                            
                 </div>
             </div>

diff --git a/src/Modal/ModalAdd.jsx b/src/Modal/ModalAdd.jsx
@@ -66,6 +66,7 @@ function ModalAdd({isOpen, toggle}) {
                 setIsLoading(false)
                 toggle()
                 addNote(note)
+                setNoteTitle("")
             })
             .catch(err => err.message)
         }
@@ -86,6 +87,7 @@ function ModalAdd({isOpen, toggle}) {
                     placeholder={isAnonymous ? "Login to add more notes." : "Enter your note title..."}
                     onChange={handleChange}
                     disabled={isAnonymous}
+                    value={noteTitle}
                 ></textarea>
                 {
                     error.hasError ? <p className="mx-4 text-sm tracking-wide text-red-600">{error.message}</p> : null