-
Notifications
You must be signed in to change notification settings - Fork 723
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: added last_used in login page (#718)
* added last_used * improved last used * Update lib/webstorage.ts * Update lib/webstorage.ts * Update lib/webstorage.ts --------- Co-authored-by: Marc Seitz <4049052+mfts@users.noreply.github.com>
- Loading branch information
1 parent
214201d
commit 80299d2
Showing
3 changed files
with
164 additions
and
59 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| 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<LoginType>(); | ||
|
|
||
| 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 ( | ||
| <> | ||
| <div className="absolute left-11 sm:left-1 top-1/2 -translate-y-1/2 -translate-x-full"> | ||
| <div className={`bg-[#333333] text-white text-xs py-1 px-2 rounded-md relative ${className} z-[999]`}> | ||
| Last used | ||
| <div className={`absolute -right-1 top-1/2 -translate-y-1/2 w-0 h-0 border-t-4 border-b-4 border-l-4 border-r-0 border-transparent border-l-[#333333] `}></div> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| 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 | ||
| 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 | ||
| window.localStorage.removeItem(key); | ||
| } catch (e) { | ||
| return; | ||
| } | ||
| }, | ||
| }; |