From d5f2aa492ad5765627cc74a9d88ca9db2d6a1ea5 Mon Sep 17 00:00:00 2001 From: adueck Date: Tue, 2 Apr 2024 19:10:12 +0300 Subject: [PATCH] account delete link --- account/views/delete-account.ejs | 3 +- website/src/screens/Account.tsx | 482 ++++++++++++++++++------------- 2 files changed, 279 insertions(+), 206 deletions(-) diff --git a/account/views/delete-account.ejs b/account/views/delete-account.ejs index 2baf7bd..8302cc8 100644 --- a/account/views/delete-account.ejs +++ b/account/views/delete-account.ejs @@ -12,9 +12,8 @@ -
+

How to Delete your LingDocs Account

-

Profile

To delete your account for the LingDocs Pashto Dictionary and LingDocs Pashto Grammar:

  • Go to https://account.lingdocs.com/user
    • diff --git a/website/src/screens/Account.tsx b/website/src/screens/Account.tsx index 991659a..4b1f060 100644 --- a/website/src/screens/Account.tsx +++ b/website/src/screens/Account.tsx @@ -1,226 +1,300 @@ -import { - useState, - useEffect, -} from "react"; +import { useState, useEffect } from "react"; import { Modal, Button } from "react-bootstrap"; import { - upgradeAccount, - signOut, - publishDictionary, + upgradeAccount, + signOut, + publishDictionary, } from "../lib/backend-calls"; import LoadingElipses from "../components/LoadingElipses"; import { Helmet } from "react-helmet"; import * as AT from "../types/account-types"; import UpgradePrices from "../components/UpgradePrices"; -const providers: ("google" | "twitter" | "github")[] = ["google", "twitter", "github"]; +const providers: ("google" | "twitter" | "github")[] = [ + "google", + "twitter", + "github", +]; const capitalize = (s: string): string => { - // if (!s) return ""; - return s.charAt(0).toUpperCase() + s.slice(1); -} + // if (!s) return ""; + return s.charAt(0).toUpperCase() + s.slice(1); +}; let popupRef: Window | null = null; -const Account = ({ user, loadUser }: { user: AT.LingdocsUser | undefined, loadUser: () => void }) => { - const [showingUpgradePrompt, setShowingUpgradePrompt] = useState(false); - const [upgradePassword, setUpgradePassword] = useState(""); - const [upgradeError, setUpgradeError] = useState(""); - const [waiting, setWaiting] = useState(false); - const [publishingStatus, setPublishingStatus] = useState(undefined); - useEffect(() => { - setShowingUpgradePrompt(false); - setUpgradeError(""); +const Account = ({ + user, + loadUser, +}: { + user: AT.LingdocsUser | undefined; + loadUser: () => void; +}) => { + const [showingUpgradePrompt, setShowingUpgradePrompt] = + useState(false); + const [upgradePassword, setUpgradePassword] = useState(""); + const [upgradeError, setUpgradeError] = useState(""); + const [waiting, setWaiting] = useState(false); + const [publishingStatus, setPublishingStatus] = useState< + undefined | "publishing" | any + >(undefined); + useEffect(() => { + setShowingUpgradePrompt(false); + setUpgradeError(""); + setWaiting(false); + window.addEventListener("message", handleIncomingMessage); + return () => { + window.removeEventListener("message", handleIncomingMessage); + }; + // eslint-disable-next-line + }, []); + // TODO put the account url in an imported constant + function handleIncomingMessage(event: MessageEvent) { + if ( + event.origin === "https://account.lingdocs.com" && + event.data === "signed in" && + popupRef + ) { + loadUser(); + popupRef.close(); + } + } + async function handleSignOut() { + await signOut(); + loadUser(); + } + function closeUpgrade() { + setShowingUpgradePrompt(false); + setUpgradePassword(""); + setUpgradeError(""); + } + async function handleUpgrade() { + setUpgradeError(""); + setWaiting(true); + upgradeAccount(upgradePassword) + .then((res) => { setWaiting(false); - window.addEventListener("message", handleIncomingMessage); - return () => { - window.removeEventListener("message", handleIncomingMessage); - }; - // eslint-disable-next-line - }, []); - // TODO put the account url in an imported constant - function handleIncomingMessage(event: MessageEvent) { - if ( - event.origin === "https://account.lingdocs.com" - && (event.data === "signed in") - && popupRef - ) { - loadUser(); - popupRef.close(); + if (res.ok) { + loadUser(); + closeUpgrade(); + } else { + setUpgradeError("Incorrect password"); } - } - async function handleSignOut() { - await signOut(); - loadUser(); - } - function closeUpgrade() { - setShowingUpgradePrompt(false); - setUpgradePassword(""); - setUpgradeError(""); - } - async function handleUpgrade() { - setUpgradeError(""); - setWaiting(true); - upgradeAccount(upgradePassword).then((res) => { - setWaiting(false); - if (res.ok) { - loadUser(); - closeUpgrade(); - } else { - setUpgradeError("Incorrect password"); - } - }).catch((err) => { - setWaiting(false); - setUpgradeError(err.message); - }); - } - function handleOpenSignup() { - popupRef = window.open("https://account.lingdocs.com", "account", "height=800,width=500,top=50,left=400"); - } - function handlePublish() { - setPublishingStatus("publishing"); - publishDictionary().then((response) => { - setPublishingStatus(response); - }).catch((err) => { - console.error(err); - setPublishingStatus("Offline or connection error"); - }); - } - if (!user) { - return
    - - - - Sign In - LingDocs Pashto Dictionary - -

    Sign in to LingDocs

    -

    When you sign in or make a LingDocs account you can:

    -
    contribute by suggesting corrections and new words
    -
    upgrade your account and start collecting a personal wordlist
    - -
    - } + }) + .catch((err) => { + setWaiting(false); + setUpgradeError(err.message); + }); + } + function handleOpenSignup() { + popupRef = window.open( + "https://account.lingdocs.com", + "account", + "height=800,width=500,top=50,left=400" + ); + } + function handlePublish() { + setPublishingStatus("publishing"); + publishDictionary() + .then((response) => { + setPublishingStatus(response); + }) + .catch((err) => { + console.error(err); + setPublishingStatus("Offline or connection error"); + }); + } + if (!user) { return ( -
    - - - - Account - LingDocs Pashto Dictionary - -

    Account

    - {user.level === "editor" && -
    -

    Editor Tools

    - {publishingStatus !== "publishing" && - - } - {publishingStatus && - <> -
    Publishing response:
    - 
    
-                                {publishingStatus === "publishing" ?
-                                    "processing..."
-                                :
-                                    JSON.stringify(publishingStatus, null, "\t")
-                                }
-
    - - } -
    - } -
    - {/* {user.p &&
    +
    + + + + Sign In - LingDocs Pashto Dictionary + +

    Sign in to LingDocs

    +

    + When you sign in or make a LingDocs account you can: +

    +
    + contribute by suggesting corrections + and new words +
    +
    + upgrade your account and start + collecting a personal wordlist +
    + +
    + ); + } + return ( +
    + + + + Account - LingDocs Pashto Dictionary + +

    Account

    + {user.level === "editor" && ( +
    +

    Editor Tools

    + {publishingStatus !== "publishing" && ( + + )} + {publishingStatus && ( + <> +
    Publishing response:
    + 
    +                
+                  {publishingStatus === "publishing"
+                    ? "processing..."
+                    : JSON.stringify(publishingStatus, null, "\t")}
+                
+
    + + )} +
    + )} +
    + {/* {user.p &&
    avatar
    } */} -
    -
      -
    • Name: {user.name}
      • - {user.email &&
    • -
      -
      -
      Email: {user.email}
      -
      -
      -
      • } -
    • Account Level: {capitalize(user.level)}
      • -
    • Signs in with: - {(user.password && user.email) && - Password - } - {providers.map((provider) => ( - - {user[provider] && } - - ))} -
      • -
    +
    +
      +
    • Name: {user.name}
      • + {user.email && ( +
    • +
      +
      +
      Email: {user.email}
      +
      -
    -

    Account Admin

    -
    - {user.level === "basic" &&
    - -
    } - -
    - -
    -
    - - - Upgrade to Student Account - - -

    Upgrade to a student account to enable the wordlist

    -

    Features:

    -
      -
    • Save your wordlist and sync across devices
      • -
    • Save text, audio, or visual context for words
      • -
    • Review words with Anki-style spaced repetition
      • -
    - -     -
    - - setUpgradePassword(e.target.value)} - /> -
    - {upgradeError &&
    -

    - {upgradeError} -

    -
    } - - {waiting && } - - - -     + + )} +
  • + Account Level: {capitalize(user.level)} +
    • +
  • + Signs in with: + {user.password && user.email && ( + + {" "} + Password + + )} + {providers.map((provider) => ( + + {user[provider] && ( + + )} + + ))} +
    • +
- ); +
+

Account Admin

+
+ {user.level === "basic" && ( +
+ +
+ )} + +
+ +
+
+ + + + Upgrade to Student Account + + +

+ Upgrade to a student account to enable the wordlist +

+

Features:

+
    +
  • Save your wordlist and sync across devices
    • +
  • Save text, audio, or visual context for words
    • +
  • Review words with Anki-style spaced repetition
    • +
+ + +
+ + setUpgradePassword(e.target.value)} + /> +
+ {upgradeError && ( +
+

+ {upgradeError} +

+
+ )} + + {waiting && } + + + + + + ); }; -export default Account; \ No newline at end of file +export default Account;