Implement API error handling

3 files changed, 23 insertions, 16 deletions

diff --git a/modern/src/login/LoginPage.js b/modern/src/login/LoginPage.js
index ae7b982d..5b690cdc 100644
--- a/modern/src/login/LoginPage.js
+++ b/modern/src/login/LoginPage.js
@@ -50,15 +50,19 @@ const LoginPage = () => {
 
   const handleSubmit = async (event) => {
     event.preventDefault();
-    const response = await fetch('/api/session', {
-      method: 'POST',
-      body: new URLSearchParams(`email=${encodeURIComponent(email)}&password=${encodeURIComponent(password)}`),
-    });
-    if (response.ok) {
-      const user = await response.json();
-      dispatch(sessionActions.updateUser(user));
-      history.push('/');
-    } else {
+    try {
+      const response = await fetch('/api/session', {
+        method: 'POST',
+        body: new URLSearchParams(`email=${encodeURIComponent(email)}&password=${encodeURIComponent(password)}`),
+      });
+      if (response.ok) {
+        const user = await response.json();
+        dispatch(sessionActions.updateUser(user));
+        history.push('/');
+      } else {
+        throw Error(await response.text());
+      }
+    } catch (error) {
       setFailed(true);
       setPassword('');
     }
@@ -153,7 +157,6 @@ const LoginPage = () => {
           </Grid>
         )}
         <Snackbar
-          anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
           open={!!announcement && !announcementShown}
           message={announcement}
           action={(
diff --git a/modern/src/login/RegisterPage.js b/modern/src/login/RegisterPage.js
index cd6fc381..78728b58 100644
--- a/modern/src/login/RegisterPage.js
+++ b/modern/src/login/RegisterPage.js
@@ -7,6 +7,7 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import LoginLayout from './LoginLayout';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import { snackBarDurationShortMs } from '../common/util/duration';
+import { useCatch } from '../reactHelper';
 
 const useStyles = makeStyles((theme) => ({
   title: {
@@ -33,7 +34,7 @@ const RegisterPage = () => {
   const [password, setPassword] = useState('');
   const [snackbarOpen, setSnackbarOpen] = useState(false);
 
-  const handleSubmit = async () => {
+  const handleSubmit = useCatch(async () => {
     const response = await fetch('/api/users', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -41,13 +42,14 @@ const RegisterPage = () => {
     });
     if (response.ok) {
       setSnackbarOpen(true);
+    } else {
+      throw Error(await response.text());
     }
-  };
+  });
 
   return (
     <LoginLayout>
       <Snackbar
-        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
         open={snackbarOpen}
         onClose={() => history.push('/login')}
         autoHideDuration={snackBarDurationShortMs}
diff --git a/modern/src/login/ResetPasswordPage.js b/modern/src/login/ResetPasswordPage.js
index 6f7e784f..93e154e3 100644
--- a/modern/src/login/ResetPasswordPage.js
+++ b/modern/src/login/ResetPasswordPage.js
@@ -8,6 +8,7 @@ import LoginLayout from './LoginLayout';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import useQuery from '../common/util/useQuery';
 import { snackBarDurationShortMs } from '../common/util/duration';
+import { useCatch } from '../reactHelper';
 
 const useStyles = makeStyles((theme) => ({
   title: {
@@ -36,7 +37,7 @@ const ResetPasswordPage = () => {
   const [password, setPassword] = useState('');
   const [snackbarOpen, setSnackbarOpen] = useState(false);
 
-  const handleSubmit = async (event) => {
+  const handleSubmit = useCatch(async (event) => {
     event.preventDefault();
     let response;
     if (!token) {
@@ -52,13 +53,14 @@ const ResetPasswordPage = () => {
     }
     if (response.ok) {
       setSnackbarOpen(true);
+    } else {
+      throw Error(await response.text());
     }
-  };
+  });
 
   return (
     <LoginLayout>
       <Snackbar
-        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
         open={snackbarOpen}
         onClose={() => history.push('/login')}
         autoHideDuration={snackBarDurationShortMs}