Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: tweak sign-in page design #6774

Merged
merged 10 commits into from
Oct 16, 2023
Merged

feat: tweak sign-in page design #6774

merged 10 commits into from
Oct 16, 2023

Conversation

balazsorban44
Copy link
Member

@balazsorban44 balazsorban44 commented Feb 21, 2023

Instead of requiring two distinct logos and colors (light/dark) for each provider, we could default to use the light version for both themes and make the dark options optional. Most of the provider buttons look good on both color schemes already.

Before merging, I would like to implement some proper hover/focus state for our buttons for better a11y

@github-actions github-actions bot added core Refers to `@auth/core` providers labels Feb 21, 2023
@vercel
Copy link

vercel bot commented Feb 21, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
auth-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 14, 2023 2:41pm
2 Ignored Deployments
Name Status Preview Comments Updated (UTC)
auth-docs-nextra ⬜️ Ignored (Inspect) Visit Preview Oct 14, 2023 2:41pm
next-auth-docs ⬜️ Ignored (Inspect) Visit Preview Oct 14, 2023 2:41pm

return (
<div key={provider.id} className="provider">
{provider.type === "oauth" || provider.type === "oidc" ? (
<form action={provider.signinUrl} method="POST">

Check warning

Code scanning / CodeQL

Exception text reinterpreted as HTML Medium

Exception text
is reinterpreted as HTML without escaping meta-characters.
height={24}
width={24}
id="provider-logo"
src={logo}

Check warning

Code scanning / CodeQL

Exception text reinterpreted as HTML Medium

Exception text
is reinterpreted as HTML without escaping meta-characters.
height={24}
width={24}
id="provider-logo-dark"
src={logoDark}

Check warning

Code scanning / CodeQL

Exception text reinterpreted as HTML Medium

Exception text
is reinterpreted as HTML without escaping meta-characters.
providers[i - 1].type !== "email" &&
providers[i - 1].type !== "credentials" && <hr />}
{provider.type === "email" && (
<form action={provider.signinUrl} method="POST">

Check warning

Code scanning / CodeQL

Exception text reinterpreted as HTML Medium

Exception text
is reinterpreted as HTML without escaping meta-characters.
</form>
)}
{provider.type === "credentials" && (
<form action={provider.callbackUrl} method="POST">

Check warning

Code scanning / CodeQL

Exception text reinterpreted as HTML Medium

Exception text
is reinterpreted as HTML without escaping meta-characters.
@balazsorban44 balazsorban44 added the enhancement New feature or request label Mar 24, 2023
packages/core/src/lib/pages/signin.tsx Fixed Show fixed Hide fixed
packages/core/src/lib/pages/signin.tsx Fixed Show fixed Hide fixed
packages/core/src/lib/pages/signin.tsx Fixed Show fixed Hide fixed
packages/core/src/lib/pages/signin.tsx Fixed Show fixed Hide fixed
packages/core/src/lib/pages/signin.tsx Fixed Show fixed Hide fixed
packages/core/src/lib/pages/signin.tsx Fixed Show fixed Hide fixed
packages/core/src/lib/pages/signin.tsx Fixed Show fixed Hide fixed
src={`${
provider.style.logo.startsWith("/") ? logos : ""
}${provider.style.logoDark}`}
{theme.logo && <img src={theme.logo} alt="Logo" className="logo" />}

Check warning

Code scanning / CodeQL

Exception text reinterpreted as HTML Medium

Exception text
is reinterpreted as HTML without escaping meta-characters.
@ThangHuuVu ThangHuuVu merged commit 9af5887 into main Oct 16, 2023
11 of 12 checks passed
@ThangHuuVu ThangHuuVu deleted the feat/simplify-logos branch October 16, 2023 00:57
@ThangHuuVu ThangHuuVu mentioned this pull request Oct 18, 2023
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
core Refers to `@auth/core` enhancement New feature or request providers
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants