Preferences page

packages/app/src/Pages/settings/Profile.tsx

@@ -13,10 +13,8 @@ import useFileUpload from "Upload";
 import AsyncButton from "Element/AsyncButton";
 import { UserCache } from "Cache";
 import useLogin from "Hooks/useLogin";
-import AvatarEditor from "Element/AvatarEditor";
 import Icon from "Icons/Icon";
-
-import messages from "./messages";
+import Avatar from "Element/Avatar";
 
 export interface ProfileSettingsProps {
   avatar?: boolean;
@@ -31,7 +29,6 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
   const uploader = useFileUpload();
 
   const [name, setName] = useState<string>();
-  const [displayName, setDisplayName] = useState<string>();
   const [picture, setPicture] = useState<string>();
   const [banner, setBanner] = useState<string>();
   const [about, setAbout] = useState<string>();
@@ -39,12 +36,9 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
   const [nip05, setNip05] = useState<string>();
   const [lud16, setLud16] = useState<string>();
 
-  const avatarPicture = (picture?.length ?? 0) === 0 ? Nostrich : picture;
-
   useEffect(() => {
     if (user) {
       setName(user.name);
-      setDisplayName(user.display_name);
       setPicture(user.picture);
       setBanner(user.banner);
       setAbout(user.about);
@@ -59,7 +53,6 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
     const userCopy = {
       ...user,
       name,
-      display_name: displayName,
       about,
       picture,
       banner,
@@ -107,69 +100,62 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
     }
   }
 
+  async function setNewAvatar() {
+    const rsp = await uploadFile();
+    if (rsp) {
+      setPicture(rsp);
+    }
+  }
+
   function editor() {
     return (
-      <div className="editor form">
-        <div className="form-group card">
-          <div>
-            <FormattedMessage {...messages.Name} />:
-          </div>
-          <div>
-            <input type="text" value={name} onChange={e => setName(e.target.value)} />
+      <div className="flex f-col g24">
+        <div className="flex f-col w-max g8">
+          <h4>
+            <FormattedMessage defaultMessage="Name" />
+          </h4>
+          <input className="w-max" type="text" value={name} onChange={e => setName(e.target.value)} />
+        </div>
+        <div className="flex f-col w-max g8">
+          <h4>
+            <FormattedMessage defaultMessage="About" />
+          </h4>
+          <textarea className="w-max" onChange={e => setAbout(e.target.value)} value={about}></textarea>
+        </div>
+        <div className="flex f-col w-max g8">
+          <h4>
+            <FormattedMessage defaultMessage="Website" />
+          </h4>
+          <input className="w-max" type="text" value={website} onChange={e => setWebsite(e.target.value)} />
+        </div>
+        <div className="flex f-col w-max g8">
+          <h4>
+            <FormattedMessage defaultMessage="Nostr Address" />
+          </h4>
+          <div className="flex f-col g8 w-max">
+            <input type="text" className="w-max" value={nip05} onChange={e => setNip05(e.target.value)} />
+            <small>
+              <FormattedMessage defaultMessage="Usernames are not unique on Nostr. The nostr address is your unique human-readable address that is unique to you upon registration." />
+            </small>
+            <div className="flex g12">
+              <button className="flex f-center" type="button" onClick={() => navigate("/nostr-address")}>
+                <FormattedMessage defaultMessage="Buy nostr address" />
+              </button>
+              <button className="flex f-center secondary" type="button" onClick={() => navigate("/nostr-address")}>
+                <FormattedMessage defaultMessage="Get a free one" />
+              </button>
+            </div>
           </div>
         </div>
-        <div className="form-group card">
-          <div>
-            <FormattedMessage {...messages.DisplayName} />:
-          </div>
-          <div>
-            <input type="text" value={displayName} onChange={e => setDisplayName(e.target.value)} />
-          </div>
-        </div>
-        <div className="form-group card">
-          <div>
-            <FormattedMessage {...messages.About} />:
-          </div>
-          <div className="w-max">
-            <textarea className="w-max" onChange={e => setAbout(e.target.value)} value={about}></textarea>
-          </div>
-        </div>
-        <div className="form-group card">
-          <div>
-            <FormattedMessage {...messages.Website} />:
-          </div>
-          <div>
-            <input type="text" value={website} onChange={e => setWebsite(e.target.value)} />
-          </div>
-        </div>
-        <div className="form-group card">
-          <div>
-            <FormattedMessage {...messages.Nip05} />:
-          </div>
-          <div>
-            <input type="text" className="mr10" value={nip05} onChange={e => setNip05(e.target.value)} />
-            <button type="button" onClick={() => navigate("/verification")}>
-              <Icon name="shopping-bag" />
-              &nbsp; <FormattedMessage {...messages.Buy} />
-            </button>
-          </div>
-        </div>
-        <div className="form-group card">
-          <div>
-            <FormattedMessage {...messages.LnAddress} />:
-          </div>
-          <div>
-            <input type="text" value={lud16} onChange={e => setLud16(e.target.value)} />
-          </div>
-        </div>
-        <div className="form-group card">
-          <div></div>
-          <div>
-            <AsyncButton onClick={() => saveProfile()}>
-              <FormattedMessage {...messages.Save} />
-            </AsyncButton>
-          </div>
+        <div className="flex f-col w-max g8">
+          <h4>
+            <FormattedMessage defaultMessage="Lightning Address" />
+          </h4>
+          <input className="w-max" type="text" value={lud16} onChange={e => setLud16(e.target.value)} />
         </div>
+        <AsyncButton onClick={() => saveProfile()}>
+          <FormattedMessage defaultMessage="Save" />
+        </AsyncButton>
       </div>
     );
   }
@@ -179,28 +165,23 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
     return (
       <>
         <div className="flex f-center image-settings">
-          {(props.avatar ?? true) && (
-            <div className="image-setting card">
-              <div>
-                <FormattedMessage {...messages.Avatar} />:
-              </div>
-              <AvatarEditor picture={avatarPicture} onPictureChange={p => setPicture(p)} />
+          {(props.banner ?? true) && (
+            <div
+              style={{
+                backgroundImage: `url(${(banner?.length ?? 0) === 0 ? Nostrich : banner})`,
+              }}
+              className="banner">
+              <AsyncButton type="button" onClick={() => setNewBanner()}>
+                <FormattedMessage defaultMessage="Upload" />
+              </AsyncButton>
             </div>
           )}
-          {(props.banner ?? true) && (
-            <div className="image-setting card">
-              <div>
-                <FormattedMessage {...messages.Banner} />:
-              </div>
-              <div
-                style={{
-                  backgroundImage: `url(${(banner?.length ?? 0) === 0 ? Nostrich : banner})`,
-                }}
-                className="banner">
-                <div className="edit" onClick={() => setNewBanner()}>
-                  <FormattedMessage {...messages.Edit} />
-                </div>
-              </div>
+          {(props.avatar ?? true) && (
+            <div className="avatar-stack">
+              <Avatar user={user} image={picture} />
+              <AsyncButton type="button" className="btn-rnd" onClick={() => setNewAvatar()}>
+                <Icon name="upload-01" />
+              </AsyncButton>
             </div>
           )}
         </div>
@@ -209,12 +190,5 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
     );
   }
 
-  return (
-    <div className="settings">
-      <h3>
-        <FormattedMessage {...messages.EditProfile} />
-      </h3>
-      {settings()}
-    </div>
-  );
+  return <div className="settings">{settings()}</div>;
 }