diff --git a/.circleci/config.yml b/.circleci/config.yml
index 1e58d6ae06..06cae58271 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -237,7 +237,7 @@ workflows:
filters:
branches:
only:
- - hot-fix
+ - apollo-site
# This is alternate dev env for parallel testing
- "build-qa":
context : org-global
diff --git a/src/shared/components/Contentful/PasswordScreen/index.jsx b/src/shared/components/Contentful/PasswordScreen/index.jsx
new file mode 100644
index 0000000000..a323ff6a46
--- /dev/null
+++ b/src/shared/components/Contentful/PasswordScreen/index.jsx
@@ -0,0 +1,91 @@
+/**
+ * High order component that apply front-side password protection
+ * before loading a Contentful Viewport. It uses sessionStorage for working.
+ */
+import PT from 'prop-types';
+import React from 'react';
+import Viewport from 'components/Contentful/Viewport';
+import TextInput from 'components/GUIKit/TextInput';
+
+import './style.scss';
+
+export default class PasswordScreen extends React.Component {
+ state = {};
+
+ constructor(props) {
+ super(props);
+
+ this.onSubmit = this.onSubmit.bind(this);
+ this.onPasswordInput = this.onPasswordInput.bind(this);
+ }
+
+ onSubmit() {
+ const { password } = this.props;
+ const { inputVal } = this.state;
+ this.setState({
+ authorized: password === inputVal,
+ errorMsg: password === inputVal ? '' : 'Password incorrect',
+ });
+ }
+
+ onPasswordInput(inputVal) {
+ const update = {
+ inputVal,
+ };
+ if (!inputVal) update.errorMsg = '';
+ this.setState(update);
+ }
+
+ render() {
+ const {
+ authorized, errorMsg, inputVal,
+ } = this.state;
+ const {
+ viewPortId, preview, spaceName, environment, baseUrl, title,
+ } = this.props;
+ return authorized ? (
+
+ ) : (
+
+
+
{title || 'GET ACCESS WITH PASSWORD'}
+
Please enter the password you were provided
+
this.onPasswordInput(val)}
+ errorMsg={errorMsg}
+ required
+ />
+
+
+
+
+
+ );
+ }
+}
+
+PasswordScreen.defaultProps = {
+ preview: false,
+ spaceName: null,
+ environment: null,
+ baseUrl: '',
+ title: 'GET ACCESS WITH PASSWORD',
+};
+
+PasswordScreen.propTypes = {
+ password: PT.string.isRequired,
+ viewPortId: PT.string.isRequired,
+ preview: PT.bool,
+ spaceName: PT.string,
+ environment: PT.string,
+ baseUrl: PT.string,
+ title: PT.string,
+};
diff --git a/src/shared/components/Contentful/PasswordScreen/style.scss b/src/shared/components/Contentful/PasswordScreen/style.scss
new file mode 100644
index 0000000000..74d6ddfd05
--- /dev/null
+++ b/src/shared/components/Contentful/PasswordScreen/style.scss
@@ -0,0 +1,51 @@
+@import "~styles/mixins";
+@import "~components/Contentful/default";
+@import "~components/GUIKit/Assets/Styles/default";
+
+.wrapper {
+ background-color: #e9e9e9;
+ padding: 86px 0 121px 0;
+ min-height: 100vh;
+
+ .container {
+ text-align: center;
+ border-radius: 10px;
+ max-width: 544px;
+ max-height: 371px;
+ margin: 0 auto;
+ padding: 31px 65px;
+ background-color: #fff;
+
+ @include gui-kit-headers;
+ @include gui-kit-content;
+
+ h4 {
+ margin-bottom: 5px;
+ }
+
+ .hint {
+ font-size: 14px;
+ margin-bottom: 30px;
+ }
+
+ .cta {
+ margin: 50px auto 29px auto;
+ }
+
+ .submit {
+ outline: none;
+
+ @include primary-green;
+ @include md;
+
+ &:disabled,
+ &:hover:disabled {
+ background-color: #e9e9e9 !important;
+ border: none !important;
+ text-decoration: none !important;
+ color: #fafafb !important;
+ box-shadow: none !important;
+ }
+ }
+ }
+}
diff --git a/src/shared/components/Contentful/Route.jsx b/src/shared/components/Contentful/Route.jsx
index 204a44064c..18c23943f8 100644
--- a/src/shared/components/Contentful/Route.jsx
+++ b/src/shared/components/Contentful/Route.jsx
@@ -12,6 +12,7 @@ import PT from 'prop-types';
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Viewport from 'components/Contentful/Viewport';
+import PasswordScreen from 'components/Contentful/PasswordScreen';
// Concatenates a base and segment and handles optional trailing slashes
const buildUrl = (base, segment) => `${_.trimEnd(base, '/')}/${_.trim(segment, '/')}`;
@@ -51,8 +52,9 @@ function ChildRoutesLoader(props) {
url={fields.socialUrl}
/>
{
+ // eslint-disable-next-line no-nested-ternary
fields.viewport
- ? (
+ ? (!fields.password ? (
+ ) : (
+
+ )
) :
}
diff --git a/src/shared/components/Gigs/GigApply/style.scss b/src/shared/components/Gigs/GigApply/style.scss
index c5b059206c..6a468ed64b 100644
--- a/src/shared/components/Gigs/GigApply/style.scss
+++ b/src/shared/components/Gigs/GigApply/style.scss
@@ -242,7 +242,7 @@
}
}
}
-/* stylelint-disable */
+ /* stylelint-disable */
.cta-buttons {
display: flex;
justify-content: center;
diff --git a/src/shared/routes/index.jsx b/src/shared/routes/index.jsx
index 94136aa5b7..4e29cf8a06 100644
--- a/src/shared/routes/index.jsx
+++ b/src/shared/routes/index.jsx
@@ -127,6 +127,15 @@ function Routes({ communityId }) {
exact
path={config.START_PAGE_PATH}
/>
+ (
+
+ )}
+ path="/apollo"
+ />