Add TOS disclaimer to signup page

Summary: we need to add a little disclaimer on the signup page, similar to: https://newrelic.com/signup

Test Plan:
screenshot:
{F106776}

Reviewers: nick, vihang, nserrino, zasgar, #engineering

Reviewed By: vihang, #engineering

Differential Revision: https://phab.corp.pixielabs.ai/D6902

GitOrigin-RevId: 1621c628603fd07becc337fe2c151fc7d154e0de

src/ui/packages/pixie-components/src/components/auth/auth-box.tsx

@@ -50,12 +50,22 @@ const styles = ({ spacing, palette }: Theme) => createStyles({
   centerSelf: {
     alignSelf: 'center',
   },
+  disclaimer: {
+    fontStyle: 'italic',
+  },
+  disclaimerLink: {
+    color: palette.primary.main,
+    '&:visited': {
+      color: palette.primary.main,
+    },
+  },
 });
 
 export interface AuthBoxProps extends WithStyles<typeof styles> {
   variant: 'login' | 'signup';
   onPrimaryButtonClick?: () => void;
   toggleURL?: string;
+  showTOSDisclaimer?: boolean;
 }
 
 const textByVariant = {
@@ -77,7 +87,7 @@ const textByVariant = {
 
 export const AuthBox = withStyles(styles)((props: AuthBoxProps) => {
   const {
-    onPrimaryButtonClick, toggleURL, variant, classes,
+    onPrimaryButtonClick, toggleURL, variant, classes, showTOSDisclaimer,
   } = props;
   return (
     <PixienautBox>
@@ -93,6 +103,21 @@ export const AuthBox = withStyles(styles)((props: AuthBoxProps) => {
           ))}
         </span>
       </Typography>
+      {
+        showTOSDisclaimer
+          && (
+            <>
+              <Typography variant='subtitle2' className={classes.disclaimer}>
+                By signing up, you&apos;re agreeing to&nbsp;
+                <a href='https://pixielabs.ai/terms/' className={classes.disclaimerLink}>Terms of Service</a>
+                &nbsp;and&nbsp;
+                <a href='https://pixielabs.ai/privacy' className={classes.disclaimerLink}>Privacy Policy</a>
+                .
+              </Typography>
+              <br />
+            </>
+          )
+      }
       <Button
         variant='contained'
         color='primary'

src/ui/src/pages/auth/signup.tsx

@@ -32,6 +32,7 @@ export const SignupPage = withStyles(styles)(({ classes }: WithStyles<typeof sty
           variant='signup'
           toggleURL={`/auth/login${window.location.search}`}
           onPrimaryButtonClick={auth0SignupRequest}
+          showTOSDisclaimer
         />
       </div>
     </div>