86 lines
4.1 KiB
TypeScript
86 lines
4.1 KiB
TypeScript
|
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;
|