more ui tweaks

This commit is contained in:
Pas 2025-12-29 16:47:44 -07:00
parent 4f86020ca0
commit bd7029723d
2 changed files with 26 additions and 27 deletions

View file

@ -132,13 +132,6 @@ export function LoginFormPart(props: LoginFormPartProps) {
placeholder={t("auth.login.passphrasePlaceholder") ?? undefined}
passwordToggleable
/>
{(result.error || passkeyResult.error) &&
!result.loading &&
!passkeyResult.loading ? (
<p className="text-authentication-errorText">
{result.error?.message || passkeyResult.error?.message}
</p>
) : null}
{isPasskeySupported() && (
<div className="relative mb-4">
<div className="relative my-4">
@ -167,6 +160,13 @@ export function LoginFormPart(props: LoginFormPartProps) {
</Button>
</div>
)}
{(result.error || passkeyResult.error) &&
!result.loading &&
!passkeyResult.loading ? (
<p className="text-authentication-errorText">
{result.error?.message || passkeyResult.error?.message}
</p>
) : null}
</div>
<LargeCardButtons>

View file

@ -71,30 +71,29 @@ export function PassphraseGeneratePart(props: PassphraseGeneratePartProps) {
/>
<LargeCardButtons>
{isPasskeySupported() && (
<div className="mt-4">
<Button
theme="purple"
onClick={handlePasskeyClick}
loading={passkeyResult.loading}
disabled={passkeyResult.loading}
className="w-full"
>
<Icon icon={Icons.LOCK} className="mr-2" />
{t("auth.generate.usePasskeyInstead")}
</Button>
{passkeyResult.error && (
<p className="mt-2 text-authentication-errorText text-sm text-center">
{passkeyResult.error.message}
</p>
)}
</div>
)}
<Button theme="purple" onClick={() => props.onNext?.(mnemonic)}>
{t("auth.generate.next")}
</Button>
</LargeCardButtons>
{isPasskeySupported() && (
<div className="mt-4">
<Button
theme="secondary"
onClick={handlePasskeyClick}
loading={passkeyResult.loading}
disabled={passkeyResult.loading}
className="w-full"
>
<Icon icon={Icons.LOCK} className="mr-2" />
{t("auth.generate.usePasskeyInstead")}
</Button>
{passkeyResult.error && (
<p className="mt-2 text-authentication-errorText text-sm text-center">
{passkeyResult.error.message}
</p>
)}
</div>
)}
</LargeCard>
);
}