added firebase auth

Author: glend1

components/addquote.js

@@ -0,0 +1,30 @@
+import { useState } from "react"
+import { getToken } from "../util/client.firebase-auth"
+
+export const AddQuote = ({ user }) => {
+    const [quote, setQuote] = useState("")
+    const [author, setAuthor] = useState("")
+    return <form className='p-12 bg-pink-50 border border-blue-700 rounded-full text-blue-700 inline-flex flex-col items-end' onSubmit={async (e) => {
+        e.preventDefault()
+        const token = await getToken(user)
+        const fetch = await window.fetch('api/add', {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ author, quote, token })
+        });
+        const content = await fetch.json();
+    }}>
+        <div>
+            <label htmlFor='quote'>Quote</label>
+            <textarea value={quote} onChange={e => setQuote(e.target.value)} id="quote" className="h-32 ml-2" />
+        </div>
+        <div>
+            <label htmlFor='author'>Author</label>
+            <input value={author} className='my-2 ml-2' onChange={e => setAuthor(e.target.value)} id="author" type='text' />
+        </div>
+        <button type='submit'>Add Quote</button>
+    </form>
+}

components/connection.js

@@ -0,0 +1,3 @@
+export const Connection = ({ isConnected }) => {
+    return <>{!isConnected && <h2>You are NOT connected to MongoDB</h2>}</>
+}

components/login.js

@@ -0,0 +1,31 @@
+import { signIn } from '../util/client.firebase-auth'
+import { useState } from 'react'
+
+export const Login = () => {
+    const [email, setEmail] = useState("")
+    const [password, setPassword] = useState("")
+    const [message, setMessage] = useState("")
+    return <>
+        <form className='p-7 bg-pink-50 border border-blue-700 rounded-full text-blue-700 inline-flex flex-col items-end' onSubmit={async (e) => {
+            e.preventDefault()
+            const response = await signIn(email, password)
+            if (response.email) {
+                setMessage(`Logged in as ${response.email}`)
+            } else {
+                setMessage(response)
+            }
+        }}>
+            <div className='inline-block'>
+                <label htmlFor='email' >E-mail</label>
+                <input className='my-2 ml-2' value={email} onChange={e => setEmail(e.target.value)} id="email" type="email"></input>
+            </div>
+            <div className='inline-block'>
+                <label htmlFor='password' >Password</label>
+                <input className='my-2 ml-2' value={password} onChange={e => setPassword(e.target.value)} id="password" type="password"></input>
+            </div>
+            <button type='submit'>Login</button>
+            {message && <div className='not-italic font-bold'><em>{message}</em></div>}
+        </form>
+
+    </>
+}

components/loginform.js

@@ -0,0 +1,9 @@
+import { Login } from './login'
+import { Logout } from './logout'
+
+export const LoginForm = ({ user }) => {
+    return <>
+        {!user && <Login />}
+        {user && <Logout />}
+    </>
+}   

components/logout.js

@@ -0,0 +1,7 @@
+import { signOut } from "../util/client.firebase-auth"
+
+export const Logout = () => {
+    return <button className="bg-purple-300 rounded-full m-4 p-4" onClick={async () => {
+        await signOut()
+    }}>Logout</button>
+}

components/navigation.js

@@ -2,19 +2,19 @@ import styles from '../styles/navigation.module.scss'
 import Link from 'next/link'
 
 const registerUser = event => {
-    event.preventDefault()
+  event.preventDefault()
 }
 
 export default function Search() {
-//export default function Search({updateSearch}) {
-    return (
-        <nav id={styles.navigation}>
-          <ul>
-          <Link href="/"><a><li>Home</li></a></Link>
-          <Link href="/authors"><a><li>Authors</li></a></Link>
-          <Link href="/random"><a><li>Random</li></a></Link>
-          <Link href="/add"><a><li>Add</li></a></Link>
-          <li><form onSubmit={registerUser}>
+  //export default function Search({updateSearch}) {
+  return (
+    <nav id={styles.navigation}>
+      <ul>
+        <Link href="/"><a><li>Home</li></a></Link>
+        <Link href="/authors"><a><li>Authors</li></a></Link>
+        <Link href="/random"><a><li>Random</li></a></Link>
+        <Link href="/add"><a><li>Add</li></a></Link>
+        {/* <li><form onSubmit={registerUser}>
             <label htmlFor="name">Name</label>
             <input id="name" type="text" onChange={function(event) {
               updateSearch(event.target.value)
@@ -25,8 +25,8 @@ export default function Search() {
               <option value="author">Author</option>
             </select>
             <button type="submit">Search</button>
-          </form></li>
-          </ul>
-        </nav>
-      )
+          </form></li> */}
+      </ul>
+    </nav>
+  )
 }