Merge pull request #5148 from topcoder-platform/apollo-site

Apollo site

Author: sushilshinde

.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      

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 ? (
+      <Viewport
+        id={viewPortId}
+        preview={preview}
+        spaceName={spaceName}
+        environment={environment}
+        baseUrl={baseUrl}
+      />
+    ) : (
+      <div styleName="wrapper">
+        <div styleName="container">
+          <h4>{title || 'GET ACCESS WITH PASSWORD'}</h4>
+          <p styleName="hint">Please enter the password you were provided</p>
+          <TextInput
+            placeholder="Password"
+            label="Password"
+            onChange={val => this.onPasswordInput(val)}
+            errorMsg={errorMsg}
+            required
+          />
+          <div styleName="cta">
+            <button type="button" styleName="submit" onClick={this.onSubmit} disabled={!inputVal}>SUBMIT</button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+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,
+};

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

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,15 +52,27 @@ function ChildRoutesLoader(props) {
                   url={fields.socialUrl}
                 />
                 {
+                  // eslint-disable-next-line no-nested-ternary
                   fields.viewport
-                    ? (
+                    ? (!fields.password ? (
                       <Viewport
                         id={fields.viewport.sys.id}
                         preview={preview}
                         spaceName={spaceName}
                         environment={environment}
                         baseUrl={url}
                       />
+                    ) : (
+                      <PasswordScreen
+                        password={fields.password}
+                        viewPortId={fields.viewport.sys.id}
+                        preview={preview}
+                        spaceName={spaceName}
+                        environment={environment}
+                        baseUrl={url}
+                        title={fields.passwordScreenTitle}
+                      />
+                    )
                     ) : <Error404 />
                 }
               </React.Fragment>

src/shared/components/Gigs/GigApply/style.scss

@@ -242,7 +242,7 @@
       }
     }
   }
-/* stylelint-disable */
+  /* stylelint-disable */
   .cta-buttons {
     display: flex;
     justify-content: center;

src/shared/routes/index.jsx

@@ -127,6 +127,15 @@ function Routes({ communityId }) {
           exact
           path={config.START_PAGE_PATH}
         />
+        <Route
+          render={() => (
+            <ContentfulRoute
+              baseUrl="/apollo"
+              id="4Ie8cLj2OvuFqbU46HBGQM"
+            />
+          )}
+          path="/apollo"
+        />
         <Topcoder />
       </Switch>
     </div>