🩹(frontend) fine tuning 2.3.0

- improve medium button style when 2 lines
- improve design on Firefox input title
- manage title modal without doc title
- improve redirect when 401

Author: AntoLC

src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts

@@ -99,9 +99,7 @@ test.describe('Doc Header', () => {
     ).toBeVisible();
 
     await expect(
-      page.getByText(
-        `Are you sure you want to delete the document "${randomDoc}"?`,
-      ),
+      page.getByText(`Are you sure you want to delete this document ?`),
     ).toBeVisible();
 
     await page

src/frontend/apps/impress/src/cunningham/cunningham-style.css

@@ -365,7 +365,8 @@ input:-webkit-autofill:focus {
 }
 
 .c__button--medium {
-  padding: 0.9rem var(--c--theme--spacings--s);
+  height: auto;
+  min-height: var(--c--components--button--medium-height);
 }
 
 .c__button--small {
@@ -551,6 +552,8 @@ input:-webkit-autofill:focus {
 
 .c__modal__close .c__button {
   padding: 0 !important;
+  top: -0.65rem;
+  right: -0.65rem;
 }
 
 .c__modal--full .c__modal__content {

src/frontend/apps/impress/src/features/auth/components/Auth.tsx

@@ -5,6 +5,7 @@ import { PropsWithChildren } from 'react';
 import { Box } from '@/components';
 
 import { useAuth } from '../hooks';
+import { getAuthUrl } from '../utils';
 
 export const Auth = ({ children }: PropsWithChildren) => {
   const { isLoading, pathAllowed, isFetchedAfterMount, authenticated } =
@@ -19,6 +20,22 @@ export const Auth = ({ children }: PropsWithChildren) => {
     );
   }
 
+  /**
+   * If the user is authenticated and wanted initially to access a document,
+   * we redirect to the document page.
+   */
+  if (authenticated) {
+    const authUrl = getAuthUrl();
+    if (authUrl) {
+      void replace(authUrl);
+      return (
+        <Box $height="100vh" $width="100vw" $align="center" $justify="center">
+          <Loader />
+        </Box>
+      );
+    }
+  }
+
   /**
    * If the user is not authenticated and the path is not allowed, we redirect to the login page.
    */

src/frontend/apps/impress/src/features/auth/hooks/useAuth.tsx

@@ -2,13 +2,12 @@ import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
 import { useAuthQuery } from '../api';
-import { getAuthUrl } from '../utils';
 
 const regexpUrlsAuth = [/\/docs\/$/g, /\/docs$/g, /^\/$/g];
 
 export const useAuth = () => {
   const { data: user, ...authStates } = useAuthQuery();
-  const { pathname, replace } = useRouter();
+  const { pathname } = useRouter();
 
   const [pathAllowed, setPathAllowed] = useState<boolean>(
     !regexpUrlsAuth.some((regexp) => !!pathname.match(regexp)),
@@ -18,18 +17,6 @@ export const useAuth = () => {
     setPathAllowed(!regexpUrlsAuth.some((regexp) => !!pathname.match(regexp)));
   }, [pathname]);
 
-  // Redirect to the path before login
-  useEffect(() => {
-    if (!user) {
-      return;
-    }
-
-    const authUrl = getAuthUrl();
-    if (authUrl) {
-      void replace(authUrl);
-    }
-  }, [user, replace]);
-
   return {
     user,
     authenticated: !!user && authStates.isSuccess,

src/frontend/apps/impress/src/features/auth/index.ts

@@ -1,4 +1,4 @@
-export * from './api/types';
+export * from './api';
 export * from './components';
 export * from './hooks';
 export * from './utils';

src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx

@@ -116,6 +116,8 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
           handleTitleSubmit(event.target.textContent || '')
         }
         $color={colorsTokens()['greyscale-1000']}
+        $minHeight="40px"
+        $padding={{ right: 'big' }}
         $css={css`
           &[contenteditable='true']:empty:not(:focus):before {
             content: '${untitledDocument}';

src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx

@@ -87,9 +87,7 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
       <Box aria-label={t('Content modal to delete document')}>
         {!isError && (
           <Text $size="sm" $variation="600">
-            {t('Are you sure you want to delete the document "{{title}}"?', {
-              title: doc.title,
-            })}
+            {t('Are you sure you want to delete this document ?')}
           </Text>
         )}
 

src/frontend/apps/impress/src/pages/docs/[id]/index.tsx

@@ -5,7 +5,7 @@ import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
 import { Box, Text, TextErrors } from '@/components';
-import { setAuthUrl } from '@/features/auth';
+import { KEY_AUTH, setAuthUrl } from '@/features/auth';
 import { DocEditor } from '@/features/docs/doc-editor';
 import {
   Doc,
@@ -110,6 +110,9 @@ const DocPage = ({ id }: DocProps) => {
     }
 
     if (error.status === 401) {
+      void queryClient.resetQueries({
+        queryKey: [KEY_AUTH],
+      });
       setAuthUrl();
       void replace(`/401`);
       return null;