diff --git a/.circleci/config.yml b/.circleci/config.yml index 04ea6facaf..6cd5d496b6 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -238,7 +238,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" + />