allowing for signin

.eslintrc.json

@@ -0,0 +1,5 @@
+{
+    "rules": {
+        "jsx-a11y/accessible-emoji": "off"
+    }
+}

src/App.tsx

@@ -16,6 +16,7 @@ import { content } from "./content/index";
 import Sidebar from "./components/Sidebar";
 import Header from "./components/Header";
 import TableOfContentsPage from "./pages/TableOfContentsPage";
+import AccountPage from "./pages/AccountPage";
 import { useEffect } from "react";
 
 import ReactGA from "react-ga";
@@ -65,6 +66,9 @@ function App(props: RouteComponentProps) {
                 <Chapter>{chapter}</Chapter>
               </Route>
             ))}
+            <Route path="/account" exact>
+              <AccountPage />
+            </Route>
             <Route component={Page404} />
           </Switch>
         </div>

src/components/Header.js

@@ -19,7 +19,16 @@ function Header({ setNavOpen }) {
                     {hamburger}
                 </button>
             </div>
+            <div className="d-flex flex-row justify-content-between align-items-center" style={{ width: "100%" }}>
+                <div>
                     <h4 className="header-title link-unstyled mt-2"><Link to="/">Pashto Grammar</Link></h4>
+                </div>
+                <div className="mr-3 link-unstyled">
+                    <Link to="/account">
+                        <i className="fas fa-user fa-lg clickable"></i>
+                    </Link>
+                </div>
+            </div>
         </header>
     );
 }

src/components/Table.js

@@ -26,7 +26,7 @@ function Table({ headRow, children, opts, wide }) {
                             {row.map((cell, j) => (
                                 <td key={`row ${i}, cell ${j}`} style={(cell && cell.gender) ? { backgroundColor: cell.gender === "m" ? mascColor : femColor } : {}}>
                                     {isObject(cell)
-                                        ? (console.log(cell), <Examples opts={opts}>{[cell]}</Examples>)
+                                        ? <Examples opts={opts}>{[cell]}</Examples>
                                         : cell
                                     }
                                 </td>

src/content/nouns/nouns-gender.mdx

@@ -14,8 +14,10 @@ import Link from "../../components/Link";
 import words from "../../words/nouns-adjs";
 export const femColor = genderColors.f;
 export const mascColor = genderColors.m;
-import nounGenderGame1 from "../../games/games";
+import {
-import nounGenderGame2 from "../../games/games";
+    nounGenderGame1,
+    nounGenderGame2,
+} from "../../games/games";
 import GameDisplay from "../../games/GameDisplay";
 
 export const femEndingWConsonant = words.filter((w) => w.category === "consonant-fem");
@@ -166,4 +168,4 @@ Some words are used to describe people who obviously have a gender and they *tot
     },
 ]} />
 
-<GameDisplay record={nounGenderGame2} />
+<!-- <GameDisplay record={nounGenderGame2} /> -->

src/pages/AccountPage.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect } from "react";
+import { useUser } from "../user-context";
+import { signOut } from "@lingdocs/lingdocs-main";
+const providers: ("google" | "twitter" | "github")[] = ["google", "twitter", "github"];
+
+let popupRef: Window | null = null;
+
+function AccountPage() {
+    const { user, pullUser } = useUser();
+    useEffect(() => {
+        window.addEventListener("message", handleIncomingMessage);
+        return () => {
+            window.removeEventListener("message", handleIncomingMessage);
+        };
+        // eslint-disable-next-line
+    }, []);
+    function handleOpenSignup() {
+        popupRef = window.open("https://account.lingdocs.com", "account", "height=800,width=500,top=50,left=400");
+    }
+    async function handleSignOut() {
+        await signOut();
+        pullUser();
+    }
+    function handleIncomingMessage(event: MessageEvent<any>) {
+        if (event.origin === "https://account.lingdocs.com" && event.data === "signed in" && popupRef) {
+            pullUser();
+            popupRef.close();
+        }
+    }
+    return <main className="col bg-faded py-3 d-flex flex-column">
+        <div className="flex-shrink-0">
+            {!user ? 
+                <div className="text-center mt-3">
+                    <h2 className="my-4">Sign in to LingDocs</h2>
+                    <p className="lead mb-4">When you sign in or make a LingDocs account you can:</p>
+                    <div className="mb-3"><i className="fas fa-graduation-cap mr-2" /> Save your progress on quizzes (<span role="img" aria-label="">🚧</span> not working yet <span role="img" aria-label="">👷‍♂️</span>)</div>
+                    <button className="btn btn-lg btn-primary my-4" onClick={handleOpenSignup}><i className="fas fa-sign-in-alt mr-2" /> Sign In</button>
+                </div>
+            :
+            <div style={{ maxWidth: "650px"}}>
+                <h3 className="mt-2 mb-4">Account</h3>
+                <div className="card mb-4">
+                    <ul className="list-group list-group-flush">
+                        <li className="list-group-item">Name: {user.name}</li>
+                        {user.email && <li className="list-group-item">
+                            <div className="d-flex justify-content-between align-items-center">
+                                <div>
+                                    <div>Email: {user.email}</div>
+                                </div>
+                            </div>
+                        </li>}
+                        <li className="list-group-item">Account Level: {user.level} {user.upgradeToStudentRequest === "waiting"
+                            ? "(Upgrade Requested)"
+                            : ""}</li>
+                        <li className="list-group-item">Signs in with: 
+                            {(user.password && user.email) && <span>
+                                <i className="fas fa-key ml-2"></i> <span className="small mr-1">Password</span>
+                            </span>}
+                            {providers.map((provider) => (
+                                <span key={provider}>
+                                    {user[provider] && <i className={`fab fa-${provider} mx-1`}></i>}
+                                </span>
+                            ))}
+                        </li>
+                    </ul>
+                </div>
+                <h4 className="mb-3">Account Admin</h4>
+                <div className="row mb-4">
+                    <div className="col-sm mb-3">
+                        <a className="btn btn-outline-secondary" href="https://account.lingdocs.com/user">
+                            <i className="fas fa-user mr-2"></i> Edit Account
+                        </a>
+                    </div>
+                    <div className="col-sm mb-3">
+                        <button className="btn btn-outline-secondary" onClick={handleSignOut}>
+                            <i className="fas fa-sign-out-alt mr-2"></i> Sign Out
+                        </button>
+                    </div>
+                </div>
+            </div>
+        }
+        </div>
+    </main>;
+}
+
+export default AccountPage;