Skip to content

Commit ca6d8ff

Browse files
coldlinkcoldlink
authored
Revert "Revert "NoScript messaging""
1 parent 8763e22 commit ca6d8ff

File tree

4 files changed

+103
-0
lines changed

4 files changed

+103
-0
lines changed

‎scripts/okta/okta-login.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,48 @@
1616
#okta-login-container {
1717
visibility: hidden;
1818
}
19+
/* basic noscript styling */
20+
#noscript {
21+
color: #121212;
22+
font-family:
23+
'Guardian Text Sans Web', 'Helvetica Neue', Helvetica, Arial,
24+
sans-serif;
25+
font-size: 16px;
26+
line-height: 1.5;
27+
margin: 10px auto;
28+
max-width: 600px;
29+
padding: 20px;
30+
}
1931
</style>
2032
</head>
2133
<body>
34+
<noscript>
35+
<div id="noscript">
36+
<p>
37+
<b>The Guardian</b>
38+
</p>
39+
<p>
40+
<b>
41+
Please
42+
<a
43+
href="https://www.whatismybrowser.com/guides/how-to-enable-javascript/"
44+
>enable JavaScript</a
45+
>
46+
in your browser/device settings and try again.
47+
</b>
48+
</p>
49+
<p>
50+
We use JavaScript to provide a seamless and secure authentication
51+
experience.
52+
</p>
53+
<p>
54+
For further help please contact our customer service team at
55+
<a href="mailto:[email protected]"
56+
>[email protected]</a
57+
>.
58+
</p>
59+
</div>
60+
</noscript>
2261
<div id="okta-login-container"></div>
2362
{{{OktaUtil}}}
2463
<script src="https://cdn.jsdelivr.net/gh/guardian/gateway@main/scripts/okta/okta-login.min.js"></script>

‎src/client/components/MainForm.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import {
3535
} from '@/client/styles/Shared';
3636
import locations from '@/shared/lib/locations';
3737
import { GatewayErrorSummary } from '@/client/components/GatewayErrorSummary';
38+
import { NoScript } from './NoScript';
3839

3940
export interface MainFormProps {
4041
wideLayout?: boolean;
@@ -278,6 +279,7 @@ export const MainForm = ({
278279
onInvalid={(e) => onInvalid && onInvalid(e)}
279280
data-testid="main-form"
280281
>
282+
{recaptchaEnabled && <NoScript />}
281283
{formError && (
282284
<GatewayErrorSummary
283285
gatewayError={formError}

‎src/client/components/NoScript.stories.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
import { Meta } from '@storybook/react';
3+
4+
import { NoScriptContext } from '@/client/components/NoScript';
5+
import { ErrorSummary } from '@guardian/source-development-kitchen/react-components';
6+
import { errorMessageStyles } from '@/client/styles/Shared';
7+
8+
export default {
9+
title: 'Components/NoScriptContext',
10+
component: NoScriptContext,
11+
parameters: {
12+
layout: 'padded',
13+
},
14+
} as Meta;
15+
16+
export const Default = () => (
17+
<ErrorSummary
18+
message="Please enable JavaScript in your browser"
19+
context={<NoScriptContext />}
20+
cssOverrides={errorMessageStyles}
21+
/>
22+
);
23+
Default.storyName = 'default';

‎src/client/components/NoScript.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
import { ErrorSummary } from '@guardian/source-development-kitchen/react-components';
3+
import locations from '@/shared/lib/locations';
4+
import { SUPPORT_EMAIL } from '@/shared/model/Configuration';
5+
import {
6+
errorContextSpacing,
7+
errorContextLastTypeSpacing,
8+
errorMessageStyles,
9+
} from '@/client/styles/Shared';
10+
import { ExternalLink } from './ExternalLink';
11+
12+
export const NoScriptContext = () => (
13+
<>
14+
<p css={errorContextSpacing}>
15+
We use JavaScript to provide a seamless and secure authentication
16+
experience. Please{' '}
17+
<ExternalLink href="https://www.whatismybrowser.com/guides/how-to-enable-javascript/">
18+
enable JavaScript
19+
</ExternalLink>{' '}
20+
in your browser settings and reload the page.
21+
</p>
22+
<p css={[errorContextSpacing, errorContextLastTypeSpacing]}>
23+
For further help please contact our customer service team at{' '}
24+
<a href={locations.SUPPORT_EMAIL_MAILTO}>{SUPPORT_EMAIL}</a>
25+
</p>
26+
</>
27+
);
28+
29+
export const NoScript = () => {
30+
return (
31+
<noscript>
32+
<ErrorSummary
33+
message="Please enable JavaScript in your browser"
34+
context={<NoScriptContext />}
35+
cssOverrides={errorMessageStyles}
36+
/>
37+
</noscript>
38+
);
39+
};

0 commit comments

Comments
 (0)