From 247a407df678ac43073f2d359c6dec4c515d3acb Mon Sep 17 00:00:00 2001 From: vivganes Date: Fri, 7 Apr 2023 22:53:42 +0530 Subject: [PATCH 1/5] fix #495 --- packages/app/src/Pages/Login.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/Pages/Login.tsx b/packages/app/src/Pages/Login.tsx index dffc7d7e..8c200a0d 100644 --- a/packages/app/src/Pages/Login.tsx +++ b/packages/app/src/Pages/Login.tsx @@ -279,7 +279,7 @@ export default function LoginPage() {
setKey(e.target.value)} From 77325be3e240d6429f9468743d9309c75f32a3d9 Mon Sep 17 00:00:00 2001 From: vivganes Date: Sat, 8 Apr 2023 15:29:11 +0530 Subject: [PATCH 2/5] password field only for nsec --- packages/app/src/Pages/Login.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/app/src/Pages/Login.tsx b/packages/app/src/Pages/Login.tsx index 8c200a0d..83dc60b2 100644 --- a/packages/app/src/Pages/Login.tsx +++ b/packages/app/src/Pages/Login.tsx @@ -279,12 +279,20 @@ export default function LoginPage() {
setKey(e.target.value)} />
+

+ {key?.startsWith("nsec") && ( + + We noticed that you are entering a secret key starting with nsec. We are masking your input to protect + your privacy. + + )} +

{error.length > 0 ? {error} : null}

