Fix/minor changes (#285)

* fix: use query params on password auth

* fix: refactor redirect and isUnauthorized

* feat: add 404 page

* fix: setup 404 as redirect and standalone page

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()}
+                    <Route path="/404" component={NotFound} />
+                    <Redirect to="/404" />
                 </Switch>
             </LayoutPicker>
         </div>

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,
+    },
+});

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 (
+        <div className={styles.container}>
+            <div>
+                <img src={logo} alt="unleash logo" className={styles.logo} />
+                <div className={styles.content}>
+                    <Typography variant="h1" style={{ fontSize: '2rem' }}>
+                        Ooops. That's a page we haven't toggled on yet.
+                    </Typography>
+                </div>
+                <div className={styles.buttonContainer}>
+                    <Button
+                        variant="contained"
+                        color="primary"
+                        onClick={onClickBack}
+                    >
+                        Go back
+                    </Button>
+                    <Button onClick={onClickHome} className={styles.homeButton}>
+                        Go home
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default NotFound;

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
         );
     };
 

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';
 

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);

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"
                     />
                     <TextField
@@ -102,6 +105,7 @@ const PasswordAuth = ({ authDetails, passwordLogin }) => {
                         error={!!passwordError}
                         helperText={passwordError}
                         variant="outlined"
+                        autoComplete="true"
                         size="small"
                     />