issue spring-io#658 - initial changes for adding error pages for both…

… client and server

start-client/src/Errors.js

@@ -0,0 +1,24 @@
+import './styles/app.scss'
+
+import React from 'react'
+import { ToastContainer } from 'react-toastify'
+import { render } from 'react-dom'
+
+import ErrorBody from './components/ErrorBody'
+import Close from './components/common/form/Close'
+import { AppProvider } from './components/reducer/App'
+import { InitializrProvider } from './components/reducer/Initializr'
+
+render(
+  <AppProvider>
+  <InitializrProvider>
+    <ToastContainer
+      closeButton={<Close />}
+      position='top-center'
+      hideProgressBar
+    />
+    <ErrorBody />
+  </InitializrProvider>
+</AppProvider>,
+  document.getElementById('error')
+)

start-client/src/Fivexx.js

@@ -0,0 +1,24 @@
+import './styles/app.scss'
+
+import React from 'react'
+import { ToastContainer } from 'react-toastify'
+import { render } from 'react-dom'
+
+import FiveXXBody from './components/FiveXXBody'
+import Close from './components/common/form/Close'
+import { AppProvider } from './components/reducer/App'
+import { InitializrProvider } from './components/reducer/Initializr'
+
+render(
+  <AppProvider>
+  <InitializrProvider>
+    <ToastContainer
+      closeButton={<Close />}
+      position='top-center'
+      hideProgressBar
+    />
+    <FiveXXBody />
+  </InitializrProvider>
+</AppProvider>,
+  document.getElementById('5xx')
+)

start-client/src/Fourxx.js

@@ -0,0 +1,24 @@
+import './styles/app.scss'
+
+import React from 'react'
+import { ToastContainer } from 'react-toastify'
+import { render } from 'react-dom'
+
+import FourXXBody from './components/FourXXBody'
+import Close from './components/common/form/Close'
+import { AppProvider } from './components/reducer/App'
+import { InitializrProvider } from './components/reducer/Initializr'
+
+render(
+  <AppProvider>
+  <InitializrProvider>
+    <ToastContainer
+      closeButton={<Close />}
+      position='top-center'
+      hideProgressBar
+    />
+    <FourXXBody />
+  </InitializrProvider>
+</AppProvider>,
+  document.getElementById('4xx')
+)

start-client/src/components/ErrorBody.js

@@ -0,0 +1,27 @@
+import BodyClassName from 'react-body-classname'
+import { AppContext } from './reducer/App'
+import React, {
+  useContext,
+} from 'react'
+import { Header, SideLeft, SideRight } from './common/layout'
+
+export default function ErrorBody() {
+  const {
+    theme,
+  } = useContext(AppContext)
+
+  return (
+    <>
+      <BodyClassName className={theme} />
+      <SideLeft />
+      <div id='main'>
+        <Header />
+        <hr className='divider' />
+
+        <span>General Error!</span>
+
+      </div>
+      <SideRight />
+    </>
+  )
+}

start-client/src/components/FiveXXBody.js

@@ -0,0 +1,27 @@
+import BodyClassName from 'react-body-classname'
+import { AppContext } from './reducer/App'
+import React, {
+  useContext,
+} from 'react'
+import { Header, SideLeft, SideRight } from './common/layout'
+
+export default function FiveXXBody() {
+  const {
+    theme,
+  } = useContext(AppContext)
+
+  return (
+    <>
+      <BodyClassName className={theme} />
+      <SideLeft />
+      <div id='main'>
+        <Header />
+        <hr className='divider' />
+
+        <span class="label">5xx: Server error responses</span>
+
+      </div>
+      <SideRight />
+    </>
+  )
+}

start-client/src/components/FourXXBody.js

@@ -0,0 +1,27 @@
+import BodyClassName from 'react-body-classname'
+import { AppContext } from './reducer/App'
+import React, {
+  useContext,
+} from 'react'
+import { Header, SideLeft, SideRight } from './common/layout'
+
+export default function FourXXBody() {
+  const {
+    theme,
+  } = useContext(AppContext)
+
+  return (
+    <>
+      <BodyClassName className={theme} />
+      <SideLeft />
+      <div id='main'>
+        <Header />
+        <hr className='divider' />
+
+        <span class="label">4xx: Client error responses</span>
+
+      </div>
+      <SideRight />
+    </>
+  )
+}

start-client/static/error.html

