diff --git a/frontend/src/assets/icons/Icecream.svg b/frontend/src/assets/icons/Icecream.svg new file mode 100644 index 0000000000..016aa0fd6c --- /dev/null +++ b/frontend/src/assets/icons/Icecream.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/frontend/src/component/App.tsx b/frontend/src/component/App.tsx index 2b61889d61..f18f9163bf 100644 --- a/frontend/src/component/App.tsx +++ b/frontend/src/component/App.tsx @@ -11,6 +11,7 @@ import styles from './styles.module.scss'; import IAuthStatus from '../interfaces/user'; import { useEffect } from 'react'; +import NotFound from './common/NotFound/NotFound'; interface IAppProps extends RouteComponentProps { user: IAuthStatus; fetchUiBootstrap: any; @@ -34,7 +35,7 @@ const App = ({ location, user, fetchUiBootstrap }: IAppProps) => { const isUnauthorized = () => { // authDetails only exists if the user is not logged in. - + //if (user?.permissions.length === 0) return true; return user?.authDetails !== undefined; }; @@ -80,6 +81,8 @@ const App = ({ location, user, fetchUiBootstrap }: IAppProps) => { /> {renderMainLayoutRoutes()} {renderStandaloneRoutes()} + + diff --git a/frontend/src/component/common/NotFound/NotFound.styles.ts b/frontend/src/component/common/NotFound/NotFound.styles.ts new file mode 100644 index 0000000000..2ec0f93f69 --- /dev/null +++ b/frontend/src/component/common/NotFound/NotFound.styles.ts @@ -0,0 +1,34 @@ +import { makeStyles } from '@material-ui/core/styles'; + +export const useStyles = makeStyles({ + container: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + minHeight: '100vh', + padding: '2rem', + position: 'fixed', + backgroundColor: '#fff', + width: '100%', + }, + logo: { + height: '80px', + }, + content: { + display: 'flex', + position: 'relative', + }, + buttonContainer: { + marginTop: '2rem', + }, + homeButton: { + marginLeft: '1rem', + }, + icon: { + height: '150px', + width: '150px', + position: 'absolute', + right: 100, + top: 45, + }, +}); diff --git a/frontend/src/component/common/NotFound/NotFound.tsx b/frontend/src/component/common/NotFound/NotFound.tsx new file mode 100644 index 0000000000..8e6909b48a --- /dev/null +++ b/frontend/src/component/common/NotFound/NotFound.tsx @@ -0,0 +1,46 @@ +import { Button, Typography } from '@material-ui/core'; +import { useHistory } from 'react-router'; + +import logo from '../../../assets/img/logo.png'; + +import { useStyles } from './NotFound.styles'; + +const NotFound = () => { + const history = useHistory(); + const styles = useStyles(); + + const onClickHome = () => { + history.push('/'); + }; + + const onClickBack = () => { + history.goBack(); + }; + + return ( +
+
+ unleash logo +
+ + Ooops. That's a page we haven't toggled on yet. + +
+
+ + +
+
+
+ ); +}; + +export default NotFound; diff --git a/frontend/src/component/layout/LayoutPicker/LayoutPicker.jsx b/frontend/src/component/layout/LayoutPicker/LayoutPicker.jsx index d8e044722e..bd4f8bc5f6 100644 --- a/frontend/src/component/layout/LayoutPicker/LayoutPicker.jsx +++ b/frontend/src/component/layout/LayoutPicker/LayoutPicker.jsx @@ -14,13 +14,15 @@ const LayoutPicker = ({ children, location }) => { const isForgottenPasswordPage = location.pathname.includes( 'forgotten-password' ); + const is404 = location.pathname.includes('404'); return ( isLoginPage || isNewUserPage || isChangePasswordPage || isResetPasswordSuccessPage || - isForgottenPasswordPage + isForgottenPasswordPage || + is404 ); }; diff --git a/frontend/src/component/user/Login/Login.jsx b/frontend/src/component/user/Login/Login.jsx index 2de8226c52..18be561815 100644 --- a/frontend/src/component/user/Login/Login.jsx +++ b/frontend/src/component/user/Login/Login.jsx @@ -8,16 +8,21 @@ import useQueryParams from '../../../hooks/useQueryParams'; import ResetPasswordSuccess from '../common/ResetPasswordSuccess/ResetPasswordSuccess'; import StandaloneLayout from '../common/StandaloneLayout/StandaloneLayout'; -const Login = ({ history, isUnauthorized, authDetails }) => { +const Login = ({ history, user, fetchUser }) => { const styles = useStyles(); const query = useQueryParams(); useEffect(() => { - if (!isUnauthorized()) { + fetchUser(); + /* eslint-disable-next-line */ + }, []); + + useEffect(() => { + if (user.permissions.length > 0) { history.push('features'); } /* eslint-disable-next-line */ - }, [authDetails]); + }, [user.permissions]); const resetPassword = query.get('reset') === 'true'; diff --git a/frontend/src/component/user/Login/index.js b/frontend/src/component/user/Login/index.js index 1e97513273..149911f048 100644 --- a/frontend/src/component/user/Login/index.js +++ b/frontend/src/component/user/Login/index.js @@ -1,4 +1,5 @@ import { connect } from 'react-redux'; +import { fetchUser } from '../../../store/user/actions'; import Login from './Login'; const mapStateToProps = state => ({ @@ -6,4 +7,8 @@ const mapStateToProps = state => ({ flags: state.uiConfig.toJS().flags, }); -export default connect(mapStateToProps)(Login); +const mapDispatchToProps = { + fetchUser, +}; + +export default connect(mapStateToProps, mapDispatchToProps)(Login); diff --git a/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx b/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx index 902371622a..b2e8d4a7cb 100644 --- a/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx +++ b/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx @@ -7,13 +7,15 @@ import { useHistory } from 'react-router'; import { useCommonStyles } from '../../../common.styles'; import { useStyles } from './PasswordAuth.styles'; import { Link } from 'react-router-dom'; +import useQueryParams from '../../../hooks/useQueryParams'; const PasswordAuth = ({ authDetails, passwordLogin }) => { const commonStyles = useCommonStyles(); const styles = useStyles(); const history = useHistory(); const [showFields, setShowFields] = useState(false); - const [username, setUsername] = useState(''); + const params = useQueryParams(); + const [username, setUsername] = useState(params.get('email') || ''); const [password, setPassword] = useState(''); const [errors, setErrors] = useState({ usernameError: '', @@ -91,6 +93,7 @@ const PasswordAuth = ({ authDetails, passwordLogin }) => { error={!!usernameError} helperText={usernameError} variant="outlined" + autoComplete="true" size="small" /> { error={!!passwordError} helperText={passwordError} variant="outlined" + autoComplete="true" size="small" />