Added change password section

apps/web/src/api/mutations/change-password.ts

@@ -0,0 +1,83 @@
+import { CONFIG, getAccountFullQueryOptions, Keys } from "@ecency/sdk";
+import { deriveHiveKeys, detectHiveKeyDerivation } from "@ecency/wallets";
+import { AuthorityType, PrivateKey } from "@hiveio/dhive";
+import { useMutation, UseMutationOptions, useQuery } from "@tanstack/react-query";
+import * as R from "remeda";
+
+interface Payload {
+  newKeys: Record<string, PrivateKey>;
+  currentPassword: string;
+}
+
+type ChangePasswordOptions = Pick<
+  UseMutationOptions<unknown, Error, Payload>,
+  "onSuccess" | "onError"
+>;
+
+export function useAccountChangePassword(username: string, options?: ChangePasswordOptions) {
+  const { data: accountData } = useQuery(getAccountFullQueryOptions(username));
+
+  return useMutation({
+    mutationKey: ["accounts", "revoke-key", accountData?.name],
+    mutationFn: async ({ currentPassword, newKeys }: Payload) => {
+      if (!accountData) {
+        throw new Error("[SDK][Update password] – cannot update keys for anon user");
+      }
+
+      const currentDerivation = await detectHiveKeyDerivation(username, currentPassword, "owner");
+
+      let currentKeys: Record<string, string> = {};
+      let currentKey: PrivateKey;
+
+      if (currentDerivation === "bip44") {
+        const keys = await deriveHiveKeys(currentPassword);
+        currentKeys = {
+          owner: keys.ownerPubkey,
+          active: keys.activePubkey,
+          posting: keys.postingPubkey,
+          memo: keys.memoPubkey
+        };
+        currentKey = PrivateKey.fromString(keys.owner);
+      } else if (currentDerivation === "master-password") {
+        currentKeys = {
+          owner: PrivateKey.fromLogin(username, currentPassword, "owner").createPublic().toString(),
+          active: PrivateKey.fromLogin(username, currentPassword, "active")
+            .createPublic()
+            .toString(),
+          posting: PrivateKey.fromLogin(username, currentPassword, "posting")
+            .createPublic()
+            .toString(),
+          memo: PrivateKey.fromLogin(username, currentPassword, "memo").createPublic().toString()
+        };
+        currentKey = PrivateKey.fromLogin(username, currentPassword, "owner");
+      } else {
+        currentKeys = {
+          owner: PrivateKey.fromString(currentPassword).createPublic().toString()
+        };
+        currentKey = PrivateKey.fromString(currentPassword);
+      }
+
+      const prepareAuth = (keyName: keyof Keys) => {
+        const auth: AuthorityType = R.clone(accountData[keyName]);
+
+        auth.key_auths.push([newKeys[keyName].createPublic().toString(), 1]);
+        auth.key_auths.filter(([key]) => currentKeys[keyName] === key);
+
+        return auth;
+      };
+
+      return CONFIG.hiveClient.broadcast.updateAccount(
+        {
+          account: accountData.name,
+          json_metadata: accountData.json_metadata,
+          owner: prepareAuth("owner"),
+          active: prepareAuth("active"),
+          posting: prepareAuth("posting"),
+          memo_key: accountData.memo_key
+        },
+        currentKey
+      );
+    },
+    ...options
+  });
+}

apps/web/src/api/mutations/index.ts

@@ -29,3 +29,4 @@ export * from "./subscribe-to-community";
 export * from "./hs-login-refresh";
 export * from "./create-community";
 export * from "./analytics";
+export * from "./change-password";

apps/web/src/app/(dynamicPages)/profile/[username]/permissions/_components/manage-keys-change-password.tsx

