Handle login error

package-lock.json

@@ -9391,6 +9391,11 @@
         }
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -10532,8 +10537,7 @@
     "csstype": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.3.tgz",
-      "integrity": "sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag==",
-      "dev": true
+      "integrity": "sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag=="
     },
     "cyclist": {
       "version": "1.0.1",
@@ -11435,6 +11439,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
+      "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -25040,6 +25053,27 @@
         }
       }
     },
+    "react-toastify": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-6.1.0.tgz",
+      "integrity": "sha512-Ne+wIoO9A+jZlaqGqgeuXDC/DQfqTuJdyoc7G5SsuCHsr8mNRx7W26417YKtHRH0LcnFFd5ii76tGnmm0cMlLg==",
+      "requires": {
+        "clsx": "^1.1.1",
+        "prop-types": "^15.7.2",
+        "react-transition-group": "^4.4.1"
+      }
+    },
+    "react-transition-group": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "react-use-localstorage": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/react-use-localstorage/-/react-use-localstorage-3.5.3.tgz",

package.json

@@ -35,6 +35,7 @@
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.0",
+    "react-toastify": "^6.1.0",
     "react-use-localstorage": "^3.4.1",
     "react-zoom-pan-pinch": "^1.6.1",
     "recoil": "^0.1.1",

src/App.js

@@ -9,6 +9,9 @@ import {
 
 import { RecoilRoot } from "recoil";
 import { nanoid } from "nanoid";
+import { ToastContainer } from "react-toastify";
+
+import "react-toastify/dist/ReactToastify.css";
 
 import GameListView from "./views/GameListView";
 import GameView from "./views/GameView";
@@ -42,6 +45,17 @@ function App() {
           </Switch>
         </Router>
       </RecoilRoot>
+      <ToastContainer
+        position="top-center"
+        autoClose={3000}
+        hideProgressBar={false}
+        newestOnTop
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+      />
     </Suspense>
   );
 }

src/components/Account.js

@@ -3,6 +3,8 @@ import { useTranslation } from "react-i18next";
 import Modal from "../ui/Modal";
 import { sendAuthToken } from "../utils/api";
 import useAuth from "../hooks/useAuth";
+import { toast } from "react-toastify";
+import Waiter from "../ui/Waiter";
 
 const Account = ({ disabled, ...props }) => {
   const { t } = useTranslation();
@@ -10,14 +12,23 @@ const Account = ({ disabled, ...props }) => {
   const [email, setEmail] = React.useState("");
   const [emailSent, setEmailSent] = React.useState(false);
   const [showLogin, setShowLogin] = React.useState(false);
+  const [loginInProgress, setLoginInProgress] = React.useState(false);
 
   const handleChange = (e) => {
     setEmail(e.target.value);
   };
 
-  const handleSubmit = () => {
-    sendAuthToken(email);
-    setEmailSent(true);
+  const handleSubmit = async () => {
+    try {
+      setLoginInProgress(true);
+      await sendAuthToken(email);
+      setEmailSent(true);
+      setLoginInProgress(false);
+    } catch (e) {
+      setLoginInProgress(false);
+      console.log(e);
+      toast.error(t("Error why logging, verify your email address"));
+    }
   };
 
   React.useEffect(() => {
@@ -37,6 +48,12 @@ const Account = ({ disabled, ...props }) => {
     );
   }
 
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleSubmit();
+    }
+  };
+
   return (
     <>
       <div {...props}>
@@ -46,6 +63,7 @@ const Account = ({ disabled, ...props }) => {
           <button onClick={() => setShowLogin(true)}>{t("Login")}</button>
         )}
       </div>
+      {loginInProgress && <Waiter message={t("In progress...")} />}
       <Modal show={showLogin} setShow={setShowLogin} title={t("Login")}>
         {!emailSent && (
           <>
@@ -53,6 +71,7 @@ const Account = ({ disabled, ...props }) => {
               value={email}
               onChange={handleChange}
               placeholder={t("Enter your email here")}
+              onKeyDown={handleKeyDown}
             />
             <div
               style={{

src/components/SelectedItemsPane.js

@@ -229,7 +229,7 @@ export const SelectedItems = () => {
   const onDblClick = React.useCallback(
     (e) => {
       const foundElement = insideClass(e.target, "item");
-      // We dblclick oustside of an element
+      // We dblclick outside of an element
       if (!foundElement) return;
 
       const filteredActions = availableActions.filter(

src/index.css

@@ -58,3 +58,7 @@ h5 {
 .tabs a {
   color: var(--font-color);
 }
+
+input::placeholder {
+  color: #2d2f33;
+}

src/ui/Waiter.js

@@ -9,11 +9,13 @@ const Overlay = styled.div`
   top: 0;
   left: 0;
   background-color: var(--bg-color);
-  opacity: 0.7;
+  opacity: 0.9;
   color: #606984;
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 1000;
+  font-size: 3em;
 `;
 
 const Waiter = ({ message }) => {