From a1667f9a0f40de2be326dee9f0f932629766e605 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Thu, 16 May 2024 19:36:09 +0530
Subject: [PATCH] chore: minor auth related improvements (#4483)

* chore: show `(optional)` in label of non-required fields.

* chore: fix github auth button text color.

* chore: minor ui/ ux improvement in oauth options.
---
 admin/components/common/controller-input.tsx   | 10 ++++++----
 .../components/account/oauth/github-button.tsx |  2 +-
 .../account/auth-forms/auth-root.tsx           |  7 ++-----
 web/components/account/oauth/github-button.tsx |  2 +-
 web/components/account/oauth/oauth-options.tsx | 18 +++++++++++++++---
 5 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/admin/components/common/controller-input.tsx b/admin/components/common/controller-input.tsx
index 8f2265954..0eb215095 100644
--- a/admin/components/common/controller-input.tsx
+++ b/admin/components/common/controller-input.tsx
@@ -2,10 +2,10 @@
 
 import React, { useState } from "react";
 import { Controller, Control } from "react-hook-form";
-// ui
-import { Eye, EyeOff } from "lucide-react";
-import { Input } from "@plane/ui";
 // icons
+import { Eye, EyeOff } from "lucide-react";
+// ui
+import { Input } from "@plane/ui";
 // helpers
 import { cn } from "@/helpers/common.helper";
 
@@ -37,7 +37,9 @@ export const ControllerInput: React.FC<Props> = (props) => {
 
   return (
     <div className="flex flex-col gap-1">
-      <h4 className="text-sm text-custom-text-300">{label}</h4>
+      <h4 className="text-sm text-custom-text-300">
+        {label} {!required && "(optional)"}
+      </h4>
       <div className="relative">
         <Controller
           control={control}
diff --git a/space/components/account/oauth/github-button.tsx b/space/components/account/oauth/github-button.tsx
index 740d59aaf..41e6b7f92 100644
--- a/space/components/account/oauth/github-button.tsx
+++ b/space/components/account/oauth/github-button.tsx
@@ -33,7 +33,7 @@ export const GithubOAuthButton: FC<GithubOAuthButtonProps> = (props) => {
         width={20}
         alt="GitHub Logo"
       />
-      <span className="text-onboarding-text-200">{text}</span>
+      {text}
     </button>
   );
 };
diff --git a/web/components/account/auth-forms/auth-root.tsx b/web/components/account/auth-forms/auth-root.tsx
index 0c0eb4755..8b9df7632 100644
--- a/web/components/account/auth-forms/auth-root.tsx
+++ b/web/components/account/auth-forms/auth-root.tsx
@@ -116,9 +116,6 @@ export const AuthRoot: FC<TAuthRoot> = observer((props) => {
       });
   };
 
-  const isOAuthEnabled =
-    (instance?.config && (instance?.config?.is_google_enabled || instance?.config?.is_github_enabled)) || false;
-
   return (
     <div className="relative flex flex-col space-y-6">
       <AuthHeader
@@ -159,8 +156,8 @@ export const AuthRoot: FC<TAuthRoot> = observer((props) => {
             }}
           />
         )}
-        {isOAuthEnabled && <OAuthOptions />}
-        <TermsAndConditions isSignUp={false} />
+        <OAuthOptions isSignUp={authMode === EAuthModes.SIGN_UP} />
+        <TermsAndConditions isSignUp={authMode === EAuthModes.SIGN_UP} />
       </AuthHeader>
     </div>
   );
diff --git a/web/components/account/oauth/github-button.tsx b/web/components/account/oauth/github-button.tsx
index 53fd6ed4f..317cebe31 100644
--- a/web/components/account/oauth/github-button.tsx
+++ b/web/components/account/oauth/github-button.tsx
@@ -33,7 +33,7 @@ export const GithubOAuthButton: FC<GithubOAuthButtonProps> = (props) => {
         width={20}
         alt="GitHub Logo"
       />
-      <span className="text-onboarding-text-200">{text}</span>
+      {text}
     </button>
   );
 };
diff --git a/web/components/account/oauth/oauth-options.tsx b/web/components/account/oauth/oauth-options.tsx
index b0a228eaf..960b48adf 100644
--- a/web/components/account/oauth/oauth-options.tsx
+++ b/web/components/account/oauth/oauth-options.tsx
@@ -4,10 +4,22 @@ import { GithubOAuthButton, GoogleOAuthButton } from "@/components/account";
 // hooks
 import { useInstance } from "@/hooks/store";
 
-export const OAuthOptions: React.FC = observer(() => {
+type TOAuthOptionProps = {
+  isSignUp?: boolean;
+};
+
+export const OAuthOptions: React.FC<TOAuthOptionProps> = observer((props) => {
+  const { isSignUp = false } = props;
   // hooks
   const { instance } = useInstance();
 
+  const isOAuthEnabled =
+    (instance?.config && (instance?.config?.is_google_enabled || instance?.config?.is_github_enabled)) || false;
+
+  if (!isOAuthEnabled) return null;
+
+  const oauthProviderButtonText = `Sign ${isSignUp ? "up" : "in"} with`;
+
   return (
     <>
       <div className="mt-4 flex items-center">
@@ -18,10 +30,10 @@ export const OAuthOptions: React.FC = observer(() => {
       <div className={`mt-7 grid gap-4 overflow-hidden`}>
         {instance?.config?.is_google_enabled && (
           <div className="flex h-[42px] items-center !overflow-hidden">
-            <GoogleOAuthButton text="SignIn with Google" />
+            <GoogleOAuthButton text={`${oauthProviderButtonText} Google`} />
           </div>
         )}
-        {instance?.config?.is_github_enabled && <GithubOAuthButton text="SignIn with Github" />}
+        {instance?.config?.is_github_enabled && <GithubOAuthButton text={`${oauthProviderButtonText} Github`} />}
       </div>
     </>
   );