@@ -0,0 +1,86 @@
+import { useAccountChangePassword } from "@/api/mutations";
+import { useClientActiveUser } from "@/api/queries";
+import { error, success } from "@/features/shared";
+import { Button, KeyInput, KeyInputImperativeHandle } from "@/features/ui";
+import { WalletSeedPhrase } from "@/features/wallet";
+import { getAccountFullQueryOptions } from "@ecency/sdk";
+import { useHiveKeysQuery } from "@ecency/wallets";
+import { PrivateKey } from "@hiveio/dhive";
+import { useQuery } from "@tanstack/react-query";
+import i18next from "i18next";
+import { useCallback, useRef, useState } from "react";
+
+export function ManageKeyChangePassword() {
+  const activeUser = useClientActiveUser();
+
+  const keyInputRef = useRef<KeyInputImperativeHandle>(null);
+
+  const [showSeed, setShowSeed] = useState(false);
+  const [currentKey, setCurrentKey] = useState<PrivateKey>();
+  const [rawKey, setRawKey] = useState<string>();
+
+  const { data: accountOwnerPublicKeys } = useQuery({
+    ...getAccountFullQueryOptions(activeUser?.username!),
+    select: (resp) => resp.owner.key_auths as [string, number][]
+  });
+  const { data: keys } = useHiveKeysQuery(activeUser?.username!);
+
+  const { mutateAsync: changePassword } = useAccountChangePassword(activeUser?.username!);
+
+  const handleGenerateNewPassword = useCallback(async () => {
+    const { privateKey, raw } = await keyInputRef.current!.handleSign();
+    const publicKey = privateKey.createPublic().toString();
+
+    if (accountOwnerPublicKeys?.find(([key]) => key === publicKey)) {
+      setCurrentKey(privateKey);
+      setRawKey(raw);
+      setShowSeed(true);
+    } else {
+      error(i18next.t("permissions.change-password.invalid-key"));
+    }
+  }, [accountOwnerPublicKeys]);
+
+  const handleChangePassword = useCallback(async () => {
+    if (keys && currentKey) {
+      await changePassword({
+        newKeys: {
+          owner: PrivateKey.fromString(keys.owner),
+          active: PrivateKey.fromString(keys.active),
+          posting: PrivateKey.fromString(keys.posting),
+          memo_key: PrivateKey.fromString(keys.memo)
+        },
+        currentPassword: rawKey!
+      });
+
+      setShowSeed(false);
+      setCurrentKey(undefined);
+      success(i18next.t("permissions.change-password.success"));
+    }
+  }, [keys, currentKey, activeUser, rawKey]);
+
+  return (
+    <div className="w-full pt-4">
+      {!showSeed && (
+        <div className="flex flex-col items-start gap-4 w-full">
+          <KeyInput
+            keyType="owner"
+            placeholder="Current key"
+            className="w-full"
+            ref={keyInputRef}
+          />
+          <Button onClick={() => handleGenerateNewPassword()} size="sm">
+            {i18next.t("permissions.change-password.generate")}
+          </Button>
+        </div>
+      )}
+      {showSeed && (
+        <WalletSeedPhrase
+          size="sm"
+          showTitle={false}
+          username={activeUser?.username!}
+          onValidated={() => handleChangePassword()}
+        />
+      )}
+    </div>
+  );
+}

apps/web/src/app/(dynamicPages)/profile/[username]/permissions/_components/manage-keys.tsx

@@ -6,43 +6,81 @@ import { Button, Modal, ModalBody, ModalHeader } from "@/features/ui";
 import { useState } from "react";
 import { ManageKeysAddKeys } from "./manage-keys-add-keys";
 import { UilPlus } from "@tooni/iconscout-unicons-react";
+import clsx from "clsx";
+import { ManageKeyChangePassword } from "./manage-keys-change-password";
 
 export function ManageKeys() {
+  const [tab, setTab] = useState<"password" | "key">("password");
   const [showChangePassword, setShowChangePassword] = useState(false);
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 gap-2 lg:gap-4 rounded-xl p-4 bg-white/80 dark:bg-dark-200/90 text-gray-900 dark:text-white pb-4">
       <div className="md:col-span-2 flex justify-between gap-4">
         <div>
-          <div className="text-sm md:text-lg font-bold pb-1">
-            {i18next.t("permissions.keys.title")}
+          <div className="flex gap-1 mb-4">
+            <div
+              className={clsx(
+                "cursor-pointer text-sm font-semibold rounded-full px-2 py-1",
+                tab === "password" && "bg-gray-100 dark:bg-gray-100/10 "
+              )}
+              onClick={() => setTab("password")}
+            >
+              {i18next.t("permissions.change-password.title")}
+            </div>
+            <div
+              className={clsx(
+                "cursor-pointer text-sm font-semibold rounded-full px-2 py-1",
+                tab === "key" && "bg-gray-100 dark:bg-gray-100/10 "
+              )}
+              onClick={() => setTab("key")}
+            >
+              {i18next.t("permissions.keys.title")}
+            </div>
           </div>
-
-          <div className="text-sm opacity-75">{i18next.t("permissions.keys.hint")}</div>
+          <div
+            className="text-sm opacity-75"
+            dangerouslySetInnerHTML={{
+              __html:
+                tab === "password"
+                  ? i18next.t("permissions.change-password.hint")
+                  : i18next.t("permissions.keys.hint")
+            }}
+          />
         </div>
 
-        <Button
-          appearance="gray"
-          size="sm"
-          className="whitespace-nowrap"
-          icon={<UilPlus />}
-          onClick={() => setShowChangePassword(true)}
-        >
-          {i18next.t("permissions.keys.add-key")}
-        </Button>
+        {tab === "key" && (
+          <Button
+            appearance="gray"
+            size="sm"
+            className="whitespace-nowrap"
+            icon={<UilPlus />}
+            onClick={() => setShowChangePassword(true)}
+          >
+            {i18next.t("permissions.keys.add-key")}
+          </Button>
+        )}
       </div>
 
-      <ManageKey keyName="owner" />
-      <ManageKey keyName="active" />
-      <ManageKey keyName="posting" />
-      <ManageKey keyName="memo" />
+      {tab === "password" && <ManageKeyChangePassword />}
+      {tab === "key" && (
+        <>
+          <ManageKey keyName="owner" />
+          <ManageKey keyName="active" />
+          <ManageKey keyName="posting" />
+          <ManageKey keyName="memo" />
 
-      <Modal show={showChangePassword} onHide={() => setShowChangePassword(false)} centered={true}>
-        <ModalHeader closeButton={true}>{i18next.t("password-update.title")}</ModalHeader>
-        <ModalBody>
-          <ManageKeysAddKeys onSuccess={() => setShowChangePassword(false)} />
-        </ModalBody>
-      </Modal>
+          <Modal
+            show={showChangePassword}
+            onHide={() => setShowChangePassword(false)}
+            centered={true}
+          >
+            <ModalHeader closeButton={true}>{i18next.t("password-update.title")}</ModalHeader>
+            <ModalBody>
+              <ManageKeysAddKeys onSuccess={() => setShowChangePassword(false)} />
+            </ModalBody>
+          </Modal>
+        </>
+      )}
     </div>
   );
 }