Date: Sat, 8 Apr 2023 18:54:45 +0530 Subject: [PATCH 3/5] eye icon for privacy --- packages/app/public/icons.svg | 14 ++++++++++++++ packages/app/src/Icons/Icon.tsx | 5 ++++- packages/app/src/Pages/Login.css | 7 +++++++ packages/app/src/Pages/Login.tsx | 31 +++++++++++++++++++++++++++---- 4 files changed, 52 insertions(+), 5 deletions(-) diff --git a/packages/app/public/icons.svg b/packages/app/public/icons.svg index 6ef0b3cd..d1e4cf5f 100644 --- a/packages/app/public/icons.svg +++ b/packages/app/public/icons.svg @@ -354,5 +354,19 @@ stroke-linejoin="round" /> + + + + + + \ No newline at end of file diff --git a/packages/app/src/Icons/Icon.tsx b/packages/app/src/Icons/Icon.tsx index 6e1ad15b..6d9c6400 100644 --- a/packages/app/src/Icons/Icon.tsx +++ b/packages/app/src/Icons/Icon.tsx @@ -1,7 +1,10 @@ +import { MouseEventHandler } from "react"; + type Props = { name: string; size?: number; className?: string; + onClick?: MouseEventHandler; }; const Icon = (props: Props) => { @@ -9,7 +12,7 @@ const Icon = (props: Props) => { const href = "/icons.svg#" + props.name; return ( - + ); diff --git a/packages/app/src/Pages/Login.css b/packages/app/src/Pages/Login.css index 85cf3010..ed7131f3 100644 --- a/packages/app/src/Pages/Login.css +++ b/packages/app/src/Pages/Login.css @@ -120,6 +120,13 @@ font-size: 16px; } +.login-container input[type="password"] { + border: none; + background-color: var(--gray-secondary); + padding: 12px 16px; + font-size: 16px; +} + .login-container h1 { color: var(--font-color); font-style: normal; diff --git a/packages/app/src/Pages/Login.tsx b/packages/app/src/Pages/Login.tsx index 83dc60b2..19962093 100644 --- a/packages/app/src/Pages/Login.tsx +++ b/packages/app/src/Pages/Login.tsx @@ -16,6 +16,7 @@ import ZapButton from "Element/ZapButton"; import useImgProxy from "Hooks/useImgProxy"; import messages from "./messages"; +import Icon from "Icons/Icon"; interface ArtworkEntry { name: string; @@ -69,6 +70,8 @@ export default function LoginPage() { const [key, setKey] = useState(""); const [error, setError] = useState(""); const [art, setArt] = useState(); + const [isMasking, setMasking] = useState(false); + const [suggestMasking, setSuggestMasking] = useState(false); const { formatMessage } = useIntl(); const { proxy } = useImgProxy(); const hasNip7 = "nostr" in window; @@ -85,6 +88,14 @@ export default function LoginPage() { proxy(ret.link).then(a => setArt({ ...ret, link: a })); }, []); + useEffect(() => { + if (key.startsWith("nsec") || key.match(MnemonicRegex)) { + setSuggestMasking(true); + } else { + setSuggestMasking(false); + } + }, [key]); + async function doLogin() { const insecureMsg = formatMessage({ defaultMessage: @@ -263,6 +274,10 @@ export default function LoginPage() { ); } + const flipMask = function () { + setMasking(!isMasking); + }; + return (

@@ -279,17 +294,25 @@ export default function LoginPage() {
setKey(e.target.value)} /> +

- {key?.startsWith("nsec") && ( + {suggestMasking && !isMasking && ( - We noticed that you are entering a secret key starting with nsec. We are masking your input to protect - your privacy. + )}

From 2d50b1995c29f6b020044ae39e78ae4cbcc4fd1d Mon Sep 17 00:00:00 2001 From: vivganes Date: Sat, 8 Apr 2023 22:53:20 +0530 Subject: [PATCH 4/5] icon changed --- packages/app/public/icons.svg | 28 ++++++++++++++++++---------- packages/app/src/Pages/Login.tsx | 21 +-------------------- 2 files changed, 19 insertions(+), 30 deletions(-) diff --git a/packages/app/public/icons.svg b/packages/app/public/icons.svg index d1e4cf5f..aa7fafc1 100644 --- a/packages/app/public/icons.svg +++ b/packages/app/public/icons.svg @@ -355,18 +355,26 @@ /> - + + - + \ No newline at end of file diff --git a/packages/app/src/Pages/Login.tsx b/packages/app/src/Pages/Login.tsx index 19962093..a2a18da3 100644 --- a/packages/app/src/Pages/Login.tsx +++ b/packages/app/src/Pages/Login.tsx @@ -70,8 +70,7 @@ export default function LoginPage() { const [key, setKey] = useState(""); const [error, setError] = useState(""); const [art, setArt] = useState(); - const [isMasking, setMasking] = useState(false); - const [suggestMasking, setSuggestMasking] = useState(false); + const [isMasking, setMasking] = useState(true); const { formatMessage } = useIntl(); const { proxy } = useImgProxy(); const hasNip7 = "nostr" in window; @@ -88,14 +87,6 @@ export default function LoginPage() { proxy(ret.link).then(a => setArt({ ...ret, link: a })); }, []); - useEffect(() => { - if (key.startsWith("nsec") || key.match(MnemonicRegex)) { - setSuggestMasking(true); - } else { - setSuggestMasking(false); - } - }, [key]); - async function doLogin() { const insecureMsg = formatMessage({ defaultMessage: @@ -306,16 +297,6 @@ export default function LoginPage() { onClick={flipMask} />
-

- {suggestMasking && !isMasking && ( - - - - )} -

{error.length > 0 ? {error} : null}

Date: Mon, 10 Apr 2023 23:46:44 +0530 Subject: [PATCH 5/5] inline function --- packages/app/src/Pages/Login.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/app/src/Pages/Login.tsx b/packages/app/src/Pages/Login.tsx index a2a18da3..f842c840 100644 --- a/packages/app/src/Pages/Login.tsx +++ b/packages/app/src/Pages/Login.tsx @@ -265,10 +265,6 @@ export default function LoginPage() { ); } - const flipMask = function () { - setMasking(!isMasking); - }; - return (

@@ -294,7 +290,7 @@ export default function LoginPage() { name={isMasking ? "openeye" : "closedeye"} size={30} className="highlight btn-sm pointer" - onClick={flipMask} + onClick={() => setMasking(!isMasking)} />
{error.length > 0 ? {error} : null}