Add snackbar notifications during signup workflow (#1514)

asreview · Aug 28, 2023 · 06ae132 · 06ae132
1 parent bd81f7f
commit 06ae132
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 9 deletions.
diff --git a/asreview/webapp/src/App.js b/asreview/webapp/src/App.js
@@ -5,6 +5,8 @@ import { Routes, Route } from "react-router-dom";
 import "typeface-roboto";
 import { Box, CssBaseline, createTheme, useMediaQuery } from "@mui/material";
 import CircularProgress from "@mui/material/CircularProgress";
+import MuiAlert from "@mui/material/Alert";
+import Snackbar from "@mui/material/Snackbar";
 import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles";
 import "./App.css";
 
@@ -41,6 +43,11 @@ if (currentDomain.includes("127.0.0.1")) {
   window.location.replace(newDomain);
 }
 
+// Snackbar Notification Alert
+const Alert = React.forwardRef(function Alert(props, ref) {
+  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
+});
+
 const queryClient = new QueryClient();
 
 const App = (props) => {
@@ -49,10 +56,24 @@ const App = (props) => {
   const dispatch = useDispatch();
   const authentication = useSelector((state) => state.authentication);
   const allowAccountCreation = useSelector(
-    (state) => state.allow_account_creation,
+    (state) => state.allow_account_creation
   );
   const emailVerification = useSelector((state) => state.email_verification);
 
+  // Snackbar Notification (taking care of self closing
+  // notifications visible on the lower left side)
+  const [notification, setNotification] = React.useState({
+    open: false,
+    message: "",
+    severity: "success",
+  });
+  const showNotification = (message, severity = "success") => {
+    setNotification({ open: true, message: message, severity: severity });
+  };
+  const handleCloseNotification = () => {
+    setNotification((data) => ({ ...data, open: false }));
+  };
+
   // Dialog state
   const [onSettings, toggleSettings] = useToggle();
   const [onProjectSetup, toggleProjectSetup] = useToggle();
@@ -113,7 +134,12 @@ const App = (props) => {
         {allowAccountCreation && (
           <Route
             path="/signup"
-            element={<SignUpForm mobileScreen={mobileScreen} />}
+            element={
+              <SignUpForm
+                mobileScreen={mobileScreen}
+                showNotification={emailVerification && showNotification}
+              />
+            }
           />
         )}
         <Route
@@ -126,7 +152,12 @@ const App = (props) => {
         />
         <Route
           path="/forgot_password"
-          element={<ForgotPassword mobileScreen={mobileScreen} />}
+          element={
+            <ForgotPassword
+              mobileScreen={mobileScreen}
+              showNotification={showNotification}
+            />
+          }
         />
         <Route path="/confirm_account" element={<ConfirmAccount />} />
         <Route
@@ -222,6 +253,21 @@ const App = (props) => {
             )}
           </div>
 
+          {/* Notifications */}
+          <Snackbar
+            open={notification.open}
+            autoHideDuration={6000}
+            onClose={handleCloseNotification}
+          >
+            <Alert
+              onClose={handleCloseNotification}
+              severity={notification.severity}
+              sx={{ width: "100%" }}
+            >
+              {notification.message}
+            </Alert>
+          </Snackbar>
+
           {/* Dialogs */}
           <SettingsDialog
             mobileScreen={mobileScreen}

diff --git a/asreview/webapp/src/Components/ForgotPassword.js b/asreview/webapp/src/Components/ForgotPassword.js
@@ -62,10 +62,9 @@ const Root = styled("div")(({ theme }) => ({
   },
 }));
 
-const ForgotPassword = () => {
+const ForgotPassword = (props) => {
   const emailConfig = useSelector((state) => state.email_config) || false;
   const [email, setEmail] = React.useState("");
-  const [successMessage, setSuccessMessage] = React.useState(false);
   const queryClient = useQueryClient();
   const navigate = useNavigate();
 
@@ -77,13 +76,13 @@ const ForgotPassword = () => {
         queryClient.resetQueries("refresh");
       },
       onSuccess: (data) => {
+        props.showNotification(`An email has beent sent to ${email}.`);
         setEmail("");
-        setSuccessMessage(data.message);
       },
       onError: (data) => {
         console.error("Forgot password error", data);
       },
-    },
+    }
   );
 
   const handleSubmit = (event) => {
@@ -138,7 +137,6 @@ const ForgotPassword = () => {
                       />
                     </Stack>
                     {isError && <InlineErrorHandler message={error.message} />}
-                    {successMessage && <p>{successMessage}</p>}
 
                     <Stack className={classes.button} direction="row">
                       <LoadingButton

diff --git a/asreview/webapp/src/Components/SignUpForm.js b/asreview/webapp/src/Components/SignUpForm.js
@@ -73,7 +73,7 @@ const SignupSchema = Yup.object().shape({
   password: Yup.string()
     .matches(
       /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&#])[A-Za-z\d@$!%*?&#]{8,}$/,
-      "Use 8 or more characters with a mix of letters, numbers & symbols",
+      "Use 8 or more characters with a mix of letters, numbers & symbols"
     )
     .required("Password is required"),
   confirmPassword: Yup.string()
@@ -109,7 +109,13 @@ const SignUpForm = (props) => {
 
   const { error, isError, mutate } = useMutation(BaseAPI.signup, {
     onSuccess: () => {
+      let email = formik.values.email;
       formik.setValues(initialValues, false);
+      if (typeof props.showNotification === "function") {
+        props.showNotification(
+          `A confirmation email has been sent to ${email}.`
+        );
+      }
       navigate("/signin");
     },
   });