@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1"
+    />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+
+    <link rel="shortcut icon" href="/images/icon-48x48.png" />
+
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+
+    <link rel="canonical" href="<%= htmlWebpackPlugin.options.url %>" />
+    <meta
+      name="description"
+      content="<%= htmlWebpackPlugin.options.description %>"
+    />
+    <meta
+      property="og:site_name"
+      content="<%= htmlWebpackPlugin.options.title %>"
+    />
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:title"
+      content="<%= htmlWebpackPlugin.options.title %>"
+    />
+    <meta
+      property="og:description"
+      content="<%= htmlWebpackPlugin.options.description %>"
+    />
+    <meta property="og:url" content="<%= htmlWebpackPlugin.options.url %>" />
+    <meta
+      name="twitter:title"
+      content="<%= htmlWebpackPlugin.options.title %>"
+    />
+    <meta
+      name="twitter:description"
+      content="<%= htmlWebpackPlugin.options.description %>"
+    />
+    <meta name="twitter:url" content="<%= htmlWebpackPlugin.options.url %>" />
+    <meta
+      name="twitter:site"
+      content="<%= htmlWebpackPlugin.options.twitter %>"
+    />
+    <meta
+      name="twitter:creator"
+      content="<%= htmlWebpackPlugin.options.twitter %>"
+    />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta
+      name="twitter:image"
+      content="<%= htmlWebpackPlugin.options.image %>"
+    />
+    <meta
+      property="og:image"
+      content="<%= htmlWebpackPlugin.options.image %>"
+    />
+    <meta property="og:image:width" content="1000" />
+    <meta property="og:image:height" content="523" />
+    <meta name="theme-color" content="<%= htmlWebpackPlugin.options.theme %>" />
+
+    <style>
+      html,
+      body {
+        text-rendering: optimizeLegibility;
+      }
+      html {
+        line-height: 1.15;
+        -webkit-text-size-adjust: 100%;
+      }
+      body {
+        margin: 0;
+      }
+      main {
+        display: block;
+      }
+      h1 {
+        font-size: 2em;
+        margin: 0.67em 0;
+      }
+      hr {
+        box-sizing: content-box;
+        height: 0;
+        overflow: visible;
+      }
+      pre {
+        font-family: monospace, monospace;
+        font-size: 1em;
+      }
+      a {
+        background-color: transparent;
+      }
+      abbr[title] {
+        border-bottom: none;
+        text-decoration: underline;
+        text-decoration: underline dotted;
+      }
+      b,
+      strong {
+        font-weight: bolder;
+      }
+      code,
+      kbd,
+      samp {
+        font-family: monospace, monospace;
+        font-size: 1em;
+      }
+      small {
+        font-size: 80%;
+      }
+      sub,
+      sup {
+        font-size: 75%;
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+      }
+      sub {
+        bottom: -0.25em;
+      }
+      sup {
+        top: -0.5em;
+      }
+      img {
+        border-style: none;
+      }
+      button,
+      input,
+      optgroup,
+      select,
+      textarea {
+        font-family: inherit;
+        font-size: 100%;
+        line-height: 1.15;
+        margin: 0;
+      }
+      button,
+      input {
+        overflow: visible;
+      }
+      button,
+      select {
+        text-transform: none;
+      }
+      button,
+      [type='button'],
+      [type='reset'],
+      [type='submit'] {
+        -webkit-appearance: button;
+      }
+      button::-moz-focus-inner,
+      [type='button']::-moz-focus-inner,
+      [type='reset']::-moz-focus-inner,
+      [type='submit']::-moz-focus-inner {
+        border-style: none;
+        padding: 0;
+      }
+      button:-moz-focusring,
+      [type='button']:-moz-focusring,
+      [type='reset']:-moz-focusring,
+      [type='submit']:-moz-focusring {
+        outline: 1px dotted ButtonText;
+      }
+      fieldset {
+        padding: 0.35em 0.75em 0.625em;
+      }
+      legend {
+        box-sizing: border-box;
+        color: inherit;
+        display: table;
+        max-width: 100%;
+        padding: 0; /* 3 */
+        white-space: normal;
+      }
+      progress {
+        vertical-align: baseline;
+      }
+      textarea {
+        overflow: auto;
+      }
+      [type='checkbox'],
+      [type='radio'] {
+        box-sizing: border-box;
+        padding: 0;
+      }
+      [type='number']::-webkit-inner-spin-button,
+      [type='number']::-webkit-outer-spin-button {
+        height: auto;
+      }
+      [type='search'] {
+        -webkit-appearance: textfield;
+        outline-offset: -2px;
+      }
+      [type='search']::-webkit-search-decoration {
+        -webkit-appearance: none;
+      }
+      ::-webkit-file-upload-button {
+        -webkit-appearance: button;
+        font: inherit;
+      }
+      details {
+        display: block;
+      }
+      summary {
+        display: list-item;
+      }
+      template {
+        display: none;
+      }
+      [hidden] {
+        display: none;
+      }
+      html {
+        font-family: sans-serif;
+      }
+      body {
+        margin: 0;
+      }
+      .noscript {
+        padding: 2rem;
+      }
+      .noscript a {
+        color: #3d96f7;
+      }
+    </style>
+  </head>
+  <body class="default">
+    <noscript>
+      <div class="noscript">
+        <strong>
+          <a href="https://start.spring.io">start.spring.io</a> can't work! </strong
+        ><br />
+        This app needs JavaScript enabled.
+      </div>
+    </noscript>
+    <div id="error"></div>
+  </body>
+</html>