apps/web/src/app/(dynamicPages)/profile/[username]/permissions/_components/profile-permissions.tsx

@@ -25,8 +25,8 @@ export function ProfilePermissions() {
   return (
     <div className="flex flex-col gap-4">
       <ManageAuthorities />
-      <ManageKeys />
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 items-start gap-4">
+        <ManageKeys />
         <AccountRecovery />
       </div>
     </div>

apps/web/src/features/i18n/locales/en-US.json

@@ -3084,8 +3084,15 @@
     "sessions": {
       "title": "Posting active sessions"
     },
+    "change-password": {
+      "title": "Change password",
+      "hint": "Update your password to enhance the security of your account. Note that new passwords must now be based on a seed phrase, as traditional raw passwords are no longer supported.<br> In case of changing current seed phrase You will lose access to all external tokens.",
+      "generate": "Generate new password",
+      "invalid-key": "Entered key is invalid. Account doesn't contain such owner key",
+      "success": "Password has changed successfully!"
+    },
     "keys": {
-      "title": "Keys & Passwords",
+      "title": "Keys",
       "hint": "A Hive account can hold multiple keys simultaneously, all of which are listed below",
       "add-key": "Add new keys",
       "key-created": "Keys have created and assigned successfully.",

apps/web/src/features/ui/input/key-input.tsx

@@ -33,17 +33,14 @@ export interface KeyInputImperativeHandle {
 }
 
 function capitalizeFirstLetter(str) {
-    if (typeof str !== 'string' || str.length === 0) return '';
-    return str[0].toUpperCase() + str.slice(1);
+  if (typeof str !== "string" || str.length === 0) return "";
+  return str[0].toUpperCase() + str.slice(1);
 }
 
 export const KeyInput = forwardRef<
   KeyInputImperativeHandle,
   Props & Omit<HTMLProps<HTMLInputElement>, "ref" | "type">
->((
-  { onSign, isLoading, keyType, className, ...inputProps },
-  ref
-) => {
+>(({ onSign, isLoading, keyType, className, ...inputProps }, ref) => {
   const inputRef = useRef<HTMLInputElement>(null);
 
   const { activeUser } = useActiveAccount();
@@ -65,28 +62,25 @@ export const KeyInput = forwardRef<
       }
 
       let privateKey: PrivateKey;
-
+      
       try {
         if (cryptoUtils.isWif(key)) {
           privateKey = PrivateKey.fromString(key);
         } else {
-          const derivation = await detectHiveKeyDerivation(
-            activeUser.username,
-            key,
-            keyType
-          );
-
+          const derivation = await detectHiveKeyDerivation(activeUser.username, key, keyType);
+
           if (derivation === "bip44") {
             const keys = deriveHiveKeys(key);
             const derivedKey = keyType === "active" ? keys.active : keys.owner;
             privateKey = PrivateKey.fromString(derivedKey);
           } else if (derivation === "master-password") {
             privateKey = PrivateKey.fromLogin(activeUser.username, key, keyType);
           } else {
-            privateKey = PrivateKey.from(key);
+              privateKey = PrivateKey.from(key);
           }
         }
-      } catch (err) {
+      }
+      catch (err) {
         const errorMessage = err instanceof Error && err.message.includes("base58")
           ? i18next.t("key-or-hot.invalid-key")
           : i18next.t("key-or-hot.key-error");

packages/sdk/src/modules/accounts/mutations/use-account-update-password.ts

@@ -13,15 +13,16 @@ interface Payload {
   keepCurrent?: boolean;
 }
 
-/**
- * Only native Hive and custom passwords could be updated here
- * Seed based password cannot be updated here, it will be in an account always for now
- */
 type UpdatePasswordOptions = Pick<
   UseMutationOptions<unknown, Error, Payload>,
   "onSuccess" | "onError"
 >;
 
+/**
+ * @deprecated
+ * Only native Hive and custom passwords could be updated here
+ * Seed based password cannot be updated here, it will be in an account always for now
+ */
 export function useAccountUpdatePassword(
   username: string,
   options?: UpdatePasswordOptions