feat: new login page

src/Pages/Login.tsx

@@ -1,13 +1,43 @@
-import { useEffect, useState } from "react";
+import "./Login.css";
+
+import { CSSProperties, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import * as secp from "@noble/secp256k1";
+import { FormattedMessage } from "react-intl";
 
 import { RootState } from "State/Store";
 import { setPrivateKey, setPublicKey, setRelays, setGeneratedPrivateKey } from "State/Login";
 import { DefaultRelays, EmailRegex } from "Const";
-import { bech32ToHex } from "Util";
+import { bech32ToHex, unwrap } from "Util";
 import { HexKey } from "Nostr";
+import ZapButton from "Element/ZapButton";
+import useImgProxy from "Feed/ImgProxy";
+
+interface ArtworkEntry {
+  name: string;
+  pubkey: HexKey;
+  link: string;
+}
+
+// todo: fill more
+const Artwork: Array<ArtworkEntry> = [
+  {
+    name: "",
+    pubkey: bech32ToHex("npub1r0rs5q2gk0e3dk3nlc7gnu378ec6cnlenqp8a3cjhyzu6f8k5sgs4sq9ac"),
+    link: "https://uploads-ssl.webflow.com/63c880de767a98b3372e30e7/63e18f17ca872f54623301c1_Pura%20Vida.png",
+  },
+  {
+    name: "",
+    pubkey: bech32ToHex("npub1r0rs5q2gk0e3dk3nlc7gnu378ec6cnlenqp8a3cjhyzu6f8k5sgs4sq9ac"),
+    link: "https://uploads-ssl.webflow.com/63c880de767a98b3372e30e7/63c9ee726ea27a41a123f43f_NostroshiSakamoto.png",
+  },
+  {
+    name: "",
+    pubkey: bech32ToHex("npub1r0rs5q2gk0e3dk3nlc7gnu378ec6cnlenqp8a3cjhyzu6f8k5sgs4sq9ac"),
+    link: "https://uploads-ssl.webflow.com/63c880de767a98b3372e30e7/63c9536909132a76054a4f70_In%20the%20Beginning.png",
+  },
+];
 
 export default function LoginPage() {
   const dispatch = useDispatch();
@@ -15,6 +45,8 @@ export default function LoginPage() {
   const publicKey = useSelector<RootState, HexKey | undefined>(s => s.login.publicKey);
   const [key, setKey] = useState("");
   const [error, setError] = useState("");
+  const [art, setArt] = useState<ArtworkEntry>();
+  const { proxy } = useImgProxy();
 
   useEffect(() => {
     if (publicKey) {
@@ -22,6 +54,11 @@ export default function LoginPage() {
     }
   }, [publicKey, navigate]);
 
+  useEffect(() => {
+    const ret = unwrap(Artwork.at(Artwork.length * Math.random()));
+    proxy(ret.link).then(a => setArt({ ...ret, link: a }));
+  }, []);
+
   async function getNip05PubKey(addr: string) {
     const [username, domain] = addr.split("@");
     const rsp = await fetch(`https://${domain}/.well-known/nostr.json?name=${encodeURIComponent(username)}`);
@@ -94,38 +131,88 @@ export default function LoginPage() {
     }
 
     return (
-      <>
-        <h2>Other Login Methods</h2>
-        <div className="flex">
-          <button type="button" onClick={doNip07Login}>
-            Login with Extension (NIP-07)
-          </button>
-        </div>
-      </>
+      <button type="button" onClick={doNip07Login}>
+        Login with Extension (NIP-07)
+      </button>
     );
   }
 
   return (
-    <div className="main-content">
-      <h1>Login</h1>
-      <div className="flex">
-        <input
-          type="text"
-          placeholder="nsec / npub / nip-05 / hex private key..."
-          className="f-grow"
-          onChange={e => setKey(e.target.value)}
-        />
+    <div className="login">
+      <div>
+        <div className="login-container">
+          <div className="logo" onClick={() => navigate("/")}>
+            Snort
+          </div>
+          <h1>
+            <FormattedMessage defaultMessage="Login" description="Login header" />
+          </h1>
+          <p>
+            <FormattedMessage defaultMessage="Your key" description="Label for key input" />
+          </p>
+          <div className="flex">
+            <input
+              type="text"
+              placeholder="nsec / npub / nip-05 / hex private key..."
+              className="f-grow"
+              onChange={e => setKey(e.target.value)}
+            />
+          </div>
+          {error.length > 0 ? <b className="error">{error}</b> : null}
+          <p className="login-note">
+            <FormattedMessage
+              defaultMessage="Only the secret key can be used to publish (sign events), everything else logs you in read-only mode."
+              description="Explanation for public key only login is read-only"
+            />
+          </p>
+          <a href="">
+            <FormattedMessage
+              defaultMessage="Why is there no password field?"
+              description="Link to why your private key is your password"
+            />
+          </a>
+          <div className="login-actions">
+            <button type="button" onClick={doLogin}>
+              <FormattedMessage defaultMessage="Login" description="Login button" />
+            </button>
+            {altLogins()}
+          </div>
+          <div className="flex login-or">
+            <div className="login-note">
+              <FormattedMessage defaultMessage="OR" description="Seperator text for Login / Generate Key" />
+            </div>
+            <div className="divider w-max"></div>
+          </div>
+          <h1>
+            <FormattedMessage defaultMessage="Create an Account" description="Heading for generate key flow" />
+          </h1>
+          <p className="login-note">
+            <FormattedMessage
+              defaultMessage="Generate a public / private key pair. Do not share your private key with anyone, this acts as your password. Once lost, it cannot be “reset” or recovered. Keep safe!"
+              description="Note about key security before generating a new key"
+            />
+          </p>
+          <div className="tabs">
+            <button type="button" onClick={() => makeRandomKey()}>
+              <FormattedMessage defaultMessage="Generate Key" description="Button: Generate a new key" />
+            </button>
+          </div>
+        </div>
       </div>
-      {error.length > 0 ? <b className="error">{error}</b> : null}
-      <div className="tabs">
-        <button type="button" onClick={doLogin}>
-          Login
-        </button>
-        <button type="button" onClick={() => makeRandomKey()}>
-          Generate Key
-        </button>
+      <div>
+        <div className="artwork" style={{ ["--img-src"]: `url('${art?.link}')` } as CSSProperties}>
+          <div>
+            <FormattedMessage
+              defaultMessage="Art by {name}"
+              description="Artwork attribution label"
+              values={{
+                name: "Karnage",
+              }}
+            />
+            <ZapButton pubkey={art?.pubkey ?? ""} />
+          </div>
+        </div>
       </div>
-      {altLogins()}
     </div>
   );
 }