Cleanup

frontend/index.html

@@ -7,7 +7,7 @@
     <link rel="apple-touch-icon" href="/dsfr/favicon/apple-touch-icon.png?v=1.12.1" />
     <link rel="icon" href="/dsfr/favicon/favicon.svg?v=1.12.1" type="image/svg+xml" />
     <link rel="shortcut icon" href="/dsfr/favicon/favicon.ico?v=1.12.1" type="image/x-icon" />
-    <link rel="stylesheet" href="/dsfr/utility/icons/icons.min.css?hash=f2a5db63" />
+    <link rel="stylesheet" href="/dsfr/utility/icons/icons.min.css?hash=29be53c3" />
     <link rel="stylesheet" href="/dsfr/dsfr.min.css?v=1.12.1" />
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" />
 

frontend/src/components/FetchInterceptor/FetchInterceptor.tsx

@@ -1,9 +1,8 @@
 import fetchIntercept from 'fetch-intercept';
-import { useAppDispatch } from 'src/hooks/useStore';
-import { appLogout } from 'src/store/store';
+import { useLogoutMutation } from 'src/services/auth.service';
 
 const FetchInterceptor = () => {
-  const dispatch = useAppDispatch();
+  const [logout] = useLogoutMutation();
   return fetchIntercept.register({
     request: function (url, config) {
       return [url, config];
@@ -15,7 +14,10 @@ const FetchInterceptor = () => {
 
     response: function (response) {
       if (response.status === 401) {
-        appLogout()(dispatch);
+        (async () => {
+          const logoutRedirectUrl = await logout().unwrap();
+          window.location.href = logoutRedirectUrl.url;
+        })();
       }
       return response;
     },

frontend/src/components/Header/Header.tsx

@@ -5,13 +5,12 @@ import { useLocation } from 'react-router-dom';
 import { UserRoleLabels } from 'shared/schema/User/UserRole';
 import { isDefined } from 'shared/utils/utils';
 import { useAuthentication } from 'src/hooks/useAuthentication';
-import { useAppDispatch, useAppSelector } from 'src/hooks/useStore';
+import { useAppSelector } from 'src/hooks/useStore';
 import { useLogoutMutation } from 'src/services/auth.service';
 import { useFindProgrammingPlansQuery } from 'src/services/programming-plan.service';
 import logo from '../../assets/logo.svg';
 
 const Header = () => {
-  const dispatch = useAppDispatch();
   const location = useLocation();
 
   const { isAuthenticated, hasUserPermission, userInfos } = useAuthentication();
@@ -148,12 +147,8 @@ const Header = () => {
                 <Button
                   iconId="fr-icon-logout-box-r-line"
                   onClick={async () => {
-                    await logout()
-                      .unwrap()
-                      .then((logoutRedirectUrl) => {
-                        console.log('logoutRedirectUrl', logoutRedirectUrl);
-                        window.location.href = logoutRedirectUrl.url;
-                      });
+                    const logoutRedirectUrl = await logout().unwrap();
+                    window.location.href = logoutRedirectUrl.url;
                   }}
                 >
                   Se déconnecter

frontend/src/services/auth.service.ts

@@ -4,15 +4,6 @@ import { api } from 'src/services/api.service';
 
 export const authApi = api.injectEndpoints({
   endpoints: (builder) => ({
-    signIn: builder.mutation<AuthUser, { email: string; password: string }>({
-      query: ({ email, password }) => ({
-        url: 'auth/sign-in',
-        method: 'POST',
-        body: { email, password }
-      }),
-      transformResponse: (result: any) => AuthUser.parse(result),
-      invalidatesTags: ['AuthUser']
-    }),
     getAuthRedirectUrl: builder.query<AuthRedirectUrl, void>({
       query: () => 'auth/redirect-url',
       transformResponse: (result: any) => AuthRedirectUrl.parse(result)
@@ -38,7 +29,6 @@ export const authApi = api.injectEndpoints({
 });
 
 export const {
-  useSignInMutation,
   useGetAuthRedirectUrlQuery,
   useAuthenticateMutation,
   useLogoutMutation

frontend/src/views/HomeView/HomeView.scss

@@ -42,6 +42,10 @@ main:has(.teaser) {
 .sign-in {
   padding: 5rem 7.5rem;
 
+  .fr-connect-group {
+    text-align: center;
+  }
+
   @media (max-width: $breakpoint-md) {
     padding: 2rem 1rem;
   }

frontend/src/views/HomeView/HomeView.tsx

@@ -1,119 +1,41 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
-import Alert from '@codegouvfr/react-dsfr/Alert';
-import Button from '@codegouvfr/react-dsfr/Button';
 import { cx } from '@codegouvfr/react-dsfr/fr/cx';
 import ProConnectButton from '@codegouvfr/react-dsfr/ProConnectButton';
 import clsx from 'clsx';
-import { SignIn } from 'shared/schema/SignIn';
-import AppTextInput from 'src/components/_app/AppTextInput/AppTextInput';
 import { useDocumentTitle } from 'src/hooks/useDocumentTitle';
-import { useForm } from 'src/hooks/useForm';
-import { useAppDispatch } from 'src/hooks/useStore';
-import {
-  useGetAuthRedirectUrlQuery,
-  useSignInMutation
-} from 'src/services/auth.service';
-import authSlice from 'src/store/reducers/authSlice';
+import { useGetAuthRedirectUrlQuery } from 'src/services/auth.service';
 import farmhand from '../../assets/farmland.webp';
 import foodGreen from '../../assets/illustrations/food-green.svg';
 import './HomeView.scss';
 
 const HomeView = () => {
   useDocumentTitle('Connexion');
-  const dispatch = useAppDispatch();
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [signInError, setSignInError] = useState(false);
-
-  const [signIn] = useSignInMutation();
   const { data: authRedirectUrl } = useGetAuthRedirectUrlQuery();
 
   useEffect(() => {
     if (authRedirectUrl) {
-      sessionStorage.setItem('nonce', authRedirectUrl.nonce);
-      sessionStorage.setItem('state', authRedirectUrl.state);
+      if (authRedirectUrl.nonce) {
+        sessionStorage.setItem('nonce', authRedirectUrl.nonce);
+      }
+      if (authRedirectUrl.state) {
+        sessionStorage.setItem('state', authRedirectUrl.state);
+      }
     }
   }, [authRedirectUrl]);
 
-  const form = useForm(SignIn, {
-    email,
-    password
-  });
-
-  type SignInShape = typeof SignIn.shape;
-
-  const submit = async (e: React.MouseEvent<HTMLElement>) => {
-    e.preventDefault();
-
-    await form.validate(async () => {
-      signIn({
-        email,
-        password
-      })
-        .unwrap()
-        .then((authUser) => {
-          dispatch(authSlice.actions.signinUser({ authUser }));
-        })
-        .catch(() => {
-          setSignInError(true);
-        });
-    });
-  };
-
   return (
     <section
       className={clsx(
         cx('fr-grid-row', 'fr-grid-row--gutters'),
-        'home-section'
+        'home-section',
+        'd-flex-align-center'
       )}
     >
       <div className={cx('fr-col-12', 'fr-col-md-6')}>
         <div className={clsx('sign-in')}>
           <h2>Identifiez-vous pour accéder à votre espace maestro</h2>
           {authRedirectUrl && <ProConnectButton url={authRedirectUrl.url} />}
-
-          <form id="login_form">
-            <AppTextInput<SignInShape>
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              inputForm={form}
-              inputKey="email"
-              whenValid="E-mail correctement renseigné."
-              data-testid="email-input"
-              label="E-mail"
-              required
-            />
-            <AppTextInput<SignInShape>
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              inputForm={form}
-              inputKey="password"
-              whenValid="Mot de passe correctement renseigné."
-              data-testid="password-input"
-              label="Mot de passe"
-              required
-            />
-            {signInError && (
-              <div data-testid="alert-error" className="fr-my-2w">
-                <Alert
-                  title="Erreur"
-                  description="Echec de la connexion"
-                  severity="error"
-                />
-              </div>
-            )}
-            <Button
-              data-testid="login-button"
-              onClick={submit}
-              iconId="fr-icon-arrow-right-line"
-              iconPosition="right"
-            >
-              Se connecter
-            </Button>
-          </form>
         </div>
       </div>
       <div className={cx('fr-col-12', 'fr-col-md-6')}>

frontend/src/views/LoginCallbackView/LoginCallbackView.tsx

@@ -1,29 +1,92 @@
-import { useEffect } from 'react';
+import Alert from '@codegouvfr/react-dsfr/Alert';
+import Button from '@codegouvfr/react-dsfr/Button';
+import { cx } from '@codegouvfr/react-dsfr/fr/cx';
+import clsx from 'clsx';
+import { useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAppDispatch } from 'src/hooks/useStore';
 import { useAuthenticateMutation } from 'src/services/auth.service';
 import authSlice from 'src/store/reducers/authSlice';
 
 export const LoginCallbackView = () => {
   const dispatch = useAppDispatch();
-  const [authenticate] = useAuthenticateMutation();
+  const [authenticate, { isLoading, isSuccess, isError, data: authUser }] =
+    useAuthenticateMutation();
   const navigate = useNavigate();
 
+  const hasAuthenticatedRef = useRef(false);
+
+  useEffect(() => {
+    if (hasAuthenticatedRef.current) {
+      return;
+    }
+    hasAuthenticatedRef.current = true;
+
+    authenticate({
+      url: window.location.href,
+      nonce: sessionStorage.getItem('nonce'),
+      state: sessionStorage.getItem('state')
+    });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   useEffect(() => {
-    (() =>
-      authenticate({
-        url: window.location.href,
-        nonce: sessionStorage.getItem('nonce') || '',
-        state: sessionStorage.getItem('state') || ''
-      })
-        .unwrap()
-        .then((authUser) => {
-          dispatch(authSlice.actions.signinUser({ authUser }));
-          navigate('/');
-        }))();
-  }, [window.location.href]); // eslint-disable-line react-hooks/exhaustive-deps
+    if (isSuccess && authUser) {
+      dispatch(authSlice.actions.signinUser({ authUser }));
+      navigate('/');
+    }
+  }, [
+    isSuccess,
+    authUser
+  ]) /* eslint-disable-line react-hooks/exhaustive-deps */;
 
-  return <div>Connexion ... Merci de patienter....</div>;
+  return (
+    <section className={clsx(cx('fr-container-sm'), 'main-section')}>
+      {isLoading && (
+        <Alert
+          severity="info"
+          title="Connexion en cours"
+          description={
+            <>
+              <div className={cx('fr-pt-1w', 'fr-pb-3w')}>
+                Merci de patienter...
+              </div>
+              <Button
+                linkProps={{
+                  to: '/'
+                }}
+                priority="tertiary no outline"
+                className={clsx(cx('fr-link'), 'link-underline')}
+              >
+                Retour à l'accueil
+              </Button>
+            </>
+          }
+        ></Alert>
+      )}
+      {isError && (
+        <Alert
+          severity="error"
+          title="Erreur de connexion"
+          description={
+            <>
+              <div className={cx('fr-pt-1w', 'fr-pb-3w')}>
+                Une erreur est survenue lors de la connexion.
+              </div>
+              <Button
+                linkProps={{
+                  to: '/'
+                }}
+                priority="tertiary no outline"
+                className={clsx(cx('fr-link'), 'link-underline')}
+              >
+                Retour à l'accueil
+              </Button>
+            </>
+          }
+        ></Alert>
+      )}
+    </section>
+  );
 };
 
 export default LoginCallbackView;

frontend/src/views/LogoutCallbackView/LogoutCallbackView.tsx

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAppDispatch } from 'src/hooks/useStore';
 import { appLogout } from 'src/store/store';
+import HomeView from 'src/views/HomeView/HomeView';
 
 export const LogoutCallbackView = () => {
   const dispatch = useAppDispatch();
@@ -12,9 +13,9 @@ export const LogoutCallbackView = () => {
       await appLogout()(dispatch);
       navigate('/');
     })();
-  }, [window.location.href]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  return <div>Déconnexion ... Merci de patienter....</div>;
+  return <HomeView></HomeView>;
 };
 
 export default LogoutCallbackView;