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.
This commit is contained in:
Prateek Shourya 2024-05-16 19:36:09 +05:30 committed by GitHub
parent 9b92fd4a16
commit a1667f9a0f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 25 additions and 14 deletions

View file

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