chore: sign in page improvement (#4224)

web/components/account/index.ts

@@ -2,3 +2,4 @@ export * from "./o-auth";
 export * from "./sign-in-forms";
 export * from "./sign-up-forms";
 export * from "./deactivate-account-modal";
+export * from "./terms-and-conditions";

web/components/account/sign-in-forms/root.tsx

@@ -8,6 +8,7 @@ import {
   SignInPasswordForm,
   OAuthOptions,
   SignInOptionalSetPasswordForm,
+  TermsAndConditions,
 } from "@/components/account";
 import { LatestFeatureBlock } from "@/components/common";
 import { NAVIGATE_TO_SIGNUP } from "@/constants/event-tracker";
@@ -121,6 +122,7 @@ export const SignInRoot = observer(() => {
                 Sign up
               </Link>
             </p>
+            <TermsAndConditions />
           </>
         )}
       <LatestFeatureBlock />

web/components/account/sign-up-forms/root.tsx

@@ -8,6 +8,7 @@ import {
   SignUpOptionalSetPasswordForm,
   SignUpPasswordForm,
   SignUpUniqueCodeForm,
+  TermsAndConditions,
 } from "@/components/account";
 import { NAVIGATE_TO_SIGNIN } from "@/constants/event-tracker";
 import { useApplication, useEventTracker } from "@/hooks/store";
@@ -97,6 +98,7 @@ export const SignUpRoot = observer(() => {
               Sign in
             </Link>
           </p>
+          <TermsAndConditions isSignUp />
         </>
       )}
     </>

web/components/account/terms-and-conditions.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from "react";
+import Link from "next/link";
+
+type Props = {
+  isSignUp?: boolean;
+};
+
+export const TermsAndConditions: FC<Props> = (props) => {
+  const { isSignUp = false } = props;
+  return (
+    <span className="flex items-center justify-center py-6">
+      <p className="text-center text-sm text-onboarding-text-200 whitespace-pre-line">
+        {isSignUp ? "By creating an account" : "By signing in"}, you agree to our{" \n"}
+        <Link href="https://plane.so/legals/terms-and-conditions" target="_blank" rel="noopener noreferrer">
+          <span className="text-sm font-medium underline hover:cursor-pointer">Terms of Service</span>
+        </Link>{" "}
+        and{" "}
+        <Link href="https://plane.so/legals/privacy-policy" target="_blank" rel="noopener noreferrer">
+          <span className="text-sm font-medium underline hover:cursor-pointer">Privacy Policy</span>
+        </Link>
+        {"."}
+      </p>
+    </span>
+  );
+};