allowing for signin

This commit is contained in:
lingdocs 2021-09-18 20:08:06 -04:00
parent 26690a7ebc
commit 7a3e972149
6 changed files with 111 additions and 5 deletions

5
.eslintrc.json Normal file
View File

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

View File

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

View File

@ -19,7 +19,16 @@ function Header({ setNavOpen }) {
{hamburger} {hamburger}
</button> </button>
</div> </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> <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> </header>
); );
} }

View File

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

View File

@ -14,8 +14,10 @@ import Link from "../../components/Link";
import words from "../../words/nouns-adjs"; import words from "../../words/nouns-adjs";
export const femColor = genderColors.f; export const femColor = genderColors.f;
export const mascColor = genderColors.m; 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"; import GameDisplay from "../../games/GameDisplay";
export const femEndingWConsonant = words.filter((w) => w.category === "consonant-fem"); 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} /> -->

86
src/pages/AccountPage.tsx Normal file
View File

@ -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;