From eecd28e9513c0376afac4adc4b21fa056efe4230 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Sun, 17 Apr 2022 15:59:50 -0700 Subject: Add announcement snackbar --- modern/src/RegisterDialog.js | 3 ++- modern/src/SocketController.js | 3 ++- modern/src/common/duration.js | 2 ++ modern/src/components/registration/LoginForm.js | 24 +++++++++++++++++----- modern/src/components/registration/RegisterForm.js | 3 ++- .../components/registration/ResetPasswordForm.js | 3 ++- 6 files changed, 29 insertions(+), 9 deletions(-) create mode 100644 modern/src/common/duration.js (limited to 'modern') 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 }) => { { 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 = () => { {emailEnabled && ( - - - history.push('/reset-password')} className={classes.resetPassword} underline="none">{t('loginReset')} + + + history.push('/reset-password')} className={classes.resetPassword} underline="none">{t('loginReset')} + - )} + setAnnouncementShown(true)}> + + + } + /> ); 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')} /> 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')} /> -- cgit v1.2.3