Add announcement snackbar

6 files changed, 29 insertions, 9 deletions

diff --git a/modern/src/RegisterDialog.js b/modern/src/RegisterDialog.js
index 66b1c658..d0dd707f 100644
--- a/modern/src/RegisterDialog.js
+++ b/modern/src/RegisterDialog.js
@@ -7,6 +7,7 @@ import DialogContentText from '@material-ui/core/DialogContentText';
 import TextField from '@material-ui/core/TextField';
 import Snackbar from '@material-ui/core/Snackbar';
 import { useTranslation } from './LocalizationProvider';
+import { snackBarDurationShortMs } from './common/duration';
 
 const RegisterDialog = ({ showDialog, onResult }) => {
   const t = useTranslation();
@@ -36,7 +37,7 @@ const RegisterDialog = ({ showDialog, onResult }) => {
       <Snackbar
         anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
         open={snackbarOpen}
-        autoHideDuration={6000}
+        autoHideDuration={snackBarDurationShortMs}
         onClose={() => { onResult(true); }}
         message={t('loginCreated')}
       />
diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js
index cb16bf89..28ca29ab 100644
--- a/modern/src/SocketController.js
+++ b/modern/src/SocketController.js
@@ -7,6 +7,7 @@ import { positionsActions, devicesActions, sessionActions } from './store';
 import { useEffectAsync } from './reactHelper';
 import { useTranslation } from './LocalizationProvider';
 import { prefixString } from './common/stringUtils';
+import { snackBarDurationLongMs } from './common/duration';
 
 const SocketController = () => {
   const dispatch = useDispatch();
@@ -93,7 +94,7 @@ const SocketController = () => {
           }}
           open={notification.show}
           message={notification.message}
-          autoHideDuration={5000}
+          autoHideDuration={snackBarDurationLongMs}
           onClose={() => setEvents(events.filter((e) => e.id !== notification.id))}
         />
       ))}
diff --git a/modern/src/common/duration.js b/modern/src/common/duration.js
new file mode 100644
index 00000000..72643c5b
--- /dev/null
+++ b/modern/src/common/duration.js
@@ -0,0 +1,2 @@
+export const snackBarDurationShortMs = 1500
+export const snackBarDurationLongMs = 2750
diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js
index bbb5d5fb..d43d19a8 100644
--- a/modern/src/components/registration/LoginForm.js
+++ b/modern/src/components/registration/LoginForm.js
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import {
-  Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link,
+  Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link, Snackbar, IconButton,
 } from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
 import { useTheme } from '@material-ui/core/styles';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
@@ -38,6 +39,9 @@ const LoginForm = () => {
   const registrationEnabled = useSelector((state) => (state.session.server ? state.session.server.registration : false));
   const emailEnabled = useSelector((state) => (state.session.server ? state.session.server.emailEnabled : false));
 
+  const [announcementShown, setAnnouncementShown] = useState(false);
+  const announcement = useSelector((state) => (state.session.server && state.session.server.announcement));
+
   const handleSubmit = async (event) => {
     event.preventDefault();
     const response = await fetch('/api/session', {
@@ -131,12 +135,22 @@ const LoginForm = () => {
           </Grid>
         </Grid>
         {emailEnabled && (
-        <Grid item container justify="flex-end">
-          <Grid item>
-            <Link onClick={() => history.push('/reset-password')} className={classes.resetPassword} underline="none">{t('loginReset')}</Link>
+          <Grid item container justify="flex-end">
+            <Grid item>
+              <Link onClick={() => history.push('/reset-password')} className={classes.resetPassword} underline="none">{t('loginReset')}</Link>
+            </Grid>
           </Grid>
-        </Grid>
         )}
+        <Snackbar
+          anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+          open={announcement && !announcementShown}
+          message={announcement}
+          action={
+            <IconButton size="small" color="inherit" onClick={() => setAnnouncementShown(true)}>
+              <CloseIcon fontSize="small" />
+            </IconButton>
+          }
+        />
       </Grid>
     </StartPage>
   );
diff --git a/modern/src/components/registration/RegisterForm.js b/modern/src/components/registration/RegisterForm.js
index d515b641..11dd510e 100644
--- a/modern/src/components/registration/RegisterForm.js
+++ b/modern/src/components/registration/RegisterForm.js
@@ -6,6 +6,7 @@ import { useHistory } from 'react-router-dom';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import StartPage from '../../StartPage';
 import { useTranslation } from '../../LocalizationProvider';
+import { snackBarDurationShortMs } from '../../common/duration';
 
 const useStyles = makeStyles((theme) => ({
   title: {
@@ -49,7 +50,7 @@ const RegisterForm = () => {
         anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
         open={snackbarOpen}
         onClose={() => history.push('/login')}
-        autoHideDuration={6000}
+        autoHideDuration={snackBarDurationShortMs}
         message={t('loginCreated')}
       />
       <Grid container direction="column" spacing={2}>
diff --git a/modern/src/components/registration/ResetPasswordForm.js b/modern/src/components/registration/ResetPasswordForm.js
index a3b29f2a..6c41a9ea 100644
--- a/modern/src/components/registration/ResetPasswordForm.js
+++ b/modern/src/components/registration/ResetPasswordForm.js
@@ -7,6 +7,7 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import StartPage from '../../StartPage';
 import { useTranslation } from '../../LocalizationProvider';
 import useQuery from '../../common/useQuery';
+import { snackBarDurationShortMs } from '../../common/duration';
 
 const useStyles = makeStyles((theme) => ({
   title: {
@@ -60,7 +61,7 @@ const ResetPasswordForm = () => {
         anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
         open={snackbarOpen}
         onClose={() => history.push('/login')}
-        autoHideDuration={6000}
+        autoHideDuration={snackBarDurationShortMs}
         message={!token ? t('loginResetSuccess') : t('loginUpdateSuccess')}
       />
       <Grid container direction="column" spacing={2}>