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.

Sign up for GitHub

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

Jump to bottom

last used indicator on login page fixed #850

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

last used indicator on login page fixed #850

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
038c17b
last used indicator fixed
sahiladit Oct 12, 2024
485efc8
Update page.tsx
sahiladit Oct 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 14 additions & 9 deletions app/(auth)/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export default function Login() {
const [isLoginWithLinkedIn, setIsLoginWithLinkedIn] =
useState<boolean>(false);
const [lastUsed, setLastUsed] = useLastUsed();
const [hasInteracted, setHasInteracted] = useState<boolean>(false);
const authMethods = ["google", "email", "linkedin", "passkey"] as const;
type AuthMethod = (typeof authMethods)[number];
const [clickedMethod, setClickedMethod] = useState<AuthMethod | undefined>(
Expand Down Expand Up @@ -61,6 +62,7 @@ export default function Login() {
onSubmit={(e) => {
e.preventDefault();
setClickedMethod("email");
setHasInteracted(true);
signIn("email", {
email: email,
redirect: false,
Expand Down Expand Up @@ -117,7 +119,7 @@ export default function Login() {
} w-full focus:shadow-outline transform rounded px-4 py-2 text-white transition-colors duration-300 ease-in-out focus:outline-none`}
>
{emailButtonText}
{lastUsed === "credentials" && <LastUsed />}
{lastUsed === "credentials" && hasInteracted && <LastUsed />}
</Button>
</div>
</form>
Expand All @@ -126,8 +128,9 @@ export default function Login() {
<div className="relative">
<Button
onClick={() => {
setLastUsed("google")
setIsLoginWithGoogle(true);
setLastUsed("google");
setHasInteracted(true);
signIn("google", {
...(next && next.length > 0 ? { callbackUrl: next } : {}),
}).then((res) => {
Expand All @@ -145,13 +148,15 @@ export default function Login() {
<Google className="h-5 w-5" />
)}
<span>Continue with Google</span>
{lastUsed === "google" && <LastUsed />}
{lastUsed === "google" && hasInteracted && <LastUsed />}
</Button>
</div>
<div className="relative">
<Button
onClick={() => {
setClickedMethod("linkedin");
setLastUsed("linkedin");
setHasInteracted(true);
signIn("linkedin", {
...(next && next.length > 0 ? { callbackUrl: next } : {}),
}).then((res) => {
Expand All @@ -166,25 +171,25 @@ export default function Login() {
>
<LinkedIn />
<span>Continue with LinkedIn</span>
{lastUsed === "linkedin" && <LastUsed />}
{lastUsed === "linkedin" && hasInteracted && <LastUsed />}
</Button>
</div>
<div className="relative">
<Button
onClick={() => {
setLastUsed("saml")
setLastUsed("saml");
setHasInteracted(true);
signInWithPasskey({
tenantId: process.env.NEXT_PUBLIC_HANKO_TENANT_ID as string,
})
}
}
});
}}
variant="outline"
disabled={clickedMethod && clickedMethod !== "passkey"}
className="w-full flex items-center justify-center space-x-2 border border-gray-200 bg-gray-100 font-normal text-gray-900 hover:bg-gray-200 hover:text-gray-900"
>
<Passkey className="h-4 w-4" />
<span>Continue with a passkey</span>
{lastUsed === "saml" && <LastUsed />}
{lastUsed === "saml" && hasInteracted && <LastUsed />}
</Button>
</div>
</div>
Expand Down
Loading