v3: added password change/reset feature

src/pages/UserPublicProfile.tsx

@@ -52,6 +52,7 @@ import { ErrorCard } from "../components/ErrorCard.tsx";
 import { friendlyFetchError } from "../utils/apiError.ts";
 import { TextEditor } from "../components/TextEditor.tsx";
 import { Markdown } from "../components/Markdown.tsx";
+import { ChangePasswordModal } from "../components/ChangePasswordModal.tsx";
 
 function InviteButton() {
   const { authFetch } = useAuth();
@@ -284,6 +285,7 @@ export function UserPublicProfile() {
   const [tab, setTab] = useState<
     "dumps" | "playlists" | "followed" | "invitees" | "settings"
   >("dumps");
+  const [changePasswordOpen, setChangePasswordOpen] = useState(false);
   const [followedState, setFollowedState] = useState<FollowedState>(null);
   const [inviteTreeState, setInviteTreeState] = useState<InviteTreeState>(null);
 
@@ -1202,8 +1204,31 @@ export function UserPublicProfile() {
         </section>
       )}
 
+      {changePasswordOpen && (
+        <ChangePasswordModal onClose={() => setChangePasswordOpen(false)} />
+      )}
+
       {tab === "settings" && isOwnProfile && (
         <>
+          <section className="profile-section">
+            <h2 className="profile-section-title">
+              <Trans>Account</Trans>
+            </h2>
+            <div className="profile-appearance-grid">
+              <div className="profile-appearance-row">
+                <span className="profile-appearance-label">
+                  <Trans>Password</Trans>
+                </span>
+                <button
+                  type="button"
+                  className="btn btn--ghost"
+                  onClick={() => setChangePasswordOpen(true)}
+                >
+                  <Trans>Change password…</Trans>
+                </button>
+              </div>
+            </div>
+          </section>
           <section className="profile-section">
             <h2 className="profile-section-title">
               <Trans>Appearance</Trans>