Add noscript messages (#341)
* Noscript warnings * Incomplete sentence.
This commit is contained in:
parent
c5979d5635
commit
c92032e630
|
@ -53,7 +53,15 @@ class AuthRoute extends React.Component<Props> {
|
||||||
if (onlyLoggedOut) {
|
if (onlyLoggedOut) {
|
||||||
newLocation = authForwardLocation || { ...location, pathname: '/profile' };
|
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 = () => {
|
private setAuthForward = () => {
|
||||||
|
|
|
@ -29,6 +29,12 @@ export default class Template extends React.PureComponent<Props> {
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<BasicHead title={title}>
|
<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}>
|
<div className={className}>
|
||||||
<Header isTransparent={isHeaderTransparent} />
|
<Header isTransparent={isHeaderTransparent} />
|
||||||
<Layout.Content className="Template-content">
|
<Layout.Content className="Template-content">
|
||||||
|
|
|
@ -1,6 +1,13 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import AuthFlow from 'components/AuthFlow';
|
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;
|
export default SignInPage;
|
||||||
|
|
|
@ -10,7 +10,14 @@ class CreatePage extends React.Component<Props> {
|
||||||
const { location } = this.props;
|
const { location } = this.props;
|
||||||
const parsed = parse(location.search);
|
const parsed = parse(location.search);
|
||||||
const rfpId = parsed.rfp ? parseInt(parsed.rfp, 10) : undefined;
|
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} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -9,3 +9,4 @@
|
||||||
@import 'react-mde-overrides.less';
|
@import 'react-mde-overrides.less';
|
||||||
@import 'antd-overrides.less';
|
@import 'antd-overrides.less';
|
||||||
@import 'html.less';
|
@import 'html.less';
|
||||||
|
@import 'noscript.less';
|
Loading…
Reference in New Issue