[#5376][YW] Add additional checkbox in user registration flow during …

…Platform installation Summary: Add additional checkbox field that user must accept in order to register a customer. Modify existing YBCheckBox to work with Formik and remove unused YBFormCheckbox file. Add styling to checkbox to fit better with dark background. Test Plan: Go to `/register` route and observe the "Register" submit button should be greyed out. New checkbox and EULA text should look like this: {F15076} Filling out the form will cause the "Register" button to be clickable: {F15077} Reviewers: ssutar, mjoshi, sshevchenko Reviewed By: sshevchenko Subscribers: ui Differential Revision: https://phabricator.dev.yugabyte.com/D10635
yugabyte · Feb 18, 2021 · 7757ccd · 7757ccd
1 parent c7b48f0
commit 7757ccd
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 56 deletions.
diff --git a/managed/ui/src/components/common/forms/RegisterForm/RegisterForm.js b/managed/ui/src/components/common/forms/RegisterForm/RegisterForm.js
@@ -2,7 +2,7 @@
 
 import React, { Component } from 'react';
 import { PageHeader } from 'react-bootstrap';
-import { YBButton, YBFormInput, YBSegmentedButtonGroup } from '../fields';
+import { YBButton, YBCheckBox, YBFormInput, YBSegmentedButtonGroup } from '../fields';
 import YBLogo from '../../YBLogo/YBLogo';
 import { browserHistory } from 'react-router';
 import { getPromiseState } from '../../../../utils/PromiseUtils';
@@ -45,15 +45,18 @@ class RegisterForm extends Component {
 
       confirmPassword: Yup.string()
         .oneOf([Yup.ref('password'), null], "Passwords don't match")
-        .required('Password confirm is required')
+        .required('Password confirm is required'),
+
+      confirmEULA: Yup.bool().oneOf([true], 'Please accept the agreement to continue.')
     });
 
     const initialValues = {
       code: 'dev',
       name: '',
       email: '',
       password: '',
-      confirmPassword: ''
+      confirmPassword: '',
+      confirmEULA: false
     };
 
     return (
@@ -71,7 +74,7 @@ class RegisterForm extends Component {
               setSubmitting(false);
             }}
           >
-            {({ handleSubmit, isSubmitting }) => (
+            {({ handleSubmit, isSubmitting, isValid }) => (
               <Form className="form-register" onSubmit={handleSubmit}>
                 <div
                   className={`alert alert-danger form-error-alert ${authToken.error ? '' : 'hide'}`}
@@ -93,12 +96,16 @@ class RegisterForm extends Component {
                     type="password"
                     component={YBFormInput}
                     label="Confirm Password"
-                  />
+                  />                  
                 </div>
-                <div className="clearfix">
+                <div className="clearfix form-register__footer">
+                  <div className="confirm-eula">
+                    <Field name="confirmEULA" component={YBCheckBox} />
+                    <div>I agree to Yugabyte, Inc's <a href="https://www.yugabyte.com/eula/" target="_blank" rel="noreferrer noopener">End User License Agreement</a>.</div>
+                  </div>
                   <YBButton
                     btnType="submit"
-                    disabled={isSubmitting || getPromiseState(authToken).isLoading()}
+                    disabled={isSubmitting || !isValid || getPromiseState(authToken).isLoading()}
                     btnClass="btn btn-orange pull-right"
                     btnText="Register"
                   />

diff --git a/managed/ui/src/components/common/forms/RegisterForm/RegisterForm.scss b/managed/ui/src/components/common/forms/RegisterForm/RegisterForm.scss
@@ -5,3 +5,44 @@
     margin-top: 0px;
   }
 }
+
+.dark-background .confirm-eula {
+  > label {
+    margin-right: 6px;
+  }
+
+  .yb-input-checkbox {
+    .yb-input-checkbox__inner {
+      background-color: transparent;
+    }
+
+    &:hover .yb-input-checkbox__inner {
+      border: 1px solid #ef5824;
+    }
+
+    input:checked + .yb-input-checkbox__inner {
+      border-color: #ef5824;
+    }
+  }
+}
+
+.form-register {
+  &__footer {
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+    margin-left: 132px;
+
+    .btn {
+      margin: 0 0 0 auto;
+    }
+
+    .confirm-eula {
+      flex: 0 1 60%;
+      display: inherit;
+
+    }
+  }
+}
+
+
diff --git a/managed/ui/src/components/common/forms/fields/YBButton.js b/managed/ui/src/components/common/forms/fields/YBButton.js
@@ -26,7 +26,7 @@ export default class YBButton extends PureComponent {
         onClick={this.props.onClick}
         bsSize={btnSize}
         bsStyle={btnStyle}
-        disabled={disabled}
+        disabled={!!disabled}
         {...otherProps}
       >
         {loading ? (

diff --git a/managed/ui/src/components/common/forms/fields/YBCheckBox.js b/managed/ui/src/components/common/forms/fields/YBCheckBox.js
@@ -7,11 +7,14 @@ import { isValidObject } from '../../../../utils/ObjectUtils';
 
 export default class YBCheckBox extends Component {
   render() {
-    const { input, label, checkState, onClick, disabled } = this.props;
+    const { input, field, label, checkState, onClick, disabled } = this.props;
     const onCheckClick = (event) => {
       if (input && input.onChange) {
         input.onChange(event);
       }
+      if (field && field.onChange) {
+        field.onChange(event);
+      }
       if (isValidObject(onClick)) {
         onClick(event);
       }
@@ -23,7 +26,7 @@ export default class YBCheckBox extends Component {
             className="yb-input-checkbox__input"
             {...input}
             type="checkbox"
-            name={this.props.name}
+            name={field && field.name}
             defaultChecked={checkState}
             id={this.props.id}
             onClick={onCheckClick}

diff --git a/managed/ui/src/components/common/forms/fields/YBFormCheckbox.js b/managed/ui/src/components/common/forms/fields/YBFormCheckbox.js