fix(admin): admin can fail and fix decryption

Author: AlbanSdl

front/public/locales/fr/common.json.ts

@@ -53,5 +53,7 @@ export default {
   'admin.placeholder_debtor_addr_2': 'Adresse du débiteur (ligne 2)',
   'admin.placeholder_configure': 'Configurer',
   'admin.configure': "Editer la configuration de l'export",
+  'admin.error_decrypt':
+    "Impossible de déchiffrer les données. Vérifie la clé privée et télécharge l'original avant de fermer l'onglet si l'erreur ne disparait pas.",
   'legals.back': 'Retourner au site',
 } as const;

front/src/api/api.ts

@@ -34,6 +34,11 @@ type RawResponseType<T> = T extends Date
       }
     : T;
 
+type APIError = {
+  errorCode: number;
+  error: string;
+};
+
 /**
  * The response handler is a class that allows you to handle the response of a request to the API.
  * It allows you to define what to do when the request is successful, when it returns an error (an API error), when it fails (a request error), or when it returns a specific status code or specific failure.
@@ -62,7 +67,7 @@ export class ResponseHandler<T, R = undefined> {
   private readonly handlers: { [status: number]: (body: T) => R | void } & Partial<{
     [status in ResponseError | 'success' | 'error' | 'failure']: status extends 'success'
       ? (body: T) => R | void
-      : () => R | void;
+      : (...args: status extends 'error' ? [error: APIError] : []) => R | void;
   }> = {};
   private readonly promise: Promise<R | void>;
 
@@ -81,15 +86,19 @@ export class ResponseHandler<T, R = undefined> {
       if (response.code < 400) {
         return 'success' in this.handlers ? this.handlers.success!(response.body) : undefined;
       }
-      return 'error' in this.handlers ? this.handlers.error!() : undefined;
+      return 'error' in this.handlers ? this.handlers.error!(response.body as APIError) : undefined;
     });
   }
 
   on<E, P extends number | ResponseError | 'success' | 'error' | 'failure'>(
     statusCode: P,
-    handler: P extends number | 'success' ? (body: T) => E | void : () => E | void,
+    handler: P extends number | 'success'
+      ? (body: T) => E | void
+      : P extends 'error'
+        ? (error: APIError) => E | void
+        : () => E | void,
   ): ResponseHandler<T, R | E> {
-    this.handlers[statusCode] = handler as (body?: T) => R | void;
+    this.handlers[statusCode] = handler as (body?: T | APIError) => R | void;
     return this;
   }
 
@@ -179,7 +188,8 @@ async function internalRequestAPI<RequestType, ResponseType>(
     if (response.status === StatusCodes.NO_CONTENT) {
       return { code: response.status, body: null as ResponseType };
     }
-    if (isFile && method === 'GET') return { code: response.status, body: await response.text() };
+    if (isFile && method === 'GET' && response.status < StatusCodes.BAD_REQUEST)
+      return { code: response.status, body: await response.text() };
     if (!response.headers.get('content-type')?.includes('application/json')) return { error: ResponseError.not_json };
 
     try {

front/src/app/admin/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import styles from './style.module.scss';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useAppTranslation } from '@/lib/i18n';
 import { usePageSettings } from '@/module/pageSettings';
 import { useConnectedUser } from '@/module/user';
@@ -52,24 +52,6 @@ async function decryptData(data: string, pemEncodedKey: string): Promise<string>
   return String.fromCodePoint(...new Uint8Array(buffer));
 }
 
-async function downloadReport(api: API, privateKey: string) {
-  api.get<string>('/admin/report', { isFile: true }).on('success', async (xml) => {
-    let xmlString = xml;
-    const encrypted = xml.matchAll(/(?<=<(?<tag>[^<>]+?)>)[^<>]{100,}(?=<\/\k<tag>>)/g);
-    for (const data of encrypted) {
-      const realWorldData = await decryptData(data[0], privateKey);
-      xmlString = xmlString.replaceAll(data[0], realWorldData);
-    }
-    const blob = new Blob([xmlString], { type: 'application/xml' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `buckutt-report-${Date.now()}.xml`;
-    a.click();
-    URL.revokeObjectURL(url);
-  });
-}
-
 type ConfigurationStatus = {
   debtor_iban: boolean;
   debtor_bic: boolean;
@@ -96,7 +78,20 @@ export default function AdminPage() {
     debtor_iban: false,
     debtor_name: false,
   });
+  const [error, setError] = useState('');
   const [hasSettingsOpen, setSettingsOpen] = useState(false);
+  const downloadedData = useRef('');
+  const [downloadedDataLink, setDownloadedDataLink] = useState('');
+
+  useEffect(() => {
+    if (!downloadedData.current) setDownloadedDataLink('');
+    else {
+      const blob = new Blob([downloadedData.current], { type: 'application/xml' });
+      const url = URL.createObjectURL(blob);
+      setDownloadedDataLink(url);
+      return () => URL.revokeObjectURL(url);
+    }
+  }, [downloadedData.current]);
 
   useEffect(() => {
     api.get<ConfigurationStatus>('/admin/config').on('success', (data) => {
@@ -127,6 +122,40 @@ export default function AdminPage() {
     });
   };
 
+  const parseReport = async (xml: string, privateKey: string) => {
+    let xmlString = xml;
+    const encrypted = xml.matchAll(/(?<=<(?<tag>[^<>]+?)>)[^<>]{100,}(?=<\/\k<tag>>)/g);
+    try {
+      for (const data of encrypted) {
+        const realWorldData = await decryptData(data[0], privateKey);
+        xmlString = xmlString.replaceAll(data[0], realWorldData);
+      }
+    } catch {
+      downloadedData.current = xml;
+      setError(t('common:admin.error_decrypt'));
+      return;
+    }
+    setError('');
+    const blob = new Blob([xmlString], { type: 'application/xml' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `buckutt-report-${Date.now()}.xml`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const downloadReport = async (api: API, privateKey: string) => {
+    if (downloadedData.current) parseReport(downloadedData.current, privateKey);
+    else
+      api
+        .get<string>('/admin/report', { isFile: true })
+        .on('success', (xml) => parseReport(xml, privateKey))
+        .on('error', ({ error }) => {
+          setError(error);
+        });
+  };
+
   return (
     <AppModal>
       <div className={styles.title}>
@@ -136,6 +165,21 @@ export default function AdminPage() {
         </span>{' '}
         🐩
       </div>
+      {error ? (
+        <div className={styles.warn}>
+          {error === t('common:admin.error_decrypt')
+            ? [
+                error.slice(0, error.indexOf('.') + 2),
+                <a href={downloadedDataLink} download={`buckutt-raw-${Date.now()}.xml`} key="link">
+                  {error.slice(error.indexOf('.') + 2, error.indexOf('.', error.indexOf('.') + 1))}
+                </a>,
+                error.slice(error.indexOf('.', error.indexOf('.') + 1)),
+              ]
+            : error}
+        </div>
+      ) : (
+        <></>
+      )}
       {hasLoaded ? (
         hasSettingsOpen ? (
           <div className={styles.margin}>

front/src/app/admin/style.module.scss

@@ -42,3 +42,17 @@
     vertical-align: text-bottom;
   }
 }
+
+.warn {
+  display: block;
+  @include box-error;
+  padding: 0.5em;
+  border-radius: 5px;
+  border: 1px solid currentColor;
+  margin-top: 20px;
+
+  a {
+    text-decoration: none;
+    border-bottom: 1px solid currentColor;
+  }
+}