Show a nicer error message when server is installing

Author: DaneEveritt

public/.gitignore

@@ -1,2 +1,3 @@
 assets/*
-!assets/*.svg
+!assets/svgs
+!assets/svgs/*.svg

public/assets/pterodactyl.svg public/assets/svgs/pterodactyl.svgpublic/assets/pterodactyl.svg renamed to public/assets/svgs/pterodactyl.svg

@@ -1,44 +1,21 @@
 import React from 'react';
 import { Route } from 'react-router';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
-import styled from 'styled-components';
-import { breakpoint } from 'styled-components-breakpoint';
+import PageContentBlock from '@/components/elements/PageContentBlock';
 
 type Props = Readonly<{
     children: React.ReactNode;
 }>;
 
-const ContentContainer = styled.div`
-    max-width: 1200px;
-    ${tw`mx-4`};
-
-    ${breakpoint('xl')`
-        ${tw`mx-auto`};
-    `};
-`;
-
 export default ({ children }: Props) => (
     <Route
         render={({ location }) => (
             <TransitionGroup className={'route-transition-group'}>
                 <CSSTransition key={location.key} timeout={250} in={true} appear={true} classNames={'fade'}>
                     <section>
-                        <ContentContainer>
+                        <PageContentBlock>
                             {children}
-                        </ContentContainer>
-                        <ContentContainer className={'mb-4'}>
-                            <p className={'text-right text-neutral-500 text-xs'}>
-                                &copy; 2015 - 2020&nbsp;
-                                <a
-                                    rel={'noopener nofollow'}
-                                    href={'https://pterodactyl.io'}
-                                    target={'_blank'}
-                                    className={'no-underline text-neutral-500 hover:text-neutral-300'}
-                                >
-                                    Pterodactyl Software
-                                </a>
-                            </p>
-                        </ContentContainer>
+                        </PageContentBlock>
                     </section>
                 </CSSTransition>
             </TransitionGroup>

public/assets/svgs/server_error.svg

@@ -25,8 +25,10 @@ http.interceptors.response.use(resp => {
     }
 
     return resp;
-}, () => {
+}, error => {
     store.getActions().progress.setComplete();
+
+    throw error;
 });
 
 // If we have a phpdebugbar instance registered at this point in time go

public/assets/svgs/server_installing.svg

@@ -36,7 +36,7 @@ export default forwardRef<HTMLFormElement, Props>(({ title, ...props }, ref) =>
         <Form {...props} ref={ref}>
             <div className={'md:flex w-full bg-white shadow-lg rounded-lg p-6 md:pl-0 mx-1'}>
                 <div className={'flex-none select-none mb-6 md:mb-0 self-center'}>
-                    <img src={'/assets/pterodactyl.svg'} className={'block w-48 md:w-64 mx-auto'}/>
+                    <img src={'/assets/svgs/pterodactyl.svg'} className={'block w-48 md:w-64 mx-auto'}/>
                 </div>
                 <div className={'flex-1'}>
                     {props.children}

resources/scripts/TransitionRouter.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import { breakpoint } from 'styled-components-breakpoint';
+
+const ContentContainer = styled.div`
+    max-width: 1200px;
+    ${tw`mx-4`};
+
+    ${breakpoint('xl')`
+        ${tw`mx-auto`};
+    `};
+`;
+
+export default ContentContainer;

resources/scripts/api/http.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import ContentContainer from '@/components/elements/ContentContainer';
+import { CSSTransition } from 'react-transition-group';
+
+interface Props {
+    children: React.ReactNode;
+}
+
+export default ({ children }: Props) => (
+    <CSSTransition timeout={250} classNames={'fade'} appear={true} in={true}>
+        <>
+            <ContentContainer className={'my-10'}>
+                {children}
+            </ContentContainer>
+            <ContentContainer className={'mb-4'}>
+                <p className={'text-right text-neutral-500 text-xs'}>
+                    &copy; 2015 - 2020&nbsp;
+                    <a
+                        rel={'noopener nofollow'}
+                        href={'https://pterodactyl.io'}
+                        target={'_blank'}
+                        className={'no-underline text-neutral-500 hover:text-neutral-300'}
+                    >
+                        Pterodactyl Software
+                    </a>
+                </p>
+            </ContentContainer>
+        </>
+    </CSSTransition>
+);

resources/scripts/components/auth/LoginFormContainer.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PageContentBlock from '@/components/elements/PageContentBlock';
+
+interface Props {
+    title?: string;
+    message: string;
+}
+
+export default ({ title, message }: Props) => (
+    <PageContentBlock>
+        <div className={'flex justify-center'}>
+            <div className={'w-full sm:w-3/4 md:w-1/2 p-12 md:p-20 bg-neutral-100 rounded-lg shadow-lg text-center'}>
+                <img src={'/assets/svgs/server_error.svg'} className={'w-2/3 h-auto select-none'}/>
+                <h2 className={'mt-6 text-neutral-900 font-bold'}>{ title || 'Something went wrong!' }</h2>
+                <p className={'text-sm text-neutral-700 mt-2'}>
+                    {message}
+                </p>
+            </div>
+        </div>
+    </PageContentBlock>
+);