mirror of
https://github.com/Cockatrice/Cockatrice.git
synced 2026-06-10 08:14:47 -07:00
Webatrice: Registration toasts (#4566)
* wip * Registration Success Toast * remove debugging code * remove unused field * Show toast on successful password reset * Toast on account activation success * lint and PR feedback * Rework interface names to avoid collision * Move CssBaseline to sibling of ToastProvider Co-authored-by: Brent Clark <brent@backboneiq.com>
This commit is contained in:
parent
88b861d632
commit
4c04b4ef5a
11 changed files with 164 additions and 13 deletions
|
|
@ -1,5 +1,4 @@
|
|||
// eslint-disable-next-line
|
||||
import React, { Component } from "react";
|
||||
import { Component } from 'react';
|
||||
import { Provider } from 'react-redux';
|
||||
import { MemoryRouter as Router } from 'react-router-dom';
|
||||
import CssBaseline from '@material-ui/core/CssBaseline';
|
||||
|
|
@ -10,6 +9,8 @@ import FeatureDetection from './FeatureDetection';
|
|||
|
||||
import './AppShell.css';
|
||||
|
||||
import { ToastProvider } from 'components/Toast'
|
||||
|
||||
class AppShell extends Component {
|
||||
componentDidMount() {
|
||||
// @TODO (1)
|
||||
|
|
@ -24,14 +25,16 @@ class AppShell extends Component {
|
|||
return (
|
||||
<Provider store={store}>
|
||||
<CssBaseline />
|
||||
<div className="AppShell" onContextMenu={this.handleContextMenu}>
|
||||
<Router>
|
||||
<Header />
|
||||
<ToastProvider>
|
||||
<div className="AppShell" onContextMenu={this.handleContextMenu}>
|
||||
<Router>
|
||||
<Header />
|
||||
|
||||
<FeatureDetection />
|
||||
<Routes />
|
||||
</Router>
|
||||
</div>
|
||||
<FeatureDetection />
|
||||
<Routes />
|
||||
</Router>
|
||||
</div>
|
||||
</ToastProvider>
|
||||
</Provider>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import { RouteEnum, WebSocketConnectOptions, getHostPort } from 'types';
|
|||
import { ServerSelectors, ServerTypes } from 'store';
|
||||
|
||||
import './Login.css';
|
||||
import { useToast } from 'components/Toast';
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
root: {
|
||||
|
|
@ -68,16 +69,21 @@ const Login = ({ state, description }: LoginProps) => {
|
|||
});
|
||||
const [userToResetPassword, setUserToResetPassword] = useState(null);
|
||||
|
||||
const passwordResetToast = useToast({ key: 'password-reset-success', children: 'Password Reset Successfully' })
|
||||
const accountActivatedToast = useToast({ key: 'account-activation-success', children: 'Account Activated Successfully' })
|
||||
|
||||
useReduxEffect(() => {
|
||||
closeRequestPasswordResetDialog();
|
||||
openResetPasswordDialog();
|
||||
}, ServerTypes.RESET_PASSWORD_REQUESTED, []);
|
||||
|
||||
useReduxEffect(() => {
|
||||
passwordResetToast.openToast()
|
||||
closeResetPasswordDialog();
|
||||
}, ServerTypes.RESET_PASSWORD_SUCCESS, []);
|
||||
|
||||
useReduxEffect(() => {
|
||||
accountActivatedToast.openToast()
|
||||
closeActivateAccountDialog();
|
||||
}, ServerTypes.ACCOUNT_ACTIVATION_SUCCESS, []);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue