feat: change password (#26)

src/app/(app)/(layout)/settings/page.tsx

@@ -0,0 +1,5 @@
+import { Settings } from '@/views/settings/Settings';
+
+export default function Page() {
+  return <Settings />;
+}

src/components/layout/AppLayout.tsx

@@ -5,6 +5,7 @@ import {
   Menu,
   MessageCircle,
   Settings,
+  Settings2,
   Vault,
 } from 'lucide-react';
 import Link from 'next/link';
@@ -79,6 +80,24 @@ export const AppLayout: FC<{ children: ReactNode }> = ({ children }) => {
             </Tooltip>
           </nav>
           <nav className="mt-auto grid gap-1 p-2">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="mt-auto rounded-lg"
+                  aria-label="Settings"
+                  asChild
+                >
+                  <Link href={ROUTES.settings}>
+                    <Settings2 className="size-5" />
+                  </Link>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="right" sideOffset={5}>
+                Settings
+              </TooltipContent>
+            </Tooltip>
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
@@ -135,6 +154,18 @@ export const AppLayout: FC<{ children: ReactNode }> = ({ children }) => {
                   </Link>
                 </nav>
                 <div className="mt-auto space-y-2">
+                  <Button
+                    asChild
+                    variant="outline"
+                    className="mt-auto w-full rounded-lg"
+                    aria-label="Settings"
+                    onClick={() => setMobileMenuOpen(false)}
+                  >
+                    <Link href={ROUTES.settings}>
+                      <Settings2 className="mr-2 h-5 w-5" />
+                      Settings
+                    </Link>
+                  </Button>
                   <Button
                     asChild
                     variant="outline"

src/components/ui/dialog.tsx

@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'fixed left-[50%] top-[50%] z-50 grid max-h-dvh w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
         className
       )}
       {...props}

src/graphql/mutations/changePassword.ts

@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client';
+
+export const ChangePassword = gql`
+  mutation ChangePassword($input: ChangePasswordInput!) {
+    password {
+      change(input: $input)
+    }
+  }
+`;

src/graphql/mutations/checkPassword.ts

@@ -1,7 +1,9 @@
 import { gql } from '@apollo/client';
 
-export const Login = gql`
+export const CheckPassword = gql`
   mutation CheckPassword($password: String!) {
-    checkPassword(password: $password)
+    password {
+      check(password: $password)
+    }
   }
 `;

src/graphql/types.ts

@@ -45,6 +45,13 @@ export type BroadcastLiquidTransactionInput = {
   wallet_account_id: Scalars['String']['input'];
 };
 
+export type ChangePasswordInput = {
+  current_master_password_hash: Scalars['String']['input'];
+  new_master_password_hash: Scalars['String']['input'];
+  new_password_hint?: InputMaybe<Scalars['String']['input']>;
+  new_protected_symmetric_key: Scalars['String']['input'];
+};
+
 export type ContactMessage = {
   __typename?: 'ContactMessage';
   contact_is_sender: Scalars['Boolean']['output'];
@@ -211,20 +218,16 @@ export type MoneyAddress = {
 
 export type Mutation = {
   __typename?: 'Mutation';
-  checkPassword: Scalars['Boolean']['output'];
   contacts: ContactMutations;
   login: NewAccount;
   logout: Scalars['Boolean']['output'];
+  password: PasswordMutations;
   pay: PayMutations;
   refreshToken: RefreshToken;
   signUp: NewAccount;
   wallets: WalletMutations;
 };
 
-export type MutationCheckPasswordArgs = {
-  password: Scalars['String']['input'];
-};
-
 export type MutationLoginArgs = {
   input: LoginInput;
 };
@@ -244,6 +247,20 @@ export type NewAccount = {
   refresh_token: Scalars['String']['output'];
 };
 
+export type PasswordMutations = {
+  __typename?: 'PasswordMutations';
+  change: Scalars['Boolean']['output'];
+  check: Scalars['Boolean']['output'];
+};
+
+export type PasswordMutationsChangeArgs = {
+  input: ChangePasswordInput;
+};
+
+export type PasswordMutationsCheckArgs = {
+  password: Scalars['String']['input'];
+};
+
 export type PayInput = {
   account_id?: InputMaybe<Scalars['String']['input']>;
   wallet_id?: InputMaybe<Scalars['String']['input']>;

src/utils/crypto.ts

@@ -146,3 +146,18 @@ export const decryptSymmetricKey = (keys: KeysType): string => {
     hexToBytes(keys.masterKey)
   );
 };
+
+export const changeProtectedSymmetricKey = ({
+  symmetricKey,
+  newMasterKey,
+}: {
+  symmetricKey: string;
+  newMasterKey: string;
+}) => {
+  const protectedSymmetricKey = nip44.v2.encrypt(
+    symmetricKey,
+    hexToBytes(newMasterKey)
+  );
+
+  return protectedSymmetricKey;
+};

src/utils/routes.ts

@@ -3,6 +3,7 @@ export const ROUTES = {
   signup: '/sign-up',
   login: '/login',
   dashboard: '/dashboard',
+  settings: '/settings',
   wallet: {
     home: '/wallet',
     settings: (id: string) => `/wallet/${id}/settings`,