binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: minor auth related improvements (#4483)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

7
web/components/account/auth-forms/auth-root.tsx
View file

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

2
web/components/account/oauth/github-button.tsx
View file

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

18
web/components/account/oauth/oauth-options.tsx
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>
</>
);