eye icon for privacy

packages/app/src/Icons/Icon.tsx

@@ -1,7 +1,10 @@
+import { MouseEventHandler } from "react";
+
 type Props = {
   name: string;
   size?: number;
   className?: string;
+  onClick?: MouseEventHandler<SVGSVGElement>;
 };
 
 const Icon = (props: Props) => {
@@ -9,7 +12,7 @@ const Icon = (props: Props) => {
   const href = "/icons.svg#" + props.name;
 
   return (
-    <svg width={size} height={size} className={props.className}>
+    <svg width={size} height={size} className={props.className} onClick={props.onClick}>
       <use href={href} />
     </svg>
   );

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;

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<ArtworkEntry>();
+  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 (
     <div className="login">
       <div>
@@ -279,17 +294,25 @@ export default function LoginPage() {
           <div className="flex">
             <input
               dir="auto"
-              type={key?.startsWith("nsec") ? "password" : "text"}
+              type={isMasking ? "password" : "text"}
               placeholder={formatMessage(messages.KeyPlaceholder)}
               className="f-grow"
               onChange={e => setKey(e.target.value)}
             />
+            <Icon
+              name={isMasking ? "openeye" : "closedeye"}
+              size={30}
+              className="highlight btn-sm pointer"
+              onClick={flipMask}
+            />
           </div>
           <p className="login-note">
-            {key?.startsWith("nsec") && (
+            {suggestMasking && !isMasking && (
               <span className="highlight">
-                We noticed that you are entering a secret key starting with nsec. We are masking your input to protect
-                your privacy.
+                <FormattedMessage
+                  defaultMessage="Please mask your input by clicking the eye icon to protect your privacy"
+                  description="Suggestion to mask input"
+                />
               </span>
             )}
           </p>