Added Error Pages (#51)

* wip

* Added 500 error page

* Added 403 page

Author: Jovert Lota Palonpon

resources/js/views/errors/Forbidden.js

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { Grid, Link, Typography, withStyles } from '@material-ui/core';
+
+import { Error as ErrorLayout } from '../layouts';
+
+const Forbidden = ({ classes }) => (
+    <ErrorLayout>
+        <Grid item>
+            <Typography variant="h1" color="textPrimary">
+                403
+            </Typography>
+        </Grid>
+
+        <Grid item>
+            <Typography variant="h6" color="textSecondary">
+                You shouldn't be here!
+            </Typography>
+        </Grid>
+
+        <Grid className={classes.break} item />
+
+        <Grid item>
+            <Typography align="center" color="textSecondary">
+                You are not allowed to visit this page. Contact your <br />
+                administrator for more information
+            </Typography>
+        </Grid>
+
+        <Grid className={classes.spacer} item />
+
+        <Grid item>
+            <Link href={null}>Contact Administrator</Link>
+        </Grid>
+
+        <Grid item>
+            <Link href="#">Go Home</Link>
+        </Grid>
+    </ErrorLayout>
+);
+
+const styles = theme => ({
+    spacer: {
+        height: theme.spacing.unit * 4,
+    },
+
+    break: {
+        height: theme.spacing.unit * 2,
+    },
+});
+
+export default withStyles(styles)(Forbidden);

resources/js/views/errors/InternalServer.js

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { Grid, Link, Typography, withStyles } from '@material-ui/core';
+
+import { Error as ErrorLayout } from '../layouts';
+
+const InternalServer = ({ classes }) => (
+    <ErrorLayout>
+        <Grid item>
+            <Typography variant="h1" color="textPrimary">
+                500
+            </Typography>
+        </Grid>
+
+        <Grid item>
+            <Typography variant="h6" color="textSecondary">
+                Well, you broke the internet!
+            </Typography>
+        </Grid>
+
+        <Grid className={classes.break} item />
+
+        <Grid item>
+            <Typography align="center" color="textSecondary">
+                Just kidding, looks like we have an internal issue,
+                <br />
+                please try again in couple minutes
+            </Typography>
+        </Grid>
+
+        <Grid className={classes.spacer} item />
+
+        <Grid item>
+            <Link href={null}>Report Problem</Link>
+        </Grid>
+    </ErrorLayout>
+);
+
+const styles = theme => ({
+    spacer: {
+        height: theme.spacing.unit * 4,
+    },
+
+    break: {
+        height: theme.spacing.unit * 2,
+    },
+});
+
+export default withStyles(styles)(InternalServer);

resources/js/views/errors/NotFound.js

@@ -1,11 +1,84 @@
 import React from 'react';
 
+import {
+    Grid,
+    IconButton,
+    InputBase,
+    Link,
+    Paper,
+    Typography,
+    withStyles,
+} from '@material-ui/core';
+
+import { Search as SearchIcon } from '@material-ui/icons';
+
 import { Error as ErrorLayout } from '../layouts';
 
-const NotFound = () => (
+let Search = ({ classes }) => (
+    <Paper className={classes.root} elevation={1}>
+        <IconButton>
+            <SearchIcon />
+        </IconButton>
+
+        <InputBase
+            className={classes.input}
+            placeholder="Search for anything"
+        />
+    </Paper>
+);
+
+const searchStyles = theme => ({
+    root: {
+        padding: '8px 12px',
+        display: 'flex',
+        alignItems: 'center',
+        width: 400,
+    },
+
+    input: {
+        marginLeft: 8,
+        flex: 1,
+    },
+});
+
+Search = withStyles(searchStyles)(Search);
+
+const NotFound = ({ classes }) => (
     <ErrorLayout>
-        <h1>Whooops! We couldn't find what you're looking for :(</h1>
+        <Grid item>
+            <Typography variant="h1" color="textPrimary">
+                404
+            </Typography>
+        </Grid>
+
+        <Grid item>
+            <Typography variant="h6" color="textSecondary">
+                Sorry but we could not find the page you are looking for
+            </Typography>
+        </Grid>
+
+        <Grid className={classes.spacer} item />
+
+        <Grid item>
+            <Search />
+        </Grid>
+
+        <Grid className={classes.break} item />
+
+        <Grid item>
+            <Link href="#">Go Home</Link>
+        </Grid>
     </ErrorLayout>
 );
 
-export default NotFound;
+const styles = theme => ({
+    spacer: {
+        height: theme.spacing.unit * 4,
+    },
+
+    break: {
+        height: theme.spacing.unit * 2,
+    },
+});
+
+export default withStyles(styles)(NotFound);

resources/js/views/errors/index.js

@@ -1,3 +1,5 @@
 import loadable from '@loadable/component';
 
+export const Forbidden = loadable(() => import('./Forbidden'));
+export const InternalServer = loadable(() => import('./InternalServer'));
 export const NotFound = loadable(() => import('./NotFound'));

resources/js/views/layouts/Error.js

@@ -1,14 +1,16 @@
 import React from 'react';
 import { withStyles, Grid } from '@material-ui/core';
 
-const Error = props => (
+const Error = ({ classes, children }) => (
     <Grid
+        className={classes.root}
         container
+        direction="column"
         justify="center"
         alignItems="center"
-        className={props.classes.root}
+        spacing={4}
     >
-        <Grid item>{props.children}</Grid>
+        {children}
     </Grid>
 );