Merge pull request #499 from vivganes/patch-495

fix #495

packages/app/public/icons.svg

@@ -354,5 +354,27 @@
         stroke-linejoin="round"
       />
     </symbol>
+    <symbol id="openeye" viewBox="0 0 24 24" fill="none">
+      <path d="M1.42012 8.71318C1.28394 8.49754 1.21584 8.38972 1.17772 8.22342C1.14909 8.0985 1.14909 7.9015 1.17772 7.77658C1.21584 7.61028 1.28394 7.50246 1.42012 7.28682C2.54553 5.50484 5.8954 1 11.0004 1C16.1054 1 19.4553 5.50484 20.5807 7.28682C20.7169 7.50246 20.785 7.61028 20.8231 7.77658C20.8517 7.9015 20.8517 8.0985 20.8231 8.22342C20.785 8.38972 20.7169 8.49754 20.5807 8.71318C19.4553 10.4952 16.1054 15 11.0004 15C5.8954 15 2.54553 10.4952 1.42012 8.71318Z" 
+        stroke="currentColor" 
+        stroke-width="2" 
+        stroke-linecap="round" 
+        stroke-linejoin="round"
+      />
+      <path d="M11.0004 11C12.6573 11 14.0004 9.65685 14.0004 8C14.0004 6.34315 12.6573 5 11.0004 5C9.34355 5 8.0004 6.34315 8.0004 8C8.0004 9.65685 9.34355 11 11.0004 11Z" 
+        stroke="currentColor" 
+        stroke-width="2" 
+        stroke-linecap="round" 
+        stroke-linejoin="round"
+      />
+    </symbol>
+    <symbol id="closedeye" viewBox="0 0 24 24" fill="none">
+      <path d="M9.74294 3.09232C10.1494 3.03223 10.5686 3 11.0004 3C16.1054 3 19.4553 7.50484 20.5807 9.28682C20.7169 9.5025 20.785 9.61034 20.8231 9.77667C20.8518 9.90159 20.8517 10.0987 20.8231 10.2236C20.7849 10.3899 20.7164 10.4985 20.5792 10.7156C20.2793 11.1901 19.8222 11.8571 19.2165 12.5805M5.72432 4.71504C3.56225 6.1817 2.09445 8.21938 1.42111 9.28528C1.28428 9.50187 1.21587 9.61016 1.17774 9.77648C1.1491 9.9014 1.14909 10.0984 1.17771 10.2234C1.21583 10.3897 1.28393 10.4975 1.42013 10.7132C2.54554 12.4952 5.89541 17 11.0004 17C13.0588 17 14.8319 16.2676 16.2888 15.2766M2.00042 1L20.0004 19M8.8791 7.87868C8.3362 8.42157 8.00042 9.17157 8.00042 10C8.00042 11.6569 9.34356 13 11.0004 13C11.8288 13 12.5788 12.6642 13.1217 12.1213" 
+      stroke="currentColor" 
+      stroke-width="2" 
+      stroke-linecap="round" 
+      stroke-linejoin="round"
+    />
+    </symbol>
   </defs>
 </svg>

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">