Базовая вёрстка для bsod страницы

src/components/ui/bsod/BSoD.intl.json

@@ -0,0 +1,5 @@
+{
+    "criticalErrorHappened": "There was an critical error due to which the application can not continue its normal operation.",
+    "reloadPageOrContactUs": "Please reload the page to try again. If the problem occurs again, please report it to the developers by sending email to",
+    "alsoYouCanInteractWithBackground": "And yet you can interact with the background - it is interactive ;)"
+}

src/components/ui/bsod/BSoD.jsx

@@ -1,7 +1,32 @@
 import React from 'react';
 
+import { FormattedMessage as Message } from 'react-intl';
+
+import appInfo from 'components/auth/appInfo/AppInfo.intl.json';
+import messages from './BSoD.intl.json';
+
+import styles from './styles.scss';
+
 export default function BSoD() {
     return (
-        <img src="https://i.ytimg.com/vi/_aT9r3ZFErY/maxresdefault.jpg" width="100%" height="100%" />
+        <div className={styles.body}>
+            <div className={styles.wrapper}>
+                <div className={styles.title}>
+                    <Message {...appInfo.appName} />
+                </div>
+                <div className={styles.lineWithMargin}>
+                    <Message {...messages.criticalErrorHappened} />
+                </div>
+                <div className={styles.line}>
+                    <Message {...messages.reloadPageOrContactUs} />
+                </div>
+                <a href="mailto:support@ely.by" className={styles.support}>
+                    support@ely.by
+                </a>
+                <div className={styles.easterEgg}>
+                    <Message {...messages.alsoYouCanInteractWithBackground}/>
+                </div>
+            </div>
+        </div>
     );
 }

src/components/ui/bsod/styles.scss

@@ -0,0 +1,48 @@
+@import '~components/ui/colors.scss';
+
+$font-family-monospaced: 'Consolas', monospace;
+
+.body {
+    height: 100%;
+    background-color: $dark_blue;
+    border-top: 50px solid darker($dark_blue);
+    color: #fff;
+    text-align: center;
+    font-family: $font-family-monospaced;
+    box-sizing: border-box;
+}
+
+.wrapper {
+    margin: 85px auto 0;
+    max-width: 500px;
+    padding: 0 20px;
+}
+
+.title {
+    font-size: 26px;
+    margin-bottom: 13px;
+}
+
+.line {
+    margin: 0 auto;
+    font-size: 16px;
+    color: #EBE8E1;
+}
+
+.lineWithMargin {
+    composes: line;
+
+    margin-bottom: 20px;
+}
+
+.support {
+    font-size: 18px;
+    color: #FFF;
+    margin: 3px 0 44px;
+    display: block;
+}
+
+.easterEgg {
+    font-size: 14px;
+    color: #EBE8E1;
+}

src/services/authFlow/AuthFlow.js

@@ -11,6 +11,8 @@ import ActivationState from './ActivationState';
 import CompleteState from './CompleteState';
 import ResendActivationState from './ResendActivationState';
 
+import dispatchBsod from 'components/ui/bsod/dispatchBsod';
+
 export default class AuthFlow {
     constructor(actions) {
         if (typeof actions !== 'object') {