Merge pull request #5184 from topcoder-platform/pass-screen-updates

Pass screen updates

Author: luizrrodrigues

.circleci/config.yml

@@ -259,7 +259,7 @@ workflows:
           filters:
             branches:
               only:
-                - develop
+                - pass-screen-updates
       # Production builds are exectuted 
       # when PR is merged to the master
       # Don't change anything in this configuration

__tests__/shared/components/GUIKit/TextInput/__snapshots__/index.jsx.snap

@@ -9,6 +9,7 @@ exports[`Default render 1`] = `
     defaultValue=""
     onBlur={[Function]}
     onChange={[Function]}
+    onKeyPress={[Function]}
     placeholder=""
     type="text"
   />

src/shared/components/Contentful/PasswordScreen/index.jsx

@@ -21,10 +21,12 @@ export default class PasswordScreen extends React.Component {
 
   onSubmit() {
     const { password } = this.props;
-    const { inputVal } = this.state;
-    this.setState({
-      authorized: password === inputVal,
-      errorMsg: password === inputVal ? '' : 'Password incorrect',
+    this.setState((state) => {
+      const { inputVal } = state;
+      return {
+        authorized: password === inputVal,
+        errorMsg: password === inputVal ? '' : 'Password incorrect',
+      };
     });
   }
 
@@ -41,7 +43,7 @@ export default class PasswordScreen extends React.Component {
       authorized, errorMsg, inputVal,
     } = this.state;
     const {
-      viewPortId, preview, spaceName, environment, baseUrl, title,
+      viewPortId, preview, spaceName, environment, baseUrl, title, btnText, content,
     } = this.props;
     return authorized ? (
       <Viewport
@@ -62,11 +64,24 @@ export default class PasswordScreen extends React.Component {
             onChange={val => this.onPasswordInput(val)}
             errorMsg={errorMsg}
             required
+            type="password"
+            onEnterKey={this.onSubmit}
           />
           <div styleName="cta">
-            <button type="button" styleName="submit" onClick={this.onSubmit} disabled={!inputVal}>SUBMIT</button>
+            <button type="button" styleName="submit" onClick={this.onSubmit} disabled={!inputVal}>{btnText}</button>
           </div>
         </div>
+        {
+          content ? (
+            <Viewport
+              id={content.sys.id}
+              preview={preview}
+              spaceName={spaceName}
+              environment={environment}
+              baseUrl={baseUrl}
+            />
+          ) : null
+        }
       </div>
     );
   }
@@ -78,6 +93,8 @@ PasswordScreen.defaultProps = {
   environment: null,
   baseUrl: '',
   title: 'GET ACCESS WITH PASSWORD',
+  btnText: 'SUBMIT',
+  content: null,
 };
 
 PasswordScreen.propTypes = {
@@ -88,4 +105,6 @@ PasswordScreen.propTypes = {
   environment: PT.string,
   baseUrl: PT.string,
   title: PT.string,
+  btnText: PT.string,
+  content: PT.shape(),
 };

src/shared/components/Contentful/Route.jsx

@@ -71,6 +71,8 @@ function ChildRoutesLoader(props) {
                         environment={environment}
                         baseUrl={url}
                         title={fields.passwordScreenTitle}
+                        btnText={fields.passwordScreenButtonText}
+                        content={fields.passwordScreenContent}
                       />
                     )
                     ) : <Error404 />

src/shared/components/GUIKit/TextInput/index.jsx

@@ -17,6 +17,8 @@ function TextInput({
   onChange,
   required,
   size,
+  type,
+  onEnterKey,
 }) {
   const [val, setVal] = useState(value);
   const delayedOnChange = useRef(
@@ -28,7 +30,7 @@ function TextInput({
     <div className="textInputContainer" styleName={`container ${sizeStyle}`}>
       <input
         defaultValue={value}
-        type="text"
+        type={type}
         placeholder={`${placeholder}${placeholder && required ? ' *' : ''}`}
         styleName={`${value || val ? 'haveValue' : ''} ${errorMsg ? 'haveError' : ''}`}
         onChange={(e) => {
@@ -39,6 +41,11 @@ function TextInput({
           delayedOnChange(e.target.value, onChange);
           setVal(e.target.value);
         }}
+        onKeyPress={(e) => {
+          if (e.key === 'Enter') {
+            onEnterKey();
+          }
+        }}
       />
       {label ? (
         <label htmlFor="textBoxInput">
@@ -58,6 +65,8 @@ TextInput.defaultProps = {
   onChange: () => {},
   required: false,
   size: 'lg',
+  type: 'text',
+  onEnterKey: () => {},
 };
 
 TextInput.propTypes = {
@@ -68,6 +77,8 @@ TextInput.propTypes = {
   onChange: PT.func,
   required: PT.bool,
   size: PT.oneOf(['xs', 'lg']),
+  type: PT.string,
+  onEnterKey: PT.func,
 };
 
 export default TextInput;