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

@@ -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}

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>
   );
 };

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 />}
+        <OAuthOptions isSignUp={authMode === EAuthModes.SIGN_UP} />
-        <TermsAndConditions isSignUp={false} />
+        <TermsAndConditions isSignUp={authMode === EAuthModes.SIGN_UP} />
       </AuthHeader>
     </div>
   );

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>
   );
 };

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>
     </>
   );