Merge pull request #499 from vivganes/patch-495

fix #495

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,7 @@ export default function LoginPage() {
   const [key, setKey] = useState("");
   const [error, setError] = useState("");
   const [art, setArt] = useState<ArtworkEntry>();
+  const [isMasking, setMasking] = useState(true);
   const { formatMessage } = useIntl();
   const { proxy } = useImgProxy();
   const hasNip7 = "nostr" in window;
@@ -279,11 +281,17 @@ export default function LoginPage() {
           <div className="flex">
             <input
               dir="auto"
-              type="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={() => setMasking(!isMasking)}
+            />
           </div>
           {error.length > 0 ? <b className="error">{error}</b> : null}
           <p className="login-note">