✨(mailboxes) add a button to reset password on enabled mailboxes

Domain admins can now send requests to reset password for any mailbox
on their domains.

src/frontend/apps/desk/src/features/mail-domains/mailboxes/api/useUpdateMailboxStatus.tsx

@@ -10,6 +10,45 @@ export interface DisableMailboxParams {
   isEnabled: boolean;
 }
 
+export interface ResetPasswordParams {
+  mailDomainSlug: string;
+  mailboxId: string;
+}
+
+export const resetPassword = async ({
+  mailDomainSlug,
+  mailboxId,
+}: ResetPasswordParams): Promise<void> => {
+  const response = await fetchAPI(
+    `mail-domains/${mailDomainSlug}/mailboxes/${mailboxId}/reset_password/`,
+    {
+      method: 'POST',
+    },
+  );
+
+  if (!response.ok) {
+    throw new APIError(
+      'Failed to reset mailbox password',
+      await errorCauses(response),
+    );
+  }
+};
+
+export const useResetPassword = () => {
+  const queryClient = useQueryClient();
+  return useMutation<void, APIError, ResetPasswordParams>({
+    mutationFn: resetPassword,
+    onSuccess: (_data, variables) => {
+      void queryClient.invalidateQueries({
+        queryKey: [
+          KEY_LIST_MAILBOX,
+          { mailDomainSlug: variables.mailDomainSlug },
+        ],
+      });
+    },
+  });
+};
+
 export const disableMailbox = async ({
   mailDomainSlug,
   mailboxId,

src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/panel/PanelActions.tsx

@@ -13,7 +13,10 @@ import { Box, DropButton, IconOptions, Text } from '@/components';
 import { MailDomain } from '@/features/mail-domains/domains';
 import { ViewMailbox } from '@/features/mail-domains/mailboxes';
 
-import { useUpdateMailboxStatus } from '../../api/useUpdateMailboxStatus';
+import {
+  useResetPassword,
+  useUpdateMailboxStatus,
+} from '../../api/useUpdateMailboxStatus';
 
 interface PanelActionsProps {
   mailbox: ViewMailbox;
@@ -28,6 +31,7 @@ export const PanelActions = ({ mailDomain, mailbox }: PanelActionsProps) => {
   const { toast } = useToastProvider();
 
   const { mutate: updateMailboxStatus } = useUpdateMailboxStatus();
+  const { mutate: resetPassword } = useResetPassword();
 
   const handleUpdateMailboxStatus = () => {
     disableModal.close();
@@ -44,6 +48,20 @@ export const PanelActions = ({ mailDomain, mailbox }: PanelActionsProps) => {
     );
   };
 
+  const handleResetMailboxPassword = () => {
+    resetPassword(
+      {
+        mailDomainSlug: mailDomain.slug,
+        mailboxId: mailbox.id,
+      },
+      {
+        onSuccess: () =>
+          toast(t('Successfully reset password.'), VariantType.SUCCESS),
+        onError: () => toast(t('Failed to reset password'), VariantType.ERROR),
+      },
+    );
+  };
+
   if (
     mailbox.status === 'pending' ||
     mailbox.status === 'failed' ||
@@ -87,6 +105,24 @@ export const PanelActions = ({ mailDomain, mailbox }: PanelActionsProps) => {
               {isEnabled ? t('Disable mailbox') : t('Enable mailbox')}
             </Text>
           </Button>
+          <Button
+            aria-label={t('Open the modal to update the role of this access')}
+            onClick={() => {
+              setIsDropOpen(false);
+              handleResetMailboxPassword();
+            }}
+            color="primary-text"
+            disabled={!isEnabled}
+            icon={
+              <span className="material-icons" aria-hidden="true">
+                {isEnabled ? 'lock_reset' : ' block'}
+              </span>
+            }
+          >
+            <Text $theme={isEnabled ? 'primary' : 'greyscale'}>
+              {isEnabled ? t('Reset password') : t('Reset password')}
+            </Text>
+          </Button>
         </Box>
       </DropButton>
       <Modal