From 43c5743c63fd62ffea3c34b732777da45be7f33b Mon Sep 17 00:00:00 2001 From: RajuGangitla Date: Thu, 10 Oct 2024 19:27:13 +0000 Subject: [PATCH 1/5] added last_used --- app/(auth)/login/page.tsx | 29 ++++++++++++++++++------- components/hooks/useLastUsed.tsx | 35 +++++++++++++++++++++++++++++++ lib/webstorage.ts | 36 ++++++++++++++++++++++++++++++++ 3 files changed, 92 insertions(+), 8 deletions(-) create mode 100644 components/hooks/useLastUsed.tsx create mode 100644 lib/webstorage.ts diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx index ab3072986..f209f83a6 100644 --- a/app/(auth)/login/page.tsx +++ b/app/(auth)/login/page.tsx @@ -16,6 +16,7 @@ import Passkey from "@/components/shared/icons/passkey"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; +import { LastUsed, useLastUsed } from "@/components/hooks/useLastUsed"; export default function Login() { const { next } = useParams as { next?: string }; @@ -24,11 +25,14 @@ export default function Login() { const [isLoginWithGoogle, setIsLoginWithGoogle] = useState(false); const [isLoginWithLinkedIn, setIsLoginWithLinkedIn] = useState(false); + const [lastUsed, setLastUsed] = useLastUsed(); const [email, setEmail] = useState(""); const [emailButtonText, setEmailButtonText] = useState( "Continue with Email", ); + console.log(lastUsed, lastUsed) + return (
{/* Left part */} @@ -60,6 +64,7 @@ export default function Login() { }).then((res) => { if (res?.ok && !res?.error) { setEmail(""); + setLastUsed("credentials") setEmailButtonText("Email sent - check your inbox!"); toast.success("Email sent - check your inbox!"); } else { @@ -100,17 +105,19 @@ export default function Login() {

or

@@ -215,6 +228,6 @@ export default function Login() {

- + ); } diff --git a/components/hooks/useLastUsed.tsx b/components/hooks/useLastUsed.tsx new file mode 100644 index 000000000..e315ebba7 --- /dev/null +++ b/components/hooks/useLastUsed.tsx @@ -0,0 +1,35 @@ +import { classNames } from "@/lib/utils"; +import { localStorage } from "@/lib/webstorage"; +import { useState, useEffect } from "react"; + + + + +type LoginType = "saml" | "google" | "credentials" | "linkedin"; + +export function useLastUsed() { + const [lastUsed, setLastUsed] = useState(); + + useEffect(() => { + const storedValue = localStorage.getItem("last_papermark_login"); + if (storedValue) { + setLastUsed(storedValue as LoginType); + } + }, []); + + useEffect(() => { + if (lastUsed) { + localStorage.setItem("last_papermark_login", lastUsed); + } else { + localStorage.removeItem("last_papermark_login"); + } + }, [lastUsed]); + + return [lastUsed, setLastUsed] as const; +} + +export const LastUsed = ({ className }: { className?: string | undefined }) => { + return ( + {("last_used")} + ); +}; diff --git a/lib/webstorage.ts b/lib/webstorage.ts new file mode 100644 index 000000000..1439574f0 --- /dev/null +++ b/lib/webstorage.ts @@ -0,0 +1,36 @@ +/** + * Provides a wrapper around localStorage(and sessionStorage(TODO when needed)) to avoid errors in case of restricted storage access. + * + * TODO: In case of an embed if localStorage is not available(third party), use localStorage of parent(first party) that contains the iframe. + */ +export const localStorage = { + getItem(key: string) { + try { + // eslint-disable-next-line @calcom/eslint/avoid-web-storage + return window.localStorage.getItem(key); + } catch (e) { + // In case storage is restricted. Possible reasons + // 1. Third Party Context in Chrome Incognito mode. + return null; + } + }, + setItem(key: string, value: string) { + try { + // eslint-disable-next-line @calcom/eslint/avoid-web-storage + window.localStorage.setItem(key, value); + } catch (e) { + // In case storage is restricted. Possible reasons + // 1. Third Party Context in Chrome Incognito mode. + // 2. Storage limit reached + return; + } + }, + removeItem: (key: string) => { + try { + // eslint-disable-next-line @calcom/eslint/avoid-web-storage + window.localStorage.removeItem(key); + } catch (e) { + return; + } + }, +}; From 1fd5a7df9d00a346ddcdb21135cea513510d24bb Mon Sep 17 00:00:00 2001 From: RajuGangitla Date: Fri, 11 Oct 2024 17:32:28 +0000 Subject: [PATCH 2/5] improved last used --- app/(auth)/login/page.tsx | 50 +++++++++++++++++--------------- components/hooks/useLastUsed.tsx | 9 +++++- 2 files changed, 34 insertions(+), 25 deletions(-) diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx index f209f83a6..09d0e24b4 100644 --- a/app/(auth)/login/page.tsx +++ b/app/(auth)/login/page.tsx @@ -109,35 +109,37 @@ export default function Login() { } relative focus:shadow-outline transform rounded px-4 py-2 text-white transition-colors duration-300 ease-in-out focus:outline-none`} > {emailButtonText} - {lastUsed === "saml" && } + {lastUsed === "credentials" && }

or

- +
+ +