CodeCow/stack
1
0
Fork 0
mirror of https://github.com/stack-auth/stack.git synced 2026-06-13 21:01:21 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Fixed separator when only Passkey is enabled (#389)

Browse Source 
Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>
This commit is contained in:
hopleus 2025-01-27 23:33:26 +03:00 committed by GitHub
parent 4c6a261249
commit 00b9e250f4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/stack/src/components-page/auth-page.tsx
View File

@ -85,7 +85,9 @@ function Inner (props: Props) {
return <PredefinedMessageCard type='signUpDisabled' fullPage={props.fullPage} />;
}
const enableSeparator = (project.config.credentialEnabled || project.config.magicLinkEnabled) && project.config.oauthProviders.length > 0;
const hasOAuthProviders = project.config.oauthProviders.length > 0;
const hasPasskey = (project.config.passkeyEnabled === true && props.type === "sign-in");
const enableSeparator = (project.config.credentialEnabled || project.config.magicLinkEnabled) && (hasOAuthProviders || hasPasskey);
return (
<MaybeFullPage fullPage={!!props.fullPage}>
@ -114,10 +116,12 @@ function Inner (props: Props) {
</Typography>
)}
</div>
<div className='gap-4 flex flex-col items-stretch stack-scope'>
<OAuthButtonGroup type={props.type} mockProject={props.mockProject} />
{project.config.passkeyEnabled && props.type === "sign-in" && <PasskeyButton type={props.type} />}
</div>
{(hasOAuthProviders || hasPasskey) && (
<div className='gap-4 flex flex-col items-stretch stack-scope'>
{hasOAuthProviders && <OAuthButtonGroup type={props.type} mockProject={props.mockProject} />}
{hasPasskey && <PasskeyButton type={props.type} />}
</div>
)}
{enableSeparator && <SeparatorWithText text={t('Or continue with')} />}
{project.config.credentialEnabled && project.config.magicLinkEnabled ? (
@ -139,9 +143,12 @@ function Inner (props: Props) {
props.type === 'sign-up' ? <CredentialSignUp noPasswordRepeat={props.noPasswordRepeat} /> : <CredentialSignIn/>
) : project.config.magicLinkEnabled ? (
<MagicLinkSignIn/>
) : project.config.oauthProviders.length === 0 ? <Typography variant={"destructive"} className="text-center">{t("No authentication method enabled.")}</Typography> : null}
) : !(hasOAuthProviders || hasPasskey) ? <Typography variant={"destructive"} className="text-center">{t("No authentication method enabled.")}</Typography> : null}
{props.extraInfo && (
<div className='flex flex-col items-center text-center text-sm text-gray-500 mt-2'>
<div className={cn('flex flex-col items-center text-center text-sm text-gray-500', {
'mt-2': project.config.credentialEnabled || project.config.magicLinkEnabled,
'mt-6': !(project.config.credentialEnabled || project.config.magicLinkEnabled),
})}>
<div>{props.extraInfo}</div>
</div>
)}