Add noscript messages (#341)

* Noscript warnings

* Incomplete sentence.

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 = () => {

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">

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;

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} />
+      </>
+    );
   }
 }
 

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%;
+    }
+  }
+}

frontend/client/styles/style.less

@@ -9,3 +9,4 @@
 @import 'react-mde-overrides.less';
 @import 'antd-overrides.less';
 @import 'html.less';
+@import 'noscript.less';