From c92032e630e2a90e63aff31dac96eef0101e378a Mon Sep 17 00:00:00 2001
From: William O'Beirne <wbobeirne@gmail.com>
Date: Tue, 12 Mar 2019 23:08:50 -0400
Subject: [PATCH] Add noscript messages (#341)

* Noscript warnings

* Incomplete sentence.
---
 frontend/client/components/AuthRoute.tsx      | 10 ++++-
 frontend/client/components/Template/index.tsx |  6 +++
 frontend/client/pages/auth.tsx                |  9 ++++-
 frontend/client/pages/create.tsx              |  9 ++++-
 frontend/client/styles/noscript.less          | 39 +++++++++++++++++++
 frontend/client/styles/style.less             |  1 +
 6 files changed, 71 insertions(+), 3 deletions(-)
 create mode 100644 frontend/client/styles/noscript.less

diff --git a/frontend/client/components/AuthRoute.tsx b/frontend/client/components/AuthRoute.tsx
index c47d7711..a5700095 100644
--- a/frontend/client/components/AuthRoute.tsx
+++ b/frontend/client/components/AuthRoute.tsx
@@ -53,7 +53,15 @@ class AuthRoute extends React.Component<Props> {
       if (onlyLoggedOut) {
         newLocation = authForwardLocation || { ...location, pathname: '/profile' };
       }
-      return <Redirect to={{ ...newLocation }} />;
+      return (
+        <>
+          <noscript className="noScript is-block">
+            This page requires you to login before you can access it, but you have
+            Javascript disabled. Please enable Javascript and login to continue.
+          </noscript>
+          <Redirect to={{ ...newLocation }} />
+        </>
+      );
     }
   }
   private setAuthForward = () => {
diff --git a/frontend/client/components/Template/index.tsx b/frontend/client/components/Template/index.tsx
index 8ad5a45b..fb2a7493 100644
--- a/frontend/client/components/Template/index.tsx
+++ b/frontend/client/components/Template/index.tsx
@@ -29,6 +29,12 @@ export default class Template extends React.PureComponent<Props> {
     );
     return (
       <BasicHead title={title}>
+        {!isHeaderTransparent && (
+          <noscript className="noScript is-banner">
+            It looks like you have Javascript disabled. You may experience issues with
+            interactive parts of the site.
+          </noscript>
+        )}
         <div className={className}>
           <Header isTransparent={isHeaderTransparent} />
           <Layout.Content className="Template-content">
diff --git a/frontend/client/pages/auth.tsx b/frontend/client/pages/auth.tsx
index 9bcfc760..11ad0145 100644
--- a/frontend/client/pages/auth.tsx
+++ b/frontend/client/pages/auth.tsx
@@ -1,6 +1,13 @@
 import React from 'react';
 import AuthFlow from 'components/AuthFlow';
 
-const SignInPage = () => <AuthFlow />;
+const SignInPage = () => (
+  <>
+    <noscript className="noScript is-block">
+      Sign in and account creation require Javascript. Please enable it to continue.
+    </noscript>
+    <AuthFlow />
+  </>
+);
 
 export default SignInPage;
diff --git a/frontend/client/pages/create.tsx b/frontend/client/pages/create.tsx
index e48b33d3..c429ef03 100644
--- a/frontend/client/pages/create.tsx
+++ b/frontend/client/pages/create.tsx
@@ -10,7 +10,14 @@ class CreatePage extends React.Component<Props> {
     const { location } = this.props;
     const parsed = parse(location.search);
     const rfpId = parsed.rfp ? parseInt(parsed.rfp, 10) : undefined;
-    return <DraftList createIfNone createWithRfpId={rfpId} />;
+    return (
+      <>
+        <noscript className="noScript is-block">
+          Proposal creation requires Javascript. You’ll need to enable it to continue.
+        </noscript>
+        <DraftList createIfNone createWithRfpId={rfpId} />
+      </>
+    );
   }
 }
 
diff --git a/frontend/client/styles/noscript.less b/frontend/client/styles/noscript.less
new file mode 100644
index 00000000..c435e8b5
--- /dev/null
+++ b/frontend/client/styles/noscript.less
@@ -0,0 +1,39 @@
+@import 'variables.less';
+
+.noScript {
+  display: block;
+
+  &.is-banner {
+    padding: 0.25rem 1rem;
+    text-align: center;
+    background: @warning-color;
+    color: #FFF;
+  }
+
+  &.is-block {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    max-width: 420px;
+    margin: 2rem auto;
+    padding: 1.5rem;
+    border: 1px solid @warning-color;
+    background: rgba(@warning-color, 0.05);
+    border-radius: 2px;
+
+    &:before {
+      content: '!';
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-shrink: 0;
+      font-size: 1.8rem;
+      width: 2.6rem;
+      height: 2.6rem;
+      margin-right: 1rem;
+      border: 2px solid @warning-color;
+      color: @warning-color;
+      border-radius: 100%;
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/client/styles/style.less b/frontend/client/styles/style.less
index aa5e0019..ebe67a04 100644
--- a/frontend/client/styles/style.less
+++ b/frontend/client/styles/style.less
@@ -9,3 +9,4 @@
 @import 'react-mde-overrides.less';
 @import 'antd-overrides.less';
 @import 'html.less';
+@import 'noscript.less';
\ No newline at end of file