shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove phantom spacing below social providers in auth form (closes #334) (#364)

Browse Source
This commit is contained in:
Matt
2026-02-07 15:34:06 -04:00
committed by GitHub
parent 346ddc16be
commit 07db7409cb
1 changed files with 53 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
apps/web/src/components/AuthForm.tsx
View File

@@ -361,8 +361,8 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
})} })}
</div> </div>
)} )}
<form onSubmit={handleSubmit(onSubmit)}> {!(isCredentialsEnabled || isMagicLinkAvailable) &&
{!isCredentialsEnabled && socialProviders?.length === 0 && ( socialProviders?.length === 0 && (
<div className="flex w-full items-center gap-4"> <div className="flex w-full items-center gap-4">
<div className="h-[1px] w-1/3 bg-light-600 dark:bg-dark-600" /> <div className="h-[1px] w-1/3 bg-light-600 dark:bg-dark-600" />
<span className="text-center text-sm text-light-900 dark:text-dark-900"> <span className="text-center text-sm text-light-900 dark:text-dark-900">
@@ -371,65 +371,62 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
<div className="h-[1px] w-1/3 bg-light-600 dark:bg-dark-600" /> <div className="h-[1px] w-1/3 bg-light-600 dark:bg-dark-600" />
</div> </div>
)} )}
{!isCredentialsEnabled && socialProviders?.length !== 0 && ( {(isCredentialsEnabled || isMagicLinkAvailable) && (
<div className="mb-[1.5rem] flex w-full items-center gap-4"> <form onSubmit={handleSubmit(onSubmit)}>
<div className="h-[1px] w-full bg-light-600 dark:bg-dark-600" /> {socialProviders?.length !== 0 && (
<span className="text-sm text-light-900 dark:text-dark-900"> <div className="mb-[1.5rem] flex w-full items-center gap-4">
{t`or`} <div className="h-[1px] w-full bg-light-600 dark:bg-dark-600" />
</span> <span className="text-sm text-light-900 dark:text-dark-900">
<div className="h-[1px] w-full bg-light-600 dark:bg-dark-600" /> {t`or`}
</div> </span>
)} <div className="h-[1px] w-full bg-light-600 dark:bg-dark-600" />
<div className="space-y-2">
{isSignUp && isCredentialsEnabled && (
<div>
<Input
{...register("name", { required: true })}
placeholder={t`Enter your name`}
/>
{errors.name && (
<p className="mt-2 text-xs text-red-400">
{t`Please enter a valid name`}
</p>
)}
</div> </div>
)} )}
{(isCredentialsEnabled || isMagicLinkAvailable) && ( <div className="space-y-2">
<> {isSignUp && isCredentialsEnabled && (
<div> <div>
<Input <Input
{...register("email", { required: true })} {...register("name", { required: true })}
placeholder={t`Enter your email address`} placeholder={t`Enter your name`}
/> />
{errors.email && ( {errors.name && (
<p className="mt-2 text-xs text-red-400"> <p className="mt-2 text-xs text-red-400">
{t`Please enter a valid email address`} {t`Please enter a valid name`}
</p> </p>
)} )}
</div> </div>
)}
{isCredentialsEnabled && ( <div>
<div> <Input
<Input {...register("email", { required: true })}
type="password" placeholder={t`Enter your email address`}
{...register("password", { required: true })} />
placeholder={t`Enter your password`} {errors.email && (
/> <p className="mt-2 text-xs text-red-400">
{errors.password && ( {t`Please enter a valid email address`}
<p className="mt-2 text-xs text-red-400"> </p>
{errors.password.message ??
t`Please enter a valid password`}
</p>
)}
</div>
)} )}
</> </div>
)}
{loginError && ( {isCredentialsEnabled && (
<p className="mt-2 text-xs text-red-400">{loginError}</p> <div>
)} <Input
</div> type="password"
{(isCredentialsEnabled || isMagicLinkAvailable) && ( {...register("password", { required: true })}
placeholder={t`Enter your password`}
/>
{errors.password && (
<p className="mt-2 text-xs text-red-400">
{errors.password.message ??
t`Please enter a valid password`}
</p>
)}
</div>
)}
{loginError && (
<p className="mt-2 text-xs text-red-400">{loginError}</p>
)}
</div>
<div className="mt-[1.5rem] flex items-center gap-4"> <div className="mt-[1.5rem] flex items-center gap-4">
<Button <Button
isLoading={isLoginWithEmailPending} isLoading={isLoginWithEmailPending}
@@ -441,8 +438,11 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
{isMagicLinkMode ? t`magic link` : t`email`} {isMagicLinkMode ? t`magic link` : t`email`}
</Button> </Button>
</div> </div>
)} </form>
</form> )}
{!(isCredentialsEnabled || isMagicLinkAvailable) && loginError && (
<p className="mt-2 text-xs text-red-400">{loginError}</p>
)}
</div> </div>
); );
} }